Setting up the development environment for React-Native CLI in Linux

6 min readMay 21, 2021

Setting up the development environment for React-Native CLI in Linux

These steps will only be working for react-native-cli, if you want to set up for expo-cli then check my other article on medium.

Here, I’m using Ubuntu 20.04 LTS version, but if you’re using any other Debian-based distros, things will be more or less the same. So, when I was setting up my own system I found that there are not a lot of articles or docs out there to set up react-native-cli on a Linux system if also exists then after few steps I’d switch up to some other resources for getting my job done. So, at that time I thought that I need to document these things for future Linux users who want to learn react-native or build their own project.

Here, I’ll also show you the steps for downloading Android Studio if you want. Relax, it’s not mandatory you can still run your app on your physical device.

Take a cup of coffee with you, and let’s get straight into this!

First thing first

Update your system

You always need to update your existing packages before proceeding ahead.

sudo apt -y update

Node.js or Node will be the underlying engine React Native development.

Node also comes with npm, which lets you install the React Native command-line interface and other npm packages that you will need later when you are developing with React Native.

Here we’ll be installing NVM(Node Version Manager) because it is flexible and at any point, you could upgrade or downgrade your node version. So for that,

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh

Again run the command but this time append | bash at the end.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

This will install the nvm script to your user account. To use it, you must first source your .bashrc file:

source ~/.bashrc

Now, you can ask NVM which versions of Node are available:

nvm list-remote

Always, install the LTS version, you can check that by going to the official site of Node, https://nodejs.org/en/.

At the time when I’m writing this article, the current LTS version is 14.17.0.

So run this command on your terminal,

nvm install v14.17.0

You can verify that the install was successful using the same technique from the other sections, by typing:

node -v

You’ll get an output like this:

Output
v14.17.0

Java Development Kit (JDK)

The Next Step is to set up JDK, React Native requires at least version 8 of the Java SE Development Kit (JDK). You may download and install OpenJDK from AdoptOpenJDK or your system packager. You may also download and install Oracle JDK 14 if desired.

jdk-8u202-linux-x64.tar.gz for Linux x64

You have to check the Accept License Agreement radio button first before you can download.

Copy and Extract JDK files

Go to the directory where you downloaded the file, for example, ~/Downloads

cd ~/Downloads

Copy to the new directory that you have created previously and the change directory.

sudo cp -r jdk-8u202-linux-x64.tar.gz /usr/local/java
cd usr/local/java

Extract the files.

sudo tar xvzf jdk-8u202-linux-x64.tar.gz

There is now a jdk1.8.0_202 folder.

Update PATH file for JDK

You can use any text editor like nano to edit /etc/profile.

sudo nano /etc/profile

In the text editor, paste the text below; exit and save.

JAVA_HOME=/usr/local/java/jdk1.8.0_202
PATH=$PATH:$HOME/bin:$JAVA_HOME/bin
export JAVA_HOME
export PATH

Tell the system about the new Oracle Java version

sudo update-alternatives --install "/usr/bin/java" "java" "/usr/local/java/jdk1.8.0_202/bin/java" 1
sudo update-alternatives --install "/usr/bin/javac" "javac" "/usr/local/java/jdk1.8.0_202/bin/javac" 1
sudo update-alternatives --install "/usr/bin/javaws.itweb" "javaws.itweb" "/usr/local/java/jdk1.8.0_202/bin/javaws.itweb" 1

Make Oracle Java JDK as default

sudo update-alternatives --set java /usr/local/java/jdk1.8.0_202/bin/java
sudo update-alternatives --set javac /usr/local/java/jdk1.8.0_202/bin/javac
sudo update-alternatives --set javaws.itweb /usr/local/java/jdk1.8.0_202/bin/javaws.itweb

Reload system-wide PATH

source /etc/profile

Restart your Machine

Restart for the installation to take effect

Check Java JDK version

java -version

You’ll get an output like this:

java version "1.8.0_281"
Java(TM) SE Runtime Environment (build 1.8.0_281-b09)
Java HotSpot(TM) 64-Bit Server VM (build 25.281-b09, mixed mode)

Now, we’ve set up our JDK path, the next step is to install the React-Native CLI.

sudo npm install -g react-native-cli

Installing Android Studio from Ubuntu Store

You can directly, install it from the Ubuntu store, it will be pretty straightforward. But as I promise to show you the steps by not installing it, especially when you don’t have a good system.

Android SDK instead of Android Studio

We are not installing Android Studio. Fortunately, there’s a way of doing it just by downloading the Android SDK. From their official website,

https://developer.android.com/studio

We will download the Linux version of the SDK tool package

Unzip the Android SDK files

Go to the directory where you downloaded the file, for example, ~/Downloads

cd ~/Downloads

Unzip the files to /opt/android, which will eventually be your ANDROID_HOME

unzip sdk-tools-linux-7302050.zip -d /opt/android

Configure the ANDROID_HOME environment variable

Change to your home directory.
Open .bashrc with a text editor. Again, you can use nano.

cd ~
nano .bashrc

Add the following lines to your .bashrc

export ANDROID_HOME=/opt/android 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

Load the config above into the current shell

source .bashrc

Use sdkmanager to list Android SDK packages

First, list available packages

sudo /opt/android/tools/bin/sdkmanager --list

As of today, these are the latest packages that need to be installed. You might need to change this to the latest version available:

platform-tools
platforms;android-30
build-tools;31.0.2
add-ons;addon-google_apis-google-27

Use SDK manager to install Android SDK packages

sudo /opt/android/tools/bin/sdkmanager "platform-tools" "platforms;android-30" "build-tools;30.0.3" "add-ons;addon-google_apis-google-30"

You will be asked for confirmation, type “y” then enter

Setting up physical Android Device (your phone)

Enable debugging over USB

Go to Settings > About phone
Tap Build number row seven (7) times
Go to Settings > Developer options
Enable USB debugging

Plugin your device via USB

Plugin your device via USB to your development machine. And make sure your phone is in file sharing mode not charging mode.

Now check that your device is properly connecting to ADB, the Android Debug Bridge, by running adb devices.

adb devices

Initiate a React Native Project

Creating a new application

react-native init exampleProject

Change directory and start the development server

cd exampleProject
react-native start

Run your app

Open another terminal and type

react-native run-android

Cheers, your app should be running on your phone now.

You can also install simulator like scrcpy, which is much lighter than Android Studio’s emulator

If you follow all the steps properly I don’t think you will face any difficulties to run the react-native app on your local machine. Still, if you have any problems feel to reach out to me or post a comment so, that I can get back to you.