Configurar entorno de desarrollo con Expo CLI

Introducción: El Punto de Partida de tu Aplicación Nativa

Configurar correctamente tu entorno de desarrollo es el cimiento sobre el cual construirás aplicaciones React Native robustas y eficientes. Esta lección no se trata solo de instalar herramientas; es sobre establecer un flujo de trabajo profesional que te acompañe desde el primer "Hello World" hasta el despliegue en las tiendas de aplicaciones. Utilizaremos Expo CLI, la herramienta oficial que abstrae gran parte de la complejidad del entorno nativo, permitiéndote enfocarte en el código de tu aplicación. A diferencia de la configuración manual de React Native CLI, Expo ofrece un entorno más controlado y preconfigurado, ideal para desarrolladores que buscan velocidad y consistencia, especialmente en etapas iniciales y de prototipado.

Para un desarrollador de nivel intermedio, esta configuración va más allá de lo básico. Implica comprender las decisiones arquitectónicas que toma Expo por ti, saber cómo extender sus capacidades cuando sea necesario y preparar el entorno para integrarse con servicios en la nube, sistemas de control de versiones y pipelines de integración continua. Un entorno bien configurado previene una multitud de problemas futuros relacionados con dependencias, compatibilidad de dispositivos y procesos de construcción. Es la primera y una de las inversiones más importantes de tiempo que harás en el proyecto.

Al finalizar esta lección, tendrás una estación de trabajo lista para crear, desarrollar, depurar y construir aplicaciones para iOS y Android. Cubriremos desde la instalación de Node.js y el CLI, hasta la creación de tu primer proyecto, la exploración de su estructura y la ejecución en dispositivos físicos y simuladores. Asumiremos que tienes familiaridad con la línea de comandos, conceptos básicos de JavaScript/Node.js y el ecosistema de desarrollo front-end.

Tip del Experto: Aunque Expo simplifica mucho, te recomendamos encarecidamente usar un administrador de versiones de Node como nvm (para Mac/Linux) o nvm-windows. Esto te permitirá cambiar entre versiones de Node.js según los requisitos de diferentes proyectos, evitando conflictos de dependencias globales.

Concepto Clave: La Filosofía de Expo y su Arquitectura de Capas

Piensa en Expo como un kit de herramientas completo y una plataforma de servicios que se sitúa entre tu código JavaScript y los sistemas operativos nativos (iOS y Android). En una analogía con la construcción de una casa, React Native te proporciona los planos y los materiales básicos (bloques de construcción de UI como `View` y `Text`), pero Expo es el contratista general que llega con toda su maquinaria, equipos especializados y un equipo de subcontratistas (módulos para cámara, geolocalización, notificaciones push) ya coordinados. Tu trabajo como desarrollador se centra en el diseño y la disposición de las habitaciones (la lógica de tu app), sin preocuparte por instalar la grúa o conseguir el permiso de obra (configurar entornos nativos con Xcode y Android Studio desde el primer momento).

Esta abstracción se logra mediante una arquitectura en capas. En la base están los módulos nativos escritos en Java, Objective-C y Swift. Expo expone APIs de JavaScript para trabajar con esos módulos nativos. Finalmente, el Expo CLI y los clientes Expo Go (las apps que se instalan en tu teléfono o simulador) actúan como el entorno de ejecución que empaqueta y sirve tu código. El CLI maneja el servidor de desarrollo (Metro Bundler), la generación de builds y la publicación de actualizaciones. Esta separación es clave: durante el desarrollo, tu código se ejecuta en el cliente Expo Go, pero para producción, Expo CLI (o EAS Build) compila tu código JavaScript junto con el runtime de Expo en un binario nativo independiente (.apk o .ipa).

Comprender esta separación es crucial para un desarrollador intermedio. Te permite saber cuándo estás trabajando dentro de los límites del "Managed Workflow" (flujo gestionado por Expo) y cuándo podrías necesitar pasar al "Bare Workflow" (flujo personalizado), donde decides mantener los proyectos nativos y sus cambios explícitamente. Para la mayoría de las aplicaciones, el Managed Workflow es más que suficiente y ofrece una experiencia de desarrollo significativamente más rápida y menos propensa a errores de configuración.

Instalar el entorno y crear un proyecto

Usa Node.js en una rama LTS mantenida. Esta práctica se verificó con Node.js 24.21.0 y la plantilla blank, que generó Expo SDK 57.0.26. Conserva el package-lock.json del proyecto para reproducir sus dependencias. Antes de continuar, consulta los requisitos de cada SDK y la tabla de soporte de Node.js.

Crea el proyecto con create-expo-app y usa la CLI incluida en el paquete expo. La plantilla blank permite seguir el ejemplo de App.js de esta lección. La plantilla predeterminada puede organizar las pantallas de otra forma; no mezcles ambas estructuras.

node --version
npx create-expo-app@5.0.0 MiPrimeraAppExpo --template blank
cd MiPrimeraAppExpo
npx expo config --json
npx expo start

