This guide will help you get started with developing React Native apps in Windows, hopefully without too much hassle. I’ve included screenshots and screen-gifs where required to make your life slightly easier. We will be deploying our app on a virtual device setup by Android Studio.

Step 1: Install Tools

JDK

Download and install JDK 8. No special instructions for installation follow the default installation steps.

Update the “Path” System Environment Variable with the location of bin folder of the newly installed JDK.

Example location: C:\Program Files\Java\jdk1.8.0_131\bin

Python

Download & install Python 2. No special instructions for installation follow the default installation steps.

Node Package Manager

Download and install NPM 6. No special instructions for installation follow the default installation steps.

React Native CLI

Run the following command in your PowerShell to install the React Native command line interface. This will be the tool to build and run react native apps.

npm install –g react–native–cli

Android Studio

Download Android Studio. At the time of writing the version was 2.3.

Update the “Path” System Environment Variable with the location of Android SDK Platform Tools. By default, the SDK is installed in your AppData Local folder.

Example location: C:\Users\rajeev.nithiyanantha\AppData\Local\Android\sdk\platform-tools

Step 2: Configure Android Studio

We need to configure Android Studio to set the ANDROID_HOME path variable so that the React Native tools can locate the SDK. In addition to that, we will also be installing Android 6.0 SDK as React Native apps require Marshmallow to run and not the latest version that comes with Android Studio.

Step 3: New React Native project

Note: Please perform this step even if you already have a React Native project. This is to ensure that we can get the basics running.

Create New Project

Create a new React Native project called AwesomeProject using the React Native command line interface.

react–native init AwesomeProject

Examine Project Structure

The following is a screenshot of our new AwesomeProject. For Android Studio we will using the sub-folder Android and for everything else our we should be fine with the root directory of the project.

Step 4: Configure Android Studio (again)

Let’s open our AwesomeProject in Android Studio, by locating the Android sub-folder.

After opening the project, Android Studio will complain that it could not find the appropriate Build Tools. Let’s go head and install that.

Once the installation and build is complete, Android Studio will notice that we are using an older version of Gradle and will prompt you to install the latest version. Let’s go ahead and install that as well. The update will occur in the background and you should be able to follow the progress in the status bar.

Once we update Gradle, Android Studio will complain that the Build Tools version we have is no longer compatible and that we have to update it as well. Let’s satisfy that requirement.

Once that is complete, Gradle will rebuild the project and should be happy with everything.

Step 5: Create an Android Virtual Device

Step 6: Run Your Virtual Device

In Android Virtual Device Manager, click on the Play button of the Virtual Device that we created earlier. This will spin up a virtual Nexus 5X with Marshmallow on it.

Step 7: Build & Run React Native App

This screen-gif is longer than the others, but its worth the watch! Check it out here.

Trouble Shooting

Execution failed for task ‘:app:generateDebugBuildConfig’

When you come across this error when building/running the app, simply cleaning the build from Android Studio will do the trick.