Crear app React Native con Expo Go

Concepto clave

Crear tu primera app con Expo Go es como construir una casa prefabricada: en lugar de empezar desde cero con cimientos complicados, usas un kit que ya tiene la estructura básica lista. Expo Go es la aplicación que te permite ejecutar y probar tu código React Native directamente en tu dispositivo móvil sin necesidad de configurar entornos de desarrollo nativos para iOS o Android. Esto acelera el proceso de desarrollo, similar a cómo un arquitecto puede visualizar un modelo 3D antes de construir.

La estructura de proyecto en Expo sigue convenciones que organizan tu código de manera escalable. Piensa en ella como el plano de esa casa: tienes habitaciones (componentes), tuberías (dependencias) y conexiones eléctricas (navegación). Comprender esta estructura desde el inicio te evitará dolores de cabeza más adelante, especialmente cuando tu app crezca y necesites agregar nuevas funcionalidades.

Cómo funciona en la práctica

Para crear tu primera app, sigue estos pasos:

1. Abre tu terminal y ejecuta npx create-expo-app MiPrimeraApp. Esto genera un proyecto básico con todo lo necesario.
2. Navega a la carpeta del proyecto con cd MiPrimeraApp.
3. Inicia el servidor de desarrollo con npx expo start. Verás un código QR en la terminal.
4. Descarga la app Expo Go en tu teléfono (disponible en App Store o Google Play) y escanea el QR. ¡Tu app se ejecutará en tiempo real!

La estructura generada incluye archivos clave: App.js (el punto de entrada), package.json (dependencias), y carpetas como assets para imágenes. Esta configuración te permite enfocarte en escribir código en lugar de perder tiempo con configuraciones.

Código en acción

Aquí tienes el código inicial de App.js que Expo genera por defecto. Es un componente funcional simple que muestra un texto y una imagen:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    
      ¡Hola, mundo desde Expo!
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Ahora, mejoremos este código agregando un botón interactivo. Refactoriza App.js para incluir un estado y manejar un clic:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button } from 'react-native';
import { useState } from 'react';

