Introduction to React Native

• A talk by Cédric JUNG

Why do I use React Native ?

Quick history

• 2011: Cordova
• 2013: React
• 2015: React Native for Android and iOS
• 2016: React Native for Windows (Is it important ? )

What about Cordova

Cordova

• single-page application
• running inside the default Webview
  • Chrome browser for Android
  • Safari browser for iOS
• development Freedom (Ionic, Ace, Onsen)

React Native

• React Native ≈ React ⇒ Community
• clear separation between iOS and Android
• running in JavaScriptCore
• technology stack "imposed"

Quick presentation of Expo

• Facebook login
• instant updating
• asset management
• easier updating to new React Native releases
• but no native modules

Style

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

Tools

Init new app faster with a CLI

npm install -g create-react-native-app
create-react-native-app my-app
cd my-app/
npm run eject # I do not love Expo 
npm start

NativeBase

the “Bootstrap of React Native”

React Navigation

Routing and navigation for your React Native apps

import React from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
      return (
      <View>
        <Text>Home Screen</Text>
      </View>
    );
  }
}
class SecondScreen extends React.Component {
  render() {
      return (
      <View>
        <Text>Second Screen</Text>
      </View>
    );
  }
}
export default createStackNavigator({
  Home: {
    screen: HomeScreen
  },
  Second: {
    screen: SecondScreen
  },
});

Building stack

Error during building

Error displayed on the screen

Error displayed in the console

Problems

• Dependencies
• You are dependent on plugin

Just the beginning…

• Facebook will re-write inside components of React Native
• Some alternative are rising up: Vue Native

• Enjoy! :)
  Cédric JUNG