React Native llega a Meta Quest

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

React Native siempre se ha enfocado en ayudar a los desarrolladores a reutilizar conocimientos entre plataformas. Lo que comenzó con Android e iOS se ha expandido constantemente a Apple TV, Windows, macOS e incluso la web con react-strict-dom. En 2021, la publicación Visión de Múltiples Plataformas esbozó un futuro donde React Native podría adaptarse a nuevos dispositivos y factores de forma sin fragmentar el ecosistema.

En React Conf 2025, dimos otro paso hacia esa visión anunciando soporte oficial de React Native para dispositivos Meta Quest. Esta publicación se centra en cómo comenzar con React Native en Meta Quest, qué funciona actualmente y cómo los desarrolladores pueden crear y publicar aplicaciones de realidad virtual usando herramientas y patrones familiares.

Lo más destacado

• React Native en Meta Quest

• Comenzar con Meta Quest

• Builds de desarrollo y características nativas

• Configuración específica de plataforma y diferencias con móviles

• Consideraciones de diseño y UX para realidad virtual

React Native en Meta Quest

React Native apps running on Meta Quest.

Los dispositivos Meta Quest ejecutan Meta Horizon OS, un sistema operativo basado en Android. Desde la perspectiva de React Native, esto significa que todas las herramientas existentes de Android, sistemas de compilación y flujos de depuración funcionan con cambios mínimos. Para desarrolladores que ya crean aplicaciones React Native en Android, gran parte del modelo de desarrollo existente se mantiene.

Esto coincide con cómo React Native se ha expandido a otros entornos basados en Android con el tiempo. En lugar de introducir un nuevo runtime o modelo de desarrollo, Meta Quest se basa en los mismos fundamentos de Android y se integra con las abstracciones existentes de React Native. Esto permite añadir capacidades específicas de plataforma sin fragmentar el framework ni requerir un enfoque de desarrollo separado.

Comenzar con Meta Quest

Esta sección explica el flujo básico de desarrollo en Meta Quest, comenzando con Expo Go y avanzando hacia builds de desarrollo y configuración específica de plataforma.

Paso a paso: Ejecutar una app de Expo en Meta Quest

Para ejecutar una aplicación Expo en Meta Quest, inicia un proyecto estándar de Expo, lanza el servidor de desarrollo y abre la app mediante Expo Go en el visor. Más allá de algunos requisitos específicos de Meta Horizon OS, el flujo es idéntico al de Android.

1. Instala Expo Go en el visor

   Expo Go está disponible en Meta Horizon Store y puede instalarse directamente en dispositivos Meta Quest. Se usa para iteración rápida durante el desarrollo.

2. Crea (o usa) un proyecto de Expo

   Si comienzas desde cero, crea una aplicación Expo estándar. No se requiere ninguna plantilla especial.

   npx create-expo-app@latest my-quest-app
   cd my-quest-app

3. Inicia el servidor de desarrollo

   npx expo start

4. Conéctate con Quest usando Expo Go

   Abre Expo Go en el visor y escanea el código QR que muestra la CLI de Expo con la cámara del visor. La aplicación se inicia en una nueva ventana en el dispositivo, permitiendo live reloading e iteración rápida.

5. Itera como de costumbre

   Los cambios de código se reflejan inmediatamente en el dispositivo, siguiendo el mismo ciclo de edición-actualización usado en Android e iOS.

Builds de desarrollo y características nativas

Expo Go es suficiente para las primeras etapas de desarrollo y trabajo de interfaz de usuario. Cuando se necesita acceso a módulos nativos o una integración más profunda con la plataforma, se usan en su lugar builds de desarrollo. Estas builds siguen el flujo de trabajo estándar de desarrollo de Expo y se ejecutan directamente en el dispositivo Quest.

Configuración específica de la plataforma y diferencias con los móviles

Aunque el flujo de trabajo general sigue siendo el mismo, Meta Quest requiere un pequeño conjunto de ajustes específicos de la plataforma.

Configuración del proyecto para Meta Horizon OS

Las aplicaciones de Meta Quest deben cumplir requisitos específicos para ejecutarse correctamente y ser aptas para su envío a la tienda. Estos incluyen configuración de Android específica de la plataforma, sabores de producto (product flavors) y metadatos de la aplicación.

Expo proporciona un plugin para Meta Horizon OS que aplica estos requisitos en tiempo de compilación. Usar este plugin garantiza que la configuración del proyecto cumpla con las expectativas de Meta Quest sin necesidad de modificar manualmente los archivos nativos.

Instala expo-horizon-core y agrégalo a app.json o app.config.js:

{
  "expo": {
    "plugins": [
      [
        "expo-horizon-core",
        {
          "horizonAppId": "your-horizon-app-id",
          "defaultHeight": "640dp",
          "defaultWidth": "1024dp",
          "supportedDevices": "quest2|quest3|quest3s",
          "disableVrHeadtracking": false,
          "allowBackup": false
        }
      ]
    ]
  }
}

Además, cambia el valor de orientación:

{
   ...
   "orientation": "default",
   ...
}

Actualiza package.json con scripts específicos para Quest:

{
  "scripts": {
    "android": "expo run:android --variant mobileDebug",
    "quest": "expo run:android --variant questDebug",
    "android:release": "expo run:android --variant mobileRelease",
    "quest:release": "expo run:android --variant questRelease"
  }
}

Usar React Native sin Expo

Expo ofrece la forma más sencilla de empezar con React Native en Meta Quest. Si prefieres construir sin un framework, también puedes aplicar la configuración requerida de Meta Horizon OS directamente en tu proyecto de Android.

Como mínimo, esto incluye:

• Crear un sabor de compilación (build flavor) específico para Meta Quest en android/app/build.gradle

• Configurar el horizonAppId

