React Native

Getting Started

informations

Thomas_Dubois.name

Developer.job

rednet.io.company

head.png

assets

React Native ?

Under the hood ?

React Native

PhoneGap / Cordova

Native App

User

JSCore

Bridge

Native API

Layouts

Services

Native API

Layouts

Services

Plugins

Web App

import React, { Component } from "react";
import { Text, View } from "react-native";

class HelloReactNative extends Component {
  render() {
    return (
      <View>
        <Text>
          If you like React,
          you'll also like React Native.
        </Text>
        <Text>
          Instead of "div" and "span",
          you'll use native components
          like "View" and "Text".
        </Text>
      </View>
    );
  }
}

Primitive and

Components

<View /> : Standard container (comparable to div)
<Text /> : Text container
<TouchableOpacity/> : Render sub-component touchable with opacity effect
<ScrollView /> : Container allowing scroll if overflow
<FlatList /> : Optimized component for list rendering
...

Platform : OS information
StyleSheet : Style helper
...

Components

API

import {

View , ScrollView, FlatList, SectionList

} from 'react-native'

View you can scroll

item 1

item 2

item 3

item 4

item 5

item 6

item 7

item 1

item 2

item 3

item 4

item 5

item 6

Section 1

Section 2

import {

Text, TextInput

} from 'react-native'

Text

value

import {

Button, Switch, Slider, ...

} from 'react-native'

import {

AppState, AsyncStorage, CameraRoll, Linking, Geolocation, ...

} from 'react-native'

AppState: Application status listener
AsyncStorage : Store information on the device
CameraRoll : Native Camera API
Geolocation: Native API for position
Linking : Native API for link opening and deep linking
...

Platform Component

& Components

ActionSheetIOS
DatePickerIOS
BackHandler
PermissionsAndroid
DatePickerAndroid
...

import { Platform } from "react-native";
const {
        OS, //android | ios
        Version, // 28 | 12
        select,
      } = Platform;

const style = {
    flex: 1,
    ...select({
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'blue',
      },
    }),
  };

// CustomComponent.ios.js
// CustomComponent.android.js
import CustomComponent from "./CustomComponent"

Styling and

Dimensions

import React, { Component } from "react";
import { View, StyleSheet } from "react-native";

export default class StyleExample extends Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          alignItems: "center",
          justifyContent: "center",
          flexDirection: "row"
        }}
      >
        <View style={styles.firstChild} />
        <View style={styles.secondChild} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  firstChild: {
    width: 50,
    height: 50,
    backgroundColor: "powderblue"
  },
  secondChild: {
    width: 100,
    height: 50,
    backgroundColor: "steelblue"
  }
});

StyleSheet and Style

StyleSheet component is here for performance
Prop 'style'
Styling object with camelCase properties
NO UNIT
flex specific

Dimensions

import { Dimensions } from "react-native";
const {height, width} = Dimensions.get("window");

Still no unit
Change on screen rotation
Event listener 'change' available

Let's code!

Snack

No dependencies, it's in the browser!

Dependencies

React Native API available
Test on browser or on your device
Tiers JS libraries availables
Exportable en projet Expo

Things to know

expo

Node / npm
Git
(OSX) Watchman - Recommended

Dependencies

Few dependencies
React Native API available
Test on your device or on Emulator (Need more dependencies)
Tiers JS libraries availables
Your dev environment

Things to know

% npm install -g expo-cli
//[Installation ... ]
//[Things happening ... ]

% expo init ProjectNamePlaceholder
//[Project creation in progress ... ]
//[Other things here ... ]




//Not actual process footage

react-native

Node / npm
(OSX) Watchman - Recommended
(Windows) Python
JDK (Android)
Android Studio / Android SDK (Android)
XCode (iOS)

Dependencies

Test on Emulator
Tiers JS and Native libraries availables
Your dev environment
Manage React Native releases

Things to know

% npm install -g react-native-cli
//[Installation ... ]
//[Things happening ... ]

% react-native init ProjectNamePlaceholder
//[Project creation in progress ... ]
//[Other things here ... ]




//Not actual process footage

Did you say debug ?

Developer Menu