Simulador de iOS y Emulador de Android

Los dispositivos virtuales te ofrecen una iteración rápida en macOS y cualquier escritorio - sin cables USB, reiniciamientos instantáneos y captura de pantallas repetibles para control de calidad de diseño. Combínalos con los atajos de Expo CLI para que los proyectos de SDK 57 se abran en el simulador correcto o AVD cada vez.

Receta

Tarjeta de referencia rápida - lista para copiar y pegar.

# Inicia Metro y abre el dispositivo virtual predeterminado
npx expo start
# Presiona i → Simulador de iOS (solo macOS)
# Presiona a → Emulador de Android (ANDROID_HOME + un AVD requerido)
 
# Elige un dispositivo específico de manera interactiva
# Shift+I → lista de simuladores de iOS
# Shift+A → lista de emulador/dispositivos de Android
 
# Lanza directamente sin el menú interactivo
npx expo start --ios
npx expo start --android
 
# Captura una pantalla del simulador/emulador iniciado
xcrun simctl io booted screenshot ./snapshots/ios-$(date +%Y%m%d-%H%M%S).png
adb exec-out screencap -p > ./snapshots/android-$(date +%Y%m%d-%H%M%S).png

Cuándo usarlo:

• Trabajo diario de características cuando un dispositivo físico no es conveniente o no está disponible.
• Verificación de diseños en múltiples tamaños de pantalla (iPhone SE, Pro Max, Pixel Fold, tablet).
• Captura de pantallas base antes de una refactorización de estilos.
• Reproducción de errores específicos del SO en un nivel API específico de iOS o Android.
• Pruebas de humo en CI que arrancan un emulador y cargan una compilación de desarrollo.

Ejemplo Funcional

#!/usr/bin/env bash
# scripts/device-matrix.sh - arranca simuladores clave, captura instantáneas, registra dimensiones
set -euo pipefail
 
OUT_DIR="${1:-./snapshots/matrix-$(date +%Y%m%d)}"
mkdir -p "$OUT_DIR"
 
echo "▶ Iniciando Metro en background (dev-client asumido)…"
npx expo start --dev-client --non-interactive &
METRO_PID=$!
sleep 8
 
capture_ios() {
  local UDID="$1"
  local LABEL="$2"
  xcrun simctl boot "$UDID" 2>/dev/null || true
  xcrun simctl bootstatus "$UDID" -b
  # Expo CLI apunta al simulador más recientemente abierto
  open -a Simulator --args -CurrentDeviceUDID "$UDID"
  sleep 4
  xcrun simctl io "$UDID" screenshot "$OUT_DIR/ios-${LABEL}.png"
  xcrun simctl list devices booted | grep "$UDID" || true
}
 
capture_android() {
  local AVD="$1"
  local LABEL="$2"
  emulator -avd "$AVD" -no-snapshot-load -no-boot-anim &
  adb wait-for-device
  while [ "$(adb shell getprop sys.boot_completed | tr -d '\r')" != "1" ]; do sleep 2; done
  adb exec-out screencap -p > "$OUT_DIR/android-${LABEL}.png"
  adb emu kill
}
 
# Matriz de iOS - lista runtimes disponibles primero: xcrun simctl list devices available
capture_ios "iPhone-16-Pro" "iphone-16-pro" || echo "⚠️  Crea iPhone 16 Pro en Xcode > Configuración > Componentes"
capture_ios "iPad-mini-A17-Pro" "ipad-mini" || echo "⚠️  Crea iPad mini en Componentes de Xcode"
 
# Matriz de Android - lista AVDs: emulator -list-avds
capture_android "Pixel_8_API_36" "pixel-8" || echo "⚠️  Crea AVD Pixel 8 API 36 en Android Studio"
 
kill "$METRO_PID" 2>/dev/null || true
echo "✅ Instantáneas escritas en $OUT_DIR"

