React Native

Jason Brown

Front End @ Mirador Financial

Twitter: @browniefed

Github: browniefed

Email: browniefed@gmail.com

https://github.com/browniefed/forecast

How It Works

JavaScript

JSON

ObjC

Java

Native Views

Build Views

Business Logic

Flexbox Layout

Layout - Flexbox

http://flexboxfroggy.com/

FlexBox is just ratios

Flex 2

Flex 1

Flex 1

Flex 1

Flex 1

Flex 1

Flex 1

Flex 1

Column (Default)

Row

Flex Direction

import React from "react-native";

let {View, Text, Image} = React;

let App = React.createClass({

    render: function() {
        return (
            <View>
                <Text>{this.state.text}</Text>
                <Image source="http://google.com/logo.png" />
            </View>

        )
    }
});

import React from "react";

let App = React.createClass({

    render: function() {
        return (
            <div>
                <span>{this.state.text}</span>
                <img src="http://google.com/logo.png" />
            </div>

        )
    }
});

React Native vs React Web

import React from "react-native";

let {View, Text, Image, TouchableOpacity } = React;

let App = React.createClass({
    getInitialState: function() {
        return { text: 'Some Text To Change Later' }
    },
    handlePress: function() {
        this.setState({
            text: 'Some new Text'
        });
    },
    render: function() {
        return (
            <View>
                <TouchableOpacity onPress={this.handlePress}>
                    <Text>{this.state.text}</Text>
                    <Image source="http://google.com/logo.png" />
                </TouchableOpacity>
            </View>

        )
    }
});

<View>
    <TouchableOpacity onPress={this.handlePress}>
        <Text>Some Text To Change Later</Text>
        <Image source="http://google.com/logo.png" />
    </TouchableOpacity>
</View>

<View>
    <TouchableOpacity onPress={this.handlePress}>
        <Text>Some New Text</Text>
        <Image source="http://google.com/logo.png" />
    </TouchableOpacity>
</View>

import React from "react-native";

let {View, Text, Image, StyleSheet } = React;

let App = React.createClass({
    getInitialState: function() {
        return { text: 'Some Text To Change Later' }
    },
    handlePress: function() {
        this.setState({
            text: 'Some new Text'
        });
    },
    render: function() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>{this.state.text}</Text>
                <Image style={styles.image} source="http://google.com/logo.png" />
            </View>

        )
    }
});

let styles = StyleSheet.create({
    container: { flex: 1, alignItems: 'center', justifyContent: 'center'},
    text: { fontSize: 22, color: 'red' },
    image: { width: 200, height: 90 }
});

Styling + Layout

How to Start

• react-native init
• create-react-native-app
• expo
• https://sketch.expo.io/

Navigation

• https://github.com/react-community/react-navigation
• https://github.com/airbnb/native-navigation