Topic 2 of 15 · React Native

Mac Installation

Lesson TL;DRTopic 2: Mac Installation 📖 6 min read · 🎯 beginner · 🧭 Prerequisites: introduction Why this matters Here's the thing — before you write a single line of React Native, your Mac needs to be properly...
6 min read·beginner·react-native · macos · xcode · android-studio

Topic 2: Mac Installation

📖 6 min read · 🎯 beginner · 🧭 Prerequisites: introduction

Why this matters

Here's the thing — before you write a single line of React Native, your Mac needs to be properly set up. And I've seen this trip up so many beginners: they skip steps, install the wrong version, or miss a tool entirely — then spend two days wondering why nothing runs. We're going to do this right, once, so your machine becomes a solid foundation instead of a source of mystery errors. Get this done today and every lesson after this just works.

What You'll Learn

  • Install Homebrew, Node.js, and Watchman as foundational prerequisites
  • Set up Xcode and its Command Line Tools for iOS development
  • Configure Android Studio, the Android SDK, and an Android Virtual Device (AVD)
  • Initialize a new React Native project and run it on both iOS and Android

The Analogy

Think of your macOS development environment as a professional kitchen being prepped before service. Homebrew is the head chef who stocks the pantry — once they're in place, every other ingredient arrives on demand. Node.js is the stove: nothing cooks without it. Watchman is the kitchen timer, always listening for changes so nothing burns. Xcode is the saucier's station for iOS dishes, and Android Studio is the grill station for Android. You wouldn't start plating food with an empty, unorganized kitchen — and you wouldn't write React Native apps without every station ready to go.

Chapter 1: Prerequisites

Before any installation begins, know what needs to be on the machine. the trainer's checklist:

  1. Homebrew — the package manager for macOS; everything else installs through it
  2. Node.js — the JavaScript runtime that powers Metro Bundler and the React Native CLI
  3. Watchman — a filesystem watcher developed by Facebook; it detects file changes and triggers fast rebuilds
  4. Xcode — Apple's IDE, which bundles the iOS simulator and the build toolchain required for iOS apps

Chapter 2: Installing Homebrew

Homebrew is the first domino. Once it falls, every other tool installs in a single command.

Step 1: Install Homebrew

Open Terminal and run:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Follow the on-screen prompts. The script handles everything. Once complete, brew is available system-wide and you can use it to install all remaining software.

Chapter 3: Installing Node.js and Watchman

Step 1: Install Node.js

brew install node

Step 2: Install Watchman

brew install watchman

Watchman is not strictly required to run React Native, but skipping it means slower reloads and occasional missed file-change events — the trainer does not skip it.

Chapter 4: Installing Xcode

Xcode bundles the iOS simulator, the xcodebuild toolchain, and the code signing infrastructure that every iOS app needs.

Step 1: Install Xcode

Download and install Xcode directly from the Mac App Store. It is a large download (~10 GB), so start it early.

Step 2: Install Xcode Command Line Tools

Even after Xcode installs, the command-line tools need an explicit activation:

xcode-select --install

A dialog will appear — accept it and let the installer finish. These tools provide compilers and utilities (git, make, clang) that React Native's build system depends on.

Chapter 5: Installing React Native CLI

The React Native CLI is the command-line interface for creating and managing React Native projects.

Step 1: Install React Native CLI globally

npm install -g react-native-cli

This makes the react-native command available anywhere in your terminal.

Chapter 6: Creating a New React Native Project

With the toolchain in place, it's time to scaffold a project and verify the setup actually works.

Step 1: Create a new project

npx react-native init MyFirstApp

npx pulls the latest initializer without requiring a separate global install. Replace MyFirstApp with your actual project name (no spaces, no special characters).

Step 2: Navigate into the project directory

cd MyFirstApp

All subsequent commands must be run from inside this directory.

Chapter 7: Running the App on an iOS Simulator

Step 1: Install and launch an iOS simulator

  1. Open Xcode.
  2. Go to Xcode → Preferences → Components.
  3. Download the simulator for the iOS version you want to target (e.g., iOS 14.5 or later).
  4. Go to Xcode → Open Developer Tool → Simulator.
  5. In the Simulator app, choose Hardware → Device and select a device model (e.g., iPhone 11).

Step 2: Run the React Native app

With the simulator running, open a Terminal window inside your project directory and execute:

npx react-native run-ios

This command starts the Metro Bundler (the JavaScript packager) and launches the compiled app inside the iOS simulator. A successful run shows the default React Native welcome screen on the simulated device.

Chapter 8: Running the App on an Android Emulator

iOS is only half the story. the trainer insists on verifying Android too — broken Android builds discovered late are always more expensive.

Step 1: Install Android Studio

Download and install Android Studio from https://developer.android.com/studio. Accept the default installation options; the setup wizard installs the Android SDK automatically.

Step 2: Configure the Android SDK

  1. Open Android Studio.
  2. Go to Preferences → Appearance & Behavior → System Settings → Android SDK.
  3. Confirm the required SDK platforms and SDK tools are installed. If any are missing, check their boxes and click Apply.

