All Articles

How to Setup React Native on Ubuntu

Abstract image with React logo

You might think it will take a little bit more effort to set up React Native development environment on Ubuntu, but it is not hard and I will guide you on this task, so take a cup of coffee and follow along with me.

If you are a beginner be aware that it is not possible to set up iOS development in a native way and for that, you will need Apple’s software to compile iOS code, any other way might be considered “tweaks”, but yes it is still very good for Android development and I am sure you will like it!

In this tutorial you will learn how to set up what you need to start developing Android apps with React Native, I will guide you through the installation of all dependencies and how to set up an emulator as well as running your development environment via USB!

Install NodeJS, JDK and other dependencies

cURL

Make sure you have cURL installed:

$ sudo apt-get install curl

Installing NodeJS on Ubuntu

Now that you have cURL let’s install NodeJS:

$ curl -sL https://deb.nodesource.com/setup_10.x | sudo bash -
$ sudo apt install nodejs

Note that we pass the node version on “setup_10.x”, change the version here if you want, you can also follow NodeJS’s official docs here

Installing React Native CLI

Now we need to install the React Native’s CLI:

$ sudo npm install -g react-native-cli

Installing JDK

Now let’s install the JDK (Java Development Kit) as you might know, native Android apps are built with Java, so it is required. It is really important that you install version 8, do not update it:

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

// Check java version on your terminal

$ java -version

// The output should look like this:

// openjdk version "1.8.0_222"
// OpenJDK Runtime Environment (build 1.8.0_222-8u222-b10-1ubuntu1~19.04.1-b10)
// OpenJDK 64-Bit Server VM (build 25.222-b10, mixed mode)

Graphic dependencies

These dependencies come helpful if not needed when you want to emulate a project.

$ sudo apt-get install gcc-multilib lib32z1 lib32stdc++6

Install and setup Android SDK

Now you need to create a directory on your system, take note of the path because you are going to need it e.g. ~/Android/Sdk to set some environment variables on your system.

Download Android Studio’s command-line tools here, when you are done extract the content in the directory you just created. Find one of these files on your system: ~/.bash_profile, ~/.profile, ~/.zshrc ou ~/.bashrc and add 3 lines at the start:

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

If you do not have any of these files, create the ~/.bash_profile and add these lines.

Now open up the terminal and install it, accept all licenses by typing y:

$ ~/Android/Sdk/tools/bin/sdkmanager "platform-tools" "platforms;android-27" "build-tools;27.0.3"

To check that everything is working so far enter the following command on your terminal:

$ adb devices

// Expected output:

// * daemon not running; starting now at tcp:5037
// * daemon started successfully
// List of devices attached

Now you have everything you need to start developing with React Native, if you know how to connect a device or use an emulator you just need to type adb devices to list your devices and if you have any device ID listed with this command you ready to go and if you are not, just follow along. 🚀

Install and setup Genymotion emulator

Genymotion has a free personal emulator with comes out with great performance if you prefer you can also download Android Studio, it comes with a great emulator as well you could try both and check which works best for you but here I will show how to setup Ganymotion because the Android Studio emulator is a bit easier to setup.

Installing VirtualBox

First Genymotion needs VirtualBox to emulate your amazing apps:

$ sudo apt-get install virtualbox

Now download the Genymotion’s personal edition here it will ask you to sign up.

Now create a directory and extract the .bin file on it, open the terminal in the same directory and use the following command:

$ chmod +x genymotion-2.2.2_x64.bin
$ ./genymotion-2.2.2_x64.bin

Here you might want to change the version to the version you downloaded, change the 2.2.2 to the corresponding version you just downloaded.

Now you are done, you just need to setup Genymotion, open it by double-clicking or use the command:

$ ./genymotion

With Genymotion openned go to Preferences > Settings > Account and login to your account.

After you are done while in Settings on ADB tab set up the path for your SDK, select Use custom Android SDK tools and browse to its location, here we used ~/Android/Sdk.

Now close this window and you are ready to add a device, select one of the devices you see on your screen and click Add, try to use the most updated Android version, select your options and click Next and give it a name.

You will now see on My installed devices section, the device you have just installed you can double-click it and if you see any error I can recommend you to open VirtualBox manually since Genymotion will need it.

Connect the emulator to the ADB

Now all you have to do is to connect the emulator to the ADB on the emulator window title you will be able to see an IP address use it to connect the emulator to your ADB with the following command:

$ adb connect IP_ADRESS:5555

Now check if you have succeeded:

$ adb devices

If you see any ID listed it means you can start having fun with React Native.

Test Genymotion with a new project

Let’s use React Native CLI to create a new project:

$ sudo react-native init AmazingApp

Now cd to the created directory:

$ cd AmazingApp

On the project directory, run:

$ react-native run-android

Now open the project directory with your code editor and have fun!

Emulate via USB

First, you will need to plug your smartphone via USB, it will ask you some permissions, just press yes.

You will need to activate developer mode on your device, I will show you some pictures of how I did it on mine, some versions might be a bit different, but it will be very similar:

  1. First, go on Settings > About device.
  2. Then Software info.
  3. Press Build number multiple times until you see the message “Developer mode has been turned on”.

How to setup android developer mode, step 1.

After you have it done, you will see a new menu called “Developer options”, find it and follow the next steps:

  1. Click on “Developer options”.
  2. There will be an “On” switcher, turn it on.
  3. If you look below you will also see a “Debugging” section and bellow it “USB debugging” switcher, you also need to turn it on.

How to setup android developer mode, step 2.

With all set, open your terminal and use the adb devices command.

List of devices attached
14ed2fcc device

You should see your device listed as above, just like you did with the emulator, if you see it, just run react-native run-android command inside a React Native project and you are a done, debugging via USB is the best and most performative option we have, I really recommend you develop debugging via USB, now just have fun! 🚀

If there is any doubt, let me know in the comments below!