Comprueba que la configuración muestra el nombre de tu aplicación y el SDK esperado. El servidor de desarrollo presenta un QR y opciones de conexión. Abre el proyecto en un cliente compatible con ese SDK. La guía de creación de Expo explica las plantillas y los requisitos vigentes.

Expo Go y development builds

Expo Go sirve para probar las funciones que incluye ese cliente. Si tu proyecto necesita código nativo propio o módulos no incluidos, utiliza un development build de tu aplicación. El selector de entorno oficial distingue las dos opciones. Instalar una dependencia no la añade automáticamente a Expo Go.

Código en Acción: Explorando y Modificando la Estructura del Proyecto

Vamos a profundizar en los archivos clave generados y a realizar modificaciones sustanciales para entender el flujo. El archivo `App.js` es el componente raíz de tu aplicación. Por defecto, contiene un componente funcional con algo de texto y estilos. Modificaremos esto para crear una pantalla simple con un estado, un efecto secundario y un botón interactivo, demostrando la integración de Hooks de React y componentes básicos de React Native.

Además, exploraremos el archivo de configuración `app.json`. Este es el corazón de la configuración de tu proyecto Expo. Aquí defines el nombre de tu app, su slug (identificador único), versiones, orientación de pantalla, iconos, splash screen y los permisos que necesitarás (como acceso a la cámara o la ubicación). Para un desarrollador intermedio, es vital saber navegar y modificar este archivo, ya que controla aspectos fundamentales del comportamiento y la apariencia de la aplicación compilada.

El siguiente código reemplaza el contenido por defecto de `App.js` y luego muestra un ejemplo de configuración en `app.json` para una app más personalizada. Observa cómo usamos `useState` y `useEffect`, y cómo los estilos se definen usando `StyleSheet.create`, una práctica óptima para el rendimiento en React Native.

// Archivo: App.js
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, SafeAreaView, StatusBar } from 'react-native';

export default function App() {
  const [count, setCount] = useState(0);
  const [isActive, setIsActive] = useState(false);

  // Un efecto que se ejecuta cuando `isActive` cambia
  useEffect(() => {
    let interval = null;
    if (isActive) {
      interval = setInterval(() => {
        setCount(prevCount => prevCount + 1);
      }, 1000);
    } else if (!isActive && count !== 0) {
      clearInterval(interval);
    }
    // Función de limpieza del efecto
    return () => clearInterval(interval);
  }, [isActive]);

  const handleReset = () => {
    setCount(0);
    setIsActive(false);
  };

  return (
    
      
      
        Configurando Expo
        Contador con Estado y Efectos
        
        
          {count}
        

        
           setIsActive(!isActive)}
          >
            
              {isActive ? 'PAUSAR' : 'INICIAR'}
            
          

          
            REINICIAR
          
        

        
          Cambia este código en `App.js` y guarda para ver la recarga en vivo.
        
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  content: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  title: {
    fontSize: 32,
    fontWeight: 'bold',
    color: '#6200ee',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 18,
    color: '#666',
    marginBottom: 40,
  },
  counterBox: {
    backgroundColor: '#fff',
    borderRadius: 20,
    paddingVertical: 40,
    paddingHorizontal: 60,
    marginBottom: 40,
    elevation: 8, // Sombra en Android
    shadowColor: '#000', // Sombra en iOS
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.2,
    shadowRadius: 8,
  },
  counterText: {
    fontSize: 72,
    fontWeight: '300',
    color: '#333',
  },
  buttonRow: {
    flexDirection: 'row',
    marginBottom: 30,
  },
  button: {
    paddingVertical: 15,
    paddingHorizontal: 25,
    borderRadius: 10,
    marginHorizontal: 10,
    minWidth: 120,
    alignItems: 'center',
  },
  buttonStart: {
    backgroundColor: '#00c853',
  },
  buttonPause: {
    backgroundColor: '#ff9800',
  },
  buttonReset: {
    backgroundColor: '#d32f2f',
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
  footer: {
    fontSize: 14,
    color: '#888',
    textAlign: 'center',
    marginTop: 20,
    fontStyle: 'italic',
  },
});

// Archivo: app.json (Extracto de configuración relevante)
{
  "expo": {
    "name": "Mi App Intermedia",
    "slug": "mi-app-intermedia-unica",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "automatic",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#6200ee"
    },
    "updates": {
      "fallbackToCacheTimeout": 0,
      "url": "https://u.expo.dev/[TU-PROYECTO-ID]"
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.tudominio.miappintermedia",
      "buildNumber": "1.0.0"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#6200ee"
      },
      "package": "com.tudominio.miappintermedia",
      "versionCode": 1,
      "permissions": [] // Especifica permisos aquí, ej: ["CAMERA"]
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "extra": {
      "eas": {
        "projectId": "tu-project-id-unico-aqui"
      }
    },
    "runtimeVersion": {
      "policy": "sdkVersion"
    }
  }
}

Errores Comunes y Cómo Evitarlos

