How to Install and Setup React Native on Ubuntu

React is a well-known JavaScript framework for developing front-end applications. It became popular through the use of intuitive programming paradigms that tie JavaScript to an HTML-like system known as JSX. This allows developers to create their applications in a shorter time.

Initially, setting up a new React project used to involve complex multi-stage processes such as setting a build system, converting the code transpiler to a code readable by all browsers and the basic directory structure. Now, the creation of React Apps has become simple with the Create React App CLI tool that includes all JavaScript packages, code transpilers, and the testing and building systems, that you need to run a React project.

React Native is a framework that creates a JavaScript code hierarchy of UI components. It has a set of components to build a mobile app with an authentic look and feel for both iOS and Android platforms. ReactJS, by contrast, is a JavaScript open-source library for user interfaces. While they may have different interfaces, Facebook developed React Native and ReactJS using the same design principles. 

Why is REACT Native Important? 

• You can create UI for both iOS and Android platforms with React Native Framework. 
• As React Native components have counterpart rights, both Android and iOS apps 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 in this article. For successful installation, all of the steps below must be followed one after the other. 

Prerequisites

Hardware Requirements:

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:  4 GB
  

Software requirements:

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

• Android Studio  
• 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. 

1. First update the apt package manager: 

$ sudo apt-get install -y build-essential 

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 

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

/home/ijs/.nvm/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 JDK with the following commands: 

$ sudo add-apt-repository ppa:openjdk-r/ppa 
$ sudo apt-get update 
$ sudo apt-get install openjdk-8-jdk 

Step 3: Install Android Studio 

To work with React Native development, Android studio must be installed. From the website listed below we can easily download it. 

For More details on the installation process of Android SDK please click here. 

Step 4: Install Android SDK  

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.  

SDK manager -> SDK platforms 

Then check the box in the bottom right corner of the "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 apps with native code, the React Native tools need some environmental variables. 

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

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 5: 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:

 nbsp;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 6: 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. 

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 7: 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 8: Install React Native   

1. The next step is to instal 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 app(s) 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 DemoApp 

2. Setting Up an Android Device   

Only apps downloaded by the Google Play can be set up and run by default on most Android devices. To install your app during development, you need to enable USB Debugging on your device. 

You will first need to activate the Developers options menu by going to Settings — About phone —Software Information — and then tap the Build number row at the bottom seven times to activate your device's USB debugging system.  

You can then return to Developer Settings to enable "USB debugging." 

Let's start on an Android device now to run our React Native projects. Go forward to your development machine and plug in your device using USB. 

• Check the manufacturer code with lsusb: 

$ lsusb 

Output will be like: 

Bus 002 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub 
Bus 001 Device 004: ID 174f:241a Syntek  
Bus 001 Device 003: ID 0cf3:e300 Atheros Communications, Inc.  
Bus 001 Device 002: ID 06cb:0081 Synaptics, Inc.  
Bus 001 Device 010: ID 2717:ff48   
Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub

• Several devices were connected to the USB device. Our Android device is: 

Bus 001 Device 010: ID 2717:ff48   

• These 4 digits, which form part of the device ID, will be required from this line of code: 

Device ID: 2717:ff48   
first 4-digit ID: 2717 

• Next, the following code in the terminal needs to be copied and pasted: 

$ adb devices 

• Start the DemoApp project by executing the below code: 

The code on a terminal is as follows: 

$ cd DemoApp 
$ react-native run-android 

• A failed code shows that other services in the system use the default React Native port. The following code can then be tested: 

$ adb reverse tcp:8081 tcp:8081 

Uninstall React Native on Ubuntu:

1. Uninstall React Native: 

$ npm uninstall -g react-native-cli

2. Uninstall NPM modules

Removal of npm modules / third-party libraries is nearly identical to npm modules installation. The following command allows you to uninstall the third-party libraries in React Native. Substitute the package name with <name>. 

npm uninstall <name> –save 

This command removes the package from both node modules folder and package.json. You can use the following command if you want to delete the dependency in the global scale: 

npm -g uninstall <name> –save 

3. Uninstalling global packages 

Use the uninstall command with -g flag to uninstall global package in the command line. 

$ npm uninstall -g <package_name> 

For example:  

npm uninstall -g jshint 

Learn the core concepts of React Native Components, API, and Navigation with React Native Training 

Although the REACT Native Framework has some loopholes, it is still the number one choice for developers in the React Native development industry. We have successfully installed React Native on Ubuntu 18.04 server and created our first React App.