How to Setup react-native-cli and Android Emulator on Windows

In this post we will learn how we can setup an environment for bare react-native-cli inside Windows PC so that we can run our project inside an Android Emulator.

Topics which we will cover.

• Installing Node JS
• Installing Java JDK
• Installing Android Studio
• Configuring ANDROID_HOME
• Configuring  Platform Tool

I know there are lots of people (including me) who use Windows PCs to develop React Native apps. But lots of people use Expo because it is easy. It comes with the Expo Go app which makes it more accessible for beginners as well. 

Expo is a great platform, no doubt about that but for the past few months I have been working on bare react-native-cli and it is kind of interesting. The only problem I face while coding on bare react-native is setting up the environment for bare react-native-cli. It’s a default task.

So, here is the easiest process that you can follow to install bare react-native-cli inside your windows PC with an android emulator. Also you can check out this post if you want to know the difference about Expo and bare react-native cli.

Installing Node JS

Having node JS inside our system is mandatory before we setup our bare react-native-cli. If you don’t have Node JS installed inside your PC then you can follow the video given below, otherwise you can move to the next process.

watch video

Installing Java JDK

Because the core official language to develop Android apps is Java. So, we need to set up the Java Development Kit before we move further.

To install JDK inside your windows system you can first install Chocolatey if you want to, as the official documentation recommended. But there is no need to install a software which scares us while installing at first by asking so many weird questions. Also it will be useless after that.

And I know how we can install JDK without installing Chocolatey, so follow me.

For that you can simply search for Java JDK on your browser or go to this link. And at the time I am writing this post there are two versions available for you to download. Scroll down and go to the Java JDK (LTS) version and click on JDK Download.

It will show you a bunch of options but you can choose the version according to your OS bit 32 or 64. For me that is windows 64 and also in 64 bit there will be zip file and installer file and we need the installer one.

After clicking on that it will ask you to accept an agreement.  Just tick on I agree or you can read before you accept the agreement and click on the download button. Now it will ask you to login with your id and password.

If you don’t have an account on Oracle, you can create one and it’s free don’t worry.

Once you have an id and password you can login to download the JDK installer. Once you have downloaded the installer don't be afraid to double click on that installer and press next-next like other windows softwares.

Ok now if you come so far it means we have JDK installed inside our PC. And if you want to confirm that then you can open a command prompt and type java -v and it will display the version of that java installed inside your PC.

Installing Android Studio

Now let’s install Android Studio inside your system. For that you can just click here and download android studio from this page.

Installing android studio is a simple process but if you want some help then you can watch this video. It’s a video to setup an android emulator for Expo users but you can move this video to 3 minutes and 40 seconds.

watch video

Configuring ANDROID_HOME

Now we have Node JS, Java JDK and Android Studio installed inside our system. To run a react native project inside an android emulator directly from the terminal we need to configure some more stuff. So that we can open and run Android Emulator without opening Android Studio.

To configure ANDROID_HOME first you need to go to the users folder (It’s a folder with your name on it). After that click on view on top of the window and check the option Hidden Items.

After that you will see a folder called AppData, open it and go to AppData>Local>Android>Sdk Now we need to copy the path and for that you can simply press Alt+D and Ctrl+C.

If you feel this process too complicated then you can paste the given code to your windows search and press enter. It will open the exact window like above.

%LOCALAPPDATA%\Android\Sdk

Now you may say that, “Then why do you tell me to open the users file AppData and all. Why don’t you give this code earlier.” And it’s because I want to show you where your files are located and what we are doing.

Now we need to create an ANDROID_HOME path. For that you can go to.

• Windows Control Panel.
• Click on User Accounts, then click User Accounts again
• Click on Change my environment variables
• Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

Set the variable name ANDROID_HOME and paste the path you copied earlier inside the variable value field.

Configuring Platform Tool

Like before, now we need to configure the platform tool as well. For that you can go to the Sdk folder like before and move one step further and open a folder called tools.

Or you can paste this code inside your windows search and press enter and it will open the exact folder. 

%LOCALAPPDATA%\Android\Sdk\platform-tools

Now again press Alt+D and Ctrl+C to copy that path. To add a platform tool inside the environment variable. You need to again go to the Windows Control Panel.

Click on User Accounts, then click User Accounts again and click on Change my environment variables. Select the Path variable and click on Edit and click on New.

Now you can paste the path you copied earlier. You can now save the changes and that’s it.

Ok, if you come so far then you have successfully installed everything we need to run the bare react native project inside windows PC. Now I will recommend you to restart your PC because we changed the environment variables.

Now you can open a command prompt and run this command to create a brand new react-native project. 

npx react-native init YourProjectName

Open your project once it has been initialized. Now you need two terminals to run your react-native project on Windows PC. You can open your project directory inside two command prompts or you can use your inbuilt terminal if you are using VS Code like me.

First, run this command npm start. And on another terminal run npm run android. Now it will try to run your project inside an Android Emulator. But most of the time while running the app for the first time it throws an error. Don’t panic, ok just run the npm run android command again and it will run your project.

Ok, thanks for reading if you come so far.