React Native Installation Guide for 0.76.0

Installing React Native on Windows: A Complete Guide

React Native is a popular framework for building cross-platform mobile applications using JavaScript and React. Setting up a React Native environment on Windows involves a series of steps to ensure that all required tools and dependencies are installed properly. In this guide, I’ll walk through the full installation process to get your React Native environment ready on a Windows machine.

Prerequisites

Before starting, make sure that:

• You have Windows 10 or later installed.

• Your system has at least 8GB of RAM (recommended for a smoother development experience).

• Node.js are required, along with a few other tools.

• Git Bash is good to have

---

Step 1: Install Chocolatey (Package Manager for Windows)

Chocolatey is a Windows package manager that simplifies the installation of development tools.

1. Open PowerShell/Git Bash as Administrator.

2. Paste the following command and press Enter:

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

3. Once installed, verify Chocolatey Version by running:

    choco -v
   

---

Step 2: Installation Node.js and Java Dev Kit(JDK)

It is recommended to use an LTS(Longtime Support) version of Node. If you want to be able to switch between different versions, you might want to install Node via nvm-windows, a Node version manager for Windows.

React Native also requires Java SE Development Kit (JDK), which can be installed using Chocolatey as well.

Open an Administrator Command Prompt (right click Command Prompt and select "Run as Administrator"), then run the following command:

choco install -y nodejs-lts microsoft-openjdk17

If you have already installed Node on your system, make sure it is Node 18 or newer. If you already have a JDK on your system, It’s recommend to use JDK17. You may encounter problems using higher JDK versions.

Set up the JAVA_HOME environment variable:

• Go to Control Panel > System > Advanced system settings > Environment Variables.

• Under System Variables, click New and add:

• Variable name: JAVA_HOME

• Variable value: C:\Users\kumar\AppData\Local\Programs\Microsoft\jdk-17.0.13.11-hotspot\

---

Step 3: Install Android Studio

Android Studio provides the Android SDK and an emulator, which are needed to run Android apps on Desktop.

1. Download Android Studio from the official site.

2. Run the installer and follow the setup wizard.

   • Select the default options during installation.

   • Make sure to install the Android SDK, Android SDK Platform, and Android Virtual Device (AVD).

3. After installation, open Android Studio and go to File > Settings > Appearance & Behavior > System Settings > Android SDK.

4. Install the following:

   • SDK Platforms: Install the latest Android API (recommended: Android 11 or above).

   • SDK Tools: Install Android SDK Build-Tools, Android Emulator, and Android SDK Platform-Tools.

5. Set up the ANDROID_HOME environment variable:

   • Go to Control Panel > System > Advanced system settings > Environment Variables.

   • Under System Variables, click New and add:

     • Variable name: ANDROID_HOME

     • Variable value: C:\Users\<YourUsername>\AppData\Local\Android\Sdk

   • Edit the Path variable and add the following paths:

     • C:\Users\<YourUsername>\AppData\Local\Android\Sdk\platform-tools

     • C:\Users\<YourUsername>\AppData\Local\Android\Sdk\emulator

6. If you have an AMD processor in your computer you need the following setup requirements to be in place:

   • AMD Processor - Recommended: AMD^® Ryzen^™ processors

   • Enable via Windows Features: "Windows Hypervisor Platform"

---

Step 4: Set Up a New React Native Project

1. Open a terminal (PowerShell/Command Prompt/Bash) and navigate to the directory where you want to create your React Native project.

2. Run the following command to create a new project:

    npx @react-native-community/cli@latest init MyProject
   

   Replace MyProject with your desired project name.

---

Step 5: Set Up a Local Path

1. Go to your Project File>android.

2. Create a local.properties file and add below line

   sdk.dir = C:\\Users\\{userPCName}\\AppData\\Local\\Android\\Sdk

---

Step 6: Running the React Native App on Android Emulator

1. Launch Android Studio and open the AVD Manager by going to Tools > AVD Manager.

2. Create a new virtual device if you don’t already have one. Choose a device and an API level that you have installed.

3. Start the emulator by clicking the Play button next to the device name.

4. Once the emulator is running, go back to your terminal and navigate to your React Native project folder.

5. Run the app on the emulator using:

    npx react-native run-android
   

   This command will build the project and start it on the emulator. If everything is set up correctly, you should see the default React Native welcome screen.

6. If you got error try installing package again inside your root dir.

    npm i
    npx react-native doctor
   

   Press e to fix the error(It will fix the error)

7. Now again try starting your application by

npx react-native run-android

---

Troubleshooting Tips

1. Gradle Issues: If you encounter issues with Gradle during the build, ensure that your JDK and Android SDK are correctly installed and their paths are set in the Environment Variables.

2. Android Emulator Not Launching: Ensure that Virtualization is enabled in the BIOS of your machine.

3. Metro Bundler Not Connecting: Ensure that your firewall allows connections for Node.js and the terminal applications you’re using.

---

Conclusion

After completing these steps, your React Native development environment on Windows should be ready! You’re now equipped to create and test React Native applications on the Android emulator. For iOS development, you would need a macOS machine, but for Android, the setup above is complete.

With this setup, you’re ready to dive into building cross-platform apps using React Native on your Windows machine. Happy coding!

I also started to learn React Native But I’m happy to help you to resolve your error, DM me in LinkedIn rishavconsolelog21.