How To Setup Your Development Environment Using React Native on Windows?

React Native is a JavaScript framework for developing cross-platform mobile applications for iOS and Android. It is based on React, Facebook’s popular JavaScript library for building user interfaces for targeting mobile platforms.

Since I was super excited about developing cross-platform mobile applications, I decided to explore and use React Native for developing Android Apps. However, I ran into a lot of challenges just to get my development environment set up. Setting up React Native on Windows is challenging and requires attention to a lot of moving pieces, even if you want to get a basic app up and running on an emulator.

In this article, I will discuss how to set up your development environment on Windows using React Native framework and Android Studio to build Android Apps.

I will be using the following tools to set up my development environment:

• Windows
• Node Package Manager (NPM)
• Node.js (Version 8 or newer)
• React Native command line interface (React Native CLI)
• Java Development Kit (JDK 8 or newer)
• Android Studio
• Built-in emulator in Android Studio
• Visual Studio Code

Step 1: Installing Visual Studio Code

Download and install the latest version of Visual Studio Code for Windows from https://code.visualstudio.com/

Step 2: Installing Android Studio

• Download and install the latest version of Android Studio for Windows from https://developer.android.com/studio/
• Android Studio installs the latest Android SDK by default. React Native requires Android 6.0 (Marshmallow) SDK or higher. I decided to use Android 7.1.1 (Nougat). Feel free to use the latest SDK.

Figure 1: Android SDK Location

• Make sure you have the following SDK tools installed:

Figure 2: Android SDK Tools

Important: You will need the Intel x86 Emulator Accelerator (HAXM installer) to run the emulator on Windows. For more information, please refer to the following link: https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows

Note: You need to enable Intel Virtualization Technology by changing a BIOS setting. Please look at the following link to see how that is done:

Error during installing HAXM, VT-X not working

• Configure the ANDROID_HOME environment variable. Open the System pane under System and Security in the Windows Control Panel, then click on Change settings. Open the Advanced tab and click on Environment Variables. Click on New to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

Figure 3: PATH variable for Android

• Finally, add Android Debug Bridge (ADB) to the PATH environment variable. This will help you know which devices are connected or which emulators are currently running. Install location of ADB: C:\Users\apatil\AppData\Local\Android\Sdk\platform-tools\adb.exe

Step 3: Installing Node

• Download and install the latest version of Node.js from https://nodejs.org/en/. Note: Npm is installed with Node.js.

Note: Make sure you add NPM to the PATH environment variable.

• Once npm is installed, install React Native CLI by running the following command from the Windows prompt command line or Integrated Terminal in Visual Studio Code. Note: Integrated Terminal can be found under View →Integrated Terminal

npm install -g react-native-cli

Step 4: Using embedded JDK

Android Studio comes with an embedded JDK which is recommended. Make sure you check the following option under File → Other Settings → Default Project Structure in Android Studio:

Figure 4: Embedded JDK Location

Step 5: Creating a new React Native application

Finally, let’s create our first React Native application by running the following command in your workspace location

react-native init SampleReactNativeProject

This creates the following project directory structure when you open the project in Visual Studio Code.

Figure 5: React Native initial directory structure

Step 6: Building for Android

• Before we go ahead and run the app, open up the “android” directory in our project in Android Studio and create an “assets” directory under app/src/main.

Figure 6: Adding “assets” directory in Android project directory structure

• To simplify the build and install process, in package.json, add the following script under “scripts”:

"android-windows": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && react-native run-android"

• Now run the following command to install the app and see it running on the emulator. This runs the script above which we set up in package.json.

npm run android-windows

This starts up a Metro Bundler instance in a new command prompt instance and installs the app on the emulator as shown below:

Figure 7: Metro Bundler Window

Figure 8: Android Emulator

Note: If you still run into the following error, “java.lang.UnsupportedClassVersion Error: com/android/build/gradle/AppPlugIn: Unsupported major.minor version 52.0”, ensure that you have checked the embedded JDK as shown in step 4 above.

This article was also featured on the Let’s React, a React Native newsletter.

If you enjoyed reading this article, please leave your comments or hit the clap icon below to show your appreciation. If you would like others to benefit from this article and help spread the word, please do share on your favorite social media platform. Thanks for your time.

About me

Amrut is a Full Stack Software Engineer who is passionate about tech and web and mobile applications. He likes to write about coding, investing, trading, finance, and economics. In his free time, Amrut likes to understand business models of publicly traded companies and analyze their financial statements. He strongly believes in adding value to people’s lives through quality work and empower people to take control of their personal finances. He also loves to watch and discuss American Football.

This story is published in The Startup, Medium’s largest entrepreneurship publication followed by +423,678 people.

Subscribe to receive our top stories here.