Getting started with React Native – A complete setup guide

Architecture of React Native
Architecture of React Native
Pre-Requisites
1. Hardware requirements

RAM: 8 GB (If you are going to use the emulator on your machine).

2. Software requirements

Software    Version
Android studio (IDE)    2.2.3
Android Sdk    25.0.2
Java    1.8.0_121
Node Js    4.2.6
NPM    3.5.2
React native cli    2.0.1
React Native setup for Windows
First, you’ll need to install the node on your machine. If you already have node js skip the node installation steps, otherwise follow the below steps.

Node JS installation:

Download the latest node js.

Run the downloaded .msi file and follow the prompts to install.

React Native setup for Windows
Node.js. The installer should set the C:/Program Files/nodejs/bin directory in windows PATH environment variable by default if is not you have to set the PATH. Restart any open command prompts for the change to take effect.

Make sure node and npm are installed by typing the below commands

node -v

npm -v

React native:

After installing the node in your system, you  can install react native by typing the following command in the terminal

npm install -g react-native-cli

Android Development Environment:

Android studio helps you to run the react native app in an emulator and test the app. The installation process of the Android studio is explained below.

Download and install Android Studio

Download the Android Studio. And run the .exe file, make sure you installed Java.

Android studio requires java.

It opens the window like given below, click next to start the installation.

Anroid Studio setup
Below the image initiating JDK to android SDK.

JDK to android SDK
Select the components, which are required to create the applications (Android Studio, Android SDK, Android Virtual Machine and Performance (Intel chip)).

Select the components - create application
Specify the location to the Android studio and Android SDK

Location specification to android
Specify the RAM to the Android emulator. By default, this should be 512 MB.

Specify the RAM to the Android emulator
Finally, it extracts the packages to the local machine and will take some time to complete. Post the extraction, click the finish button and it will open the Android studio project with Welcome to Android studio message.

Anroid Studio setup final step
To create Android virtual Device:

Open the Android Studio and launch the AVD Manager clicking the AVD_Manager icon. Click the create a new virtual device and configure the device specification.

Android virtual Device
After clicking the finish button it will list the devices like in the above window.You can run the device by clicking the run button

Set up the ANDROID_HOME environment variable:

To run the react native app in emulator you need to setup the ANDROID_HOME environment variable

To setup the environment, right click on Computer → Advanced System Settings → Environment variables → New, then enter the path to your Android SDK.

react-native-android-sdk-environment-variable-windows

Restart the Command Prompt to apply the new environment variable.

Create the First React native Project

We will create our first project by running the below command in the terminal from the folder where we want to create the app.

react-native init MySampleApp

Go to that folder,

cd MySampleApp

run the command to start package, make sure you started the emulator.

react-native start

react-native run-android

The sample project will be opened in the emulator.

react-native-starting-screen

React Native setup for ubuntu
First, you’ll need to install the node on your machine. If you already have node js skip the node installation steps, otherwise follow the below steps.

Node JS Installation:

We should refresh our local package index first by typing,

 sudo-apt-get update

After that, you can install node js by using the command given below

sudo apt-get install nodejs

In most cases you’ll also need to install npm, you can install this by

 sudo apt-get install npm

Make sure node and npm are installed by typing the below commands

node -v

npm -v

If you see the version in the terminal, then the node is installed successfully. My node version is 4.2.6 and npm version is 3.5.2

React Native CLI Installation:

After installing node js, run the below command in terminal:

npm install -g react-native-cli

Make sure react-native-cli is installed by typing,

 react-native -v

This will give you the version details like,

react-native-cli:2.0.1

react-native: n/a – not inside a React Native project directory

The second one (react-native: n/a – not inside a React Native project directory) is nothing but you aren’t inside the react-native project folder, this is not an issue now, we can install it later.

Android Development Environment:

Android studio helps you to run the react native app in an emulator and test the app. The installation process of android studio is explained below

Download and install Android Studio

Download and install  Android studio.

To open Android studio,

 1.Go to your Android studio ->bin folder in terminal

 2.Type sh studio.sh and press Enter

Like test@test-pc:/Home/test/android-studio/bin$ sh studio.sh

Android Development Environment
This will open Android studio, make sure that you’ve installed Java.

Android studio
Install the AVD and configure VM acceleration

Choose Custom installation when running, make sure the boxes next to the below components are checked:

Android SDK

Android SDK Platform

Android Virtual Device

Click “Next” to install all of these components, then configure VM acceleration on your system.

Select the components - create application
Install the Android 6.0 (Marshmallow) SDK

When you install Android studio, by default it installs the most recent Android SDK. But React Native requires the Android 6.0(Marshmallow) SDK. So launch the SDK Manager and click on “Configure” in the Android Studio project screen.

Install the Android 6.0 (Marshmallow) SDK
1.Go to the settings menu and expand system settings under Appearance & Behaviour.

2.Click Android SDK Manager and select the “SDK Platforms” then check the box “Show Package Details” (bottom right corner). Find and Expand the Android 6.0 (Marshmallow) entry, then check the following items which are required (Google APIs, Intel x86 Atom System Image, Intel x86 Atom_64 System Image, Google APIs, Intel x86 Atom_64 System Image).

Then select ‘SDK Tools’, check the ‘Show Package Details’ and find ‘Android SDK Build Tools’.

Select the Android SDK Build-Tools 23.0.1 (if it not selected )

After that, click apply and stay relaxed for a while as this process will take some time.

Android studio
Set up the ANDROID_HOME environment variable

To execute React Native command, you need to set ANDROID_HOME environment variable.

The path variable needs to be written in the .bashrc file.

Add the following lines to this file ~/.bashrc (or equivalent) config file:

You can open the file by typing,

sudo nano ~/.bashrc

export ANDROID_HOME=~/Android/SDK

export PATH=${PATH}:${ANDROID_HOME}/tools

export PATH=${PATH}:${ANDROID_HOME}/platform-tools

Set up the ANDROID_HOME environment variable
Starting the Android Virtual Device:

To test the React native app, we need an Android Virtual Device (AVD).

You can view the list of available AVD’s by opening the “AVD Manager” in Android Studio. You can also run the following command in a terminal:

android avd

Android Virtual Device
In the “AVD Manager”, select your AVD and click “Start”.

Create First React Native Project:

We will create our first react native project by running the below command in terminal from the folder where we want to create the app,

react-native init MySampleApp

1. Go to that folder,

 cd MySampleApp

2. Run the command to start package, make sure you started the emulator

react-native start

react-native run-android

The sample project will be opened in the emulator.

react-native-starting-screen