Conceptos básicos de Expo Platform

10 ejemplos para comenzar con Expo Platform - 7 básicos y 3 intermedios.

Requisitos previos

Los proyectos Expo se estructuran con create-expo-app, que fija el SDK, la configuración de Metro y el diseño predeterminado de TypeScript en un paso.

npx create-expo-app@latest MyExpoApp --template blank-typescript
cd MyExpoApp

Confirma la fijación del SDK en package.json antes de instalar nada más:

{
  "dependencies": {
    "expo": "~57.0.4",
    "react": "19.2.3",
    "react-native": "0.86.0"
  }
}

Inicia el servidor de desarrollo y abre la aplicación en un dispositivo o simulador:

npx expo start

Presiona i para el Simulador de iOS, a para Android, o escanea el código QR con Expo Go. Cada ejemplo ejecutable a continuación puede reemplazar App.tsx en el proyecto que acabas de crear.

Herramientas: Estos ejemplos se dirigen a Expo SDK 57 (expo ~57.0.4), React Native 0.86.0 y React 19.2.3.

Ejemplos básicos

1. Expo como capa de plataforma

Expo envuelve React Native con herramientas, un conjunto de módulos seleccionados y un proyecto nativo administrado - tu código de interfaz de usuario sigue siendo RN estándar.

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
 
export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Expo + React Native</Text>
      <Text style={styles.body}>
        Same View/Text primitives - Expo supplies the dev server, config, and
        native bootstrap.
      </Text>
      <StatusBar style="auto" />
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: "center", padding: 24, gap: 8 },
  title: { fontSize: 22, fontWeight: "700" },
  body: { fontSize: 15, color: "#4b5563", lineHeight: 22 },
});

• Sigues escribiendo componentes React Native - Expo no es un framework de interfaz de usuario separado
• Paquetes como expo-status-bar se distribuyen como módulos Expo con código nativo precompilado para el SDK
• El flujo de trabajo administrado significa que Expo es propietario de la generación ios/ y android/ a través de prebuild a menos que expulses o ejecutes bare
• Adopta Expo cuando desees una iteración más rápida, actualizaciones consistentes y EAS Build/Update sin mantener proyectos nativos desde el primer día

Relacionado: create-expo-app Quickstart - plantillas y verificación de primera ejecución | Expo Modules Core - cómo se inician los módulos nativos

2. Estructura de proyecto predeterminada

Una aplicación Expo nueva es un árbol pequeño y predecible - aprende estos archivos antes de agregar características.

MyExpoApp/
├── App.tsx              # Componente raíz (interfaz de usuario de entrada)
├── app.json             # Manifiesto estático (o app.config.ts)
├── package.json         # Dependencias y scripts fijados por SDK
├── tsconfig.json
├── assets/              # Iconos, splash, imágenes incluidas en tiempo de compilación
└── node_modules/

• App.tsx es la raíz predeterminada - los proyectos de Expo Router lo cambian por un directorio app/ en su lugar
• app.json (o app.config.ts) es la única fuente de verdad para la identidad de la aplicación, iconos y permisos nativos
• Los archivos assets/ se hace referencia por URI en la configuración (icon, splash) e importados en componentes
• Sin carpetas ios/ o android/ aún en modo administrado puro - aparecen después de npx expo prebuild o una compilación EAS

Relacionado: create-expo-app Quickstart - opciones de plantilla y referencia de script

3. Fijación del SDK en package.json

La versión del paquete expo es el contrato que cada otro módulo Expo debe satisfacer.

{
  "name": "my-expo-app",
  "main": "expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios"
  },
  "dependencies": {
    "expo": "~57.0.4",
    "react": "19.2.3",
    "react-native": "0.86.0"
  }
}

• expo ~57.0.4 bloquea el proyecto en el SDK 57 - mezclar módulos SDK 56 con expo SDK 57 causa fallos de compilación nativos
• main: "expo/AppEntry.js" conecta Metro al bootstrap de Expo, que registra tu componente raíz
• Los scripts predeterminados delegan en expo start para que las banderas LAN, tunnel y dev-client se mantengan consistentes en todo el equipo
• Después de clonar, ejecuta npm install luego npx expo doctor para detectar desviación de versión antes de tu primera compilación

Relacionado: Upgrading Expo SDK Versions - bumps intencionales y expo install --fix

4. Campos de identidad de app.json

Estas claves de manifiesto definen cómo aparece el binario en las pantallas de inicio del dispositivo y en las tiendas de aplicaciones.

{
  "expo": {
    "name": "My Expo App",
    "slug": "my-expo-app",
    "version": "1.0.0",
    "scheme": "myexpoapp",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash-icon.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "ios": {
      "bundleIdentifier": "com.example.myexpoapp"
    },
    "android": {
      "package": "com.example.myexpoapp"
    }
  }
}

