This time we'll be setting up the environment to develop for React Native. At first, I was going to use expo - a tool that uses wifi to reproduce changes on the app directly into the smartphone - however I figured out I'll need to develop when no wireless network is avaliable as well, so we'll go on the "hard" path. I'm using Ubuntu 18.04 with Node 10.16.2 and npm 6.10.3

React Native

Install Node 8.3 or Newer https://nodejs.org/en/download/package-manager/

Install React Native CLI npm install -g react-native-cli

Download & Install OpenJDK tar -zxvf openjdk...tar.gz

Download & Install Android Studio tar -zxvf android...tar.gz cd android-studio cd bin ./studio.sh check Android SDK, Android SDK Platform and Android Virtual Device install them

If you happen to encounter an error with required packages, finish the failed installation, go to Settings -> Appearance & Behavior -> System Settings -> Updates and change the Update Channel to Canary Channel.

Install AndroidSDK Settings -> Appearance & Behavior -> System Settings -> AndroidSDK check Show Package Details and expand Android 9 (Pie) check Android SDK Platform 28 check Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image select SDK Tools tab, Show Package Details and check 28.0.03 Click Apply and install

Configure the ANDROID_HOME environment variable Add the following lines in the $HOME/.bashrc_profile file export ANDROID_HOME=$HOME/Android/Sdk 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 (If you're using another shell like zsh, you'll have to add them to it's profile file like ~/.zshrc) run echo $PATH and check if $ANDROID_HOME is there

Install WatchMan git clone https://github.com/facebook/watchman.git cd watchman git checkout v4.9.0 # the latest stable release ./autogen.sh ./configure make sudo make install

You may need to Install libtoolize: sudo apt install libtool Install automake (aclocal) sudo apt install automake Install pkg-config sudo apt install pkg-config Add export M4=/usr/bin/m4 as was done with ANDROID_HOME

Create new React Native app react-native init AwesomeProject

Run Virtual Android Device Open Android Studio (studio.sh) then open /AwesomeProject/android project folder Open AVD Managerby clicking on its icon Select Create Virtual Device..., then pick any Phone from the list and click Next, then select the Pie API Level 28 image. Finish it and press the green trianle button

Run react-nactive project in the emulated device Open erminal and run react-native start Open another terminal and inside the project folder, run react-native run-android

Android Studio printscreen

But if your computer almost explodes as mine, try running it directly into your Android smartphone Enable Debuggin USB in your smartphone Find your device after running lsusb Get the 4 first digits from its ID (ex. 22b8) echo 'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"' | sudo tee /etc/udev/rules.d/51-android-usb.rules (don't forget to change 22b8 in the line above) Check if your device appears on adb devices react-native start react-native run-android

Now your application should appear in your smartphone. You may turn on Live Reloading by adb -s <device name> reverse tcp:8081 tcp:8081 with device name being in adb devices

If you get an error while Reloading like this, try running the following commands adb reverse tcp:8081 tcp:8081 adb -d reverse tcp:8081 tcp:8081 adb -e reverse tcp:8081 tcp:8081

Now we can are ready to work on React Native. However, we still have to set up NodeJS and KoaJS.