Cómo construir una app React Native con VULK

Actualizado el 18 de julio de 2026 — refrescado con datos verificados de la plataforma y el estado honesto actual de la vista previa para React Native.

¿Cómo se construye una app React Native con VULK?

La respuesta completa: describes la app en un prompt y VULK genera un proyecto completo React Native + Expo — navegación basada en archivos con Expo Router, estilos con NativeWind (Tailwind para React Native), TypeScript en todo el código, y app.json configurado con identificadores de bundle y permisos. Luego descargas el proyecto, ejecutas npx expo start y lo pruebas en tu propio teléfono con Expo Go en minutos; los builds de producción se envían mediante EAS Build (eas build) al App Store y Google Play.

Una cosa dicha por adelantado, porque la honestidad gana al marketing: VULK actualmente no renderiza apps React Native en la vista previa en vivo del editor. React Native usa el bundler Metro y no puede correr en la vista previa basada en navegador que sirve a los stacks web de VULK — una vista previa RN en el editor está en desarrollo, no disponible. Lo que obtienes hoy es código generado completo y real más el flujo Expo estándar para ejecutarlo en un dispositivo. La demanda es real pero menor que la de Flutter: 213 prompts históricos de usuarios han pedido React Native/Expo frente a 381 de Flutter (datos de la plataforma VULK, julio de 2026, N = 11.355 proyectos) — que es también la razón de que Flutter recibiera primero su servicio de build integrado.

¿Qué genera exactamente VULK?

Esto no es una web app envuelta en un WebView. VULK genera componentes nativos reales — View, Text, ScrollView, FlatList, TouchableOpacity — que compilan a widgets nativos de plataforma en iOS y Android.

El árbol de archivos generado se ve así:

app/
  _layout.tsx          # Root layout with navigation container
  index.tsx            # Home screen
  (tabs)/
    _layout.tsx        # Tab navigator layout
    home.tsx           # Home tab
    profile.tsx        # Profile tab
    settings.tsx       # Settings tab
  [id].tsx             # Dynamic route
components/
  Button.tsx
  Card.tsx
  Header.tsx
assets/
  fonts/
  images/
tailwind.config.js
app.json
package.json

¿Cómo escribir prompts que produzcan buenas apps móviles?

El prompt es donde se decide la calidad de tu app generada. Aquí hay prompts reales que producen resultados sólidos.

Prompt básico (funciona, pero genérico):

Construye una app de seguimiento de fitness en React Native

Prompt mejor (funcionalidades específicas):

Construye una app React Native de seguimiento de fitness con navegación de pestañas de Expo Router. Incluye una pantalla de registro de entrenamientos donde los usuarios añadan ejercicios con series, repeticiones y peso. Añade una pantalla de progreso con gráficas del volumen semanal. Usa NativeWind con un tema oscuro. Incluye un componente de temporizador para los descansos entre series.

Prompt avanzado (calidad de producción):

Construye un tracker de fitness React Native + Expo con estas pantallas: (1) Dashboard con el plan de entrenamiento de hoy y estadísticas semanales, (2) Biblioteca de ejercicios con búsqueda y filtros por grupo muscular, (3) Pantalla de entrenamiento activo con temporizador en marcha, registro de series y temporizador de descanso, (4) Pestaña de progreso con gráficas de líneas del peso levantado por grupo muscular en 30 días, (5) Perfil con ajustes de unidades (kg/lbs) y valores por defecto del temporizador. Usa pestañas de Expo Router para la navegación principal y navegación de stack dentro de cada pestaña. Estiliza con NativeWind con tema oscuro (fondo zinc-900, acentos emerald-500). Guarda datos localmente con AsyncStorage. Usa expo-haptics para feedback de botones.

La diferencia entre estos prompts es la especificidad. Los modelos de IA de VULK rinden mejor cuando describes pantallas, estructuras de datos y patrones de interacción explícitamente — el prompt mediano en VULK tiene solo 364 caracteres, pero las mejores generaciones móviles vienen de prompts como el avanzado de arriba (datos de la plataforma VULK, julio de 2026).

¿Cómo funciona NativeWind en el código generado?

NativeWind permite a VULK usar clases de Tailwind CSS en React Native. El código generado usa el prop className en vez de StyleSheet.create:

// What VULK generates with NativeWind
export default function WorkoutCard({ exercise, sets }: WorkoutCardProps) {
  return (
    <View className="bg-zinc-800 rounded-2xl p-4 mb-3">
      <Text className="text-white text-lg font-semibold">
        {exercise.name}
      </Text>
      <Text className="text-zinc-400 text-sm mt-1">
        {sets} sets completed
      </Text>
    </View>
  );
}

