Walkthrough - React Native development on Ubuntu/Elementary

steps.md

Guide for React Native development on Ubuntu/Elementary

Help to update/improve. Also if you find anything that is deprecated here or find a typo, do tell it. Thanks!

Assumptions

• This guide mainly covers steps (including and) after ejection from create-react-native-app (CRNA).
• You should know how to run your app using CRNA and Expo app from Play Store. Two issue I've faced and fixed - (1) watchers fixed permanently by echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p and (2) by using yarn over npmv5 to avoid buggy installation of CRNA projects as well as of other packages that are installed in it later.
• This guide does not cover setting up any Android emulator or using Android Studio (we will go full cli instead).

What do you need?

• ~600MB internet data
• Android phone.
• Node and npm installed with create-react-native-app globally
• Time

If something doesn't works at step x, look at step x+1 for possible solution. And if still doesn't works, ask then.

Setting up

1. Install Java with sudo apt install openjdk-8-jdk (or download zip from Oracle Java website and set its PATH manually).
2. Go to Android Studio's "Download options". Scroll to near bottom where it says "Get just the command line tools". "Download for Linux" (>=130MB) from there.
3. You can extract this zip anywhere but do make sure to extract it inside an empty folder (if after extracting directory looks like ~/android/tools/ (tools being the extracted folder) then ~/android/ must be initially empty (You'll know later why). From now we'll consider ~/android/ is where you extracted).
4. Navigate to ~/android/tools/bin/ and open a terminal there. Now use command ./sdkmanager --list. This returns a list of what is/are downloaded and what can be downloaded.
5. We'll need adb to install any compiled apk to phone. For that platform-tools is needed. A SDK is needed too. For it we will use Marshmallow 6.x (API level 23).
6. Install these by ./sdkmanager --list "platform-tools" "platforms;android-23". Accept any license agreement you encounter. You can even install Google APIs here by ./sdkmanager "add-ons;addon-google_apis-google-23" but that is optional (this Google APIs gets downloaded quickly <1MB).
7. Make a project from create-react-native-app and use command yarn eject in it. Make sure to install yarn and not use npmv5 before making project.
8. Choose React Native: I'd like a regular React Native project. for first question. Next two subsequent questions ask about name of app you want to give and project name of that app used by Android Studio. Give whatever name you like. From here-on we'll consider your project lives in ~/a-crna-app/. ~/a-crna-app/ should now be filled with two folders android/ and ios/.
9. Navigate to ~/a-crna-app/android/. You'll see a gradlew here. Use ./gradlew build here. You'll get an error of "SDK location not found. Define location with sdk.dir in the local.properties or...". We'll do what's asked here. Now being inside ~/a-crna-app/android/, use terminal and run touch local.properties. Open this local.properties with editor and write sdk.dir=~/android/. Do remember, you've extracted tools folder inside this ~/android/. Now save local.properties.
10. Rerun ./gradlew build. You may encounter another error saying that you haven't accepted license agreement. Open a new terminal, cd into ~/android/tools/bin/ and use ./sdkmanager --licenses. You'll need to do y-enter a couple of times here (maybe 4 or 5 times) to accept all remaining license agreements.
11. Android SDK tools have an issue of being 32-bits but running in x64 OS. This is fixed by sudo apt-get install libstdc++6:i386 libgcc1:i386 zlib1g:i386 libncurses5:i386. If you don't do this, gradle build step hangs at one point.
12. Now go back and and run ./gradlew build. This runs with 2 'Configuring (x/2)' steps. First step downloads Gradle (~80MB) and next step installs extras;android;m2repository from ./sdkmanager of Android. I have no idea how much data this takes (maybe 100-200MB). I'm telling about about internet data of each, so that you can wait accordingly, plus wait for its extraction from a zip.
13. If you license isn't accepted do what is said in step 10 again. If this doesn't fixes license question during gradle build, chances are you didn't had empty folder as told in step 3.
14. Everything that you have downloaded till now, you won't need to download them again in the future for any new project you create.
15. Now you may have seen instructors doing yarn run android in ~/a-crna-app/ if they have Mac. What this does internally is to start Metro Bundler to build and watch for any changes in the project and installing app using adb command. Now there are various things to do here.
    1. Adding adb to path
       • Open up ~/.bashrc or ~/.zshrc using any editor. Go to bottom and type export PATH="$PATH:/home/ajitid/android/platform-tools/".
       • If you're using Fish shell you'll need to write set PATH $PATH "/home/ajitid/codes/android/platform-tools/" in ~/.config/fish/config.fish file.
       • Ubuntu and Elementary comes with Bash as default. And ajitid is my user name in the lines above. Use yours there.
       • To make terminal know about the changes you made, you'll need to either:-
         • close terminal and open it back again.
         • source that file. If changed ~/.bashrc type in terminal source ~/.bashrc and hit enter. That terminal session now has reloaded .bashrc. You'll need to this for every terminal that you've opened and you want to use them later.
    2. ADB device recognition
       1. From your phone, go to Settings > About phone. Now scroll to bottom and find 'Build number'.
       2. Make continous taps on it (8 times) till you see "You are now a developer!". This doesn't voids warranty so don't freak out.
       3. Press back button. Third last option in Settings on stock Android will be "Developer options". If you can't find it, then there is search bar/button in Settings in most of devices now, search from it. Tap on Developer options.
       4. Scroll a bit to get to Debugging section. Enable 'USB debugging' and go back.
       5. Use USB cable to connect your phone to PC/laptop.
       6. Type adb devices in terminal. You'll see a device is "unauthorized". This is your device. If you can't see it, probably reconnecting will list your device.
       7. Look at your phone. It'll ask for "Allow USB debugging?". Check on "Always allow from this computer" and tap OK.
       8. Rerun adb devices. "unauthorized" will be replaced by "device" now.
    3. As told before, yarn run android runs "Metro Bundler". Problem is that this sometimes stops unexpectedly or runs but doesn't works. In Mac you can see it opens a new terminal for Metro Bundler but in Ubuntu it doesn't. So instead, we'll run two different commands:-
       1. yarn start to run Metro Bundler.
       2. From now on your Android device needs to be connected using USB to install and update any changes made to app.
       3. Once yarn start completes its loading of dependency graph, use yarn run android in a new terminal to install app on device. (Don't stop yarn start as it watches for changes).
       4. Do make sure to have yarn start running before issuing yarn run android.
       5. Once yarn run android completes, you'll see a green bar on top in phone telling it is loading from localhost:8081. If you want to see its loading progress you can switch to the terminal where yarn start is running.
16. You'll have successfully running Android app by now.
17. For every next CRNA you make and eject, only steps that you need to do is to make a local.properties and add sdk path to it, and issuing ./gradlew build.