🔧 Installing the Toolchain

What You'll Install

Before we create our first project, we need to set up our development environment. The good news? With Expo, the setup is much simpler than traditional native development. No Xcode project files to configure, no Android Gradle headaches (at least not yet).

Here's the complete toolchain we'll set up:

The four pillars of your React Native development environment

Node.js and Package Manager

Node.js is the foundation. It runs JavaScript outside the browser, and all React Native tooling (Metro bundler, Expo CLI, etc.) runs on Node. You need Node.js version 18 or newer (LTS recommended).

Check If You Already Have Node

Open your terminal and run:

# Check Node.js version
node --version

# Check npm version (comes with Node)
npm --version

If you see version numbers (Node 18+ and npm 9+), you're good! Skip to the next section.

Installing Node.js

Option A: Using nvm (Recommended for Mac/Linux)

# Install nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# Restart your terminal, then install Node LTS
nvm install --lts

# Verify installation
node --version  # Should show v20.x.x or v22.x.x

Option B: Using nvm-windows (Windows)

1. Download the installer from nvm-windows releases
2. Run the installer
3. Open a new PowerShell or Command Prompt window
4. Run:

# Install latest LTS version
nvm install lts

# Use the installed version
nvm use lts

# Verify
node --version

Option C: Direct Installation

If you prefer not to use a version manager:

1. Go to nodejs.org
2. Download the LTS version (not Current)
3. Run the installer
4. Restart your terminal and verify with node --version

Package Manager: npm vs Yarn vs pnpm

npm comes bundled with Node.js and works great. You can also use Yarn or pnpm if you prefer:

Code Editor Setup

You can use any code editor, but we strongly recommend Visual Studio Code. It's free, fast, and has excellent React Native support.

Installing VS Code

1. Go to code.visualstudio.com
2. Download for your operating system
3. Run the installer

Essential Extensions

Open VS Code and install these extensions (click the Extensions icon in the sidebar or press Ctrl/Cmd + Shift + X):

Recommended VS Code Settings

Open Settings JSON (Ctrl/Cmd + Shift + P → "Preferences: Open Settings (JSON)") and add:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
  },
  "files.associations": {
    "*.js": "javascriptreact",
    "*.ts": "typescriptreact"
  }
}

Expo Go on Your Device

Expo Go is an app you install on your phone that lets you run your React Native projects without building native code. It's the fastest way to see your app on a real device.

Installing Expo Go

How Expo Go Works

sequenceDiagram
    participant Phone as 📱 Expo Go
    participant Server as 💻 Metro Bundler
    participant Code as 📁 Your Code
    
    Phone->>Server: Scan QR code / Connect
    Server->>Code: Watch for changes
    Server->>Phone: Send JavaScript bundle
    Phone->>Phone: Run app
    
    Note over Code: You edit a file
    Code->>Server: File changed!
    Server->>Phone: Send update
    Phone->>Phone: Hot reload ⚡
                

Expo Go connects to your development server and receives live updates

Simulators and Emulators

While testing on a real device is important, simulators let you test without grabbing your phone every time. They're also essential for testing different screen sizes and OS versions.

iOS Simulator (Mac Only)

The iOS Simulator requires Xcode, which is only available on macOS.

Installation Steps:

1. Open the App Store on your Mac
2. Search for Xcode
3. Click Get (it's free but large — ~12GB)
4. Wait for the download and installation
5. Open Xcode once to accept the license agreement
6. Install command line tools:

# Install Xcode command line tools
xcode-select --install

# Verify installation
xcode-select -p
# Should output: /Applications/Xcode.app/Contents/Developer

Opening the Simulator:

# Open iOS Simulator directly
open -a Simulator

# Or from Xcode: Xcode → Open Developer Tool → Simulator

🤖 Android Emulator (All Platforms)

The Android Emulator is part of Android Studio. Even if you don't write native Android code, you need Android Studio for the emulator.

Installation Steps:

1. Go to developer.android.com/studio
2. Download Android Studio
3. Run the installer
4. During setup, ensure these are checked:
   • Android SDK
   • Android SDK Platform
   • Android Virtual Device
5. Complete the installation wizard

Creating an Emulator (AVD):

1. Open Android Studio
2. Click More Actions (or Configure) → Virtual Device Manager
3. Click Create Device
4. Select a phone (e.g., Pixel 7)
5. Select a system image:
   • Click the Recommended tab
   • Choose a recent API level (e.g., API 34 / Android 14)
   • Click Download if needed
6. Click Next → Finish

Running the Emulator:

# From Android Studio: 
# Virtual Device Manager → Click Play button on your device

# From command line (after adding to PATH):
emulator -avd Pixel_7_API_34

Setting up Environment Variables (Important!):

Expo needs to know where Android SDK is installed. Add these to your shell profile:

Mac/Linux (~/.bashrc, ~/.zshrc, or ~/.bash_profile):

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

Windows (System Environment Variables):

# Set ANDROID_HOME to:
C:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk

# Add to PATH:
%ANDROID_HOME%\emulator
%ANDROID_HOME%\platform-tools

After adding, restart your terminal and verify:

# Should output the SDK path
echo $ANDROID_HOME   # Mac/Linux
echo %ANDROID_HOME%  # Windows

# Should show available emulators
emulator -list-avds

Verification Checklist

Let's verify everything is installed correctly. Run these commands in your terminal:

# 1. Node.js (should be 18+)
node --version

# 2. npm (should be 9+)
npm --version

# 3. Check VS Code is installed (opens VS Code)
code --version

# 4. Android SDK (should output path)
echo $ANDROID_HOME   # Mac/Linux
# or
echo %ANDROID_HOME%  # Windows

# 5. List Android emulators (should show at least one)
emulator -list-avds

# 6. iOS Simulator (Mac only - should open Simulator)
open -a Simulator

Troubleshooting Common Issues

Summary

🚀 What's Next?

Your environment is ready! In the next lesson, we'll use these tools to create your first React Native project. You'll see your app running on a device in minutes!