This document provides an overview of React Native, summarizing that it allows building mobile apps using JavaScript and React by rendering UI components to native platform elements. It discusses that React Native uses no HTML, browser or webview, instead being completely powered by JavaScript communicating directly with native platform views. It then demonstrates how to build React Native apps using common components like TouchableHighlight and ListView, inline styles, and platform APIs while also addressing debugging, testing and future considerations.

1. 1
A Closer Look At
React Native
Ian Wang
Web Developer at Codementor.io
@ianwang36

2. 2
What Is React Native
“ React Native enables you to
build world-class application
experiences on native
platforms using a consistent
developer experience based
on JavaScript and React.
- React Native Website

3. 3
What Is React Native
“ React Native enables you to
build world-class application
experiences on native
platforms using a consistent
developer experience based
on JavaScript and React.
- React Native Website

4. 4
No HTML
No Browser
No WebView
Completely powered by
JavaScript

5. 5
How it Works
React.js
JavaScript
Core
ReactNative
Bridge
Native
Method

6. UI ThreadJS Thread
Native
Async &
Batched
communication

7. 7
How to Use It
Components
Style &
Layout
APIs

8. 8
Components
<TouchableHighlight
onPress={() => { onPress(user, chat); }}>
<View>
<Image source={require('./image/avatar.png')} />
<View>
<View>
<Text>{ user.name }</Text>
<Text>{ chatDate }</Text>
</View>
<Text>
{ messageContent }
</Text>
</View>
</TouchableHighlight>
TouchableHighlight, View, Image, Text
mockup

9. 9
Components
getInitialState() {
return {
dataSource: new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
};
},
componentWillReceiveProps(nextProps) {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(
nextProps.myData
)
});
},
render() {
<ListView
ref="scrollListView"
dataSource={this.state.dataSource}
renderRow={this._renderRow}
onScroll={this._handleOnScroll} />
}
ListView

10. 10
Components
renderScene(route, navigator) {
if(route.component) {
var props = route.passProps;
return React.createElement(route.component, {
...props
});
}
},
render() {
return (
<Navigator
initialRoute={{
component: MainEntryPoint,
title: 'Codementor'
}}
renderScene={this.renderScene} />
)
}
///////////////
this.props.navigator.push({
component,
title,
passProps
});
// pop();
// jumpBack();
Navigator

11. 11
CSS in JS (inline css)
problem with CSS at scale:
Style & Layout
Global Namespace
Minification
Sharing Constants
Dependencies
https://speakerdeck.com/vjeux/react-css-in-js

12. 12
Style & Layout
let styles = StyleSheet.create({
chatRowName: {
flex: 1,
color: "#333333",
textAlign: 'left',
},
chatRowTimeText:{
width: 60,
color: '#b7b8b9',
textAlign: 'right',
fontSize: 12,
},
});
<TouchableHighlight
underlayColor="#f3f3f3">
<View>
<Text style={styles.chatRowName}>{user.name}</Text>
<Text style={styles.chatRowDate}>{chatDate}</Text>
</View>
</TouchableHighlight>

13. 13
Style & Layout
How to reimplement CSS on native ???
CSS Box Model (margin, padding, border)
CSS Visual Formatting Model (display, position, float)
Top
Left
Width
Height

14. 14
Extreme TDD
Style & Layout
from React.js Conf 2015 Keynote 2 - A Deep Dive into React Native

15. 15
Extreme TDD
Fail. Fix. Iterate.
Style & Layout
from React.js Conf 2015 Keynote 2 - A Deep Dive into React Native

16. 16
APIs
Alert
Alert.alert(
"Send message to Norman Kurry?",
"We've just notified ...", [{
text: negativeText,
onPress: negativeOnPress
}, {
text: positiveText,
onPress: positiveOnPress
}]
);

17. 17
APIs
Fetch
fetch('https://mywebsite.com/endpoint.php', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
})
})
.then((response) => response.text())
.then((responseText) => {
console.log(responseText);
})
.catch((error) => {
console.warn(error);
});

18. 18
APIs
Push Notification
PushNotification.requestPermissions();
PushNotification.addEventListener(
// get deviceToken
"register", this._didRegistered
);
PushNotification.addEventListener(
// get notification's context
"notification", this._handleNotification
);
Mobile
Login
Store
Token
Poke
SNS
Send to
Device
mobile API API SNS

19. 19
Debugging

20. 20
Testing
import React, { View, Text, StyleSheet } from 'react-native';
import { shallow } from 'enzyme';
import { expect } from 'chai';
const Test = React.createClass({
render() {
return (
<View>
<Text>enzyme</Text>
<Text>rules</Text>
</View>
)
}
});
describe('<Test />', () => {
it('it should render 1 view component', () => {
const wrapper = shallow(<Test/>);
expect(wrapper.find(View)).to.have.length(1);
});
it('it should render 2 text components', () => {
const wrapper = shallow(<Test/>);
expect(wrapper.find(Text)).to.have.length(2);
});
});

21. 21
“ Upgrading could be a pain in
the ass, but I guess it's worth it.
Ian Wang, 2016

22. 22
Todos
Over-the-air update (react-native-code-push)
Tracking (react-native-mixpanel)
Testing (Enzyme)
Platform specific UIs??
Redux in mind (Fluxxor bye)
Routing management
...

23. 23
Q&A
Thanks