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
- Install and setup Android SDK
- Install and setup Genymotion emulator
- Emulate via USB
Make sure you have cURL installed:
$ sudo apt-get install curl
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
Now we need to install the React Native’s CLI:
$ sudo npm install -g react-native-cli
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)
These dependencies come helpful if not needed when you want to emulate a project.
$ sudo apt-get install gcc-multilib lib32z1 lib32stdc++6
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:
~/.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_profileand add these lines.
Now open up the terminal and install it, accept all licenses by typing
$ ~/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. 🚀
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.
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.2to 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:
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
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.
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.
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!
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:
- First, go on Settings > About device.
- Then Software info.
- Press Build number multiple times until you see the message “Developer mode has been turned on”.
After you have it done, you will see a new menu called “Developer options”, find it and follow the next steps:
- Click on “Developer options”.
- There will be an “On” switcher, turn it on.
- If you look below you will also see a “Debugging” section and bellow it “USB debugging” switcher, you also need to turn it on.
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!