2016-11-16 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).
- android 6.0 / sdk platform
- tools / build-tool 23.0.1
- extras / android support repository
- an emulator
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.