Topic 4: Running Emulator and Simulator

📖 5 min read · 🎯 beginner · 🧭 Prerequisites: mac-installation, windows-installation

Why this matters

Before you show your app to anyone — even a friend — you need to run it somewhere. But you probably don't have a spare Android phone and an iPhone sitting on your desk. That's exactly what emulators and simulators solve. Android Studio gives you a virtual Android device on your computer, and Xcode gives you a virtual iPhone. In this lesson, we'll get both running so you can see your React Native app come alive without touching a single real device.

What You'll Learn

Install Android Studio and create an Android Virtual Device (AVD)
Install Xcode and launch an iOS simulator
Run your React Native app on both platforms from the terminal
Troubleshoot the most common emulator/simulator errors
Use Metro Bundler to serve your app to both platforms simultaneously

The Analogy

Think of an emulator or simulator as a full-scale architectural mock-up — the kind city planners build before breaking ground on a real structure. You can walk through every room, flip every light switch, and find every design flaw without spending money on real materials or risking real occupants. Android Studio hands you a miniature Android phone running inside your laptop; Xcode hands you a miniature iPhone. Neither has a battery, neither takes calls, but both run your React Native code exactly as a physical device would — making them the safest place to find problems early.

Chapter 1: Setting Up the Android Emulator

Android testing runs through Android Studio, which bundles the SDK manager and the AVD Manager in one package.

Step 1: Install Android Studio

Download and install Android Studio from the official site: https://developer.android.com/studio. Run the installer and follow the setup wizard, accepting the default SDK components when prompted.

Step 2: Configure the Android SDK

Open Android Studio.
Navigate to File → Settings → Appearance & Behavior → System Settings → Android SDK.
Confirm that the required SDK platforms (e.g., Android 12, 13) and SDK Tools (Build-Tools, Platform-Tools, Emulator) are checked and installed.

Step 3: Create an Android Virtual Device (AVD)

Open Android Studio.
Go to Tools → AVD Manager.
Click Create Virtual Device.
Select a device model (e.g., Pixel 6) and click Next.
Select a system image — for example Pie (API 28) or Q (API 29) — and click Next.
Review the AVD configuration, give it a name if you like, and click Finish.

Step 4: Start the Android Emulator

Open Android Studio.
Go to Tools → AVD Manager.
Click the Play button (▶) next to your newly created AVD. The emulator window boots up and shows an Android home screen.

Step 5: Run Your React Native App on the Emulator

With the emulator running, open a terminal in your React Native project directory and run:

npx react-native run-android

React Native compiles the Android build and installs it on the running emulator automatically.

Chapter 2: Setting Up the iOS Simulator

iOS simulation is macOS-only and requires Xcode, Apple's official IDE.

Step 1: Install Xcode

Open the Mac App Store, search for Xcode, and install it. Xcode is large (several gigabytes) — give it time.

Step 2: Open the iOS Simulator

Open Xcode.
Go to Xcode → Preferences → Components.
Download any simulator runtimes you need — for example, iOS 13.0 or later.
Once installed, go to Xcode → Open Developer Tool → Simulator.
In the Simulator app, choose a device from Hardware → Device (e.g., iPhone 11).

Step 3: Run Your React Native App on the Simulator

With the iOS simulator open, run this command from your project directory:

npx react-native run-ios

React Native builds the iOS bundle, compiles the native code, and installs the app on the active simulator.

Chapter 3: Troubleshooting Common Issues

Issue 1: "No Connected Devices" Error

The emulator or simulator must be running before you invoke run-android or run-ios. Verify connected/available devices with the following commands.

For Android:

adb devices

For iOS:

xcrun simctl list devices

A healthy Android emulator shows its device ID in the adb devices list. A booted iOS simulator shows Booted next to its entry in the xcrun output.

Issue 2: Build Errors

Build failures almost always come from a missing or misconfigured environment variable or toolchain.

Android: Confirm the ANDROID_HOME environment variable is set and pointing to your SDK directory. Without it, the React Native CLI cannot locate the build tools.

iOS: Confirm the Xcode command-line tools are installed:

xcode-select --install

If they are already installed, this command tells you so. If they are missing, it opens the installer prompt.

Chapter 4: Running Both Platforms Simultaneously

Testing cross-platform behavior is easier when Android and iOS are running side-by-side. Metro Bundler — React Native's JavaScript bundler — serves both platforms from a single process.

