How to Setup React Native App in Windows with Android Studio and VScode.

This step-by-step guide will walk you through the process of setting up a development environment for React Native on a Windows system. By the end of this guide, you will have everything you need to start building cross-platform mobile applications using React Native.

Prerequisites

Before we get started, make sure you have the following prerequisites:

• A Windows machine.
• Administrator access to your system.
• An active internet connection.

Step 1: Install Chocolatey

Chocolatey is a package manager for Windows that simplifies the installation of various software packages. You can install it by running the following command in an elevated PowerShell window (Run PowerShell as Administrator):

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'))

Chocolatey makes it easier to manage and install dependencies for React Native.

Why Chocolatey?

Chocolatey simplifies software installation and management, making it easier to set up your development environment.

Step 2: Install Node.js and JDK

You'll need Node.js and the Java Development Kit (JDK) for React Native development. Use Chocolatey to install them with the following command:

choco install -y nodejs-lts openjdk11

• Node.js LTS (Long Term Support) will be installed. At the time of writing, the LTS version is 20.9.0.
• JDK 11 (OpenJDK) will also be installed.

Ensure that both Node.js and JDK are successfully installed.

Step 3: Install Android Studio

You'll need Android Studio for Android app development with React Native. Follow these steps to install Android Studio:

1. Download Android Studio from here.

2. Double-click the downloaded .exe file to start the installation.

3. Follow the on-screen instructions, and make sure to:

   • Check the boxes for "Android Studio" and "Android Virtual Device" during the installation process.
   • Choose "Standard" installation type.
   • Accept the license agreements.

4. If you encounter an "Intel x86 HAXM" error during installation, download it manually from the provided URL in the error message. This error occurs if you didn't accept the prompt to install it automatically during Android Studio installation.

5. After successful installation, open Android Studio.

Step 4: Configure Android SDK

To configure the Android SDK, follow these steps:

1. Open Android Studio and select "More Options."

2. Click on "SDK Manager."

3. In the SDK Manager, make sure the following items are checked under "SDK Platforms":

   • Android SDK
   • Android SDK Platform
   • Android Virtual Device

4. To install the required Android 13 (Tiramisu) SDK, go to the "SDK Platforms" tab and check "Show Package Details" in the bottom right corner. Ensure that the following items are checked:

   • Android SDK Platform 33
   • Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

5. Next, navigate to the "SDK Tools" tab, check "Show Package Details," and ensure that 33.0.0 is selected under the Android SDK Build-Tools.

6. Click "Apply" to download and install the Android SDK and related build tools.

7. Copy the Android SDK location from Android Studio by going to "More Options" > "SDK Manager." Paste this location into a new environment variable named "ANDROID_HOME."

8. Verify the path you set by running Get-ChildItem -Path Env:\ in PowerShell to ensure that "ANDROID_HOME" has been added as a user variable.

Step 5: Add build tools and emulator to Path

To add the "platform-tools" directory , "build-tools" and "emulator" directory to your system's PATH, follow these steps:

1. Open the Windows Control Panel.

2. Click on "User Accounts," then click "User Accounts" again.

3. Click on "Change my environment variables."

4. Select the "Path" variable and click "Edit."

5. Click "New" and add the paths to both the "platform-tools" and "emulator" directories to the list.

You have now successfully set up your development environment for React Native on Windows. You are ready to start building cross-platform mobile applications using React Native. Happy coding!

Creating a New Application

If you previously installed a global react-native-cli package, please remove it as it may cause unexpected issues:

npm uninstall -g react-native-cli @react-native-community/cli

React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using npx, which ships with Node.js. Let's create a new React Native project called "AwesomeProject":

npx react-native@latest init AwesomeProject

This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Expo, or if you're adding Android support to an existing React Native project (see Integration with Existing Apps). You can also use a third-party CLI to init your React Native app, such as Ignite CLI.

Preparing the Android Device

You will need an Android device to run your React Native Android app. This can be either a physical Android device, or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer.

Using a Physical Device

If you have a physical Android device, you can use it for development by plugging it into your computer using a USB cable and following the instructions.

Using a Virtual Device

If you use Android Studio to open ./AwesomeProject/android, you can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio.

If you have recently installed Android Studio, you will likely need to create a new AVD. Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the Tiramisu API Level 33 image.

If you don't have HAXM installed, click on "Install HAXM" or follow the instructions to set it up, then go back to the AVD Manager.

Click "Next" then "Finish" to create your AVD. At this point, you should be able to click on the green triangle button next to your AVD to launch it.

Running Your React Native Application

Step 1: Start Metro

First, you will need to start Metro, the JavaScript bundler that ships with React Native. Metro "takes in an entry file and various options and returns a single JavaScript file that includes all your code and its dependencies."

To start Metro, run the following command inside your React Native project folder:

npm start

Metro is similar to webpack for React Native apps. It bundles JavaScript code and its dependencies, improving startup performance and translating some platform-specific JavaScript

into widely supported JavaScript.

Step 2: Start Your Application

Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder and run the following command:

npm run android

If everything is set up correctly, you should see your new app running in your Android emulator shortly.

Modifying Your App

Now that you have successfully run the app, let's modify it.

1. Open App.tsx in your text editor of choice and edit some lines.
2. Press the R key twice or select Reload from the Dev Menu (Ctrl + M) to see your changes!

That's it! Congratulations! You've successfully run and modified your first React Native app.

Happy Coding 🚀