Esto es código React Native real que compila a objetos StyleSheet nativos en tiempo de build. No hay penalización de rendimiento en runtime. Si necesitas estilos que NativeWind no cubre, siempre puedes recurrir a props style — VULK los genera cuando se requiere estilo específico de plataforma.

¿Cómo funciona la navegación con Expo Router?

VULK genera enrutamiento basado en archivos con Expo Router. Esto refleja el modelo mental de Next.js: los archivos del directorio app/ se convierten en rutas.

Patrones clave que usa VULK:

• Navegación de pestañas: Un archivo (tabs)/_layout.tsx con el componente Tabs de expo-router/tabs
• Navegación de stack: Archivos _layout.tsx anidados con el componente Stack para navegación push/pop dentro de una pestaña
• Rutas dinámicas: Archivos llamados [id].tsx o [slug].tsx que aceptan parámetros de ruta
• Rutas modales: Archivos en un grupo (modal)/ que se presentan como overlays modales

El layout raíz típicamente incluye providers de fuentes, temas y estado global:

export default function RootLayout() {
  return (
    <ThemeProvider>
      <Stack screenOptions={{ headerShown: false }}>
        <Stack.Screen name="(tabs)" />
        <Stack.Screen name="(modal)" options={{ presentation: 'modal' }} />
      </Stack>
    </ThemeProvider>
  );
}

¿Cómo pruebas la app en tu teléfono?

Como aún no hay vista previa RN en el editor, las pruebas ocurren en tu propio dispositivo — y el flujo Expo lo hace rápido:

1. Descarga el código desde el editor de VULK (la exportación ZIP del código se incluye desde el plan Builder)
2. Extrae e instala dependencias: cd your-app && npm install
3. Arranca el servidor de desarrollo: npx expo start
4. Escanea el código QR con Expo Go en tu teléfono (app Cámara de iOS o app Expo Go de Android)

La app carga en tu dispositivo en segundos, y los cambios locales se reflejan al instante vía hot reload.

Para funciones que requieren módulos nativos no incluidos en Expo Go (como Bluetooth o NFC), crea un development build con npx expo run:ios o npx expo run:android. El app.json generado por VULK incluye las configuraciones de plugins para módulos nativos comunes.

¿Cómo iteras después de la primera generación?

El flujo conversacional de VULK está diseñado para desarrollo móvil iterativo. Tras la generación inicial, refinas con mensajes de seguimiento:

• "Añade pull-to-refresh en la pantalla de lista de entrenamientos"
• "Reemplaza la lista plana por una lista seccionada agrupada por grupo muscular"
• "Añade un bottom sheet para el selector de ejercicios en vez de navegar a otra pantalla"
• "Haz que el temporizador de descanso muestre un indicador de progreso circular"

Cada iteración preserva tu código existente y aplica cambios dirigidos. VULK rastrea el árbol completo de archivos y modifica solo los que necesitan actualizarse. La conversación de construcción mediana en la plataforma es de 4 mensajes — un disparo más unos ajustes (datos de la plataforma VULK, julio de 2026).

¿Cómo publicas en el App Store y Google Play?

Los builds de producción pasan por EAS Build, el servicio de builds gestionado de Expo:

• Android: eas build --platform android produce un APK (instalación directa) o AAB (envío a Google Play). Sin Android Studio local.
• iOS: eas build --platform ios produce un IPA para TestFlight y envío al App Store. Necesitas una cuenta de Apple Developer ($99/año).

El app.json generado por VULK trae los identificadores de bundle, campos de versión y declaraciones de permisos que EAS espera, así que el proyecto está listo para el build sin cirugía de configuración. (Si quieres un servicio de build de APK integrado hoy, eso existe para la vía Flutter de VULK — otra razón por la que muchos builders móviles eligen Flutter en VULK.)

¿Qué debes vigilar?

Profundidad de navegación: Si tu app tiene más de tres niveles de navegación anidada, describe la jerarquía explícitamente en tu prompt. Si no, la IA puede aplanar rutas que deberían apilarse.

Manejo de imágenes: VULK genera uso de expo-image para carga optimizada. Si tu app es intensiva en imágenes (galería, feed social), menciónalo para que la IA incluya caché y placeholders adecuados.

Soporte offline: Si tu app debe funcionar sin conexión, dilo en el prompt. VULK generará persistencia con AsyncStorage y detección del estado de red, pero solo si se lo pides.