This document provides an overview of React Native, including what it is, how it works, and its features and capabilities. Some key points: - React Native allows building native mobile apps using JavaScript and React by rendering to real native UI components. It provides cross-platform development for iOS and Android. - Apps are built using familiar React components, props, state, lifecycle methods, etc. but render to native mobile UI elements instead of HTML. - It includes common mobile components like View, Text, Image, etc. and access to native device features and APIs. - Developers can create custom native iOS and Android modules and components to integrate with native code and libraries. - Tools like

1. Cross Platform
Development
with React Native
Ken Wheeler | @ken_wheeler

2. What is React
Native?

3. Cross platform native app library
Write native apps in Javascript
Renders to real native UI

4. First, lets talk
about React

5. UI library developed at Facebook
Pitched as "just the view layer"
Robust component system
Virtual DOM
The new hotness

6. class Test extends React.Component {
render() {
return (
<div>
<p>I'm a component!</p>
</div>
)
}
}

7. JSX
<div>
<p>I'm a component!</p>
</div>
React.DOM.div(null,
React.DOM.p(null, "I'm a component!")
);

8. Props
class Test extends React.Component {
render() {
return <p>{this.props.name}</p>
}
}
//Usage
<Test name="Ken"/>

9. Prop Validation
Test.propTypes = {
name: PropTypes.string
};
Test.defaultProps = {
name: "Default"
};

10. State
class Test extends React.Component {
state = {
count: 1
};
render() {
return <p>{this.state.count}</p>
}
}

11. setState
this.setState({
count: 2
});

12. Events
class Test extends React.Component {
increment() { ... }
render() {
return (
<button onClick={this.increment}>
Increment
</button>
);
}
}

13. Component
Lifecycle

14. componentWillMount
componentDidMount
componentWillUnmount
componentWillReceiveProps
componentWillUpdate
componentDidUpdate
shouldComponentUpdate

15. What about data?

16. Unidirectional Data Flow

17. Flux Architecture

18. Smart Components

19. Redux
https://github.com/reactjs/redux
Relay
https://github.com/facebook/relay
RxJS
https://github.com/ReactiveX/RxJS

20. React Native

21. Why use React Native?
Cross Platform
"Native Feel"
One Language
Live Reload
OTA Updates

22. Why is makes sense for
business
Fast Development Cycles
Fast Deployment Cycle
Resource Interoperability
One Team

23. How React Native Works

24. Primitives
class Test extends React.Component {
render() {
return (
<View>
<Text>I'm a component!</Text>
</View>
)
}
}

25. View Components

26. View
Text
Image
ListView
MapView
Navigator
ScrollView
Modal
Picker
RefreshControl
Switch
TextInput
WebView
Touchable*

27. Device APIs

28. Alert
Animated
AppState
AsyncStorage
CameraRoll
Dimensions
Linking
NetInfo
PixelRatio
PanResponder
StyleSheet
LayoutAnimation

29. Poly lls

30. Flexbox
Geolocation
Network
Timers
Colors

31. Networking

32. Fetch
fetch(API_URL)
.then(res => res.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.warn(error);
});

33. Async/Await
async function getData() {
try {
const res = await fetch(API_URL);
const data = await res.json();
console.log(data);
} catch(e) {
console.warn(e)
}
}

34. Styling & Layout

35. StyleSheet
const styles = StyleSheet.create({
container: {
backgroundColor: "#ccc",
padding: 10,
margin: 10,
borderRadius: 3,
borderWidth: 2
}
});

36. Applying Styles
class Container extends React.Component {
render() {
return (
<View
style={styles.container}/>
//... child components
</View>
)
}
}

37. Flexbox
const styles = StyleSheet.create({
layout: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center"
},
tiles: {
flex: 1
}
});

38. Custom iOS
Modules

39. // MyModule.h
#import "RCTBridgeModule.h"
@interface MyModule : NSObject <RCTBridgeModule>
@end

