Setting Up Development Environment For React Native on Windows

Recently, I decided to explore and use React Native for developing Android Apps. However, as I was setting up my development environment on Windows, I ran into a lot of challenges. Setting up React Native on Windows is challenging and requires attention to a lot of moving pieces, even if you want to get a sample 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:

• Visual Studio Code
• Install Chocolatey
• Node Package Manager (NPM)
• Node.js (Version 12 or newer)
• React Native command line interface (React Native CLI)
• React Native command line interface (React Native Expo)
• Java Development Kit (JDK 8 or newer)

Step 1: Install Visual Studio Code

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

Visual Studio Code

Step 2: Install Chocolatey

• Open Powershell
• Run Get-ExecutionPolicy. If it returns Restricted, then run Set-ExecutionPolicy AllSigned or Set-ExecutionPolicy Bypass -Scope Process.
• Now run the following command:

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

Step 3: Install NodeJS and JDK

• Run the following command to install nodejs and jdk8

choco install -y nodejs.install openjdk8

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

If you have already installed Node on your system, make sure it is Node 10 or newer. If you already have a JDK on your system, make sure it is version 8 or newer.

Step 3: Install React-Native-CLI and Expo-CLI

• Once npm is installed, install React Native CLI and Expo 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
npm install -g expo-cli

Step 4: Creating a new React Native application

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

react-native init SampleReactNativeProject

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

expo init SampleReactNativeExpoProject

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

React Native Initial Directory Structure

Now run the following command to install the app and see it running on your phone.

• Connect your phone to your laptop using USB Cable and Enable Developer options and USB DEBUGGING.
• And run the following command:

react-native run-android