1

A Closer Look AtReact Native

Ian Wang

Web Developer at Codementor.io

@ianwang36

2

What Is React Native

“ React Native enables you tobuild world-class application

experiences on nativeplatforms using a consistentdeveloper experience based

on JavaScript and React.- React Native Website

3

What Is React Native

“ React Native enables you tobuild world-class application

experiences on nativeplatforms using a consistentdeveloper experience based

on JavaScript and React.- React Native Website

4

No HTML

No Browser

No WebView

Completely powered by

JavaScript

5

How it Works

React.js JavaScript Core

ReactNative Bridge

NativeMethod

UI ThreadJS Thread

Native

Async &Batchedcommunication

7

How to Use It

Components Style &Layout

APIs

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

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

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

CSS in JS (inline css) problem with CSS at scale:

Style & Layout

Global NamespaceMinificationSharing ConstantsDependencies

https://speakerdeck.com/vjeux/react-css-in-js

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

Style & Layout

How to reimplement CSS on native ???

CSS Box Model (margin, padding, border) CSS Visual Formatting Model (display, position, float)

TopLeft

WidthHeight

14

Extreme TDDStyle & Layout

from React.js Conf 2015 Keynote 2 - A Deep Dive into React Native

15

Extreme TDD

Fail. Fix. Iterate.

Style & Layout

from React.js Conf 2015 Keynote 2 - A Deep Dive into React Native

16

APIsAlert

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

17

APIsFetch

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

APIsPush Notification

PushNotification.requestPermissions(); PushNotification.addEventListener( // get deviceToken "register", this._didRegistered ); PushNotification.addEventListener( // get notification's context "notification", this._handleNotification );

MobileLogin

StoreToken

PokeSNS

Send toDevice

mobile API API SNS

19

Debugging

20

Testingimport 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

“ Upgrading could be a pain inthe ass, but I guess it's worth it.  

                                   Ian Wang, 2016

22

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

23

Q&AThanks