40. // MyModule.m
@implementation MyModule
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(sayName:(NSString *)name)
{
RCTLogInfo(@"My name is %@", name);
}
@end
// Usage in Javascript:
NativeModules.MyModule.sayName("Ken");

41. RCT_EXPORT_METHOD(getData:(RCTResponseSenderBlock)callback)
{
NSArray *data = ...
callback(@[data]);
}
// Usage in Javascript:
NativeModules.MyModule.getData(data => {
console.log(data);
});

42. RCT_REMAP_METHOD(getData,
resolver:(RCTPromiseResolveBlock)resolve
rejecter:(RCTPromiseRejectBlock)reject)
{
NSArray *data = ...
if (data) {
resolve(data);
} else {
NSError *error = ...
reject(@"no_data", @"Data fetch error", data);
}
}
// Usage in Javascript:
NativeModules.MyModule.getData
.then(data => console.log(data))
.catch(err => console.log(err));

43. Custom Android
Modules

44. public class MyModule extends ReactContextBaseJavaModule {
public MyModule(ReactApplicationContext reactContext) {
super(reactContext);
}
@Override
public String getName() {
return "MyModule";
}
@ReactMethod
public void sayName(String name) {
Log.v("MyModule", "My name is " + name);
}
}
// Usage in Javascript:
NativeModules.MyModule.sayName("Ken");

45. @ReactMethod
public void getData(Callback errorCallback, Callback successCallba
try {
float data = // ...get data;
successCallback.invoke(data);
} catch (IllegalViewOperationException e) {
errorCallback.invoke(e.getMessage());
}
}
// Usage in Javascript:
NativeModules.MyModule.getData(
(err) => console.log(err),
(data) => console.log(data)
);

46. @ReactMethod
public void getData(Promise promise) {
try {
float data = // ...get data;
promise.resolve(data);
} catch (IllegalViewOperationException e) {
promise.reject(e);
}
}
// Usage in Javascript:
NativeModules.MyModule.getData
.then(data => console.log(data))
.catch(err => console.log(err));

47. iOS View
Components

48. @interface RCTMapView : RCTViewManager
@end
@implementation RCTMapManager
RCT_EXPORT_MODULE()
RCT_EXPORT_VIEW_PROPERTY(mapType, MKMapType)
- (UIView *)view
{
return [[MKMapView alloc] init];
}
@end
//Usage in javascript
const RCTMap = requireNativeComponent('RCTMap', null);

49. Android View
Components

50. public class ReactMapManager extends SimpleViewManager<MapView>
@Override
public String getName() {
return "RCTMapView";
}
@ReactProp(name = "mapType")
public void setMapType(ReactMapView view, @Nullable int mapType
googleMap.getMap().setMapType(mapType);
}
@Override
public ReactMapView createViewInstance(ThemedReactContext contex
return new MapView(context, Fresco.newDraweeControllerBuilder
}
}
//Usage in javascript
const RCTMap = requireNativeComponent('RCTMap', null);

51. React Native
Tooling

52. Debugging
Chrome Devtools
Nuclide
Redbox
Yellowbox

53. Pro ling
Systrace
Perf Monitor
Instruments (iOS)

54. JS Tooling

55. ES6
const add = (a, b) => a + b; // Arrow functions
let { name, address, ...info } = this.props; // Destructuring
let state = { // Object rest spreads
...state,
name
};
class Test { // ES6 Classes
getName() {
return "Test";
}
}

56. Flowtype
function getData(url: string, callback: Function): Object {
return fetch(url)
.then(res => res.json())
.then(data => callback(data));
}

57. Testing
Mocha/Jest
react-addons-test-utils
Enzyme
react-native-mock
Appium

58. Third Party
Tooling
AppHub
CodePush
Reindex
AppBoy

59. RNPM

60. Om & Elm Native

61. ExponentJS
No Xcode required
Distribute apps to anyone with the
app
Exponent XDE
Exponent App
Available in the App Store

62. Demo
exp://exp.host/@thekenwheeler/mobile-day-demo