React Native


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)

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.


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://
› 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


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


Run instructions for Windows:


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>

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

Sample App

Documentation / Reference


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

Discover More

css in js is the manipulation of css rule completely with the help of javascript. The css is not in a stylesheet but in Javascript code. Css in Js is used mostly to style react components rather than...
Card Puncher Data Processing
Datacadamia - Data all the things

Computer science from a data perspective
Javascript - (Interpreter|Engine|Runtime)

Javascript Interpreter (JavaScript_engineJavaScript engine) is a software which interprets and executes JavaScript code. Javascript can run in two different environment: within a browser or without...
Javascript - Native

How to create native binary . This will take a while the first time, but will be reasonably fast for subsequent runs:
Web - App Desktop

Web app in a desktop environment There is several kinds of framework : one that embeds a webkit based browser (chromium) that supports WebGL, WebWorkers, Audio, Video, Local Storage, etc (such as...
Web - Mobile PDA, Telephone,

When building an desktop/mobile application, this is possible: via the native language of the platform via a WebView: a special browser window that can access device-level APIs. via a language compiled...

Share this page:
Follow us:
Task Runner