Installation of React Native

In this article we will look into one of the methods on how to set up React Native development environment in Windows with Android Studio.

1. Node.js

2. JDK

3. Android Studio (Hedgehog | 2023.1.1)

4. React Native CLI

5. VS Code

6. Set up Android Emulator

7. Set up the Android Environment Variables

8. Create a New React Native Project

9. Run and Test the App

Troubleshooting

1. Install Node.js and npm

React Native requires Node.js to be installed on your machine, as it's used for running the development server and building the project. Download Node JS from the URL below, preferably the LTS version which is the recommended version for most users as it will be more stable, compared to latest release. Node.js® is a JavaScript runtime.

Download the latest version from the below URL.

Download Node.js:

Click this URL and download Node.js Download Node.js

Download the latest version of LTS(Long Term Support).

Follow the installation instructions for your operating system.

Install Node.js:

Run the installer and follow the instructions.

This will install both Node.js and npm (Node Package Manager) on your system.

Verify Installation: Open a command prompt and run:

node -v

npm -v

This will display the installed versions of Node.js and npm, confirming the installation.

2. Install Java Development Kit (JDK)

React Native relies on the Java Development Kit (JDK) for Android development. Download the Java including the latest version LTS on the Java SE Platform. These downloads can be used for any…

Download JDK:

Click this URL and download JDK Download Java SDK

Download the Windows version of the JDK.

Install JDK:

Run the installer and follow the instructions.

Remember the installation path as you'll need it later (e.g., C:\Program Files\Java\jdk-15).

Set JAVA_HOME Environment Variable:

Right-click on This PC > Properties > Advanced system settings > Environment Variables.

Under System Variables, click on New, and set the following:

Variable Name: JAVA_HOME

Variable Value: C:\Program Files\Java\jdk-15 (or wherever you installed the JDK).

Add JDK to Path:

In the Environment Variables window, find the Path variable under System Variables, and click Edit.

Add the following to the Path variable:

C:\Program Files\Java\jdk-15\bin

Verify JDK Installation: Run this in the command prompt:

java -version

You should see the installed JDK version.

3. Install Android Studio

Android Studio is the official IDE for Android development, and it's required for setting up the Android emulator and other Android tools. Android studio can be downloaded from the below URL. It’s better to go with the latest version. Here I am using Hedgehog | 2023.1.1. Configure Android studio accordingly. Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps…

Download Android Studio:

Click this URL and download Android Studio Download Android Studio

Download and install Android Studio.

Install Android Studio:

Run the installer and follow the instructions.

During installation, make sure to include the Android SDK and Android Virtual Device (AVD) components.

Configure Android Studio:

Open Android Studio and let it download necessary SDK packages.

Set up the Android Virtual Device (AVD) to emulate a device for testing your apps:

Go to Tools > AVD Manager and create a new virtual device.

4. Install React Native CLI

To create and manage React Native projects, you'll need to install the React Native CLI globally.

Install React Native CLI: Open a command prompt and run:

npm install -g react-native-cli

Verify Installation: Run the following to check if the installation was successful:

react-native –version

5. Install Visual Studio Code (Optional but recommended)

Visual Studio Code is a lightweight but powerful code editor that is commonly used for React Native development.

Download VS Code:

Click this URL and download VS Code Download

Install the editor after downloading.

Install Extensions:

Open Visual Studio Code and go to the Extensions Marketplace (or press Ctrl + Shift + X).

Install extensions such as:

ES7 React/Redux/GraphQL/React-Native snippets (for React Native code snippets).

Prettier - Code formatter (for automatic code formatting).

Once Android Studio is setup, we need to create a Virtual Device. This can be done as below.

6. Set up Android Emulator

You will need an Android emulator to run your React Native apps locally. We would need Intel x86 Emulator Accelerator or the Download HAXM to run the emulator in Windows. Details about this can be found in Installation-Instructions-on-Windows.

Create an Emulator:

Open Android Studio.

Go to Tools > AVD Manager.

Click on Create Virtual Device and select a device to emulate.

Choose a system image (such as Android 11 or 12) and follow the prompts to finish creating the emulator.

Run the Emulator:

From the AVD Manager, click the play button to start the emulator.

7. Set up the Android Environment Variables

You need to set up environment variables for the Android SDK tools.

Set up ANDROID_HOME:

In the Environment Variables window, click New under System Variables.

Set the following:

Variable Name: ANDROID_HOME

Variable Value: The path where the Android SDK is installed, for example:

C:\Users\YourUsername\AppData\Local\Android\Sdk

Add SDK Tools to Path:

Edit the Path system variable again and add the following paths:

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

C:\Users\YourUsername\AppData\Local\Android\Sdk\tools

8. Create a New React Native Project

Now you're ready to create your first React Native project.

Create the Project: Open a command prompt and run:

npx react-native init MyFirstApp

Navigate to Project Directory:

cd MyFirstApp

Run the App:

Start the Android emulator if it's not already running.

Run the following command to launch your app:

npx react-native run-android

9. Run and Test the App

Your app should now be up and running on the Android emulator or a connected device. If you see the React Native welcome screen, you're good to go! Based on the requirement, we can use Typescript or JavaScript for our React Native application. Just rename the .tsx file to .jsx and make the code changes accordingly. Thanks for reading, happy coding!

Troubleshooting

Metro bundler not starting: Run npx react-native start before running npx react-native run-android.

Device not detected: Ensure that the Android emulator is running or that a physical device is connected via USB with USB debugging enabled.

Build errors: Make sure the environment variables are set correctly and all dependencies are installed.