Setting up React Native Android on Ubuntu 16.04

Install Nodejs

$ sudo apt-get update
$ sudo apt-get install build-essential libssl-dev

The version number of nvm may be different, but in general, you can download it with curl:

$ curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh -o install_nvm.sh
$ nano install_nvm.sh
$ bash install_nvm.sh
$ source ~/.profile
$ nvm ls-remote //To find out the versions of Node.js that are available for installation
$ nvm install 6.0.0

References: DigitalOcean

Install Java JDK

$ sudo apt-get install default-jdk

References: DigitalOcean

Install the React Native command line interface

$ npm install -g react-native-cli

Install Android Development Environment

Download and Install Android Studio
If you are running a 64-bit version of Ubuntu, you need to install some 32-bit libraries with the following command:

$ sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386

To install Android Studio on Linux, proceed as follows:

1. Unpack the .zip file you downloaded to an appropriate location for your applications, such as within /usr/local/ for your user profile, or /opt/ for shared users.
2. To launch Android Studio, open a terminal , navigate to the android-studio/bin/ directory, and execute studio.sh.
3. Select whether you want to import previous Android Studio settings or not, then click OK.
4. The Android Studio Setup Wizard guides you though the rest of the setup, which includes downloading Android SDK components that are required for development.

References: android.com

Install the AVD
Choose Custom installation when running Android Studio for the first time. Make sure the boxes next to all of the following are checked:

• Android SDK
• Android SDK Platform
• Android Virtual Device

Click “Next” to install all of these components, then configure VM acceleration on your system.

Configuring VM acceleration on Linux
To check whether you have KVM installed, you can install the cpu-checker package containing the kvm-ok command. After, you can enter:

$ sudo apt-get install cpu-checker //If you haven't installed it.
$ egrep –c '(vmx|svm)' /proc/cpuinfo
12
$ kvm-ok
INFO: /dev/kvm exists
KVM acceleration can be used

If KVM is missing or to ensure you have the latest KVM installed, enter the following command line to install it:

$ sudo apt-get install qemu-kvm libvirt-bin ubuntu-vm-builder bridge-utils

References: android.com ubuntu.com

Install the Android 6.0 (Marshmallow) SDK
Android Studio installs the most recent Android SDK by default.
React Native, however, requires the Android 6.0 (Marshmallow) SDK. To install it, launch the SDK Manager , click on “Configure” in the “Welcome to Android Studio” screen.
Select “SDK Platforms” from within the SDK Manager, then check the box next to “Show Package Details”. 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 System Image
• Intel x86 Atom_64 System Image
• Google APIs Intel x86 Atom_64 System Image

Next, select “SDK Tools” and check the box next to “Show Package Details” here as well. Look for and expand the “Android SDK Build Tools” entry, then make sure that Android SDK Build-Tools 23.0.1 is selected.
Finally, click “Apply” to download and install the Android SDK and related build tools.

Set up the ANDROID_HOME environment variable
The React Native command line interface requires the ANDROID_HOME environment variable to be set up.
Add the following lines to your ~/.bashrc (or equivalent) config file:

export ANDROID_HOME=${HOME}/Android/Sdk 
export PATH=${PATH}:${ANDROID_HOME}/tools 
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

Watchman

Watchman is a tool by Facebook for watching changes in the filesystem.
# Checkout, compile & install:

$ git clone https://github.com/facebook/watchman.git
$ cd watchman/
$ git checkout v4.7.0
$ sudo apt-get install -y autoconf automake build-essential python-dev
$ ./autogen.sh 
$ ./configure 
$ make
$ sudo make install

$ watchman --version

# Raise inotify limit

$ echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_user_watches && 
  echo 999999 | sudo tee -a  /proc/sys/fs/inotify/max_queued_events && 
  echo 999999 | sudo tee  -a /proc/sys/fs/inotify/max_user_instances && 
  watchman  shutdown-server

Starting the Android Virtual Device

You can see the list of available AVDs by opening the “AVD Manager” from running the following command in a terminal :

$ android avd

Once in the “AVD Manager”, select your AVD and click “Start…”.

Please have a look at Android Studio User Guide to create a new AVD if needed.

Testing your React Native Installation

$ react-native init AwesomeApp
$ cd AwesomeApp 
$ react-native run-android

You might see the red screen below because you haven’t started your app yet.

You just need to start your app.

$ react-native start

Press the R key twice or select Reload from the Developer Menu (press Ctrl + m to show Developer Menu) to see your app running in your Android emulator.

Modifying your app

Now that you have successfully run the app, let’s modify it.

• Open index.android.js in your text editor of choice and edit some lines.
• Press the R key twice or select Reload from the Developer Menu to see your change!

That’s it

Congratulations! You’ve successfully run and modified a React Native app.