Develop React Native App on Windows

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 reactnativecli

Android Studio

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

install android studio.gif

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.

android 6 sdk

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.

reactnative init AwesomeProject

new react native proj.gif

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.

awesome proj dir structure.png

Step 4: Configure Android Studio (again)

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

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.

install build tools

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.

update gradle

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.

update build tools

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

Step 5: Create an Android Virtual Device

create AVD

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.

virtual device manager.png

virtual device running

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.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s