2024 – JAN

Install and Setup React Native on Windows 10

1.
Install Chocolatey :

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

2.
Install Node, Python2, and JDK8 :
choco install -y nodejs-lts microsoft-openjdk17
choco install -y microsoft-openjdk17
choco install -y microsoft-openjdk17 –force

C:\Program Files\Microsoft\jdk-17.0.8.7-hotspot\

3.
Set up Android SDK

Error :

Error using command : npx react-native doctor

Solution

Error : Android SDK not found for react-native

Error : ReactNative can’t locate Android SDK

2022 – Setting up the development environment

Installing dependencies – Node, Python2, JDK

Android development environment

1. Install Android Studio

Download and install Android Studio. While on Android Studio intallation wizard, make sure the boxes next to all of the following items are checked:

* Android SDK
* Android SDK Platform
* Android Virtual Device
* If you are not already using Hyper-V: Performance (Intel ® HAXM) (See here for AMD or Hyper-V)

Android Studio All Version Download

2. Install the Android SDK

Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 10 (Q) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.

Select the “SDK Platforms” tab from within the SDK Manager, then check the box next to “Show Package Details” in the bottom right corner. Look for and expand the Android 10 (Q) entry, then make sure the following items are checked:

Android SDK Platform 29

* Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image
* Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that 29.0.2 is selected.

Finally, click “Apply” to download and install the Android SDK and related build tools.

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order to build apps with native code.

1.Open the Windows Control Panel.
2.Click on User Accounts, then click User Accounts again
3.Click on Change my environment variables
4.Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

The SDK is installed, by default, at the following location:

%LOCALAPPDATA%\Android\Sdk

You can find the actual location of the SDK in the Android Studio “Settings” dialog, under Appearance & Behavior → System Settings → Android SDK.

Open a new Command Prompt window to ensure the new environment variable is loaded before proceeding to the next step.

1.Open powershell
2.Copy and paste Get-ChildItem -Path Env:\ into powershell
3.Verify ANDROID_HOME has been added

4. Add platform-tools to Path

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.
5.Click Edit.
6.Click New and add the path to platform-tools to the list.

The default location for this folder is:

%LOCALAPPDATA%\Android\Sdk\platform-tools

JAVA_HOME

Install Gradle Build Tool

Installation
The Gradle Wrapper
Gradle Release

Run a React Native App on an Android Device or Emulator – Windows JDK 8 – Android 11 (R)

Method 1

React Native Command Line Interface

install -g react-native-cli

Creating a new application

npx react-native init AwesomeProject
or 
react-native init helloworld

Running your React Native application

Step 1: Start Metro

npx react-native start

Step 2: Start your application
Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:

npx react-native run-android
or 
react-native run-android

Method 2

Step 1: Install create-react-native-app

C:\Users\Tutorialspoint> npm install -g create-react-native-app

Step 2: Create project

C:\Users\Tutorialspoint>cd Desktop
C:\Users\Tutorialspoint\Desktop>create-react-native-app MyReactNative

Step 3: NodeJS Python Jdk8

Step 4: Install React Native CLI

npm install -g react-native-cli

Step 5: Start react native

C:\Users\Tutorialspoint\Desktop>cd MyReactNative
C:\Users\Tutorialspoint\Desktop\MyReactNative>npm start

If everything went well you will get a QR code as shown below.

As instructed, one way to run react native apps on your android devise is to using expo. Install expo client in your android devise and scan the above obtained QR code.

Step 6: Eject the project
If you want to run android emulator using android studio, come out of the current command line by pressing ctrl+c.

Then, execute run eject command as

npm run eject

This prompts you options to eject, select the first one using arrows and press enter.

Then, you should suggest the name of the app on home screen and project name of the Android studio and Xcode projects.

Though your project ejected successfully, you may get an error as −

Ignore this error and run react native for android using the following command −

react-native run-android

Reference

react_native_environment_setup
Environment-setup
Getting-started-windows-android
Getting Started Pluralsight
Compile time in React Native
How to Install Multiple JDK’s in Windows?
Step 1: Installing Multiple Java Versions