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 centrado en ayudar a los desarrolladores a reutilizar conocimientos en distintas plataformas. Lo que comenzó con Android y iOS se ha ido expandiendo a Apple TV, Windows, macOS e incluso la web con react-strict-dom. En 2021, la publicación Many Platform Vision esbozó un futuro en el que React Native podría adaptarse a nuevos dispositivos y factores de forma sin fragmentar el ecosistema.

En React Conf 2025, dimos un paso más hacia esa visión anunciando el soporte oficial de React Native para dispositivos Meta Quest. Esta publicación se centra en cómo empezar con React Native en Meta Quest, qué funciona actualmente y cómo los desarrolladores pueden crear y publicar aplicaciones de VR utilizando herramientas y patrones familiares.

Lo más destacado

• React Native en Meta Quest

• Cómo empezar con Meta Quest

• Builds de desarrollo y funciones nativas

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

• Consideraciones de diseño y UX para VR

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, sistemas de compilación y flujos de trabajo de depuración existentes de Android funcionan con cambios mínimos. Para los desarrolladores que ya crean aplicaciones de React Native en Android, gran parte del modelo de desarrollo existente se traslada.

Esto se alinea con cómo React Native se ha expandido a otros entornos basados en Android con el tiempo. En lugar de introducir un nuevo entorno de ejecución o modelo de desarrollo, Meta Quest se basa en la misma base de Android y se integra con las abstracciones existentes de React Native. Esto permite agregar capacidades específicas de la plataforma sin fragmentar el framework ni requerir un enfoque separado para el desarrollo.

Cómo empezar con Meta Quest

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

Paso a paso: Ejecutar una aplicación de Expo en Meta Quest

Para ejecutar una aplicación de Expo en Meta Quest, inicia un proyecto estándar de Expo, inicia el servidor de desarrollo y abre la aplicación a través de Expo Go en el visor. Más allá de algunos requisitos específicos de Meta Horizon OS, el flujo de trabajo es el mismo que en Android.

1. Instalar Expo Go en el visor

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

2. Crear (o usar) un proyecto de Expo

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

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

3. Iniciar el servidor de desarrollo

   npx expo start

4. Conectarse 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, lo que permite la recarga en vivo y una iteración rápida.

5. Iterar como de costumbre

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

Builds de desarrollo y funciones nativas

Expo Go es suficiente para el desarrollo inicial y el trabajo de interfaz de usuario. Cuando se requiere acceso a módulos nativos o una integración más profunda con la plataforma, se utilizan 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 dispositivos móviles

Aunque el flujo de trabajo general se mantiene igual, 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 elegibles para su publicación en la tienda. Estos incluyen configuración específica de Android para la plataforma, variantes de producto (product flavors) y metadatos de la aplicación.

Expo proporciona un plugin para Meta Horizon OS que aplica estos requisitos durante el build. 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 proporciona la forma más sencilla de comenzar con React Native en Meta Quest. Si prefieres desarrollar sin un framework, también puedes aplicar la configuración requerida para Meta Horizon OS directamente en tu proyecto de Android.

Como mínimo, esto incluye:

• Crear una variante de build específica para Meta Quest en android/app/build.gradle

• Configurar el horizonAppId

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

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

• Eliminar permisos prohibidos

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

• Agregar verificaciones en tiempo de ejecución como isHorizonDevice() y isHorizonBuild()

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

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 APIs estándar de Android pero no tienen acceso a Google Mobile Services como Play Services ni integraciones específicas de Play Store.

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

Una lista de dependencias no compatibles 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 visores de realidad virtual. Las funciones celulares (por ejemplo, SMS), ciertos sensores (como GPS) y los permisos restringidos no están disponibles o están prohibidos. Los proyectos deben considerar 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 haga una biblioteca sobre la plataforma subyacente. En particular, las bibliotecas pueden depender de hardware exclusivo para móviles, entrada táctil o servicios no disponibles en Horizon OS.

Como pauta general:

• Las bibliotecas autocontenidas que dependen únicamente de APIs estándar de React Native y Android suelen funcionar sin cambios.

• Las bibliotecas que asumen entrada exclusivamente táctil, hardware solo para 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 dirigidas a Meta Quest y otras plataformas deben aislar comportamientos específicos de cada plataforma. Meta Horizon OS proporciona utilidades en tiempo de ejecución para detectar si la app se ejecuta en un dispositivo Quest, permitiendo desactivar o reemplazar funciones no soportadas 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 gafas de realidad virtual introduce restricciones distintas 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 mediante métodos de entrada más diversos.

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

Una diferencia clave entre Meta Quest y dispositivos móviles Android es la entrada de datos. En lugar de depender principalmente del tacto, las aplicaciones de Meta Quest suelen controlarse mediante mandos, seguimiento de manos y opcionalmente ratón y teclado. Los mandos funcionan más como dispositivos apuntadores, introduciendo patrones de interacción similares a las interfaces web y de escritorio, incluyendo navegación por sobrevuelo y enfoque.

El sistema de eventos y modelo de componentes de React Native puede soportar estos patrones de interacción, pero las aplicaciones deben evitar suposiciones basadas únicamente en toques y garantizar que los elementos UI proporcionen estados de enfoque claros y navegación predecible cuando se controlan mediante dispositivos apuntadores.

En conjunto, estas consideraciones favorecen diseños responsivos e interacciones agnósticas al método de entrada. El sistema de diseño y modelo de componentes de React Native proporciona una base sólida para construir interfaces de realidad virtual 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

• Aplicación demostrativa de Callstack para Meta Horizon OS de 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 agregar soporte para Meta Quest a tus builds de desarrollo de Expo (artículo)

• Llevando React Native a realidad virtual en Meta Quest (podcast)

• React Native en Meta Quest: Lo que aprendimos sobre desarrollo para VR (transmisión en vivo)

• Empezando con desarrollo para 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 quienes contribuyeron con su tiempo, comentarios y apoyo durante este proceso.