How to Install and Setup React Native on Ubuntu 20.04.2.0 LTS

Welcome guys, In this article, We will learn how to install and setup React Native on Ubuntu any version i'm use Ubuntu 20.04.2.0 LTS. You will have to follow all the below step one by one. I assure you the end of this article you feel happy and save a lot of time.
I’m assuming you are using i'm use Ubuntu 20.04.2.0 LTS machine and you have admin access. Let go head with below step.

Why is React Native Important?

You can create UI/UX for both iOS and Android platforms with React Native Framework.
As React Native components have counterpart rights, both Android and iOS application can be reused for these components.
You can either integrate React Native components into the existing application's code or you can use the Cordova-based code using the plugin.
However, Cordova and Ionic code have to be built for your current app.
React Native development is relatively easy, fast, and efficient.

We will learn how to install and setup React Native on Ubuntu 20.04.2.0 LTS in this article. For successful installation, all of the steps below must be followed one after the other.

Requirements specification:

To download and successfully install React-Native to your pc, you need to consider the minimum hardware specifications required to support the app and run it smoothly.

RAM: minimum 4GB / Recommended
HDD: minimum 256 / Recommended 256 + SSD
Processor : core i5+ / AMD6

Software Requirements:

To efficiently install and set up React Native on your Ubuntu device, you will need to install the following:

Android Studio / VS code
Android SDK
Install JDK
Node JS
NPM
React native cli

Installation Procedure

Step 1: Install Node.js and npm

Follow these steps to install Node.js which is a popular JavaScript implementation and user JavaScript dependency.

1. First update the apt package manager:

$ sudo apt-get update

2. Now, run the following command:

$ curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash 
$ sudo apt-get install -y nodejs

Following Node.js installation, proceed with NPM or Node Package Manager installation.

3. These commands will help you know if it has been already installed or not:

$ which npm

//Example after run cmd $ which npm 
/home/Stack/.npm/versions/node/v12.18.3/bin/npm

4. If NPM is already installed on your pc, it will return:

/home/Stack/.npm/versions/node/v12.18.3/bin/npm

5. To NPM, run the command in terminal:

$ curl http://npmjs.org/install.sh | sh

Step 2: Install JDK

Java is used to build native Android apps. This means that Java Development Kit (JDK) is required for working with projects in React Native.

Install the Java Development Kit (JDK) with the following commands:

$ sudo apt-get install openjdk-8-jdk 
$ sudo apt-get update 
$ sudo add-apt-repository ppa:maarten-fonville/android-studio

Update apt System Cache

When you have successfully added the Android repository to the source list, then, you will update the apt cache of your system by executing the following command:

Step 3: Installing Android Studio

Next, install Android Studio on your system. You can install Android Studio by executing the following command:

$ sudo apt update
$ sudo apt install android-studio

The most recent Android SDK comes by default with Android Studio. But it's the Android 6.0 (Marshmallow) SDK that is required to build a React Native app with native code. You can install additional Android SDKs in Android Studio via the SDK Manager.

You can access the SDK Manager from the Android Studio Welcome screen. Click on Configure and choose SDK Manager.

Show Package Details box. Find and expand the Android 6.0(Marshmallow) entry, and then make sure you check the following items:

Google APIs
Android SDK Platform 23
Intel x86 Atom_64 System Image
Google APIs Intel x86 Atom_64 System Image

1. Run the command:

$ sudo nano $HOME/.bash_profile

In order to build application with native code, the React Native tools need some environmental variables.

2. Copy the lines below and paste them into the terminal and press enter button:

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

Save and exit the file using below commands:

Press Ctrl + O (Write out)
Then press Enter
And press Ctrl + x (exit)

Step 4: Install Autotools-dev

You first need to install Autotools-dev which is a package with several other tools, i.e. aclocal automaker, before going ahead and installing Watchman. Copy and paste in the terminal to install it:

$ sudo apt-get install autotools-dev
$ sudo apt-get install aclocal 
$ sudo apt-get install automake

In order to continue the installation, you will be asked to choose a Y/N option. Please enter Y, then press Enter.

Step 5: Install Watchman

Once the Autotools-dev is installed, proceed and install Watchman, a Facebook tool for file system surveying. If you want the best results, you must install the tool.

1 Run these commands to install Watchman:

$ git clone https://github.com/facebook/watchman.git 
$ cd watchman 
$ git checkout v4.9.0  # the latest stable release 
$ ./autogen.sh 
$ ./configure 
$ make 
$ sudo make install

Step 6: Install Flow

Flow allows you to easily add JavaScript to the static type check. It also helps to prevent bugs and makes documentation of code easier. In fact, it is already used by many React Native Documents and source code and must be installed.Use the following command to install flow:

$ wget https://github.com/facebook/flow/releases/download/v0.62.0/flow-linux64-v0.62.0.zip 
$ unzip flow-linux64-v0.62.0.zip 
$ cd flow 
$ sudo mv flow /usr/local/bin/flow

Step 7: Install React Native

1. The next step is to install React Native. It should be noted that you need to use sudo to have React Native installed as root, since we will be installing it globally. This is the code you must use:

$ sudo npm install -g react-native-cli

2. Users who installed NPM with another method can install React Native as a normal user using this code:

$ npm install -g react-native-cli

You can go ahead and start creating your own application when you're done by installing all the necessary packages!

Create a New Project

1. Start with the following command to create an app project:

$ react-native init firstapp

Start the firstapp project by executing the below code:

$ cd firstapp 
$ react-native run-android