React Native

About

react native is a cross platform development framework that transform react component to native platform UI targeted first at mobile application but integrates now web, windows and mac.

It's also relient on:

  • React, (run on react)
  • the Chrome runtime (and allows therefore debugger).
  • metro - The JavaScript bundler for React Native (- ie transpile module to a format that is understandable by React Native)

The React Native framework provides a set of JavaScript API (bindings) to the native target platform (iOS and Android APIs) to control the user interface and access device hardware, like the camera.

Installation / Devel

You can develop with two frameworks:

  • expo
  • or/and react cli

expo is a framework wrapped around react cli that is easier to use at the cost of not permitting native binary. You can always transform an expo project as a react cli if needed.

Expo

Two tools:

  • a command line app called Expo CLI to initialize and serve your project
  • and a mobile client app called Expo Go to open it on iOS and Android. Expo Go allows to open up apps that are being served through Expo CLI
  • You don't need macOS to build an iOS app with Expo, you only need an iOS device to run the Expo Go app
  • As you update your code, the changes will automatically be reflected on the mobile device.
  • Works only for pure-JavaScript apps but you can eject to transform it as a react-native app.
yarn global add expo-cli
REM or npm install --global expo-cli
success Installed "[email protected]" with binaries:
      - expo
      - expo-cli
  • Install the mobile app Expo Go
  • Register (optional) to have automatically a link between your local app and the mobile app
expo register
expo login
expo whoami
  • Create a starter app
expo init my-project
  • Start Metro Bundler, which:
    • is an HTTP server that:
      • compiles the JavaScript code of the app using Babel
      • and serves it to the mobile Expo app.
    • and pops up Expo Dev Tools, a graphical interface for Expo CLI.
expo start
 Metro waiting on exp://192.168.178.29:19000
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)
  • Firewall: On windows, open Windows Defender Firewall and open the port 19000 (for private network for instance)
  • Install library with the expo cli to verify the compatibility.
expo install @react-navigation/native

React Cli

React cli needs a mobile simulator.

To call the cli with npx:

  • Init: Initialize a new React Native project named <projectName> in a directory of the same name.
npx react-native init AwesomeProject
REM npx react-native --help

Android

To run for Android 1), you need to

  • Have an Android emulator running (quickest way to get started) (ie Install Android Studio to get the emulator)
  • Or a device connected.

Then run:

cd "c:\your\project\path" && npx react-native run-android

Windows

Run instructions for Windows:

IOS

You must be on a mac with Xcode and an iOS simulator installed 2)

  • Emulator
yarn install --global ios-sim
  • Run
react-native run-ios

Hello World

Example of basic Hello World app

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, world!</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: 'rgb(59,108,212)',
    fontSize: 42,
    fontWeight: '100',
    textAlign: 'center',
  },
})

API / Component / Library

Documentation / Reference


Powered by ComboStrap