Ubuntu Guide: Configuring Android Studio Emulator for React Native/Expo
When looking to set up a react native/expo development environment, most of the tutorials assume you are using Mac or Windows. The information that focuses on setting up an environment for ubuntu is scant and even when you find one, there are missing gaps.
So, after cobbling together information and setting up an environment that has been smooth so far in letting me work on react native apps with expo I wanted to document some of the steps, for future reference and also to help others who may be in the same boat.
You don't have to install android studio and configure and android emulator to work on react native apps with expo, you can initialize an app using expo and then scan the qr code and preview the app using expo go on your phone.
Step 1: install watchman
The first step on the expo docs is to compile watchman from source, this can be a bit daunting for a newbie, you can skip all that and install watchman using the command sudo apt install watchman it works well enough with the only downside being that you may not have the most up to date version of watchman. If security and having the latest version is key, then you can expend the extra effort to compile it from source from their GitHub page. Watchman's core purpose is to watch for file changes and perform predefined actions when the file changes, my guess is that expo uses this dependency to know when you have edited the react native source code of your app and it can reload the emulator to reflect the changes.
Step 2: installing Java SE Development Kit
You'd think installing Java in Ubuntu would be as straightforward as installing node or python, however there are many ways of installing Java on Ubuntu, and this is due to several factors, including the presence of different Java implementations and versions, various package management systems, and the needs of different user communities.
Its easy to get confused as you consult different sources and each has a different method. I detail here the process I took to install Java, you may follow a different process or even have Java already in your system.
To install Java, first ensure all packages are updated to latest stable versions
sudo apt update && sudo apt upgrade
Grab the JDK 17 binary from AdoptOpen which provides high-quality vendor-neutral Java binaries
wget https://github.com/adoptium/temurin17-binaries/releases/download/jdk-17.0.7%2B7/OpenJDK17U-jdk_x64_linux_hotspot_17.0.7_7.tar.gz
Extract the archive while in the directory where it was downloaded
tar xzfv OpenJDK17U-jdk_x64_linux_hotspot_17.0.7_7.tar.gz
Move the extracted files into /opt/ folder in your system
sudo mv jdk-17.0.7+7 /opt/
Set the JAVA_HOME environment variable and add java to PATH so that other programs on your computer like expo and Android studio can find and use the installed java.
Locate the .bashrc file inside of the home directory ~/ and open it using nano or any text editor of your choice, after opening it add the following lines at the end of the file
export JAVA_HOME=/opt/jdk-17.0.7+7
export PATH=$PATH:$JAVA_HOME/bin
Now typing java --version in the terminal should output something like this
java --version
openjdk 17.0.7 2023-04-18
OpenJDK Runtime Environment Temurin-17.0.7+7 (build 17.0.7+7)
OpenJDK 64-Bit Server VM Temurin-17.0.7+7 (build 17.0.7+7, mixed mode, sharing)
Step 3: Installing android studio
You now have watchman and java installed in your system, next is to install android studio. The most hassle free way of installing android studio in Ubuntu is using snap. Install with the command sudo snap install android-studio --classic
After android studio has installed, open it and go through the installation prompts to install the android sdk and configure an emulator. Make sure the sdk is installed in your home folder such as in /home/yourName/Android/Sdk
You should be fine clicking next and having Android studio install the default setup for sdk and emulator. However, if you are customizing the Android studio installation packages, then these are the options that currently work best with react native.
Sdk Platform
Android SDK Platform 33
Google Play Intel x86_64 Atom System Image
Sdk tools
Android build tools version 33.0.0
Android SDK command line tool version 10
After android studio has completed installation, modify the .bashrc file once again to add the ANDROID_HOME environment variable. ANDROID_HOME lets expo know where you have installed the android studio and emulator files. Add the following lines to the end of .bashrc
export ANDROID_HOME=$HOME/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
Reload the path environment by typing source $HOME/.bashrc
Step 4: open the emulator
Click on the android studio icon to open it, it should bring up something like this
Click on more actions, then virtual device manager, it should open this panel
If you had configured an emulator it will appear and you can start it by clicking on the play icon. If an emulator is not configured, you can do so by clicking on the plus icon and installing the emulator.
With the emulator going you can fire up your expo react native project by typing npm run android while in your app's source code folder it will install expo go in the emulated android device and then launch your application.
Bonus step: enabling KVM based acceleration
If your laptop/desktop's cpu supports virtualization, you can enable kvm to have a smoother experience while running the android emulator
To find out if your cpu supports hardware virtualization type in the command
egrep -c '(vmx|svm)' /proc/cpuinfo
If the output is 0 then your cpu does not support hardware virtualization, however if the output is 1 or more then it does. Make sure visualization is enabled in the bios settings.
To install the necessary packages to support virtualization use the command
$ sudo apt-get install qemu-kvm libvirt-daemon-system libvirt-clients bridge-utils
Then use the following commands to add the current user to the libvirt and kvm groups. This is to grant the user permissions to use virtualization tools and manage virtual machines without needing superuser privileges.
$ sudo adduser `id -un` libvirt
$ sudo adduser `id -un` kvm
Conclusion
Setting up a react native development environment is a bit more involved than setting up one for working on front-ends or back-ends. I have tried to capture all the information that worked for me, hope they help you too in your mobile development journey.