React Native: Setting up the environment on Linux Mint
Tags: linux, reactnative, android, tutorial
Published: 2019-11-11 07:32:40

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](https://facebook.github.io/react-native/docs/getting-started) 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](https://openjdk.java.net/) 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](https://developer.android.com/studio/index.html) 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](https://linuxhint.com/soft_link_vs_hard_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](https://www.linux-kvm.org/page/Main_Page), 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!