• name es la etiqueta visible para el usuario; slug es el identificador de proyecto Expo seguro para URL
• scheme registra un esquema de URL personalizado para enlaces profundos (myexpoapp://)
• bundleIdentifier / package debe ser único por aplicación - cambiarlos después del lanzamiento de la tienda crea una nueva lista
• Las rutas de iconos y splash se resuelven en el tiempo de compilación, no se obtienen a través de la red

Relacionado: app.json & app.config.js - configuración dinámica y manifiestos multiambiente

5. Inicia el servidor de desarrollo

expo start inicia Metro, imprime un código QR y recarga en caliente App.tsx al guardar.

# Predeterminado: URL de LAN para dispositivos en la misma red
npx expo start
 
# Borrar el caché de Metro después de cambios de dependencia o babel
npx expo start --clear
 
# Túnel cuando LAN/firewall bloquea dispositivo ↔ portátil (más lento, pero confiable)
npx expo start --tunnel

import { useState } from "react";
import { Pressable, StyleSheet, Text, View } from "react-native";
 
export default function App() {
  const [count, setCount] = useState(0);
 
  return (
    <View style={styles.container}>
      <Text style={styles.count}>{count}</Text>
      <Pressable style={styles.button} onPress={() => setCount((c) => c + 1)}>
        <Text style={styles.buttonText}>Incrementar - guardar para recargar en caliente</Text>
      </Pressable>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: "center", alignItems: "center", gap: 16 },
  count: { fontSize: 48, fontWeight: "700" },
  button: { backgroundColor: "#2563eb", paddingHorizontal: 20, paddingVertical: 12, borderRadius: 10 },
  buttonText: { color: "#fff", fontWeight: "600" },
});

• Metro agrupa JavaScript bajo demanda - Fast Refresh preserva el estado del componente cuando es posible
• Usa --clear cuando las importaciones no se resuelvan correctamente después de agregar paquetes o cambiar babel.config.js
• LAN es más rápido; tunnel intercambia latencia por alcance en Wi-Fi corporativo o dispositivos remotos
• El terminal también acepta i / a para arrancar simuladores sin reescribir banderas

Relacionado: Expo Go vs Development Builds - qué cliente se abre desde este comando

6. Instalaciones seguras de versión con expo install

Siempre añade módulos Expo a través de la CLI para que los rangos semver coincidan con la tabla de compatibilidad del SDK.

# Añade un módulo probado contra SDK 57
npx expo install expo-camera expo-file-system
 
# Después de una edición manual de package.json o bump de SDK - reconcilia todas las deps de Expo
npx expo install --fix

• npx expo install lee tu versión expo fijada y elige lanzamientos compatibles de módulos nativos
• Plano npm install expo-camera@latest puede extraer un módulo compilado para un SDK más nuevo y romper la compilación iOS/Android
• --fix es el primer comando a ejecutar después de actualizar expo en package.json
• Los complementos de configuración para algunos módulos (cámara, notificaciones) también requieren entradas en app.json - instalar es solo el primer paso

Relacionado: Upgrading Expo SDK Versions - doctor, changelog y alineación de RN

7. Vista previa con Expo Go

Expo Go es una aplicación sandbox con módulos nativos precompilados - ideal para aprender y trabajar en la interfaz de usuario sin compilar código nativo.

import { CameraView, useCameraPermissions } from "expo-camera";
import { Pressable, StyleSheet, Text, View } from "react-native";
 
export default function App() {
  const [permission, requestPermission] = useCameraPermissions();
 
  if (!permission?.granted) {
    return (
      <View style={styles.center}>
        <Text style={styles.message}>Se requiere acceso a la cámara.</Text>
        <Pressable style={styles.button} onPress={requestPermission}>
          <Text style={styles.buttonText}>Otorgar permiso</Text>
        </Pressable>
      </View>
    );
  }
 
  return <CameraView style={styles.camera} facing="back" />;
}
 
const styles = StyleSheet.create({
  center: { flex: 1, justifyContent: "center", alignItems: "center", gap: 12, padding: 24 },
  message: { fontSize: 16, textAlign: "center" },
  button: { backgroundColor: "#2563eb", paddingHorizontal: 20, paddingVertical: 10, borderRadius: 8 },
  buttonText: { color: "#fff", fontWeight: "600" },
  camera: { flex: 1 },
});

