Configurar entorno de desarrollo con Expo CLI

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 `expo doctor` para diagnosticar problemas de entorno.

2. Problemas de Red o Proxy Durante `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 (`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 `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 `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. Olvidar Ejecutar `expo prebuild` o Gestionar Assets Nativos en Bare Workflow: Si decides ejectuar tu proyecto ("bare workflow") para añadir librerías nativas personalizadas, un error común es modificar manualmente las carpetas `ios/` y `android/` sin luego sincronizar los cambios con la configuración de JavaScript. Solución: Después de ejectuar (`expo prebuild`), usa siempre `expo prebuild` de nuevo para regenerar los proyectos nativos después de cambiar configuraciones en `app.json` o instalar nuevas librerías nativas. Nunca edites los archivos de configuración nativa (`Podfile`, `build.gradle`) sin entender que pueden ser sobrescritos.

Tip de Depuración: Cuando encuentres un error críptico, ejecuta `expo diagnostics` 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:

• He instalado exitosamente Node.js (versión LTS) y Expo CLI de manera global en mi sistema operativo.
• Puedo crear un nuevo proyecto Expo desde cero usando `expo init`, seleccionando una plantilla apropiada y un gestor de paquetes.
• Comprendo la diferencia entre usar `expo install` y `npm install` para gestionar dependencias en un proyecto Expo.
• Sé iniciar el servidor de desarrollo con `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 `expo doctor` y `expo diagnostics` para verificar la salud de mi entorno de desarrollo y proyecto.