React Native

About

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

It's also reliant 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)
• Yog layout

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

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

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 ¹⁾, 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:

• See https://aka.ms/ReactNativeGuideWindows for the latest up-to-date instructions.

IOS

You must be on a mac with Xcode and an iOS simulator installed ²⁾

• 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

• React Native: https://reactnative.dev/docs/components-and-apis - views …
• Expo: https://docs.expo.dev/versions/latest/ - contacts, camera, and GPS location
• Library: https://reactnative.directory/

Sample App

• https://github.com/saucelabs/my-demo-app-rn

Documentation / Reference

• https://www.jetbrains.com/help/idea/react-native.html
• https://microsoft.github.io/react-native-windows/docs/getting-started
• Html to Native View Minimal Parser
• Only web, see WebView - using the system's Web View.

Windows

• Check the last version at react-native-windows/releases
• Follow the getting-started

# Platform requirement
Set-ExecutionPolicy Unrestricted -Scope Process -Force; iex (New-Object System.Net.WebClient).DownloadString('https://aka.ms/rnw-deps.ps1')
# Install
npx react-native init <projectName> --template react-native@^lastVersion