export default function App() {
  const [contador, setContador] = useState(0);

  const incrementar = () => {
    setContador(contador + 1);
  };

  return (
    
      Contador: {contador}
      
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Errores comunes

• No tener Expo Go instalado en el dispositivo: Asegúrate de descargar la app desde la tienda oficial antes de escanear el QR. Sin ella, no podrás probar tu proyecto.
• Olvidar ejecutar npx expo start en la carpeta correcta: Si no estás en la raíz del proyecto, el servidor no iniciará. Verifica con ls o dir que veas App.js.
• Ignorar las advertencias de dependencias: Expo actualiza frecuentemente; ejecuta npx expo install --fix para resolver conflictos y mantener compatibilidad.
• Modificar la estructura base innecesariamente: Evita mover archivos como app.json o babel.config.js sin razón, ya que pueden romper la configuración de Expo.
• No probar en ambos iOS y Android: Usa Expo Go en diferentes dispositivos para asegurar que tu app funcione correctamente en ambas plataformas.

Checklist de dominio

• Crear un proyecto Expo desde cero usando create-expo-app.
• Iniciar el servidor de desarrollo y conectar un dispositivo con Expo Go.
• Identificar los archivos clave en la estructura del proyecto (App.js, package.json, assets).
• Modificar el componente App para agregar interactividad básica (ej., un botón).
• Resolver un error común como una dependencia desactualizada.
• Explicar la diferencia entre desarrollo con Expo Go y un build nativo.
• Organizar el código en carpetas lógicas para escalabilidad.

Crea una app de lista de tareas básica con Expo Go

En este ejercicio, construirás una app simple de lista de tareas que permita agregar y mostrar items. Sigue estos pasos:

1. Crea un nuevo proyecto Expo llamado TodoApp usando npx create-expo-app TodoApp.
2. Navega a la carpeta y abre App.js. Reemplaza el contenido con un componente que incluya:
   • Un estado para almacenar un array de tareas (strings).
   • Un campo de texto (TextInput) y un botón para agregar tareas.
   • Una lista (FlatList o ScrollView) que muestre las tareas.
3. Implementa la lógica para agregar una tarea al array cuando se presione el botón.
4. Estiliza la app con StyleSheet para que sea legible (ej., márgenes, colores).
5. Ejecuta npx expo start y prueba la app en tu dispositivo con Expo Go.
6. Verifica que las tareas persistan durante la sesión (no es necesario almacenamiento permanente).

• Usa useState para manejar el array de tareas y el valor del TextInput.
• Importa TextInput y FlatList desde 'react-native'.
• Para agregar una tarea, concatena el nuevo item al array existente usando el setter del estado.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.

Estructura actual: App.js o carpeta app/

Algunos tutoriales antiguos muestran App.js como punto de entrada. Eso sigue apareciendo en ciertos templates, pero los proyectos actuales de Expo también pueden usar una carpeta app/ con rutas basadas en archivos mediante Expo Router. No memorices una sola estructura: aprendé a reconocer el template que generó tu proyecto.

Checklist de primera ejecución

1. Confirmá Node LTS con node -v.
2. Creá el proyecto con npx create-expo-app@latest mi-app.
3. Entrá con cd mi-app.
4. Arrancá Metro con npx expo start.
5. Escaneá el QR con Expo Go o abrí emulador con a/i.
6. Editá el primer texto visible y comprobá Fast Refresh.

Si el QR no conecta

• Misma red: teléfono y computadora deben estar en la misma Wi-Fi para conexión local.
• Red pública: si el router bloquea dispositivos, usá npx expo start --tunnel.
• Carpeta incorrecta: corré el comando donde está package.json.
• Expo Go vs development build: si agregaste código nativo que Expo Go no incluye, necesitás una development build.

Expo Go o development build

Usá Expo Go para aprender, prototipar y probar rápido con APIs incluidas en el SDK. Pasá a development build cuando necesites librerías nativas propias, configuración nativa o un cliente más parecido a producción.

SDK 54 o SDK 55: qué template usar con Expo Go

En 2026 hay un detalle importante: durante la transición de SDK 55, la documentación oficial de Expo indica que create-expo-app@latest puede crear un proyecto SDK 54 si no pasás template explícito. Si tu objetivo es practicar con Expo Go en un teléfono físico, usá SDK 54. Si necesitás SDK 55 de forma explícita, creá el proyecto con:

npx create-expo-app@latest --template default@sdk-55

Para una primera app de aprendizaje, no persigas la versión más nueva si eso te bloquea. Priorizá que Expo Go abra el QR, que Fast Refresh funcione y que puedas explicar qué archivo editaste. Cuando sumes librerías nativas, configuración propia o comportamiento parecido a producción, pasá a una development build con expo-dev-client.

Mini app para portfolio: contador de hábitos

Una primera app no debería quedarse en la pantalla inicial del template. Para que sirva en una entrevista, transformala en una pieza mínima que demuestre estado, estilos, interacción y explicación. El objetivo es simple: una app de hábitos donde el usuario pueda sumar una repetición diaria.

Código base para App.js o app/index.tsx

Si tu proyecto usa App.js, pegá este componente ahí. Si usa Expo Router, pegalo en app/index.tsx. El mismo ejemplo te sirve para validar que Expo Go, Metro y Fast Refresh están funcionando.

import { useState } from "react";
import { SafeAreaView, StatusBar, StyleSheet, Text, TouchableOpacity, View } from "react-native";

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

  return (
    <SafeAreaView style={styles.screen}>
      <StatusBar barStyle="light-content" />
      <View style={styles.card}>
        <Text style={styles.eyebrow}>Mi primera app Expo Go</Text>
        <Text style={styles.title}>Hábitos completados</Text>
        <Text style={styles.counter}>{count}</Text>
        <TouchableOpacity style={styles.button} onPress={() => setCount(count + 1)}>
          <Text style={styles.buttonText}>Sumar práctica</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: "#111827", justifyContent: "center", padding: 24 },
  card: { backgroundColor: "#ffffff", borderRadius: 18, padding: 24, gap: 14 },
  eyebrow: { color: "#2563eb", fontSize: 12, fontWeight: "700", textTransform: "uppercase" },
  title: { color: "#111827", fontSize: 26, fontWeight: "800" },
  counter: { color: "#111827", fontSize: 64, fontWeight: "900" },
  button: { backgroundColor: "#2563eb", borderRadius: 12, paddingVertical: 14, alignItems: "center" },
  buttonText: { color: "#ffffff", fontSize: 16, fontWeight: "700" },
});

Cómo saber que tu primera app funciona

• La app abre desde el QR de Expo Go sin pantalla roja.
• El botón cambia el número al tocarlo.
• Al editar el texto del título, Expo actualiza la pantalla con Fast Refresh.
• Podés explicar qué hace useState, qué hace StyleSheet y por qué usaste SafeAreaView.

README corto para mostrarla

# Primera app con Expo Go

App móvil creada con React Native y Expo.

## Qué demuestra
- Crear proyecto con npx create-expo-app@latest
- Ejecutar con npx expo start
- Abrir en Expo Go por QR
- Usar estado con useState
- Aplicar estilos con StyleSheet

## Cómo correrla
npm install
npx expo start

Para Cursalo, el entregable mínimo no es "instalé Expo": es una app visible, con captura, README y una explicación breve. Esa evidencia conecta mejor con rutas de empleo mobile, cursos de React Native y servicios del marketplace Cursalo.

Fuentes oficiales: Create a project, Start developing y Create a development build.