How to Install and Setup React Native on Ubuntu

React Native framework is getting more attention from developers who want to build cross-platform mobile applications (Android/ios). Ubuntu, one of the most popular Linux distributions is on its another LTS (Long Term Support) version named Bionic Beaver. So, how to install React Native on Ubuntu?

We can start working with a React Native project with two methods. Using React Native CLI and using Expo CLI.

If we are new to mobile development, the easiest way to get started is with Expo CLI. If we are already familiar with mobile development, you may want to use React Native CLI.

Here we are setting up a React Native project with React Native CLI. It requires Android studio to be installed on our system.

We can find an installation tutorial on the official React Native page. But I faced some issues when following it and some of the steps are a little bit confusing. This is the reason behind the making of this tutorial.

Install and Setup React Native on Ubuntu

So let’s start the steps to install React Native on our Ubuntu system.

Prerequisites

To continue with this article, the reader must know the basics of working with the Terminal in an Ubuntu system.

What we will learn?

Here in this article, we will learn the following things:-

• Install Node.js, NPM and JDK
• Installing Android Studio
• Setting up Android SDK
• Configure ANDROID_HOME environment variable
• Install Watchman
• Install React Native CLI
• Creating a new React Native application
• Choosing the code editor and start editing our app
• Running the application on an Android device

Install Nodejs

Since React Native is a framework of JavaScript, it requires to have Nodejs(A JavaScript runtime) installed.

So curl the latest Node.js package and install the stable version of Node.js on our system using the below commands.

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

Install NPM

NPM will be installed with the Nodejs installation itself. However, we can install the latest version for NPM using the command below.

sudo npm install npm@latest -g

Install JDK

Native Android apps are built using Java. So Java Development Kit(JDK) is required to work with React Native projects. Actually, when building an app using React Native, it converts the JSX code to Java.

To install the JDK using the commands below.

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

Install Android Studio

Android studio needs to be installed for working with React Native development. We can easily download it from the official website that I have given below.

https://developer.android.com/studio/index.html

Setting up Android SDK

Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 6.0 (Marshmallow) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.

The SDK Manager can be accessed from the Welcome to Android Studio screen. Click on Configure, then select SDK Manager.

SDK manager -> SDK platforms

Then check the box next to “Show Package Details” in the bottom right corner. Look for and expand the Android 11.0 (R) entry, and make sure the following items are all checked:

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

Configure ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order to build apps with native code.

First copy the lines,

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

Now create a file .bash_profile inside the home directory with the below command.

sudo nano $HOME/.bash_profile

Paste the copied code on the terminal screen and save the file using the below commands.

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

Install Watchman

A Watchman is a tool used to watch files and record when they change. It is essential where we need Live reloading of apps when code changes.

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

Install React Native CLI

We need to install React Native Command Line Interface(CLI) for creating and dealing with React Native projects. We can easily install react-native CLI using NPM.

Execute the below commands to install React Native CLI.

sudo npm install -g react-native-cli

Create a new application using React Native

Using react native CLI, we can create a new React Native project. Here AwesomeProject is the project name.

react-native init AwesomeProject

Choosing the Code Editor

We can choose our own favorite code editor for editing the project. But in my case, I choose Visual studio Code(VS code).

https://code.visualstudio.com/#alt-downloads

From the above link, we can download VS code .deb file compatible with Ubuntu/Debian.

Start Editing

After installing VS code, direct to the project folder and open the project using it. The below commands will do this.

cd AwesomeProject
code .

From now on, we can use VS code Terminal instead of the native Ubuntu Terminal. Because we can use the Terminal without going out of our code editor.
(Go to View -> Integrated Terminal from VS code’s top menubar)

Running the Application On an Android Device

Now we need to run the project on our Android phone(It is recommended to use Android 11.0 and higher devices, but lower versions are also compatible).

On our mobile device,

Go to Settings->About

We can see a Build Version menu there. Continually click the option until it enables the Developer options

Now, return to Settings. We can see the Developer options menu there. Enable it. Also, enable the USB debugging option in it.

Connect our mobile device with the Ubuntu system using the USB port. Type the below command to check whether our mobile device is connected or not.

On our Terminal, execute the command below. This will show up the devices connected with our system.

adb devices

Now, From the VS studio terminal, run the below command to run the app.

react-native run-android

Summary

So in this tutorial, we learned the steps to install React Native on Ubuntu 18.0.1. These steps are compatible with any version of Ubuntu.