Topic 46 of 56 Β· Full Stack Advanced

Running Emulator and Simulator

Lesson TL;DRTopic 4: Running Emulator and Simulator πŸ“– 5 min read Β· 🎯 beginner Β· 🧭 Prerequisites: lifecyclemethods, phpwithupdatedelete Why this matters Here's the thing β€” you don't want to test your React Nati...
5 min readΒ·beginnerΒ·react-native Β· android Β· ios Β· emulator

Topic 4: Running Emulator and Simulator

πŸ“– 5 min read Β· 🎯 beginner Β· 🧭 Prerequisites: lifecycle-methods, php-with-update-delete

Why this matters

Here's the thing β€” you don't want to test your React Native app on a real phone every single time you change one line of code. It's slow, it drains battery, and if something crashes, you're stuck. Emulators and simulators solve this. They're virtual Android and iOS devices that run right on your laptop, so you can build fast, break things safely, and fix them without touching a real device. In this lesson, we'll get an Android Virtual Device running in Android Studio and an iOS Simulator up through Xcode β€” your two most important testing tools as a cross-platform developer.

What You'll Learn

  • Install and configure Android Studio to create and start an Android Virtual Device (AVD)
  • Install Xcode and open an iOS Simulator to run a React Native app
  • Diagnose and fix the most common emulator/simulator errors (No connected devices, build failures, missing env vars)
  • Run Metro Bundler and target both Android and iOS simultaneously from the terminal

The Analogy

Think of an emulator or simulator as a crash-test dummy for your app. Before car manufacturers let a real human sit in a seat during a collision test, they use a precisely instrumented dummy that behaves like a human body. Similarly, Android emulators and iOS simulators faithfully replicate the hardware, OS version, screen size, and sensor behaviour of real phones β€” so your app takes the hits in a controlled environment before it ever touches a customer's device. You can swap the "dummy" for an iPhone 11, a Pixel 6, or a decade-old budget Android without owning any of them.

Chapter 1: Setting Up the Android Emulator

Android emulation lives inside Android Studio, which ships with the AVD Manager β€” a tool for creating, configuring, and launching Android Virtual Devices.

Step 1: Install Android Studio

Download and install Android Studio from the official site: https://developer.android.com/studio

Step 2: Configure the Android SDK

  1. Open Android Studio.
  2. Navigate to File β†’ Settings β†’ Appearance & Behavior β†’ System Settings β†’ Android SDK.
  3. Confirm that the required SDK platforms (e.g., API 33 / Android 13) and SDK tools are installed. Check the boxes and click Apply if anything is missing.

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 6) and click Next.
  5. Select a system image (e.g., Pie, Q, Tiramisu) and click Next.
  6. Review AVD configuration settings and click Finish.

Step 4: Start the Android Emulator

  1. Open Tools β†’ AVD Manager.
  2. Click the β–Ά Play button next to your newly created AVD.
  3. Wait for the emulator window to boot to the Android home screen.

Step 5: Run the React Native App on the Emulator

With the emulator running, open a terminal inside your React Native project directory and execute:

npx react-native run-android

React Native compiles the native Android code, installs the APK on the running emulator, and launches the app automatically.

Chapter 2: Setting Up the iOS Simulator

iOS simulation is handled by Xcode, Apple's IDE. This path is only available on macOS.

Step 1: Install Xcode

Download and install Xcode from the Mac App Store. This is a large download (~10 GB); plan accordingly.

Step 2: Open the iOS Simulator

  1. Open Xcode.
  2. Go to Xcode β†’ Preferences β†’ Components.
  3. Install the simulator runtimes you need (e.g., iOS 13.0, iOS 16.0).
  4. Navigate to Xcode β†’ Open Developer Tool β†’ Simulator.
  5. In the Simulator window, choose a device via Hardware β†’ Device (e.g., iPhone 11, iPhone 15 Pro).

Step 3: Run the React Native App on the Simulator

With the simulator booted, open a terminal in your React Native project and run:

npx react-native run-ios

React Native compiles the native iOS code using xcodebuild, installs the .app bundle in the simulator, and opens it automatically.

Chapter 3: Troubleshooting Common Issues

Even with a clean setup, emulators and simulators surface predictable pain points. Here are the most common ones and how to fix them.

Issue 1: "No connected devices" Error

This means React Native cannot find a running device. Verify the emulator or simulator is actively running, then check the device list:

For Android β€” list connected ADB devices:

adb devices

Expected output when the emulator is healthy:

List of devices attached
emulator-5554   device

For iOS β€” list available simulators:

xcrun simctl list devices

Look for a device marked (Booted). If nothing is booted, launch the simulator from Xcode first.

Issue 2: Build Errors

Build failures almost always trace back to missing dependencies or a misconfigured environment.

For Android: Confirm the ANDROID_HOME environment variable points to your SDK directory. Add it to ~/.zshrc or ~/.bash_profile:

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

