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/
Step 2: Install Chocolatey
- Open Powershell
Get-ExecutionPolicy. If it returns
Restricted, then run
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-clinpm 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.
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: