React Native @ Airbnb FELIPE LIMA & LELAND RICHARDSON 

Why React Native? 

We build Airbnb 3 times 

We build Airbnb 3 times 

JavaScript Core VM Native UI Platform 

No content

Developer Experience 

User Experience Developer Experience 

User Experience Developer Experience Web Native Mobile React Native Developer Experience User Experience Web Native RN 

Live Reload 

No content

Code Push 

Code Push - OTA updates - Hot Fixes - Experimentation - Continuous Deployment 

No content

Type Safety 

Performance 

Misconceptions 

Does the JS compile to native code? No. 

Does the JS runs in a web view? No. 

What if I want to use the platform’s latest API’s? Use them! 

How does it work? 

Bridge JavaScript Core VM Native UI Platform Layout Rendering Gestures Application Logic UI Description 

Shadow JSC Main Gesture / Interaction 

Shadow JSC Main Gesture / Interaction React Render 

Shadow JSC Main Gesture / Interaction React Render Diff 

Shadow JSC Main Gesture / Interaction React Render Layout Diff 

Shadow JSC Main Gesture / Interaction React Render Layout Render Diff 

Shadow JSC Main Gesture / Interaction React Render Layout Render Diff 16 ms 

React 

UI = f(state) 

import React from 'react'; class HelloWorld extends React.Component { render() { return ( ); } } 

import React from 'react'; import { View, Text } from 'react-native'; class HelloWorld extends React.Component { render() { return ( Hello World ); } } 

import { View, Text, Image, ScrollView, TextInput, ListView, MapView, ... } from 'react-native'; 

import React from 'react'; import { View, Text } from 'react-native'; class HelloWorld extends React.Component { render() { return ( Hello World ); } } 

import React from 'react'; import { View, Text } from 'react-native'; class HelloWorld extends React.Component { render() { return { type: View, props: null, children: [{ type: Text, props: null, children: ['Hello World'], }], }; } } 

import React from 'react'; import { View, Text } from 'react-native'; class HelloWorld extends React.Component { render() { return ( Hello World ); } } 

import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; class HelloWorld extends React.Component { render() { return ( Hello World ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, message: { fontSize: 28, fontColor: '#222222', }, }); 

const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, message: { fontSize: 28, fontColor: '#222222', }, }); { container: { top: 0, left: 0, width: 370, height: 600, }, message: { top: 280, left: 125, width: 120, height: 40, }, } 

import React from 'react'; import { View, Text } from 'react-native'; class HelloWorld extends React.Component { render() { return ( Hello World ); } } 

import React from 'react'; import { View, Text } from 'react-native'; class HelloUser extends React.Component { render() { return ( Hello, {this.props.name} ); } } 

import React from 'react'; import { View } from 'react-native'; import HelloUser from './HelloUser'; class HelloApp extends React.Component { render() { const { user } = this.props; return ( ); } } 

Native Modules 

class AccountModule extends ReactContextBaseJavaModule {
 AccountModule(ReactApplicationContext reactContext) {
 super(reactContext);
 }
 
 @Override
 public String getName() {
 return "AccountBridge";
 }
 
 @Override
 public Map getConstants() {
 return Collections.emptyMap();
 } @ReactMethod
 public void setUserLocation(String location) {
 currentUser.setLocation(location);
 }
 
 @Subscribe
 public void loginStatusChanged(AuthStateEvent lse) {
 ReactApplicationContext context = getReactApplicationContext();
 context.getJSModule(RCTDeviceEventEmitter.class)
 .emit("airbnb.accountUpdated", toWritableMap(getData()));
 }
 } 

class ReactAirImageManager extends SimpleViewManager {
 @Override
 public String getName() {
 return "RCTImageView";
 }
 
 @Override
 protected ReactAirImageView createViewInstance(ThemedReactContext context) {
 return new ReactAirImageView(context, null);
 }
 
 @ReactProp(name = "src")
 public void setSource(ReactAirImageView view, @Nullable ReadableArray sources) {
 view.setSource(sources);
 }
 
 @ReactProp(name = "borderColor", defaultInt = Color.TRANSPARENT, customType = "Color")
 public void setBorderColor(ReactAirImageView view, int borderColor) {
 view.setBorderColor(Color.RED);
 } } 

I’ll believe it when I see it… 

Thank You Leland Richardson @intelligibabble Felipe Lima @felipecsl 

No content