Ayanwumi Abdulroheem Tunde

Posted on Jan 9

How To Install React-Native on Windows, A Step-By-Step Guide. Possible Errors And How To Fix Them

#mobile #reactnative #androiddev #ios

INTRODUCTION.

In the dynamic world of app development, React Native stands tall as a game-changing framework, allowing developers to create cross-platform applications with unparalleled ease. If you're a Windows user eager to harness the potential of React Native, you've come to the right place.

In this comprehensive guide, I'll walk you through the step-by-step process of installing React Native on your Windows machine. Whether you're a seasoned developer exploring new tools or a newcomer eager to dive into the world of app development, this tutorial will equip you with the knowledge and tools needed to kickstart your React Native journey.

From setting up the necessary dependencies to configuring your development environment.
Ready to elevate your development experience? Let's get started!

NOTE: This article covers the installation of react native version 0.73 upwards.

INSTALLING THE NECESSARY TOOLS AND DEPENDENCIES.

NODE
The first thing you have to install is Node. Make sure Node is installed on your machine if you haven't you can get it here by downloading the LTS version (Long Term Support).
Note: Node V18 or higher is recommended for installing react native with version 0.73 or higher.

You can check the version of node installed on your system by running the following command.

node --version

ANDROID STUDIO.
The next thing you have to install is Android Studio, Android studio helps in building and installing our app on Android. You can download and install Android Studio here. While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:

Android SDK
Android SDK Platform
Android Virtual Device

JAVA DEVELOPMENT KIT (JDK)
Another thing that has to be installed on your machine is Java development kit (JDK). You can get this from different sites e.g. Open JDK, OpenLogic, and others. There are different versions of Java but for react native V0.73, JDK 17 is strongly recommended, you can get the JDK 17 here, just download and install it on your system.

After installing Java, you can check the version you have installed by running the following command in your terminal.

java --version

You should see something similar to the picture below after running the command.

You can also find the location of the folder of your installed Java by checking the program files on your system. In my case I installed my Java from OpenLogic, you can choose to install from any source, just make sure the location(path) is correct when adding it to the environment variables

SETTING UP YOUR ANDROID STUDIO.

The next thing is to set up your Android studio, the following must be installed in your Android studio. In your Android Studio, navigate to the SDK Manager tab by clicking the “more actions” button then select SDK Manager.

Then in your SDK manager, under the SDK platforms, make sure the following are installed and checked.

Android API 34
Android 13.0 (“Tiramisu”)

You can ignore other packages installed in the picture below, the ones mentioned above are the most important.

Under the SDK tools tab in your Android studio, ensure the following are installed as well.

Android SDK Build-Tools 34
Android SDK Command-line tools (latest)
Android emulator
Android emulator hypervisor driver
Android SDK Platform-Tools
Google Play Licensing Library
Intel x86 Emulator Accelerator (HAXM installer).

ADDING THE NECESSARY ENVIRONMENT VARIABLES.

The next thing is to add the necessary environmental variables to your system variables, these variables are needed for your react native to run effectively. But before that, you have to take note of the Android SDK location on your system, you can find this in your Android studio in the SDK manager, just like the one in the picture below.

Now go to the environment variables on your system, you can find this by searching for environment variables on your system and then opening it up, once it opens, click on environment variables. There are two different types of variables, the first one is the user variables while the second one is the system variables. For the user variables, add the following:

ANDROID_HOME
ANDROID_SDK_ROOT

The two variables above should point to the Android SDK location on your system (you can get this from Android Studio).

JAVA_HOME

The JAVA_HOME variable should point to the location of Java installed on your system. You can get this by going to your C directory and check under the program files, just copy the location of the folder and paste the location as the value of the JAVA_HOME variable.

After doing that, click on the path variable and click on edit to add the following variables.

Then click on edit to add the locations of your Android SDK-Tools and Android SDK Platform-Tools

For the system variables, add the following, their values should be the same as above.

ANDROID_HOME
JAVA_HOME

