Yadvir's blog

Setting Up a React Native Development Environment on Windows

Yadvir Kaur's photo
Yadvir Kaur
·

4 min read

This guide will help you set up a React Native development environment on your Windows machine and address common installation issues.

Prerequisites

Before you begin, ensure you have the following prerequisites installed on your Windows computer:

  1. Node.js: Download and install it from the official website: Node.js.

  2. npm (Node Package Manager): npm comes bundled with Node.js, so you don't need to install it separately.

  3. Java Development Kit (JDK): For Android development, you'll need the JDK. Download the OpenJDK from the official OpenLogic website: OpenJDK Downloads.

  4. Android Studio: Android Studio provides essential tools for Android development. Download and install it from the official website: Android Studio.

Getting Started

Step 1: Configure Java Development Kit (JDK)

  1. Install JDK: After downloading the OpenJDK, follow the installation instructions.

  2. Set JDK Environment Variable:

    • To open Environment Variables on Windows, type "Environment Variables" in the Windows search bar and select "Edit the system environment variables."

    • In the "System Properties" window, click the "Environment Variables" button.

    • Under "System variables," click "New" and add the following:

      • Variable name: JAVA_HOME

      • Variable value: The path to your JDK installation directory (e.g., C:\Program Files\OpenLogic\jdk-17.0.8.7-hotspot\).

Step 2: Configure Android SDK

  1. Install Android Studio: After downloading Android Studio from the official website, follow the installation instructions.

  2. SDK Installation in Android Studio:

    • Open Android Studio.

    • In the welcome screen, select "Configure" > "SDK Manager."

    • In the SDK Manager, install the required SDK platforms and tools for your project.

  3. Create a Virtual Device (Emulator):

    • In Android Studio, click on "More Actions" > "Virtual Device Manager."

    • In the Virtual Device Manager, click "Create Virtual Device."

    • Follow the wizard to choose a hardware profile and system image for your virtual device. Ensure that you select a system image that matches the version you're targeting in your React Native project.

    • Complete the setup, and your virtual device will be created.

    • To check if the emulator is working:

      1. Launch the Emulator: Open Android Studio, click on "More Actions" > "Virtual Device Manager." and click the "Play" button next to your virtual device to start the emulator.

      2. Wait for Boot: The emulator may take some time to boot up. Once it's fully booted, you'll see the Android home screen.

  4. Set Android SDK Environment Variables:

    • To open Environment Variables on Windows, type "Environment Variables" in the Windows search bar and select "Edit the system environment variables."

    • In the "System Properties" window, click the "Environment Variables" button.

    • Under "System variables," click "New" and add the following:

      • Variable name: ANDROID_HOME

      • Variable value: The path to your Android SDK directory (e.g., C:\Users\YourUsername\AppData\Local\Android\Sdk).

      • Edit the "Path" variable and append (C:\Users\LENOVO\AppData\Local\Android\Sdk\platform-tools) to the existing PATH.

    • Under "User variables," Edit the "Path" variable and append C:\Users\LENOVO\AppData\Local\Android\Sdk\platform-tools C:\Users\LENOVO\AppData\Local\Android\Sdk\platform-tools C:\Users\LENOVO\AppData\Local\Android\Sdk\platform-tools C:\Users\LENOVO\AppData\Local\Android\Sdk\platform-tools

Step 3: Create a New React Native Project and Run It

  1. Open a Terminal: Open a terminal window on your computer.

  2. Navigate to Your Project Directory: Use the cd command to navigate to the directory where you want to create your React Native project.

  3. Create a New React Native Project:

    This command sets up a new React Native project named "MyReactNativeApp".

    npx react-native init MyReactNativeApp

  4. Run Your React Native Project:

    Navigate to your project directory:

    cd MyReactNativeApp

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

    npx react-native run-android

Common Installation Issues

Issue 1: Environment Variables Not Set

If you encounter issues related to environment variables, double-check the variable names and values in the Environment Variables settings. Make sure you have correctly set JAVA_HOME and ANDROID_HOME.

Issue 2: Emulator Not Starting

If the emulator fails to start, make sure you have created a virtual device using the Android Virtual Device (AVD) Manager in Android Studio. Or, If you encounter the issue where the emulator appears as "offline". Close the emulator if it's currently running. Click the drop-down menu (three vertical dots) next to the emulator that's offline. Select "Cold Boot Now" to perform a cold boot of the emulator. Sometimes, the emulator takes some time to start and become responsive. Allow a few minutes for the emulator to fully boot up.

You've successfully set up a React Native development environment on your Windows machine and addressed common installation issues. Happy coding!

React Native