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.
1. Install Android Studio and Emulator.
2. Install Java Development Kit (JDK).
3. Configure environment variables.
4. Install Nvm, Node, yarn, react-native.
5. Running a new react-native app in a virtual device.
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.
Android Virtual Device-
Android SDK, 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 ImageorGoogle APIs Intel x86 Atom System Image
Same way, take the SDK Tools tab, make sure that the following are marked.
Android SDK Build-ToolsNDK (side by side)Android EmulatorAndroid 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.
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 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.
1. Click on the Create Virtual Device
2. Choose a device you wish to install. Ideally, you want to have ones that already have Play Store included.
3. Select system image with API Level 27 or above (download it if needed).
4. Click on Finish to view the next screen, which lists the created emulators.
5. 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.
Task :app:compileDebugJavaWithJavac FAILED
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.
Task :app:installDebug FAILED
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.
Top comments (0)