Step 1: Start Metro Bundler

Open a dedicated terminal window and start the bundler:

npx react-native start

Leave this terminal open. Metro watches your source files and re-bundles on every save.

Step 2: Run on Both Platforms in Parallel

In a second terminal, start the Android emulator build:

npx react-native run-android

In a third terminal, start the iOS simulator build:

npx react-native run-ios

Both targets connect to the same Metro process. Edit a component, save, and you'll see the change reflect in both the Android emulator and the iOS simulator within seconds.

flowchart TD
    src[Source Files] --> metro[Metro Bundler\nnpx react-native start]
    metro --> android[Android Emulator\nnpx react-native run-android]
    metro --> ios[iOS Simulator\nnpx react-native run-ios]
    android --> avd[AVD — Android Studio]
    ios --> sim[Simulator — Xcode]

🧪 Try It Yourself

Task: Boot an Android emulator and an iOS simulator, then run your React Native project on both at the same time.

Create a fresh project if you don't have one:

npx react-native init ExampleApp
cd ExampleApp

Start Metro Bundler in one terminal:

npx react-native start

In a second terminal, launch the Android build:

npx react-native run-android

In a third terminal, launch the iOS build (macOS only):

npx react-native run-ios

Success criterion: You should see the default React Native welcome screen on both the Android emulator window and the iOS simulator window, both updating in real time when you edit App.tsx.

🔍 Checkpoint Quiz

Q1. What is the purpose of the ANDROID_HOME environment variable?

A) It sets the default font for Android Studio
B) It tells the React Native CLI where the Android SDK is installed
C) It defines the emulator's screen resolution
D) It stores the AVD name used by run-android

Q2. Given that you have already created an AVD, what is the correct sequence to launch the Android emulator in Android Studio?

A) File → New → Virtual Device → Play
B) Tools → AVD Manager → Play (▶) next to your AVD
C) Build → Run → Emulator
D) Run → Edit Configurations → Android Emulator

Q3. You run npx react-native run-ios and get an error saying the simulator cannot be found. Which command helps you confirm whether a simulator is currently booted?

A) adb devices
B) xcrun simctl list devices
C) xcode-select --install
D) npx react-native doctor

Q4. A teammate edited a shared component but only tested on iOS. Their Android build now crashes on startup. What workflow would have caught this earlier?

A) Running npx react-native run-ios twice with different flags
B) Disabling Metro Bundler and building each platform separately
C) Running Metro Bundler once and targeting both platforms in parallel so changes are visible on both emulators simultaneously
D) Checking only the Xcode build log, since it covers cross-platform issues

A1. B — The React Native CLI and Gradle scripts read ANDROID_HOME to locate build tools, platform binaries, and ADB. Without it, Android builds cannot resolve their toolchain.

A2. B — Tools → AVD Manager shows all configured virtual devices; the Play button next to each one boots it.

A3. B — xcrun simctl list devices lists every configured iOS simulator and shows whether each is Booted or Shutdown. adb devices is the Android equivalent and does not help here.

A4. C — Starting Metro once and running run-android and run-ios in parallel means every save is visible on both platforms immediately, surfacing platform-specific regressions before they reach a teammate or a PR.

🪞 Recap

Android emulators are created and launched via Android Studio's AVD Manager; npx react-native run-android deploys the app to the running emulator.
iOS simulators are installed through Xcode's Preferences → Components and opened via Xcode → Open Developer Tool → Simulator; npx react-native run-ios deploys to the active simulator.
adb devices and xcrun simctl list devices confirm whether your virtual devices are visible to the CLI before you attempt a build.
Missing ANDROID_HOME and missing Xcode command-line tools (xcode-select --install) are the two most common root causes of build failures.
Running npx react-native start (Metro) in a dedicated terminal lets you target Android and iOS simultaneously, keeping cross-platform regressions visible in real time.

📚 Further Reading

Android Studio official download — the source of truth for Android Studio installation and SDK management
Xcode on the Mac App Store — Apple's official IDE; required for all iOS simulator work
React Native Environment Setup docs — the authoritative guide covering all platform combinations and environment variables
ADB documentation — full reference for adb devices and other Android Debug Bridge commands
⬅️ Previous: Windows Installation
➡️ Next: State and Props

Topic 4 : Running Emulator and Simulator