Complete Guide to Setting up React Native CLI on Linux: Step-by-Step Tutorial

Complete Guide to Setting up React Native CLI on Linux: Step-by-Step Tutorial

A step by step process to setup React Native on your Ubuntu machine.

·

4 min read

Introduction

React Native is a JS framework built on top of React, which is used to build cross-platform mobile applications. Cross-platform mobile application means you have to write your code once in React Native and it takes care to run both on Android and IOS platforms. This makes React Native special. And learning React Native is also simple if you are already familiar with JS, React, and Web Development.

You can set up React Native either with Expo or React Native CLI. Expo is good if you want to start very quickly, but CLI is essential for more significant projects. So why not start with the CLI method from start? Yes, I know starting with React Native CLI is not an easy job compared to EXPO but believe me, if you go through this blog to complete your setup, it becomes easy for you.

This tutorial is only for Linux (Ubuntu) users [ Windows users don't follow this]

In Linux and Windows, you only can test the Android app, not the IOS app. Obviously, you can build an IOS app but not test without a MAC.

Requirements

To get started with React Native CLI in Linux we need to install some packages.

  • Nodejs

  • JDK

  • Android Studio

Now let's start installing them one by one.

Nodejs

To install Nodejs on Linux (Ubuntu), run the following command:

Click here to refer to the docs

curl -fsSL https://deb.nodesource.com/setup_19.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

Then run node -v and npm -v commands to check the version of Nodejs and NPM (Node Package Manager)

JDK

JDK stands for Java Development Kit, to run react-native on a Linux machine to run your android code you need to install JDK. To install the default JDK run the command.

sudo apt install default-jdk

Now run java -version to check the Java version.

Android Studio

We need to Install Android Studio because we need some packages (like adb) from android SDK. And also you can use virtual devices from Android Studio to test your application on Android.

sudo add-apt-repository ppa:maarten-fonville/android-studio
sudo apt update
sudo apt install android-studio

Now we need to open our Android Studio and go and click the More Actions button and then go to the SDK manager option. Then in the Android 11.0 R section, you need to check the tick marks packages and click apply. In the future, you can install the same packages for Android 12 or 13. But now Android 11R is preferable.

Then go to SDK tools in the same tab and window and mark these packages for installation and then hit apply.

Now I suggest you go and reboot your system.

Add some path variables

Now add some path variables to add the path of Android. Open your terminal and run nano ~/.bashrc then scroll down to the end of the file and add these 4 lines:

export ANDROID_SDK_ROOT=/home/udit/Android/Sdk/
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tool
export ANDROID_HOME=/home/udit/Android/Sdk/

Now press ctrl + o and then hit enter to save the file and then ctrl + x to exit from the Nano text editor. Now run source ~/.bashrc the command in the terminal to execute the changes in the.bashrc file.

Congratulations !!! Your React Native CLI is perfectly set up.

Create your first React Native Project

To create your first React Native Project go to your favorite directory and then:

npx react-native@latest init AwesomeProject

Here our project name is AwesomeProject. And yes you have perfectly set up everything.

Some Additional Resources

Follow the React Documentation -> Docs for environment setup

Also can follow this video on youtube if you are stuck in any position.

Now in this step or any step if you face any error or problem feel free to post it in the comment section or try the search in google. As a programmer, your job is to solve those errors.

Wish you the best of luck in your React Native Journey.

Did you find this article valuable?

Support Udit Kundu by becoming a sponsor. Any amount is appreciated!