Setting up React Native development on Linux without installing Android Studio

I was primarily a web developer where I was very much into React. I only started to look at mobile development when React Native was available for Android.

I installed Android Studio as the prerequisite for React Native development for Android, and was surprised of how heavy and sluggish it felt. I found out later that you don’t need to launch Android Studio for React Native development, so I tried to find a way to not install it at all.

And as Marie Kondo said, if it doesn’t spark joy…

I just installed Fedora 29 on my laptop. I was using Ubuntu 18.04 before and it was giving me all sort of problems. As I’m setting my Fedora for React Native development, I figure I’ll share the steps. I hope you find it useful.

For Ubuntu and other Debian-based, the steps should be the same, you need to change thing up a bit though, like using apt-get instead of dnf for package installation.

First thing first

Update Fedora

You’ll always want to update existing packages before proceeding.

sudo dnf -y update

Git

Install git

You don’t have to install git to start developing with React Native. But I supposed you’ll want to use some for of version control for your codes eventually.

sudo dnf -y install git

Git Version

Once installed, you can check the git version.

git --version

Set up git user

Then set up the user for git.
You’ll want to change sampleuser and sampleuser@example.com to your actual user name and email address.

git config --global user.name "sampleuser"
git config --global user.email "sampleuser@example.com"

Node.js

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.

Install development tools

To build native add-ons

sudo dnf install -y gcc-c++ make

Download Node.js

As of writing, the stable release for Node.js is version 10.15.0
Official Node.js binary distributions are provided by NodeSource.

curl -sL https://rpm.nodesource.com/setup_10.x | bash -

Install Node.js

sudo dnf install nodejs

Node.js Version

Once installed, you can check the Node.js and npm version

node -v
npm -v

React Native

Install React Native CLI

This will be used to initiate a React Native development project

npm install -g react-native-cli

Java Development Kit (JDK)

React Native requires a recent version of the Java SE Development Kit (JDK).
Download and install Oracle JDK 8 if needed.

Create a directory for JDK

sudo mkdir -p /usr/local/java

Download JDK

Go to Oracle JDK 8 website. Download the latest JDK for your OS.
As of writing, the latest is Java SE Development Kit 8u202:

• 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

Not installing this

Android SDK instead Android Studio

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

Download Android SDK

Go to Android Studio website. Scroll down to Command line tools only near the bottom of the page. Download the SDK tools package for your platform. As of writing, the current file is:

• sdk-tools-linux-4333796.zip for Linux

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, that will eventually be your ANDROID_HOME

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

Configure the ANDROID_HOME environment variable

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

cd ~
nano .bash_profile

Add the following lines to your .bash_profile

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 .bash_profile

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-28
• build-tools;28.0.3
• add-ons;addon-google_apis-google-24

Use sdkmanager to install Android SDK packages

sudo /opt/android/tools/bin/sdkmanager "platform-tools" "platforms;android-28" "build-tools;28.0.3" "add-ons;addon-google_apis-google-24"

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

Setting up physical Android Device (your phone)

Enable debugging over USB

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

Plug in your device via USB

Plug in your device via USB to your development machine.

Check the manufacturer code by using lsusb

lsbub

The output lines represent the USB devices currently connected to your machine. Find teh line wich has your phone model. For example:

Bus 001 Device 003: ID 22b8:2e76 Motorola PCS

Get the first four digits from the device ID. From the example above, the number is:

22b8

Input the number into your udev rules

Make sure that you replace 22b8 with the identifier you get in the command below:

echo 'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"' | sudo tee /etc/udev/rules.d/51-android-usb.rules

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

Now you are ready.
Use react-native-cli that you have installed earlier.

react-native init yourproject

Change directory and start the development server

cd yourproject
react-native start

Run your app

react-native run-android

Your app should be running on your phone now.

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

I hope everything turns out well. Post a comment if you need any help.