Table of Contents
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:
- React Native CLI
- 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 :
- You will need the Intel x86 Emulator Accelerator (HAXM installer) to run the emulator on Windows. For more information, please refer to the following link: https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows
- Enable the Intel Virtualization Technology from BIOS setting, I will recommend you to go through this link: https://stackoverflow.com/questions/21635504/error-during-installing-haxm-vt-x-not-working
- If you have Hyper- V feature enabled, you need to disable it
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
Great content sir ❤️❤️
Thanks Karan