• Escanea el código QR de npx expo start con Expo Go - sin Xcode ni Android Studio requerido para este ciclo
• Expo Go solo incluye módulos enviados en su compilación de tienda; el código nativo personalizado o módulos no lanzados no se ejecutarán
• Las API de permisos (useCameraPermissions) aún ejecutan avisos reales del SO dentro del shell de Expo Go
• Cuando superes el conjunto de módulos de Expo Go, pasa a una compilación de desarrollo - mismo paquete JS, tu propio binario nativo

Relacionado: Expo Go vs Development Builds - lista de verificación de decisión y expo-dev-client

Ejemplos intermedios

8. app.config.ts consciente del entorno

Reemplaza app.json estático con configuración TypeScript cuando los IDs de paquete, nombres u hosts de API difieren por entorno.

import { ExpoConfig, ConfigContext } from "expo/config";
 
const APP_VARIANT = process.env.APP_VARIANT ?? "development";
 
export default ({ config }: ConfigContext): ExpoConfig => {
  const isProd = APP_VARIANT === "production";
 
  return {
    ...config,
    name: isProd ? "My Expo App" : "My Expo App (Dev)",
    slug: "my-expo-app",
    ios: {
      ...config.ios,
      bundleIdentifier: isProd
        ? "com.example.myexpoapp"
        : "com.example.myexpoapp.dev",
    },
    android: {
      ...config.android,
      package: isProd ? "com.example.myexpoapp" : "com.example.myexpoapp.dev",
    },
    extra: {
      apiUrl: isProd ? "https://api.example.com" : "https://staging.example.com",
      appVariant: APP_VARIANT,
    },
  };
};

APP_VARIANT=development npx expo start
APP_VARIANT=production npx eas build --profile production

• app.config.ts se evalúa en tiempo de compilación y prebuild - no en cada recarga de Metro
• Difunde ...config para que la CLI de Expo fusione los valores predeterminados (complementos, actualizaciones) en lugar de descartarlos silenciosamente
• Coloca cambios de entorno no secreto en extra - léelos con expo-constants en el código de la aplicación
• Nunca incrustes claves API privadas aquí; usa variables de entorno de EAS o secretos de CI para valores sensibles

Relacionado: app.json & app.config.js - complementos de configuración y patrones seguros de secretos | Environments & EAS Environment Variables - separación dev/staging/prod

9. Cuando Expo Go no es suficiente

Las bibliotecas con código nativo personalizado, módulos nativos privados o complementos de configuración no en Expo Go requieren una compilación de desarrollo.

npx expo install expo-dev-client
npx expo run:ios
# o producir un cliente dev instalable a través de EAS:
npx eas build --profile development --platform ios

{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "ios": { "deploymentTarget": "15.1" },
          "android": { "minSdkVersion": 24 }
        }
      ]
    ]
  }
}

• expo-dev-client reemplaza Expo Go como shell nativo mientras mantiene la recarga rápida de Metro
• npx expo run:ios / run:android genera proyectos nativos localmente a través de prebuild, luego compila un cliente dev
• Los complementos de configuración mutan proyectos nativos en prebuild - son ignorados por Expo Go incluso si las importaciones de JavaScript tienen éxito
• Mantente en el flujo de trabajo administrado: confirma app.config.ts y permite que EAS Build ejecute prebuild en CI en lugar de editar manualmente ios/ cuando sea posible

Relacionado: Expo Go vs Development Builds - matriz de características | Managed to Bare Migration - mantener rutas de actualización cuando existen carpetas nativas

10. Vincular una cuenta de Expo y proyecto EAS

Asociar la aplicación con un proyecto Expo desbloquea compilaciones en la nube, envío, actualizaciones y secretos limitados a la organización.

npx expo login
npx eas init

{
  "expo": {
    "name": "My Expo App",
    "slug": "my-expo-app",
    "owner": "my-org",
    "extra": {
      "eas": {
        "projectId": "00000000-0000-0000-0000-000000000000"
      }
    }
  }
}

import Constants from "expo-constants";
import { Text, View } from "react-native";
 
export default function App() {
  const projectId = Constants.expoConfig?.extra?.eas?.projectId;
 
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Proyecto EAS: {projectId ?? "no vinculado"}</Text>
    </View>
  );
}

• eas init crea o vincula un proyecto bajo tu cuenta de Expo y escribe extra.eas.projectId
• owner establecido en un slug de organización enruta compilaciones y credenciales al equipo, no a una cuenta personal
• El projectId es estable entre cambios de ID de paquete - los servicios EAS se basan en ello, no solo en slug
• Vincula temprano en proyectos greenfield para que los perfiles de compilación de vista previa, ensayo y producción compartan un almacén de credenciales

Relacionado: Expo Account, Projects & Permissions - funciones y gobernanza multiapp | Environments & EAS Environment Variables - secretos por entorno

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