React Native Environment Setup

Prerequisites & Step-by-Step Guide — Windows and Mac

⚠ Important: Setting up Android Studio and the Android SDK can take 45–60 minutes depending on internet speed and laptop performance. Complete every step below in advance using a stable internet connection.

---

1. What You Need to Install

Item	Version / Notes	Windows	Mac
Node.js	v22.11.0 or newer	Required	Required
Java Development Kit (JDK)	JDK 17 (Zulu recommended)	Required	Required
Android Studio	Latest stable release	Required	Required
Android SDK Platform	Latest	Required	Required
Android SDK Build-Tools	Latest	Required	Required
Android SDK Command-line Tools	Latest	Required	Required
System Image (Emulator)	Google APIs Intel x86_64 / ARM64 v8a	Required	Required
ANDROID_HOME env variable	Points to Android SDK path	Required	Required

---

2. Android Setup

The Android setup is the same overall process on both operating systems, but the installation commands and environment-variable configuration are different. Select your operating system below and follow the steps from start to finish.

Windows

2.1 Minimum Hardware Requirements

Component	Minimum	Recommended
RAM	8 GB	16 GB
Processor	Quad-core	Quad-core or better
Free Disk Space	10 GB	20 GB (Android Studio, SDKs, emulator, dependencies)
OS	Windows 10 or later	Windows 10/11 (64-bit)

2.2 Check Existing Versions

Open PowerShell or CMD and check if the required tools are already installed:

node -v
java -version
choco -v

Required versions: Node.js LTS, and JDK 17.

2.3 Install Chocolatey (Package Manager for Windows)

Chocolatey will be used to install the JDK and Node.js.

• Open PowerShell as Administrator.
• Check the current execution policy:

  Get-ExecutionPolicy

• If it returns Restricted, allow scripts to run:

  Set-ExecutionPolicy AllSigned
  # or
  Set-ExecutionPolicy Bypass -Scope Process

• Install Chocolatey using the official install command:

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

  Full reference: chocolatey.org/install
• Verify installation:

  choco -v

2.4 Install Node.js and JDK via Chocolatey

Still in the admin PowerShell, run:

choco install -y nodejs-lts microsoft-openjdk17

Once complete:

• Close the PowerShell window.
• Re-open PowerShell as Administrator.
• Verify both installations:

  node -v
  java -version

2.5 Install Android Studio

• Download and install Android Studio from developer.android.com/studio.
• During setup, make sure these are installed via the SDK Manager: Android SDK, Android SDK Platform, Android Virtual Device (AVD).
• Set up an emulator using Device Manager inside Android Studio.

2.6 Configure the ANDROID_HOME Environment Variable

• Open Control Panel → User Accounts → User Accounts (again).
• Click Change my environment variables.
• Click New… to create a new user variable:
  • Variable name: ANDROID_HOME
  • Variable value: %LOCALAPPDATA%\Android\Sdk
• Open a new Command Prompt window so the variable loads.
• Verify the variable was set by opening PowerShell and running:

  Get-ChildItem -Path Env:\

  Confirm ANDROID_HOME appears in the list.

2.7 Add platform-tools to PATH

• Open Control Panel → User Accounts → User Accounts (again).
• Click Change my environment variables.
• Select the Path variable → click Edit.
• Click New and add:

  %LOCALAPPDATA%\Android\Sdk\platform-tools

• Click OK to save all dialogs.

2.8 Create a New React Native Project

• Create a new project folder (e.g., on the Desktop).
• Open CMD or PowerShell in that folder.
• Remove any old global react-native-cli if previously installed, since it can cause conflicts:

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

• Create a new React Native project called AwesomeProject:

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

2.9 Run the App on Android

Navigate into the project folder and run the app:

cd AwesomeProject
npm run android

Make sure an emulator is running (via Android Studio's Device Manager) or a physical Android device is connected with USB debugging enabled before running this command.

2.10 Windows Quick Checklist

• Node.js LTS installed
• JDK 17 installed
• Chocolatey installed
• Android Studio installed
• Android SDK + emulator configured
• ANDROID_HOME environment variable set
• platform-tools added to PATH
• React Native project created
• App runs successfully on emulator/device

---

Mac

2.1 Install Homebrew (if not already installed)

Homebrew is macOS's package manager — install from brew.sh, then use it for the steps below.

2.2 Install Node.js

Install Node.js v22.11.0+ (via nodejs.org installer or brew).

2.3 Install Java Development Kit (Zulu 17)

brew install --cask zulu@17

Then set JAVA_HOME in ~/.zshrc (or ~/.bash_profile):

export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home

2.4 Install Android Studio

• Download from developer.android.com/studio and install. Ensure Android SDK, Android SDK Platform, and Android Virtual Device are checked.

2.5 Set the ANDROID_HOME Environment Variable

Add to ~/.zprofile or ~/.zshrc (use ~/.bash_profile if on bash):

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

Run source ~/.zprofile (or the equivalent file) and confirm with:

echo $ANDROID_HOME

2.6 Create an Android Virtual Device (AVD)

In Android Studio → AVD Manager → Create Virtual Device → pick any phone → select the latest available API → Finish, then launch it once to confirm.

2.7 Quick Verification Command

Once setup is done, students can verify everything is configured correctly by running this inside any React Native project folder:

npx react-native doctor

This checks Node, JDK, Android SDK, ANDROID_HOME, and emulator/adb setup, and tells them exactly what's missing.

---

Android setup complete

Once you have completed the Windows or Mac setup above, verify your environment with npx react-native doctor before moving on to the workshop project.

3. Workshop Project — Clone & Install

After the environment setup above is done, students should clone the workshop repository and install its dependencies before the session starts.

3.1 Download the Repository as a ZIP

• Go to the repository page: github.com/mitulbhatiya-srkay/reactnativeworkshop
• Click the green Code button → Download ZIP.
• Once downloaded, extract the ZIP to a folder of your choice (e.g., Desktop).
  • Note: the extracted folder will likely be named reactnativeworkshop-main (not reactnativeworkshop), since GitHub ZIPs are named after the branch.

3.2 Move into the Project Folder

Open CMD/PowerShell (Windows) or Terminal (Mac) and navigate into the extracted folder:

cd reactnativeworkshop-main

(Adjust the folder name if you renamed it after extracting.)

3.3 Install Project Dependencies

This installs every library the project needs, based on its package.json:

npm i

3.4 Run the Project

Once dependencies are installed, run the app on Android (with an emulator running or a device connected):

npm run android

3.5 Download & Install — Quick Checklist

• ZIP downloaded from the repository page
• ZIP extracted to a known folder
• Moved into the project folder (cd reactnativeworkshop-main)
• npm i completed with no errors
• App builds and runs via npm run android

You're ready for the workshop

If the project installs successfully and npm run android launches the app on your emulator or connected device, your React Native environment is ready.

---

Reference: reactnative.dev/docs/set-up-your-environment