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

Native App

User

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

⌘ + D

⌘ / Ctrl + M

Browser DevTools

React Native Debugger

That's it!

Experience Feedback

JS / React Based

Performance

Easy to start

...

Some Native Parts

Upgrades

Difference Web / RN

What's next ?

Don't miss thoses libraries

References

Links

React Native Getting Started

By fromwood

React Native Getting Started

  • 30
Loading comments...