• Definir un tamaño de panel predeterminado en el manifiesto de Android

• Declarar los dispositivos compatibles (por ejemplo: quest2|quest3|quest3s)

• Eliminar los permisos prohibidos

• Ajustar la versión mínima compatible del SDK de Android

• Añadir comprobaciones en tiempo de ejecución como isHorizonDevice() e isHorizonBuild()

Para entender el conjunto completo de cambios, puedes inspeccionar la implementación del plugin expo-horizon-core y replicar la misma configuración manualmente.

Android sin Google Play Services

Meta Horizon OS está construido sobre Android Open Source Project (AOSP), que proporciona la plataforma Android base sin los servicios propietarios de Google. Desde una perspectiva de desarrollo, esto significa que las aplicaciones se ejecutan en las API estándar de Android pero no tienen acceso a Google Mobile Services como Play Services o integraciones específicas de Play Store.

Al enfocarse en Meta Quest, las aplicaciones deben diseñarse para evitar dependencias directas en los servicios de Google o para proporcionar alternativas específicas de la plataforma cuando sea necesario.

Una lista de dependencias no admitidas está disponible en la documentación de Meta Horizon OS.

Permisos y capacidades del dispositivo

Algunos permisos de Android y suposiciones de hardware comunes en dispositivos móviles no se aplican a los cascos de realidad virtual. Las características de telefonía móvil (por ejemplo, SMS), ciertos sensores (como el GPS) y los permisos restringidos no están disponibles o están prohibidos. Los proyectos deben tener en cuenta explícitamente estas diferencias durante la configuración.

Evaluar la compatibilidad de bibliotecas

La mayoría de las bibliotecas de React Native funcionan en Meta Quest, pero la compatibilidad depende de las suposiciones que una biblioteca haga sobre la plataforma subyacente. En particular, las bibliotecas pueden depender de hardware exclusivo de móviles, entrada táctil o servicios que no están disponibles en Horizon OS.

Como pauta general:

• Las bibliotecas autocontenidas que solo dependen de las API estándar de React Native y Android generalmente funcionan sin cambios.

• Las bibliotecas que asumen entrada táctil exclusiva, hardware exclusivo de móviles o Google Mobile Services requieren adaptación o uso condicional.

• Las bibliotecas que dependen de permisos restringidos o capacidades de dispositivo no disponibles no son compatibles.

Para casos de uso comunes como ubicación y notificaciones, Expo ofrece reemplazos directos para Meta Horizon OS. Otras bibliotecas pueden funcionar tal cual o requerir ajustes específicos según sus dependencias.

Rutas de código conscientes de la plataforma

Las aplicaciones que apuntan tanto a Meta Quest como a otras plataformas deben gestionar comportamientos específicos. Meta Horizon OS incluye utilidades de runtime para detectar si la app se ejecuta en un dispositivo Quest, permitiendo deshabilitar o reemplazar funciones no compatibles cuando sea necesario.

import ExpoHorizon from 'expo-horizon-core';

// Check if running on a Horizon device
if (ExpoHorizon.isHorizonDevice) {
  console.log('Running on Meta Horizon OS!');
}

// Check if this is a Horizon build
if (ExpoHorizon.isHorizonBuild) {
  console.log('This is a Horizon build variant');
}

// Access the Horizon App ID
const appId = ExpoHorizon.horizonAppId;
console.log('Horizon App ID:', appId ?? 'Not configured');

Consideraciones de diseño y UX para realidad virtual

Diseñar para pantallas montadas en la cabeza introduce restricciones diferentes a los dispositivos móviles táctiles. Las interfaces se visualizan a distancia, se renderizan en el espacio 3D y se interactúa con ellas usando métodos de entrada más variados.

Los elementos de UI generalmente requieren áreas de toque más grandes, mayor espaciado y tipografía legible a distintas distancias. Estos desafíos son similares a los de escritorio, tablets y dispositivos plegables, donde las aplicaciones se ejecutan en ventanas redimensionables y los layouts deben adaptarse dinámicamente.

Una diferencia clave entre Meta Quest y Android móvil es la entrada de datos. En lugar de depender principalmente del tacto, las aplicaciones de Meta Quest se controlan mediante mandos, seguimiento de manos y opcionalmente ratón/teclado. Los mandos funcionan más como dispositivos de puntero, lo que acerca los patrones de interacción a las UI web y de escritorio, incluyendo navegación por enfoque y hover.

El sistema de eventos y modelo de componentes de React Native puede soportar estos patrones, pero las aplicaciones deben evitar asumir solo entrada táctil y garantizar que los elementos UI tengan estados de enfoque claros y navegación predecible cuando se usan dispositivos de puntero.

Estas consideraciones favorecen layouts responsivos e interacciones independientes del tipo de entrada. El sistema de layout y modelo de componentes de React Native proporciona una base sólida para crear interfaces VR cómodas y usables.

nota

Para más detalles, consulta las guías de diseño oficiales.

Ejemplos y referencias

Proyecto de referencia

• Proyecto de referencia con toda la configuración usada en este artículo

• App demostrativa de Callstack para Meta Horizon OS desde React Conf

Más información

• Documentación oficial de Meta Quest

• Guía para desarrolladores de React Native en Meta Horizon OS (ebook)

• Cómo añadir soporte para Meta Quest en tus builds de desarrollo de Expo (artículo)

• Llevando React Native a VR en Meta Quest (podcast)

• React Native en Meta Quest: Lo que aprendimos creando para VR (streaming)

• Introducción al desarrollo en Meta Horizon usando Expo

• Canal de feedback para evolución de la plataforma

Agradecimientos

Llevar React Native a nuevas plataformas requiere más que código. Agradecemos a todos los que contribuyeron con su tiempo, feedback y apoyo en este proceso.