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 distribution is on its another LTS (Long Term Support) version named Bionic Beaver. So, how to install React Native on Ubuntu?
You 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.
1. Install Nodejs
So curl the latest Node.js package and install the latest version of Node.js on our system using the below commands.
curl -sL https://deb.nodesource.com/setup_9.x | sudo -E bash - sudo apt-get install -y nodejs
2. 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 [email protected] -g
3. Install JDK
Native Android apps are build 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.
So install the JDK using commands below.
sudo add-apt-repository ppa:openjdk-r/ppa sudo apt-get update sudo apt-get install openjdk-8-jdk
4. 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.
5. Install 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 6.0 (Marshmallow) entry, then 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.
Copy the following lines
export ANDROID_HOME=$HOME/Android/Sdk export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/platform-tools
Paste the copied code on the terminal screen and save the file using below commands.
Press Ctrl + O (Write out)
Then press Enter
And press Ctrl + x (exit)
6. Install Watchman
A Watchman is a tool used to watch files and record when they change. It is essential where you 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
7. Install React Native CLI
You can easily install react-native CLI using NPM.
sudo npm install -g react-native-cli
8. Create a new application using React Native
Using react native CLI, we can create a new React Native project.
react-native init AwesomeProject
9. Choosing the Code Editor
You can choose your own favorite code editor for editing your project. But in my case, I choose Visual studio Code(VS code).
From the above link, you can download VS code .deb file compatible with Ubuntu/Debian.
10. Start Editing
After installing VS code, direct to your 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 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)
11. Running the Application on Our Android Device
Now you need to run the project on your Android phone(It is recommended you to use Android 6.0 and devices, but lower versions are also compatible).
On our mobile device,
Go to Settings->About
You can see a Build Version menu there. Continually click the option until it enables the Developer options
Now, return to Settings. You can see the Developer options menu there. Enable it. Also, enable the USB debugging option in it.
Connect your mobile device with your Ubuntu system using the USB port. Type the below command to check whether your mobile device is connected or not.
Now, From the VS studio terminal, run
So in this tutorial, we learned the steps to install React Native on Ubuntu 18.0.1. These steps are compatible with any versions of Ubuntu.