Setting up React Native environment on Windows
Tags: reactnative, mobile, beginners, codenewbie
Published: 2023-06-29 06:03:29

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 ✨. 
 
![DN1](https://media.giphy.com/media/tptFQ8QAJYYvu/giphy.gif)

## What is React Native? 

![Dog](https://media.giphy.com/media/3o7527pa7qs9kCG78A/giphy.gif)

_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**](https://reactnative.dev/) 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.  

![RN1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0wxofoa33f7am05spuxv.png)

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. 

![Expo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w294v2mixrqkioaezwvn.png)
- **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_. 
![RNCLI](https://user-images.githubusercontent.com/5407471/97928088-2363d600-1d1b-11eb-93a8-3b61997224ae.gif)

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 !_ ⚔️ 
![DS1](https://media.giphy.com/media/tEcIyVc6ukQV2eb86t/giphy.gif) 
 
##1. Installing Node.js 
 
![Node](https://railsware.com/blog/wp-content/uploads/2018/09/2400%D1%851260-rw-blog-node-js.png)

**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](https://nodejs.org/en) 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. 
![Node.js website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o55gr224f6texmiq2hsq.png) 
 
- After downloading, open .msi file (downloaded node.js installer) and just click on _next_ button. 

![Node.js installer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0bu1e1q5j1jedzpgqj7o.png)

- 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.
 
![Node Version](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0dxgbikp3ftv6q9zx209.png) 

##2. Installing Java Development Kit (JDK)


Steps for installing JDK: 

- Open [JDK download website](https://www.oracle.com/in/java/technologies/downloads/#jdk20-windows) and download the _MSI Installer_ version. 

![JDK Website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n38cp86dm03dswbljcg1.png) 

- Open the installer and click on the _Next_ button wherever it appeared. 

![Msi d](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4iail932iwpm6mt9akbh.png) 

- 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. 

<h3>Installing Android Studio</h3> 

Steps for installing Android Studio: 

- Visit [Android Studio](https://developer.android.com/studio?utm_source=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. 

![asweb](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fh3vy8hvryghvydwfuf7.png)
- Open Android Studio installer and just click on next button whenever it appears. 

- Android Studio is now successfully installed on your computer. 

<h3>Setting up Android Studio</h3> 

Steps for setting up Android Studio: 

- Open Android Studio, a welcome screen will appear. Click on _more actions_ and then click on _SDK Manager_. 

![ansdo01](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lejvwzwz678j9dydixd5.png)   

- 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._ 

![SDK Platforms](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lwnnuq7m88p6gur5to1o.png)
![SDK Tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tymg1eo7bznlqnqo4r84.png) 

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. 

![android studio sdk location](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/alb8pdkz4zslz7qg3tra.png)

- Now click on **Virtual Device Manager** and then click on **"Create Device"** button. This will create an emulator for testing your React Native applications. 
  
![vdm 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3odupvwhrfs62w8t811.png) 

![vdm 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6g0nonn9woj01r5zcagg.png)

- Now select a phone of your choice, let us select _Pixel 6 Pro_ and then click on next.  

![vdm 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqnlxlgel857vepsu802.png)
- You can select the system image of your choice and then click on next.  

![vdm 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8v4ib0d5fulzz24ksq9.png)
- Leave everything as default and then click on _finish_. 

![vdm 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4hwsoz8e3te3fb9lb0rj.png)
- 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._  

![vdm 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xh7jrxpibn11w7ojbv99.png) 
![vdm 7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1atdltjh2rd5map9l2un.png)
![emulator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g9hkhb3pu6w2k9lixbc3.png) 

_<center>Now your emulator is currently up and running 🔥</center>_ 

<br>

_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.
![ev1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5h0zd18qnnq522x8rsd8.png) 

- Now click on _Environment Variables_. 
![ev2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ikr2xdiz6501ekxwkdyw.png) 

- 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_. 

![ev3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y7iyal3u00lz91ohxnkg.png)
<center>Environment variables for JDK is successfully setup.</center> 
<br /> 
- 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. 

![ev4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c01diex419bd4rxoa4p1.png)
- Now for both user and system variables click on _Path_ and then click on _Edit_ 

![ev5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4q53azajjjjwlt49ic7.png)
- Now click on _New_ and then write "_platform-tools_" location and _SDK location_ and then click on _OK_. 

![pt](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/udsrhnayija8d0aq7gvy.png)

- 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_.

![ev6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/adzb06amlhvz08mqe572.png) 

![ev7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b27zuxw6z3ndji135hl8.png) 

<center>Environment variables for Android Studio SDK is successfully setup.</center> 

## 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. 

![cra-1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xeeftzr6qde1gbfky03p.png)
- 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. 

![cra-2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/51thj19bhefr7bvzkgpy.png)
- After executing the command it will start downloading template dependencies and all the other necessary files for the application. 

![cra-3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46l8n2krktruai3jmg9z.png) 

<b>Hurray, we have successfully created a React Native Application 🥳.</b> 

- 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. 

![rnstart-1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5r60brckpqllpfukt15i.png)

🚨_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.    

 
![rnstart-2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bu0z813koivrcjake5vd.png) 

![rnstart-3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4xo83pqcb7h7gh3biyr.png) 

![rnstart-4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gpc6jb9yzpg3ga5t208r.png) 

_**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**](https://reactnative.dev/docs/environment-setup). _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**_ 🫂👍. 

![ATB](https://media.giphy.com/media/LMtyZa58aGSPjMSOMF/giphy.gif)

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**](https://twitter.com/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.

![thanks](https://media.giphy.com/media/TXFWfSZ1EP7iRj9tvI/giphy.gif)