Setting up Android development / React Native under Linux

This is a step by step guide to get React Native working under linux. Mostly written to make it easier for myself to repeat the steps.

Installation

The following assumes that ~/local/bin is in the path, and that you sources ~/local/env.sh in your .bashrc or similar.

Android dev environment

Install dependencies, and setup kvm support for faster emulation

sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386 && 
sudo apt-get install qemu-kvm libvirt-bin ubuntu-vm-builder bridge-utils &&
sudo adduser `id -un` libvirtd && 
sudo adduser `id -un` kvm

Install android-sdk

cd ~/local &&
curl https://dl.google.com/android/android-sdk_r24.4.1-linux.tgz | tar xzv &&
cat ~/local/env.sh | grep -v android-sdk-linux > /tmp/env-tmp.sh &&
echo 'export ANDROID_HOME=~/local/android-sdk-linux ' >> /tmp/env-tmp.sh &&
echo 'export PATH=${PATH}:~/local/android-sdk-linux/tools:~/local/android-sdk-linux/platform-tools' >> /tmp/env-tmp.sh &&
mv /tmp/env-tmp.sh ~/local/env.sh && source ~/local/env.sh &&
android avd

Run android avd, and install the following for compatibility with react-native init ... (depended on versions can be seen in android/app/build.gradle in initialised project).

Watchman

Needed by react-native:

sudo apt-get install automake python-dev &&
install -d ~/tmp &&
cd ~/tmp &&
rm -rf watchman &&
git clone https://github.com/facebook/watchman.git &&
cd watchman &&
git checkout v4.7.0 &&
./autogen.sh &&
./configure --prefix=$HOME/local/ &&
make &&
make install &&
rm -rf ~/tmp/watchman

React Native CLI

npm install -g react-native-cli

Done

Check that it works:

android avd &

Create and start an emulator.

Try out default react-native app

cd ~/tmp &&
react-native init hello &&
cd ~/tmp/hello &&
git init &&
sudo sh -c "echo 1000000 > /proc/sys/fs/inotify/max_user_watches" &&
sudo sh -c "echo 1000 > /proc/sys/fs/inotify/max_user_instances" &&
react-native run-android &&
react-native start

When react-native start has loaded/started, reload on device. (it takes a while…)

Try out snowflake starter app

cd ~/tmp &&
rm -rf snowflake &&
git clone https://github.com/bartonhammond/snowflake.git &&
cd snowflake &&
npm install &&
npm install --save regenerator-runtime &&
cp src/lib/config.example.js src/lib/config.js  &&
sudo sh -c "echo 1000000 > /proc/sys/fs/inotify/max_user_watches" &&
sudo sh -c "echo 1000 > /proc/sys/fs/inotify/max_user_instances" &&
react-native run-android &&
react-native start

When react-native start has loaded/started, reload on device. (it takes a while…)

Try out with CLJS/figwheel

npm install -g re-natal &&
cd ~/tmp &&
re-natal init Hi -i reagent6 &&
cd hi &&
react-native run-android &&
re-natal use-figwheel &&
lein figwheel android

and

cd ~tmp/hi &&
npm start --nonPersistent

Conclusion

It works well, but feels a bit bloated. It takes minutes to start up, and it requires gigabytes of disk (primarily under node_modules for the applications).

android-sdk: 2.4GB
react-native init: 2.9GB
re-natal: 2.8GB
snowflake: 3.1GB

To my surprise hot-loading did not seem to be running out of the box in either of the JavaScript templates. This just works™ with figwheel/cljs.