dark

How to install React Native?

React Native install
React Native install

React Native is a framework created by Facebook and it is a smooth and easy cross-platform for mobile development. From Uber to Tesla, Instagram, and Facebook ( no doubt ) were using React Native. We will see installation of this amazing framework on windows and linux machine.

There are two ways to install:

  1. React Native CLI
  2. Using expo

You can easily get start with expo by running create-react-app and be happy, but there are some pros and cons. With most apps in React Native, you end up needing to utilise several third party native libraries, which Expo doesn't have support outside of their built in APIs. So we will go with React Native CLI.

Installation on Windows

Step 1: Install Nodejs, JDK and Python

1 (a) Install the Nodejs form here ( LTS recommended )

1 (b) Install Java SDK from this link

1 (c) Install Python ( Needed to run some React Native Scripts ) from this link

OR
[ alternative ] Step 1: You can install Nodejs, python and JDK via Chocolatey as well

Open Command Prompt as an administrator ( Click Win + R and write ‘cmd’ , press enter)

Then run this small command to install everthing

choco install -y nodejs.install openjdk8 python2

Step 2: Install Android Studio

( a ) Download Android Studio from this link:

( b ) Go to File ( right bottom ), then open
Setting>System Setting > Android SDK

You will find something like this

React native requires Android 6.0 SDK (Marshmallow) or higher. So you can use anything above it. I'll use Nougat ( Android 7.0 ).

( c ) Now go to the SDK Tool Tab and make sure you have installed the following SDK tools installed:

It will take some time to install so have patience.

Some Important Notes :

Step 3: Configure Environment Variable

Let check the JDK location, Go to File > Other Settings > Default Project Structure:

Now open the Environment Variable ( from start search ) and Configure variables

Set the ANDROID_HOME variable:
Here add Java SAD

C:\Users\{your_user_name}\AppData\Local\Android\Sdk\platform-tools

Set JAVA_HOME variable:
Here add C:\Program Files\Java\jdk1.8.0_181\bin

Step 4: Install React Native CLI

React Native has a built-in command line interface, I will recommend using npx.
Run following command to create React Native Project named LcoApp:

npx react-native init LcoApp

It will show this, if its installed successfully

project structure will look like this;

Open same project from android studio to use the emulator:

Click on "Open an existing Android Studio project", go to your project and select the folder android and click Ok.

Now, go to Tools > ADV Manager after loading the files:

Select the hardware or device:

Then select the System Image, do some simple okay/next and you will have an Virtual device / Emulator

Now, just click on play and you can see the emulator running:

Installation on Linux

Step 1: Before Installing update & upgrade your system

sudo apt-get update

sudo apt-get upgrade

Then install node and npm if you don’t have

sudo apt install nodejs

sudo apt install npm

Step 2: Install React- Native CLI

By running following command and make sure to use tag -g to install it globally. It will install all the necessary packages required.

sudo npm install -g react-native-cli

Step 3 : Environment Variables

(a) Setting up Java environment

sudo apt-get install openjdk-8-jdk

(b) Set up an environment variable for java by pasting following path in .bash_profile and run source update

sudo gedit $HOME/.bash_profile

Add this

export JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64/jre/

source $HOME/.bash_profile

Step 4: Install Android Studio

(a) To Install Android Studio, run

sudo snap install android-studio

(b) Set up env variable for android studio

Open .bash_profile with

sudo gedit $HOME/.bash_profile

Paste this lines

export ANDROID_HOME=$HOME/Android/Sdk 
export PATH=$PATH:$ANDROID_HOME/emulator 
export PATH=$PATH:$ANDROID_HOME/tools 
export PATH=$PATH:$ANDROID_HOME/tools/bin 
export PATH=$PATH:$ANDROID_HOME/platform-tools

Then execute

source $HOME/.bash_profile

(c) Install ADB

sudo apt install adb

Step 5: Create React-Native App

Now start with fresh react-native project, by running npx command. We can access it without installing anything globally using npx.

To create project named ‘LcoApp’

npx react-native init LocApp

You will see this in your terminal ones its successfully executed

Now you can run your application as per the instructions…

cd "/home/lenovo/LcoApp" && npx react-native run-android

Project structure will look like this

Open project from android studio

Note: please configure android studio and emulator by refering to the windows section

Kudos to you, Now go and build cool applications and flex…

Would love to know your feedback, Thank You for reading

Total
0
Shares
2 comments

Leave a Reply

Previous Post
Mysql installation

How to install MySQL?

Next Post

Everything about Ansible Variables #7