React Native CLI and Android Studio: Setting up the development environment on Linux
Tags: reactnative, linux, tutorial, beginners
Published: 2020-08-15 22:45:19

This guideline will cover the absolute basics of getting started with React Native and Android studio using standard procedure.

#**Tl;dr**
You'll need Node, JDK, React Native CLI, Android Studio to get started on your project.

   &ensp;&ensp;1. Install Android Studio and Emulator.
   &ensp;&ensp;2. Install Java Development Kit (JDK).
   &ensp;&ensp;3. Configure environment variables.
   &ensp;&ensp;4. Install Nvm, Node, yarn, react-native.
   &ensp;&ensp;5. Running a new react-native app in a virtual device.
   &ensp;&ensp;6. Troubleshoot.

These steps will show you how to install and configure tools for developing React native app on Linux. I've specifically used *`Fedora 32`* for testing things out, but you should be able to translate the commands to the Linux distribution you're using. 

##**1. Install Android Studio**

Download and install the Android studio. Be sure to mark the following boxes while installing.

1. `Android Virtual Device`
2. `Android SDK`,
3. `Android SDK Platform`

Once it finishes, open the SDK manager. 

under the **SDK Platforms** tab, select a platform and make sure the following boxes are in it.

- `Android SDK Platform 29`
- `Intel x86 Atom_64 System Image` or `Google APIs Intel x86 Atom System Image`

Same way, take the **SDK Tools** tab, make sure that the following are marked.

- `Android SDK Build-Tools`
- `NDK (side by side)`
- `Android Emulator`
- `Android SDK Platform-Tools`


##**2. Install Java Development Kit (JDK)**

The JDK enables your computer to understand and run java code. React Native requires at least version 8 of the java development kit. You may download and install OpenJDK.

Run the following command to install OpenJDK in fedora.

```bash
    sudo dnf install java-11-openjdk.x86_64
```

##**3. Configure environment variables**

Updating environment variables is necessary for the React native to build apps with native tools.

Open .bashrc file  `sudo vim ~/.bashrc`
Feel free to use any text editor that you're comfortable with.

Add the following lines to your config file.

```
export JAVA_HOME="/usr/lib/jvm/java-11-openjdk-11.0.8.10-2.fc32.x86_64"
export ANDROID_HOME="$HOME/Android/Sdk"
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"
```

Save it. Then run `source ~/.bashrc` to make the changes get reflected.

##**4. Install node and react-native CLI**

In this section, we're going to install necessary packages that help the react-native CLI to work smoothly.

###**4.1 Install nvm**

Let's start with nvm, which allows us to manage different versions of the node.

```
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
```

To verify that nvm has been installed, do: `command -v nvm`

> If you don't have curl, then you need to install it first.

###**4.2 Install node**

We will use the latest *node* stable version:

```
    nvm install stable
```

> You might need to open a new terminal for the nvm path to be loaded.

###**4.3 Install yarn**

we will use *yarn* to manage our *node* packages. In Fedora, you can install *yarn* via the RPM package repository.

```
curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
```

Then you can simply:

```
 sudo dnf install yarn
```

> Note: The above command only works for Fedora-based distributions. (check [yarn website](https://classic.yarnpkg.com/en/docs/install/#debian-stable) for other distributions.)

###**4.4 Install React Native**

```
yarn global add react-native-cli
```

##**5. Running your app on a virtual device**

Alright, let's initialize the project repository and create a virtual device to run the project.

###**5.1 Initialize new React native project**

First, move to the folder where you want to create your project folder. Then follow the command below.

```
react-native init <project-title>
```

###**5.2 Create Virtual Device**

Launch Android studio then select **AVD Manager** from the configure menu. Then a window will show up.

<mark>1.</mark> Click on the **Create Virtual Device**
<mark>2.</mark> Choose a device you wish to install. Ideally, you want to have ones that already have `Play Store` included.
<mark>3.</mark> Select system image with `API Level` 27 or above (download it if needed).
<mark>4.</mark> Click on **Finish** to view the next screen, which lists the created emulators.
<mark>5.</mark> Click the **play** button to launch the emulator.

> Note: This may fail if your OS /tmp folder has insufficient space, displaying an error saying “No space left on device”. In this scenario, just increase its size to 8gb with the following command:
`sudo mount -o remount,size=8G,noatime /tmp`

###**5.3 Run your app**

Finally, run your app on the emulator. 
- Go to your project directory
- Open up two different terminals


One for running the Metro Bundler:
```
 react-native start
```

Another one for install and launch your app on the device:
```
 react-native run-android
```

That's it! Your app should be running on your virtual device.

##**6. Troubleshoot**

Here we are going to look at the most common errors you may encounter while setting up the environment.

### <mark>Task :app:compileDebugJavaWithJavac FAILED</mark>

**message:** `Could not find tools.jar`

This error will encounter when the JDK is not present in your system, or the system doesn’t recognize your JDK installation.

**Solution:** Verify the environment variable `JAVA_HOME` path is pointing to the right directory if not then update the path. 
If it doesn't work for you, then *reinstall* the JDK.

### <mark> Task :app:installDebug FAILED </mark>

**message:** `No connected devices!` *OR* `Unknown failure: cmd: Can't find service: package`

This error will encounter If you haven't created any virtual devices, or the runtime cannot recognize your device.

**Solution:** Creating a virtual device will help you to cover up the "No device connected" error.
For that, open up the *Android Studio -> AVD Manager -> Create Virtual Device*.

If it doesn't help you, then try the below commands.

```
adb devices
```

This command will show the list of devices available with their *deviceID*. Copy the deviceId and run our React Native app with the *deviceId*.

```
react-native run-android --deviceId <deviceId>
```

*example: react-native run-android --deviceId emulator-5554*

##**Conclusion**

That's it! We've gone through every step to get started with the React Native on the Linux environment. I hope you guys got a little glimpse of wisdom from this article. See you in the next one.

*What all trouble you got while setting up the environment? Share in the comments.*