After following the steps above, click on the path variable and click on edit.

Click on edit to add the locations of the bin folder in the Java folder in your program files folder and also the bin folder in the latest folder in the command-line tools folder in your Android SDK location on your system just like the one below.

POSSIBLE ERRORS AND SOLUTIONS.

After adding all the variables mentioned above, there’s a probability you run into another error and I will explain two of the common errors and how to fix them below.

“Android SDK - versions found N/A, version supported 34.0.0”

This kind of error happens when you try to open your Android app on the emulator and it doesn’t open because it was unable to install the app on the emulator. This happens if a wrong Java version is installed OR your JAVA_HOME environmental variable isn’t pointing to the exact location where Java was installed on your computer. To fix this, confirm that you have installed the correct Java version which is V17 and above. Then check all the JAVA_HOME environment variables on your system and make sure they are pointing to the correct location of the Java installed.

The second possible error that can happen when trying to open your app on the emulator is

“Java.io.IOException: The filename, directory name, or volume label syntax is incorrect”

To fix this error, go to your react-native project and go to the android folder, create a local.properties file. In the file, paste the following.

sdk.dir = C:\\Users\\USER\\AppData\\Local\\Android\\Sdk

what we have above is the location of your Android SDK, the only difference is that all the slashes are double and this is the most important thing to fix the error.

NOTE: All the slashes in the local.properties file must be double, and make sure your Android SDK location is correct.

After this, you can run your react-native app again and everything should work perfectly. To check for any error in your react-native project, open your terminal, navigate to the project directory then run the following command. it checks for all the possible errors and lists them out, if there are none, it checks them with a green mark.

npx react-native doctor

RUNNING YOUR ANDROID APP ON AN EMULATOR.

Now that the react-native installation is complete, the next thing is to open the app on an emulator. To do this, you have to download a virtual device/Android emulator from Android Studio. So go to your Android studio, click on the “more actions” button, and select “Virtual Device Manager”, you should have a screen just like the one below.

If you already have a virtual device downloaded, just click on the play button to open it up but if not, click on the “Create device” button on the top left-hand corner to create a new virtual device, you should see a screen just like the one below.

Select any device of your choice and then click on the “Next” button to select and download a system image, then click on “Next” to download the virtual device then click on “Finish” when you are done. After downloading the virtual device, go to the device manager to see all downloaded virtual devices and then click on the play button to open up any of the devices.

After following the instructions above, go to your react-native project and run the following commands, each command should be run on a different terminal.

npm start

npm run android

The first command is to start the metro bundler while the second command is to open your app on the emulator. After running the command, your app should open up on the emulator just like the one below.

Other important commands that you should take note of are:

npx react-native doctor

adb devices

The first command is used to check/diagnose if there’s any error with your react-native application, just navigate to the project directory and run the command, you should see something like the picture below.

The second command is used to check for any connected virtual devices.

NOTE: Android Studio must be installed on your computer to use the adb command.

CONCLUSION.

Congratulations! You've successfully navigated the installation process of react-native on Windows. But before I come to the end of this article, let’s take a quick look at the summary of what we have discussed so far in this article.

Firstly, I talked about the dependencies and software needed to be installed which are Node, Android Studio, and JDK.
Secondly, I talked about how to install all the dependencies, how to set them up, how to check the version installed, and also how to set up your Android Studio and the necessary tools and packages to install on it.
After that, I talked about how to set all the necessary environment variables for both the user and the system.
After that, I talked about how to run your react-native project on the Android emulator.
Lastly, I discussed about some possible errors that usually occur during react-native installation and how to fix them.

As we conclude this guide on installing React Native on Windows, take a moment to appreciate the foundation you've laid for your cross-platform app development journey.

With your development environment configured, you're armed with the tools to craft innovative, responsive, and efficient mobile applications. Whether you're building for Android or leveraging the capabilities of React Native for iOS, the skills you've acquired are your passport to a diverse and thriving ecosystem.

Happy coding 🥳 😎