This document introduces React Native, which allows developers to build native mobile apps for iOS and Android from JavaScript. React Native uses React to construct mobile user interfaces and allows sharing of code across platforms. It renders native UI components rather than webviews, supports flexbox layout, and exposes platform APIs. Developers can build full-stack universal apps that share code between web and mobile using React Native and tools like Redux. It provides benefits like hot reloading, native performance, and the ability to add it incrementally to existing apps.

1. REACT NATIVE FOR REACT
DEVELOPERS
Barak Cohen, Wondermall

3. FRONT-END IS BROKEN
• Build the same app 3-6 times: iOS (Phone/Tablet),
Android (Phone/Tablet), Web (Desktop/Phone)
• Different teams build the same thing using 3
different languages, frameworks & libraries.
• Hard to maintain feature parity & consistent
terminology.
• Impossible to be an expert in all technologies and
“own” something in all products

4. STACK-CENTRIC R&D
iOS
Product Manager
Web Android
iOS Dev
iOS Dev
iOS Dev
Web Dev
Web Dev
Web Dev
Android Dev
Android Dev
Android Dev

5. BUSINESS-CENTRIC R&D
Feature A
Product Manager
Feature B Feature C
Full-Stack Dev
Full-Stack Dev
Full-Stack Dev
Full-Stack Dev
Full-Stack Dev
Full-Stack Dev
Full-Stack Dev
Full-Stack Dev
Full-Stack Dev

6. FULL-STACK IS HARD!
• Almost all devs at Wondermall do Python, ObjC+Swift
and AngularJS
• Level of expertise vary. No one is a rock star on all 3
platforms
• We’ll never get everyone cross trained on Android,
Windows Phone, Apple Watch, Apple TV, …
• If we want to remain Full Stack, we’ll have to rethink our
strategy

7. Powered by React-Native

8. BASICS

9. REACT-NATIVE IS…
• JavaScript for Application Logic
• Native UI (No WebViews)
• Flexbox Layout
• Polyfills (fetch API) & Platform APIs
(Camera)
• Compatible with nearly all React and JS libs

10. GETTING STARTED
$ brew install node && brew install watchman
$ npm install -g react-native-cli
$ react-native init MyProject && cd MyProject
$ react-native run-ios

11. HELLO WORLD
var React = require('react')
var { View, Text } = require('react-native')
class HelloWorldView extends React.Component {
render() {
return (
<View><Text>Hello World</Text></View>
)
}
}

12. React DOM React Native
React
React Canvas React Three
iOS Android macOS Win 10 Web
REACT ECO-SYSTEM
Tizen

13. REACT (NATIVE+JS)
BENEFITS
• “Learn once write anywhere”
• Reuse almost all non-UI code across all
platforms
• Reuse most UI code between Native
Platforms
• Hot-reloading JS, debug in Chrome

14. BENEFITS - CON’T
• Can be added incrementally to an existing
app
• Over-the-wire updates w/o AppStore
(AppHub)
• JS w/ ES6 is succinct and productive
• Can use previously written native code and
UI

15. STYLE & LAYOUT

16. ADDING STYLE
class HelloWorldView extends React.Component {
...
render() {
return (
<View style={{padding: 10}}>
<Text style={{fontSize: 14, color: '#0000ff'}}>
Hello World
</Text>
</View>
)
}
}

17. FLEXBOX LAYOUT
class HelloWorldView extends React.Component {
render() {
return (
<View style={{flexDirection: 'column', flex: 1}}>
<View style={{flex: 1, backgroundColor: 'red'}}></View>
<View style={{flex: 1, backgroundColor: 'green'}}></View>
<View style={{flex: 1, backgroundColor: 'blue'}}></View>
</View>
)
}
}

18. FLEXBOX LAYOUT - 2
class HelloWorldView extends React.Component {
render() {
return (
<View style={{flexDirection: 'row', flex: 1}}>
<View style={{flex: 1, backgroundColor: 'red'}}></View>
<View style={{flex: 1, backgroundColor: 'green'}}></View>
<View style={{flex: 1, backgroundColor: 'blue'}}></View>
</View>
)
}
}

19. NATIVE APIS
import React, { Component } from 'react';
import { MapView } from 'react-native';
class MapMyRide extends Component {
render() {
return (
<MapView
style={{height: 200, margin: 40}}
showsUserLocation={true}
/>
);
}
}

20. ROUTING

21. return (
<Navigator
initialRoute={{ title: 'My Initial Scene', index: 0 }}
renderScene={(route, navigator) =>
<MyScene
title={route.title}
onForward={ () => {
navigator.push({
title: 'Scene ' + route.index + 1,
index: route.index + 1,
});
}}
/>
}
/>
)
BUILT-IN