1. Error de Versiones Incompatibles de Node.js/Expo SDK: Usar una versión muy antigua o muy nueva de Node.js puede causar fallos de instalación o comportamientos extraños. Expo CLI y el SDK suelen tener versiones de Node.js compatibles documentadas. Solución: Usa un administrador de versiones de Node (nvm) para instalar y cambiar a la versión LTS recomendada en la documentación oficial de Expo. Verifica regularmente `npx expo-doctor` para diagnosticar problemas de entorno.

2. Problemas de Red o Proxy Durante `npx expo start`: El servidor de desarrollo no inicia, o el cliente Expo Go en el teléfono no se conecta, mostrando "Could not connect to server". Solución: Asegúrate de que tu computadora y teléfono estén en la misma red. Si estás en una red corporativa o con firewall, puede que necesites usar el flag `--tunnel` al iniciar el proyecto (`npx expo start --tunnel`), que usa un servicio de tunneling de Expo para enrutar el tráfico. También puedes intentar `--localhost` o `--lan`.

3. Confusión entre `npx expo install` y `npm install`: Instalar paquetes de React Native con `npm install` directamente puede traer versiones incompatibles con el SDK de Expo que estás usando. Solución: Siempre que instales un paquaje que tenga dependencias nativas o sea específico de React Native/Expo, usa el comando `npx expo install nombre-del-paquete`. Este comando garantiza que se instale la versión compatible con tu SDK. Usa `npm install` solo para librerías de JavaScript puras (como `lodash` o `axios`).

4. No Configurar `app.json` Correctamente para Producción: Dejar los valores por defecto como el `slug` o los identificadores de paquete (`bundleIdentifier`, `package`) puede causar conflictos al publicar o construir tu app. Solución: Antes de tu primera construcción, personaliza los campos `name`, `slug`, `ios.bundleIdentifier` y `android.package` en `app.json` con valores únicos y relevantes para tu aplicación. El `slug` se usa en las URLs de Expo, y los identificadores de paquete deben ser únicos en las tiendas de aplicaciones.

5. Confundir generación nativa y cambios manuales: npx expo prebuild genera los proyectos ios y android a partir de la configuración y los plugins. No es necesario para empezar esta práctica con Expo Go. Si vuelves a generar directorios nativos, los cambios manuales pueden perderse: conserva tus personalizaciones mediante configuración y plugins o elige mantenerlos de forma explícita. Consulta Continuous Native Generation antes de regenerar.

Tip de Depuración: Cuando encuentres un error críptico, ejecuta `npx expo-doctor` en la raíz de tu proyecto. Este comando imprimirá un reporte detallado de tu entorno (versiones de OS, Node, npm/Yarn, Expo CLI, SDK) que es invaluable para pedir ayuda en foros o GitHub.

Checklist de Dominio

Antes de avanzar al siguiente módulo, verifica que puedes realizar y comprendes cada uno de los siguientes puntos:

• Tengo Node.js LTS mantenido y he creado el proyecto con create-expo-app; la CLI de Expo se ejecuta desde el proyecto.
• Puedo crear un nuevo proyecto Expo desde cero usando create-expo-app con una plantilla apropiada y comprobando el SDK generado.
• Comprendo la diferencia entre usar `npx expo install` y `npm install` para gestionar dependencias en un proyecto Expo.
• Sé iniciar el servidor de desarrollo con `npx expo start` y puedo ejecutar mi aplicación en un dispositivo físico (vía QR) y en un simulador iOS/Android.
• He modificado el archivo `App.js` principal y he observado cómo los cambios se reflejan en vivo (Live Reloading) en el dispositivo o simulador.
• He revisado y personalizado campos clave en el archivo de configuración `app.json`, como el nombre, slug e identificadores de paquete.
• Puedo identificar y solucionar al menos dos de los errores comunes listados anteriormente (ej., problemas de conexión o versiones).
• Sé cómo ejecutar `npx expo-doctor` y `npx expo-doctor` para verificar la salud de mi entorno de desarrollo y proyecto.

Práctica acompañada: Una app que cabe en tu día

Un proyecto pequeño con React Native y Expo. Usa este cuaderno como práctica complementaria de la ruta; el material original de la lección continúa siendo tu referencia.

Práctica: prueba en cuatro condiciones

Completa el flujo con una imagen vertical, una horizontal, cancelando el selector y negando el permiso. Comprueba que la aplicación conserva proporciones y que ningún control queda fuera de alcance. Repite al volver del fondo y al cambiar el tamaño del texto.

Si tu proyecto permite guardar la imagen, verifica por separado el permiso y el resultado de guardado. No muestres «Guardado» antes de que la operación termine. Usa archivos de prueba propios. Para comparar versiones, conserva capturas con el mismo dispositivo, orientación y tamaño de letra.

Comprueba tu entrega

Entrega el repositorio con instrucciones, la lista de versiones y la matriz de dispositivos. Incluye una captura de cada estado y un video propio breve que muestre el recorrido entero, incluida la cancelación. No hace falta publicar una app para demostrar este aprendizaje.

• Abrir el cuaderno ilustrado de 7 páginas
• Descargar PDF, ejercicios y plantillas de esta ruta
• Expo: tutorial oficial · recurso externo