React Native

"A framework for building native apps using react"

Why React Native?

Get the best from web & native

Learn once - Write anywhere

Native iOS Components

Native iOS Components

ActivityIndicatorIOS
DatePickerIOS
Image
ListView
MapView
Navigator
Modal
NavigatorIOS
PickerIOS
ProgressViewIOS
ScrollView
SegmentedControlIOS

SliderIOS
SwitchIOS
TabBarIOS
TabBarIOS.Item
Text
TextInput
TouchableHighlight
TouchableOpacity
TouchableWithoutFeedback
View
WebView

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var { AppRegistry, StyleSheet, Text, View } = React;

var ReactNight = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Night!
        </Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});

AppRegistry.registerComponent('ReactNight', () => ReactNight);

Composite Components

  render() {
      return (
        <View>
          <Text style={styles.title}>
            React Native Todo-List
          </Text>
          <Form/>
          <List/>
        </View>
      );
  }

Styling

Layout impacts a lot

learn once - write everywhere

JSX

JSX

like the web

<View>

<Text>

<TextInput>

<Image>

<div>

<span>

<input>

<img>

Web

Native

Inline styles!?

render() {
    return (
    <View style={styles.row}>
        <TextInput
            placeholder="Add a ToDo..."
            style={styles.input}
            value={this.state.todoText}/>
        <TouchableHighlight
            style={styles.button}>
            <Text style={{textAlign:'center'}}>Save</Text>
        </TouchableHighlight>        
    </View>
    );
}

<TextInput style={styles.input} />

Wait!

Style are objects!

var styles = StyleSheet.create({
 row: { 
    flexDirection: 'row', 
  },
  input:{
    flex:9,
    borderWidth:1,
    borderColor:'black',
    margin:10
  },
  button:{
    flex:3,
    borderWidth:1,
    borderColor:'black',
    margin:10
  }
});

Style are objects

No more LESS or SASS

it's JavaScript!

Flexbox in React

https://github.com/facebook/css-layout

• Subset of CSS
• Written in JS
• Transpiled in C & Java

Many Approaches

Native

Webview (Cordova, ionic ...)

Compiling to native (xamarin ...)

JS Bridge (Ti, NTS, React Native)

How React Native works?

Javascript

Native

How React Native works?

• View operations in the main thread
• Other operations in a different thread
• A diff algorithm

JS & Native are Asynch

You can use all your native code you want but...

remember it!

Asynch: on Flexbox

Layout needs measures, asynch doesn't help

Transpiled to Native

Running & Debugging

Chrome & React

developers tools