React Native: Setting up the environment on Linux Mint

Getting to writing React Native and testing it on your phone can be really quick if you go the expo-cli route. You just need to download the Expo app on your phone and type the following on your terminal:

$ npm install expo-cli
$ expo init ProjectName
$ cd ProjectName
$ npm start

Then you scan the QR code and you can see the app running on your phone.

However, if you need to touch native code at all, this isn't going to be enough. You'll have to install Java Development Kit, Android Studio and all that jazz. And even though React Native's documentation is reasonably okay, some of the steps took me a while to figure out. So here's how I did it.

This tutorial assumes that you've got a Linux Mint and node already installed on your system.

Step 1: Get JDK

The first thing is to make sure that you've got version 8 of Java Development Kit. I used OpenJDK to get it. It's as easy as typing this on your terminal:

$ sudo apt install openjdk-8-jdk

Note: Make sure that you are using JDK 8 when running your apps, otherwise the build process will fail. So if you update it or have another version alongside it, remember to switch back.

If you want to keep JDK from updating by any means, you can type this in your terminal:

$ sudo apt-mark hold openjdk-8-jdk

Step 2: Install Android Studio

This is a bit more complicated. We'll need Android Studio to run a virtual machine to test our app.

1. Go ahead and download the latest version for Linux from their website.

2. Unpack the file wherever you want to install it. A lot of people do it in /opt. Depending on where you want to put it, you might need to add sudo at the beginning of the command lines.
   

   $ mv android-studio-ide-*.*-linux.tar.gz /your/directory
   $ cd /your/directory
   $ tar -xzf android-studio-ide-*.*-linux.tar.gz
   

3. If you're using a 64-bit machine, you'll need some additional libraries. Type this in your terminal:
   

   $ sudo apt install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386
   

4. Launch Android Studio by navigating to /android-studio/bin and executing studio.sh:
   

   $ cd /android-studio/bin
   $ ./studio.sh
   

5. The Setup Wizard will guide you through the rest of the installation process. You'll just need to make sure that a couple of options are marked.
   When the Wizard asks you to choose and installation type, choose "Custom". Then make sure to check all these for installation:

   • Android SDK
   • Android SDK Platform
   • Android Virtual Device

6. If you want, you can create a soft link to more easily access it:
   

   $ cd /usr/local/bin
   $ ln -s  /your/directory/android-studio/bin/studio.sh android-studio
   

Step 3: Configure Android Studio

Android Studio will install the latest Android SDK by default. But React Native requires Android 9 (Pie). So we'll have to manually install it.

1. Launch Android Studio

2. On the welcome screen, click on "Configure", which is at the bottom-right corner.

3. Within the SDK Manager, select the SDK Platforms tab. Then, at the bottom of the window select the option Show Package Details. Look for Android 9 (Pie) and check the following items:

   • Android SDK Platform 28
   • Intel x86 Atom_64 System Image

4. Select the SDK Tools tab, check the box Show Package Details again, find Android SDK Build-Tools and make sure to check 28.0.3.

5. Click "Apply" to update the changes.

6. You will also need to configure the ANDROID_HOME environment variable, so go and find the file $HOME/.bashrc and add the following lines at the end:
   

   export ANDROID_HOME=$HOME/Android
   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
   

   Note: The official documentation has you add export ANDROID_HOME=$HOME/Android/Sdk as the first line, but it didn't work for me. All that stuff was in $HOME/Android, so that's what I went with.

7. Now you'll need to load the new configuration in your current shell. Just type:
   

   $ source $HOME/.bashrc
   

Step 4: Configure your virtual android device

You'll need to tell your virtual device to use Android 9 (Pie) if you want it to run React Native. So go to Android Studio or launch it again if you closed it.

1. Open the AVD Manager, which can be done by clicking at the smartphone icon on the top-right corner of the window.
2. If you don't have any devices listed, you'll have to create a new one. Otherwise, you can edit any existing one by clicking at the pencil icon next to it.
3. There you just need to check Android 9 (Pie) as its system image.

Step 5: Install KVM

For your virtual device to work, you will need KVM, which allows you to run virtual machines.

1. Download it by typing the following in your terminal:
   

   $ sudo apt install qemu-kvm libvirt-bin ubuntu-vm-builder bridge-utils wget unzip
   

2. Make sure your user has access to it by typing:
   

   $ sudo adduser $USER kvm
   

To check if it worked, you should see your username after typing grep kvm /etc/group. You'll probably need to log out and in again for the new configuration to take effect.

Start your first project!

Now you're all ready to start writing your React Native code. To quickly get started, you can just do a react-native init.

1. First, get your virtual phone running. Go to Android Studio, open the AVD Manager and launch the device by clicking on the green play button.
2. Now go to the terminal and navigate to the folder where you want to keep your project.
3. Type npx react-native init MyProject. This will create the files for a basic project. You might want to update the lint settings once it's created.
4. Start React Native by typing npx react-native start.
5. Open another tab on your terminal, make sure that you're in your project's folder and type npx react-native run-android.

You should see your app working on your virtual phone's screen now. Happy coding!