How it works and how to use it.

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