Florian Rival

@florianrival

github.com/4ian

App developer @

Developer of

enables you to build world-class application on native platforms

based on JavaScript and React

Facebook uses React Native in multiple production apps and will continue investing in React Native

iOS or Android

JavaScriptCore

React Native

provided by iOS, embedded on Android

your JavaScript app

Components

APIs

React Native JS components

Natif

JS

WebView

 JavaScript app

Chrome/

UIWebView

 JavaScript app

JSCore

App with native components

cordova

React native

export default class ClickableImage extends Component {
  render() {
    return (
      <TouchableHighlight onPress={this.props.onClick}>
        <Image style={styles.image} source={{ uri: this.props.imageUri }}/>
        <Text style={styles.text}>{this.props.text}</Text>
      </TouchableHighlight>
    );
  }
}

bootstrap is done in index.[os].js

use Components the react way

use APIs provided by RN

onClick() {
    fetch('http://my/api').then((response) => { 
        Alert.alert(response.json())
    });
}

No real css, real encapsulation

flexbox based layout

most properties are similar to the css you are used to

<Text style={this.myStyle} />

<Text style={{margin: 10, color: #BADA55}} />

<View style={{flexDirection: 'row'}}>
    <Text style={{flex:0}}>I fit</Text>
    <Text style={{flex:1}}>I'm taking all the spaaaaace</Text>
</View>

componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
        Animated.timing(this.state.progress, {
          toValue: 200,
        }).start();
    });
}

render() {
    return (<Animated.View style={{
      transform: [{
        translateX: this.state.progress.interpolate({
          inputRange: [0, 1],
          outputRange: [500, 0],
        }),
        opacity: this.state.progress
      }],
    }}>
        <Text>Hello world</Text>
    </Animated.View>);
}

transform css-like properties

animated.* components

in general, performance is really satisfying 

60fps, smooth transitions, smooth animations even on older devices

Beware of

Very large images on Android,

Run fetches/cpu intensive code after interactions

deactivate dev mode first

CALLING  NATIVE CODE

Add Objective-C/Java code directly inside your project

INTEGRATE  EXISTING NATIVE COMPONENT

full control on the native projects  

Make it easier to integrate custom SDK (Facebook, Parse...) without having to rely on plugins

react-native github

25000 stars, 500 contributors, a release each ~2weeks

react.parts

Lots of components (from icons to full messenger component) 

camera?

Yup

Deep links?

Yup, yup

sharing menu?

Sure bro

facebook login?

Ok

maps?

Yuuuuuuuus

emoji in texts?

Yeeeaahh 😺

Yellow box

Chrome debugging

No network requests monitoring, use V8 instead of JSC

developer menu

very simple inspector, debugger launchers,

FPS counter, options to connect to the remote packager

LIVE Reload in the emulators/devices

Thanks!