Step 3: Create an Android Virtual Device (AVD)

  1. Open Android Studio.
  2. Go to Tools → AVD Manager.
  3. Click Create Virtual Device.
  4. Select a device model (e.g., Pixel 4) and click Next.
  5. Select a system image (e.g., Pie or Q) and click Next.
  6. Review the AVD configuration and click Finish.

Step 4: Set up environment variables

React Native's Android build tools need to know where the SDK lives. Open Terminal and run:

echo "export ANDROID_HOME=$HOME/Library/Android/sdk" >> ~/.bash_profile
echo "export PATH=$PATH:$ANDROID_HOME/emulator:$ANDROID_HOME/tools:$ANDROID_HOME/tools/bin:$ANDROID_HOME/platform-tools" >> ~/.bash_profile
source ~/.bash_profile

If you use zsh (the default on recent macOS versions), replace ~/.bash_profile with ~/.zshrc in all three lines above.

Step 5: Start the Android emulator

  1. Open Android Studio.
  2. Go to Tools → AVD Manager.
  3. Click the Play button next to your created AVD. Wait for the emulated device to fully boot.

Step 6: Run the React Native app on Android

npx react-native run-android

This compiles the Android APK, installs it on the running emulator, and launches it. A successful run shows the same default welcome screen — this time inside the Android emulator.

flowchart TD
    A[Install Homebrew] --> B[Install Node.js]
    A --> C[Install Watchman]
    B --> D[Install React Native CLI]
    D --> E[npx react-native init MyFirstApp]
    E --> F{Target Platform}
    F -->|iOS| G[Install Xcode + CLT]
    G --> H[Launch iOS Simulator]
    H --> I[npx react-native run-ios]
    F -->|Android| J[Install Android Studio]
    J --> K[Configure SDK + AVD]
    K --> L[Set ANDROID_HOME env var]
    L --> M[Start Android Emulator]
    M --> N[npx react-native run-android]

🧪 Try It Yourself

Task: Get MyFirstApp running on an iOS simulator in under 10 minutes.

  1. Open Terminal and confirm your prerequisites are installed:
node --version
watchman --version
xcode-select -p
  1. If all three return valid output, scaffold the project:
npx react-native init MyFirstApp
cd MyFirstApp
npx react-native run-ios

Success criterion: The Metro Bundler starts (you'll see a QR code and bundle progress in the terminal), and the default React Native welcome screen — white background, "Welcome to React Native" heading — appears in the iOS Simulator. If you see that screen, your macOS environment is fully operational.

🔍 Checkpoint Quiz

Q1. Why does React Native need Watchman installed on macOS?

A) It compiles Swift code for the iOS bridge
B) It watches the filesystem for changes and triggers fast rebuilds during development
C) It manages version numbers for npm packages
D) It is required to sign iOS apps for the App Store

Q2. Given the following commands run in sequence, what is the correct order to set up Android environment variables?

# Command A
source ~/.bash_profile

# Command B
echo "export ANDROID_HOME=$HOME/Library/Android/sdk" >> ~/.bash_profile

# Command C
echo "export PATH=$PATH:$ANDROID_HOME/emulator:$ANDROID_HOME/tools:$ANDROID_HOME/tools/bin:$ANDROID_HOME/platform-tools" >> ~/.bash_profile

A) A → B → C
B) B → A → C
C) B → C → A
D) C → B → A

Q3. You run npx react-native run-ios and nothing happens — the simulator never opens and Metro never starts. Which prerequisite is most likely missing or misconfigured?

A) Watchman
B) Xcode Command Line Tools (xcode-select --install)
C) Android Studio
D) The ANDROID_HOME environment variable

Q4. How would you initialize a new React Native project called TodoApp without first installing the CLI globally?

A) npm install react-native TodoApp
B) react-native new TodoApp
C) npx react-native init TodoApp
D) brew install TodoApp

A1. B — Watchman monitors the filesystem for file changes, letting Metro Bundler reload only what changed instead of rebundling everything from scratch.

A2. C — You must write both export lines to the profile file (B then C) before sourcing it (A) so the shell picks up the new variables in the current session.

A3. B — xcode-select --install installs the compilers and build tools that run-ios depends on. Without them the build fails silently or with a cryptic toolchain error.

A4. C — npx react-native init TodoApp uses npx to pull and run the initializer on demand, no global CLI install required.

🪞 Recap

  • Homebrew is the gateway tool — install it first and use it to pull Node.js and Watchman.
  • Xcode and its Command Line Tools (xcode-select --install) are mandatory for any iOS build or simulator run.
  • Android development requires Android Studio, a configured SDK, an AVD, and the ANDROID_HOME environment variable pointing at the SDK directory.
  • npx react-native init <ProjectName> scaffolds a new project; npx react-native run-ios and npx react-native run-android launch it on the respective platform.
  • Always verify each prerequisite before moving on — a gap in the chain causes failures that are hard to trace later.

📚 Further Reading

Like this topic? It’s one of 15 in React Native.

Block your seat for ₹2,500 and join the next cohort.

Course detailsBlock your seat →