Setting up React Native environment on Windows

You wanted to get started with React Native but stuck during the installation phase. Don't worry this blog will cover all the steps from installing necessary tools to running your first React Native application so that you get started with your mobile development journey ✨.

What is React Native?

If you are reading this blog then you must be knowing what React Native is, but if you don't know, then nothing to worry we have covered a simple definition of React Native in the next paragraph.

React Native is a UI library based on the React.js library for creating cross-platform mobile applications. It is a perfect choice for mobile developers already familiar with React.js. Setting up React Native environment becomes tricky if not done correctly.

There are two ways through which we can create React Native applications:

• Expo CLI: Expo CLI provides predefined components which makes the whole developing process convenient. We can create React Native applications with expo within minutes. It's very fast compared to React Native CLI.

• React Native CLI: React Native CLI is the pure way of creating React Native applications provided by the React Native team. It does not come with predefined components, we have to build all the components by our own. React Native CLI provides easier integration of source code with native source code. However creating React Native applications with React Native CLI is not as simple as creating applications in Expo.

In this blog, I have shared my experience on setting up React Native environment on my local machine using React Native CLI where I have also shared some errors which got me stuck for a while.

So lets get started ! ⚔️

1. Installing Node.js

Node.js is an open-source, cross-platform JavaScript runtime environment which is used for accessing server for JavaScript applications.

Steps to install Node.js:

• Visit Node.js website. There are two versions, "Recommended for Most Users" and "Latest features". You can download any of these versions but I will recommend you to go with the "Recommended for Most Users" version as it's the most stable version.
  

• After downloading, open .msi file (downloaded node.js installer) and just click on next button.

• To check whether Node.js is correctly installed or not, open Command Prompt and type:

node --version

after executing this command if it shows the version then Node.js is successfully installed on your computer.

2. Installing Java Development Kit (JDK)

Steps for installing JDK:

• Open JDK download website and download the MSI Installer version.

• Open the installer and click on the Next button wherever it appeared.

• JDK is now successfully installed on your computer. Now copy or save the path where JDK is installed, we will need this later in setting up the environment variables. For example path can look like:

C:\Program Files\Java\jdk-19

3. Installing and setting up Android Studio

Android Studio is a very important software for running React Native applications as it will provide emulator for testing and checking the progress of our application.

Installing Android Studio

Steps for installing Android Studio:

• Visit Android Studio official website and click on the download button and also accept all terms and conditions, after this Android Studio will start downloading on your system.

• Open Android Studio installer and just click on next button whenever it appears.

• Android Studio is now successfully installed on your computer.

Setting up Android Studio

Steps for setting up Android Studio:

• Open Android Studio, a welcome screen will appear. Click on more actions and then click on SDK Manager.

• On SDK Platforms and SDK Tools panel click or tick on all the platforms and tools which are marked in blue color and then click on apply button which is on the down side. Clicking on apply button installs all the marked platforms and tools for Android Studio.

Also please copy or save the "Android SDK Location" path, there will be a major use of this in setting up the environment variables. Android SDK Location is listed on top of SDK Manager menu.

• Now click on Virtual Device Manager and then click on "Create Device" button. This will create an emulator for testing your React Native applications.

• Now select a phone of your choice, let us select Pixel 6 Pro and then click on next.

• You can select the system image of your choice and then click on next.

• Leave everything as default and then click on finish.

• Now your new Pixel 6 Pro device is now ready. Click on Play button to run the device. Running the device for the first time may take some time to start.

I have not show the whole installation process of node.js, JDK and Android Studio as I think it's simple to install. You just need to click on next whenever it appeared

4. Setting up the environment variables

Environment Variables as the name suggest is used to store the values or data that can be directly used by Operating System.

We need to setup environmental variables for JDK and Android Studio.

Steps for setting up the environmental variables are:

• Click on Search bar and type "Environment" and you will see "Edit the system environment variables" and then click on it.
  

• Now click on Environment Variables.
  

• Now for both user and system variables click on New and enter the variable name as JAVA_HOME and variable value as the location of JDK and then click on OK.

• Before setting up the environmental variables for Android Studio, open the SDK location of Android Studio and after opening it we can see there is a folder which is named "platform-tools". Copy its location, we will be needing it for setting up the environment variables for Android Studio.

• Now for both user and system variables click on Path and then click on Edit

• Now click on New and then write "platform-tools" location and SDK location and then click on OK.

• Now for both user and system variables click on New and enter the variable name as ANDROID_HOME and variable value as the location of Android Studio SDK and then click on OK.

5. Creating and Running React Native Application

Now we are ready to create and run our React Native application in the following steps 🚀:

• Open a new folder and open Command Prompt or any terminal which you use.

• Now write the command:

npx react-native init newproject

where newproject is name of the project, you can keep any name of your choice following the naming conventions.

Now execute the command.

• After executing the command it will start downloading template dependencies and all the other necessary files for the application.

Hurray, we have successfully created a React Native Application 🥳.

• Now open the newproject folder and open the Command Prompt or any terminal (on the newproject location) you use and run the command

npx react-native run-android

📝Before executing the above command it is recommended to open Android emulator (Virutal device) first which will open the app in fastest way possible.

• Metro bundler will open after executing the above command. Just press a and the application will start running on the Android emulator.

🚨After running the above command if you are facing an error: "Failed to install the app. Command failed with exit code 1: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081 FAILURE: Build failed with an exception.". This means that the environment variable ANDROID_HOME is not set properly, check whether you have set the environment variable properly or not. If you have set up the environmental variable correctly and still facing this issue then nothing to worry, you just need to restart your system and run the above command and open the emulator again. It will surely work.

• Running the above command for the first time will take some time for the application to open. After the first time, it will hot refresh and wont take much time in opining the application.

Hurray ! We have successfully run our first React Native application 🎉.

Although you can find tutorial for setting up React Native environment from its official documentation. I will highly recommend you to do check that out. But I still faced some error while setting up React Native environment on my local machine, so this was my main reason behind writing this blog.

I hope this blog has saved you a lot of your time in setting up React Native environment on your Windows machine.

I wish you very all the best for your React Native journey 🫂👍.

At last, I would like you to thanks for reading my blog, if you find this blog useful then do share the blog and give it a like. If you have any queries or wanted to have a chat with me then feel free to contact me on Twitter @HarshitAditya1. You can follow me👍 there I do sometimes post tweets about Web Development. Also please feel free express your thoughts and feedback about this blog. I would love to read them.