22. REACT-NATIVE-ROUTER-
FLUX
import { PageOne, PageTwo } from './Pages';
export default class App extends Component {
render() {
return (
<Router>
<Scene key="root">
<Scene key="pageOne" component={PageOne} title="PageOne" initial={true} />
<Scene key="pageTwo" component={PageTwo} title="PageTwo" />
</Scene>
</Router>
)
}
}

23. UNIVERSAL APPS

24. Shared - Native & Web
Redux /
Relay
API Client
Business
Logic
Shared Native
Native Specific
<TabBarIOS>,
<AndroidToolbar>
<Text>, <TextInput>,
<Image>
Web
<div>
Business Level Comp’
<span>
<img>

25. DEBUGGING & TOOLING

26. • Reload - Clears all JS code and resets
the state
• Remote JS Debugging - Chrome /
VSCode with breakpoints and Console
(no network)
• Live Reload - Automatic Reload (as
above)
• Hot Reloading - Change JS code without
DEVELOPER MENU

27. REDUX REMOTE DEV
TOOLS

28. PACKAGER
• Built-in packager with ES6 support
• Development: local webserver serves the
bundled JS
• Production:
• Use .ios.js or .android.js suffixes, Packager will
include the correct file for the platform bundle
$ react-native bundle —platform ios

29. OTA UPDATES
• Updates JS & assets without AppStore submission
• Apple’s policy allows it for fixes & minor
improvements
• Microsoft CodePush - Commercial
• AppHub - Hosted / OSS

30. INTEGRATION &
INTERNALS

31. NATIVE VS. JAVASCRIPT
View Controller
View Controller
View Controller Bridge
(incl. JS VM)
JavaScript FileJavaScript FileJavaScript File
RCTRootView
UIView
UIView

32. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions…
{
NSURL *jsCodeLocation = @“http://localhost:8081/index.ios.bundle?platform=ios";
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"MyComponent"
initialProperties:@{}
launchOptions:launchOptions];
UIViewController *rootViewController = [[UIViewController alloc] init];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
}

33. MULTIPLE RCTROOTVIEWS
RCTRootView
UIView
UIView
RCTRootView
UIView
UIView
Bridge
(incl. JS VM)

34. {
// AppDelegate didFinishLaunchingWithOptions
self.bridge = [[RCTBridge alloc] initWithBundleURL:@"localhost..."
moduleProvider:nil
launchOptions:nil]
// When you want to show R/N view
[[RCTRootView alloc] initWithBridge:self.bridge
moduleName:"MyComponent"];
// Somewhere else
[[RCTRootView alloc] initWithBridge:self.bridge
moduleName:"MyOtherComponent"];
}

35. NATIVE MODULES
• Export native functions to be called from JS
• Export constants and enums
• Send events to JS from native
• They are singletons

36. // CalendarManager.h
#import "RCTBridgeModule.h"
@interface CalendarManager : NSObject <RCTBridgeModule>
@end
// CalendarManager.m
@implementation CalendarManager
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(addEvent:(NSString *)name
location:(NSString *)location)
{
RCTLogInfo(@“Creating event %@ at %@", name, location);
}
@end

37. RETURN VALUE W/
PROMISES
RCT_EXPORT_METHOD(findEvents,
resolver:(RCTPromiseResolveBlock)resolve
rejecter:(RCTPromiseRejectBlock)reject)
{
NSArray *events = ...
if (events) {
resolve(events);
} else {
NSError *error = ...
reject(@"no_events", @"There were no events", error);
}
}

38. import { NativeModules } from ‘react-native';
CalendarManager = NativeModules.CalendarManager;
CalendarManager.addEvent(‘Birthday Party’, …);
async function updateEvents() {
try {
var events = await CalendarManager.findEvents();
this.setState({ events });
} catch (e) {
console.error(e);
}
}
updateEvents();

39. MISC.

40. PERFORMANCE TIPS
• Minimize bridge messages
• Implement shouldComponentUpdate
• Direct Manipulation with setNativeProps
• Rewrite in Native

41. FURTHER READING
• Facebook’s F8 App - http://makeitopen.com/
• React Native Newsletter -
http://reactnative.cc/
• Practice layout and Flexbox
https://github.com/jondot/ReactNativeKatas
• https://github.com/jondot/awesome-react-
native

42. STARTER KITS
• Native Starter -
http://startreact.com/themes/native-starter/
• Ignite - https://github.com/infinitered/ignite
• este.js - https://github.com/este/este

43. 3RD-PARTY COMPONENTS
• https://js.coach/react-native/
• https://react.parts/native
• nativebase.io

44. THANK YOU!
(QUESTIONS?)