Running a React-native App

React-native apps can be run using Expo or react-native cli

React-native cli is used in examples provided in NewbyCoder.com

Because native code is not built when using Expo to create a project, it cannot be used to include custom native modules beyond React Native APIs and components that are available in the Expo client app

Running in Linux/Ubuntu

React Native CLI requires Android Sdk

Check Installation in Linux

Use Java 8 instead of Java 14, which might lead to gradle issues

Switching Java

Install java 8 (if not already) with

sudo apt-get install openjdk-8-jdk openjdk-8-jre

Check there's other version(s) of java installed

 update-java-alternatives -l

Switch to java 8 using its path (or name)

sudo update-java-alternatives -s /usr/lib/jvm/java-1.8.0-openjdk-amd64

Check version

java -version

Create app

If not created already, create app using react-native command

react-native init NcApp

where NcApp is name of the application

Change current working directory

cd NcApp

Starting emulator

Emulator can be started using emulator command or using Android Studio

For systems with low memory, use emulator command to avoid waiting for applications to open up or (probably) freezing the system

To use emulator command, a device has to be created using Android Studio -> Avd Manager

Creating emulator using Android Studio

Open Avd Manager using Configuration dropdown when Android Studio is started or

Android Studio > Tools > AVD Manager

or Android Studio > Tools > Android > AVD Manager

Create Virtual Device

Select Pixel 2 and press Next

Download an image shown under Recommended Tab

Select an Image

Click Next and Select Advanced Settings

Select Hardware Gles

Click Finish and then start the device

Start emulator using cli

Open Terminal and enter

emulator -list-avds

If it doesn't show a device, create a Virtual Device by following above steps

Start emulator using emulator -avd <Device Name> command

emulator -avd Pixel_2_API_28

Running the app

Open two tabs in Terminal and cd into project directory (here NcApp)

Start react native metro server in one of them

react-native start

In the other tab, enter run command

react-native run-android

Modifying an app

Open App.js in a text editor and edit some lines

The application should reload automatically when changes are saved

Press r on terminal tab running metro instance (react-native start command) to Hot reload

Press Shift + r for hot restart

Re run react-native run-android or run-ios when adding, removing files used in application

Running in iOS

Start iOS simulator

To prepare to run and test React Native app on an iOS simulator, follow these steps:

• On Mac, find Simulator via Spotlight or by using the following command:

  open -a Simulator

• Start a simulator of a 64-bit device (iPhone 5s or later) by navigating to Hardware → Device menu

  

Create app

If not created already, create app using react-native command

react-native init NcApp

where NcApp is name of the application

Change current working directory

cd NcApp

Install CocoaPods dependencies

Installing Cocoapods dependencies is typically required when adding new packages

Run pod install command in ios folder inside project directory to install any required CocoaPods dependencies

cd ios && pod install && cd ..

Running the app

cd into project directory (here NcApp)

Enter run command

react-native run-ios

This builds and run the application on an available device (or a default device if multiple devices are available)

Metro instance

Running react-native run-ios opens a new terminal where metro instance is run

It shows welcome text like

               ######                ######
             ###     ####        ####     ###
            ##          ###    ###          ##
            ##             ####             ##
            ##             ####             ##
            ##           ##    ##           ##
            ##         ###      ###         ##
             ##  ########################  ##
          ######    ###            ###    ######
      ###     ##    ##              ##    ##     ###
   ###         ## ###      ####      ### ##         ###
  ##           ####      ########      ####           ##
 ##             ###     ##########     ###             ##
  ##           ####      ########      ####           ##
   ###         ## ###      ####      ### ##         ###
      ###     ##    ##              ##    ##     ###
          ######    ###            ###    ######
             ##  ########################  ##
            ##         ###      ###         ##
            ##           ##    ##           ##
            ##             ####             ##
            ##             ####             ##
            ##          ###    ###          ##
             ###     ####        ####     ###
               ######                ######


                  Welcome to React Native!
                 Learn Once Write Anywhere


To reload the app press "r"
To open developer menu press "d"

Use this terminal to reload application by pressing "r" key of keyboard in the terminal

Press Shift + r for hot restart

Modifying an app

Open App.js in a text editor and edit some lines

The application should reload automatically when changes are saved

Press r on terminal tab running metro instance to Hot reload

Press Shift + r for hot restart

Re run react-native run-android or run-ios when adding, removing files used in application

Run issues

Check React native run issues