// App.tsx - etiqueta de tamaño en pantalla para revisión de instantánea
import { StyleSheet, Text, useWindowDimensions, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
 
export default function App() {
  const { width, height, fontScale } = useWindowDimensions();
  const insets = useSafeAreaInsets();
 
  return (
    <View style={[styles.screen, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
      <Text style={styles.title}>Prueba de matriz de dispositivos</Text>
      <Text style={styles.row}>Ventana: {Math.round(width)} × {Math.round(height)}</Text>
      <Text style={styles.row}>Escala de fuente: {fontScale.toFixed(2)}</Text>
      <Text style={styles.row}>Segura arriba: {insets.top}px - abajo: {insets.bottom}px</Text>
      <View style={styles.card}>
        <Text>La tarjeta debe permanecer dentro del área segura en teléfonos y tablets con muesca.</Text>
      </View>
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, paddingHorizontal: 16, backgroundColor: "#f8fafc" },
  title: { fontSize: 22, fontWeight: "700", marginBottom: 12 },
  row: { fontSize: 14, color: "#475569", marginBottom: 4 },
  card: { marginTop: 24, padding: 16, borderRadius: 12, backgroundColor: "#e0e7ff" },
});

Lo que esto demuestra:

• Atajos de teclado de Expo CLI (i, a, Shift+I, Shift+A) como el camino de lanzamiento principal.
• xcrun simctl y adb exec-out screencap para instantáneas visuales reproducibles fuera de la aplicación.
• Un script de matriz de dispositivos mínimo que arranca múltiples factores de forma y escribe PNGs en una carpeta fechada.
• useWindowDimensions + insertes de área segura para que las capturas codifiquen el contexto de diseño que los revisores necesitan.

Análisis Profundo

Cómo Funciona

• npx expo start inicia Metro; presionar i o a le dice a Expo CLI que encuentre o arranque un simulador/AVD e instale Expo Go (flujo administrado) o abra tu compilación de desarrollo si una está instalada.
• Expo CLI apunta al Simulador de iOS más recientemente abierto - si hay múltiples simuladores arrancados, el último enfocado gana. Usa Shift+I para seleccionar explícitamente.
• Android requiere ANDROID_HOME en tu PATH más al menos un AVD creado en el Administrador de Dispositivos Virtuales de Android Studio. Expo CLI invoca emulator y adb bajo el capó.
• Instantáneas aquí significan capturas PNG de la pantalla virtual - útiles para diffing visual, control de calidad de diseño e informes de errores. No son instantáneas de componentes Jest (ver Configuración de Jest para Expo).
• RN 0.86 / SDK 57 compila contra Android 16 (API 36) - instala esa plataforma en Android Studio antes de que npx expo run:android o las compilaciones del emulador tengan éxito.

Lista de Verificación de Configuración de Plataforma

# Env de Android en macOS (agregar a ~/.zshrc)
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator:$ANDROID_HOME/platform-tools
 
# Abre Simulador manualmente cuando Expo CLI parece atascado
open -a Simulator

Matriz de Dispositivos Recomendada

Ejecuta tus pantallas más pesadas en al menos un dispositivo de iOS + uno de Android por nivel antes de una versión candidata a lanzamiento.

Limitaciones del Simulador (APIs de Expo)

Valida cámara, sensores y push en un dispositivo físico antes de enviar.

Comandos de Dispositivo de Expo CLI

Notas de TypeScript

import * as Device from "expo-device";
 
// expo-device es la verificación confiable - simuladores/emuladores devuelven isDevice === false
if (__DEV__ && !Device.isDevice) {
  console.log("Dispositivo virtual - valida cámara, push y rendimiento en hardware.");
}

Instala con npx expo install expo-device.

Errores Comunes

• Expo CLI atascado en "Abriendo simulador" - La aplicación Simulador a veces ignora el comando de apertura. Solución: Ejecuta open -a Simulator, elige Archivo > Abrir Simulador, selecciona un dispositivo y luego presiona i de nuevo.
• El simulador de iOS incorrecto recibe el bundle - Múltiples simuladores arrancados confunden el direccionamiento. Solución: Cierra simuladores adicionales o usa Shift+I para seleccionar uno; Expo CLI siempre apunta al más recientemente abierto.
• Desajuste de versión de adb de Android - El adb del sistema entra en conflicto con platform-tools del SDK. Solución: Pon $ANDROID_HOME/platform-tools primero en PATH; verifica con which adb.
• Plataforma SDK 36 de Android faltante - Gradle falla con errores de SDK no encontrado en RN 0.86. Solución: Android Studio - Plataformas SDK - instala Android 16 (API 36).
• Desajuste de SDK de Expo Go en simulador - Un proyecto SDK 57 fresco puede no cargar en una instalación anterior de Expo Go. Solución: Ejecuta npx expo-go download ios 57 o crea una compilación de desarrollo.
• Asumir que el simulador es igual al rendimiento del dispositivo - Los simuladores usan CPU/GPU de escritorio; los perfiles jank engañan. Solución: Perfila en hardware para objetivos de SLO de scroll y animación.
• Capturas de pantalla con tema o locale incorrectos - Las capturas de matriz tomadas antes de que la aplicación establezca la apariencia se ven inconsistentes. Solución: Establece tema/locale en código de aplicación antes de capturar; almacena metadatos junto a los PNGs.

Alternativas

Preguntas Frecuentes

xcrun simctl io booted screenshot screenshot.png

adb exec-out screencap -p > screenshot.png

emulator -list-avds

Relacionado

• Conceptos Básicos de Desarrollo Local - expo start, túnel vs LAN y flujos de código QR
• Prueba de Dispositivo Físico - Depuración USB, inalámbrica y validación de hardware
• expo-dev-client - compilaciones de dev personalizadas en simuladores con módulos nativos
• Expo Go vs Compilaciones de Desarrollo - cuándo Expo Go en emuladores es suficiente
• React Native DevTools - inspecciona elementos y rendimiento en dispositivos virtuales
• Inicio Rápido de create-expo-app - scaffold SDK 57 antes de abrir simuladores

Versiones de Stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0 y Expo SDK 57 (expo ~57.0.4).