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!
- This guide mainly covers steps (including and) after ejection from
- 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 -pand (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
If something doesn't works at step x, look at step x+1 for possible solution. And if still doesn't works, ask then.
- Install Java with
sudo apt install openjdk-8-jdk(or download zip from Oracle Java website and set its PATH manually).
- 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.
- You can extract this zip anywhere but do make sure to extract it inside an empty folder (if after extracting directory looks like
toolsbeing the extracted folder) then
~/android/must be initially empty (You'll know later why). From now we'll consider
~/android/is where you extracted).
- 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.
- We'll need
adbto install any compiled apk to phone. For that
platform-toolsis needed. A SDK is needed too. For it we will use Marshmallow 6.x (API level 23).
- 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).
- Make a project from
create-react-native-appand use command
yarn ejectin it. Make sure to install yarn and not use npmv5 before making project.
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/should now be filled with two folders
- Navigate to
~/a-crna-app/android/. You'll see a
./gradlew buildhere. 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.propertieswith editor and write
sdk.dir=~/android/. Do remember, you've extracted
toolsfolder inside this
~/android/. Now save
./gradlew build. You may encounter another error saying that you haven't accepted license agreement. Open a new terminal,
./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.
- 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.
- 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
./sdkmanagerof 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.
- 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.
- Everything that you have downloaded till now, you won't need to download them again in the future for any new project you create.
- Now you may have seen instructors doing
yarn run androidin
~/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
adbcommand. Now there are various things to do here.
- Open up
~/.zshrcusing any editor. Go to bottom and type
- If you're using Fish shell you'll need to write
set PATH $PATH "/home/ajitid/codes/android/platform-tools/"in
- Ubuntu and Elementary comes with Bash as default. And
ajitidis 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.
sourcethat file. If changed
~/.bashrctype in terminal
source ~/.bashrcand 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.
- Open up
- ADB device recognition
- From your phone, go to Settings > About phone. Now scroll to bottom and find 'Build number'.
- 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.
- 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.
- Scroll a bit to get to Debugging section. Enable 'USB debugging' and go back.
- Use USB cable to connect your phone to PC/laptop.
adb devicesin terminal. You'll see a device is "unauthorized". This is your device. If you can't see it, probably reconnecting will list your device.
- Look at your phone. It'll ask for "Allow USB debugging?". Check on "Always allow from this computer" and tap OK.
adb devices. "unauthorized" will be replaced by "device" now.
- As told before,
yarn run androidruns "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:-
yarn startto run Metro Bundler.
- From now on your Android device needs to be connected using USB to install and update any changes made to app.
yarn startcompletes its loading of dependency graph, use
yarn run androidin a new terminal to install app on device. (Don't stop
yarn startas it watches for changes).
- Do make sure to have
yarn startrunning before issuing
yarn run android.
yarn run androidcompletes, 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 startis running.
- You'll have successfully running Android app by now.
- For every next CRNA you make and eject, only steps that you need to do is to make a
local.propertiesand add sdk path to it, and issuing