React Native is Facebook’s open source framework for building native applications on iOS and Android. It achieves this by providing a common developer experience so that a developer learns one set of tools and can apply it to both platforms. It takes the component approach used by React and applies it to the mobile app world.

As part of our research and development work here at Black Pepper, we’ve been investigating how we can make use of React Native to write Android and iOS apps for our customers. Because we predominantly use Linux as our development environment, I ran into a few issues along the way and this guide will hopefully help others avoid the same pitfalls.

Why do we need this React Native guide?

Facebook have provided a great deal of information about React Native on github, however because it’s early days for React Native, and Facebook use OS X for development, getting up and running on Linux isn’t as straightforward as it should be. Additionally, the Android version of React Native hasn’t been publicly available for very long, so there are fewer resources available.

Approach

I’m a big fan of using Docker to isolate tools, particularly when testing out something new. It also means you can get a new development up and running in no time; simply pull down the docker images you need. So to get up and running with React Native, I followed the Getting Started guide but added everything to a Dockerfile as I went.

The Docker image is created in such a way that it will have access to a directory on the host machine for code storage, allowing you to use whichever editor or IDE you prefer, along with any other day to day tools such as git. Additionally I made use of privileged mode so that the docker container will be able to access the USB ports of the host, so the React Native app can be run on a physical device, rather than just in the emulator.

Prerequisites

You’ll need to have installed Docker and familiarised yourself with how it works if you want to try this out.
You’ll also need to have familiarised yourself with Android app development, React and React Native.

Installation

Currently the Dockerfile only exists in my personal github repo but I’m in the process of moving it to the Black Pepper repoand from there I’ll publish the image so you’ll be able to retrieve it with a simple “docker pull”.

However, for the time being you can obtain and build the image as follows:

git clone https://github.com/gilesp/docker.git
docker build -t react-native docker/react_native

There are a couple of shell script files in the repo, the most interesting ones are “react-native.sh” and “react_bash.sh” (The inconsistency in naming is one of the things I need to sort out before pushing everything to the Black Pepper repos). Add these shell scripts to your path, as follows:

ln -s path/to/dockerrepo/react_native/react-native.sh bin/react-native
ln -s path/to/dockerrepo/react_native/react_bash.sh bin/react-bash

Usage

Note: The shell scripts assume that your current working directory is where you’ll be storing the react native project and so they map them as a volume in the docker container.

Starting a new project

react-native init AwesomeProject

This will create a directory called AwesomeProject in your current working directory and populate it with the React Native app infrastructure.

Running your project

Plug in an android device to your machine via USB.

Now, start a shell in the Docker container

cd AwesomeProject
react-bash

Now we need to create a reverse tcp connection with adb, allowing the app on the phone to communicate with the nodejs server running in the container:

adb reverse tcp:8081 tcp:8081

And finally, start the server and deploy the app to your device:

react-native start > react-start.log 2>&1 &
react-native run-android

Note: The run-android command should start the server automatically but I found it to be unreliable, hence why I manually start it first.

If all goes well, then the application will launch on your device. Shake the phone to open the developer menu and turn on Reload JS. Now, whenever you make changes to the react native source code (such as editing index.android.js), the changes will instantly appear on the device.

Summary

Working with React Native under Linux turned out to be relatively painless, although there are still some issues I’d like to resolve with the docker image. The main one is that I have, so far, been unable to get the emulator to work correctly, due to issues with 64-bit support. I can run an emulator on the host machine and have react native use that (in the same way as it would use a real device via USB), but it’d be good to remove that dependency and have it entirely containerised.

Other than that though, it’s entirely feasible to develop Android apps using React Native under Linux.