Fullstacking: Setting up React Native
Tags: reactnative, android
Published: 2019-08-28 14:05:43

This time we'll be [setting up the environment to develop for React Native](https://facebook.github.io/react-native/docs/getting-started). 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/](https://nodejs.org/en/download/package-manager/)

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

**[Download](https://jdk.java.net/12/) & [Install](https://openjdk.java.net/install/index.html) [OpenJDK](https://openjdk.java.net/)**
`tar -zxvf openjdk...tar.gz`

**Download & Install [Android Studio](https://developer.android.com/studio/index.html)**
`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](https://stackoverflow.com/a/42742218) 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](https://facebook.github.io/watchman/docs/install.html#buildinstall) 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 Manager`by 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](https://i.imgur.com/YO0ZvwQ.png)

**But if your computer almost explodes as mine, try running it directly into your Android smartphone**
[Enable](https://facebook.github.io/react-native/docs/running-on-device) `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](https://pbs.twimg.com/media/EDD7ycNW4AAmjE1?format=jpg&name=large), 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.