For iOS: Ensure the Xcode command-line tools are installed:

xcode-select --install

If they are already installed, reset the active developer directory:

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

Chapter 4: Combining Emulators and Simulators in the Development Workflow

Testing on one platform is not enough. Cross-platform bugs only appear when you run both. Here is how to target Android and iOS simultaneously using Metro Bundler.

Step 1: Start Metro Bundler

Metro Bundler is React Native's JavaScript bundler. It watches your source files and serves the bundle to any connected device or emulator. Start it in a dedicated terminal:

npx react-native start

Leave this terminal open. Metro must stay alive while you develop.

Step 2: Run on Both Platforms Simultaneously

Open a second terminal and start the Android emulator target:

npx react-native run-android

Open a third terminal and start the iOS simulator target:

npx react-native run-ios

Both shells connect back to the single Metro Bundler process. Changes you save in your editor hot-reload in both the Android emulator and the iOS simulator at the same time, letting you catch platform-specific rendering differences instantly.

flowchart TD
    A[Source Code + Metro Bundler\nnpx react-native start] --> B[Android Emulator\nnpx react-native run-android]
    A --> C[iOS Simulator\nnpx react-native run-ios]
    B --> D{Cross-platform\ncompatibility check}
    C --> D

πŸ§ͺ Try It Yourself

Task: Boot an Android emulator and launch a fresh React Native project on it β€” then immediately open the same project in the iOS Simulator.

  1. Create a new project if you don't have one:
npx react-native@latest init ExampleApp
cd ExampleApp
  1. In Terminal 1, start Metro:
npx react-native start
  1. In Terminal 2, target Android:
npx react-native run-android
  1. In Terminal 3, target iOS (macOS only):
npx react-native run-ios

Success criterion: You see the default React Native welcome screen β€” "Welcome to React Native" β€” displayed in both the Android emulator window and the iOS Simulator window at the same time, both reflecting any text edit you make in App.tsx within a few seconds.

πŸ” Checkpoint Quiz

Q1. Why do developers test on both an Android emulator and an iOS simulator instead of picking just one?

A) Android and iOS share the same JavaScript engine so bugs only appear on one
B) Cross-platform differences in layout, navigation, and native APIs can cause bugs that only appear on one OS
C) Metro Bundler only supports one platform at a time
D) Apple requires simulator testing before App Store submission

Q2. Given the following terminal output after running adb devices:

List of devices attached
* daemon not running; starting now at tcp:5037
* daemon started successfully

What does this output tell you?

A) An emulator is running and connected
B) ADB just started its daemon but no device is listed β€” the emulator is not running
C) The React Native app has been installed successfully
D) Android Studio needs to be reinstalled

Q3. A teammate on Windows says npx react-native run-ios fails immediately with "command not found: xcodebuild". What is the root cause?

A) The iOS Simulator is not booted
B) Metro Bundler is not running
C) Xcode is only available on macOS; iOS simulation cannot run on Windows
D) The ANDROID_HOME variable is unset

Q4. You just cloned a React Native project and npx react-native run-android fails with a build error. Which environment check should you perform first?

A) Run xcrun simctl list devices
B) Verify the ANDROID_HOME environment variable is set and points to the Android SDK
C) Reinstall Node.js
D) Delete the ios/ folder and re-run

A1. B β€” Android and iOS have different layout engines, font rendering, navigation patterns, and native module behaviour. A bug invisible on one platform can be obvious on the other; testing both catches these divergences before release.

A2. B β€” The output shows ADB starting its daemon but lists no attached devices beneath it. The emulator is not running. Boot an AVD from the AVD Manager first.

A3. C β€” xcodebuild is part of Xcode, which is macOS-exclusive. iOS simulation is simply not possible on Windows or Linux without a macOS machine or a cloud Mac service.

A4. B β€” Android build failures most commonly stem from a missing or incorrect ANDROID_HOME environment variable. Setting it (and adding the platform-tools path) resolves the majority of first-run build errors.

πŸͺž Recap

  • Android emulation requires Android Studio, a configured SDK, and an AVD created via the AVD Manager; npx react-native run-android deploys to the running emulator.
  • iOS simulation requires Xcode (macOS only); npx react-native run-ios compiles and installs the app in the booted simulator.
  • adb devices and xcrun simctl list devices are the first diagnostic commands when a "No connected devices" error appears.
  • Missing ANDROID_HOME and missing Xcode command-line tools (xcode-select --install) are the two most common build-error root causes.
  • Running Metro Bundler once in its own terminal lets you target Android and iOS simultaneously from two additional terminals, enabling real-time cross-platform comparison.

πŸ“š Further Reading

Like this topic? It’s one of 56 in Full Stack Advanced.

Block your seat for β‚Ή2,500 and join the next cohort.

Course detailsBlock your seat β†’