React Native chega ao Meta Quest

O React Native sempre buscou ajudar os desenvolvedores a reutilizar conhecimentos entre plataformas. O que começou com Android e iOS expandiu-se gradualmente para Apple TV, Windows, macOS e até mesmo o web com react-strict-dom. Em 2021, o post da visão de muitas plataformas traçou um futuro onde o React Native poderia se adaptar a novos dispositivos e formatos sem fragmentar o ecossistema.

No React Conf 2025, demos mais um passo em direção a essa visão ao anunciar o suporte oficial do React Native para dispositivos Meta Quest. Este post se concentra em como começar com React Native no Meta Quest, o que funciona hoje e como os desenvolvedores podem construir e lançar aplicativos VR usando ferramentas e padrões familiares.

Principais pontos​

Os dispositivos Meta Quest executam o Meta Horizon OS, um sistema operacional baseado em Android. Do ponto de vista do React Native, isso significa que a maioria das ferramentas existentes para desenvolvimento Android, sistemas de construção e fluxos de trabalho de depuração funcionam com mudanças mínimas. Para desenvolvedores já construindo aplicativos React Native no Android, grande parte do modelo de desenvolvimento existente se mantém.

Isto alinha-se com a forma como o React Native expandiu-se para outros ambientes baseados em Android ao longo do tempo. Em vez de introduzir um novo runtime ou modelo de desenvolvimento, Meta Quest constrói sobre a mesma base Android e integra-se às abstrações existentes do React Native. Isso permite adicionar capacidades específicas à plataforma sem fragmentar o quadro ou exigir uma abordagem separada ao desenvolvimento.

Esta seção caminha através do fluxo de trabalho básico de desenvolvimento no Meta Quest, começando com Expo Go e movendo-se em direção a builds de desenvolvimento e configurações específicas da plataforma.

Para executar um aplicativo Expo no Meta Quest, comece com um projeto padrão Expo, inicie o servidor de desenvolvimento e abra o app através do Expo Go no headset. Além de algumas exigências específicas do Meta Horizon OS, o fluxo de trabalho é o mesmo que no Android.

1. Instale o Expo Go no headset

   O Expo Go está disponível na loja Meta Horizon e pode ser instalado diretamente nos dispositivos Meta Quest. É usado para iteração rápida durante o desenvolvimento.

2. Crie (ou use) um projeto Expo

   Se você estiver começando do zero, crie um aplicativo padrão Expo. Nenhum modelo especial é necessário.

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

3. Inicie o servidor de desenvolvimento

4. Conecte-se com o Quest usando o Expo Go

   Abrir o Expo Go no headset e escaneie o código QR exibido pelo CLI do Expo com a câmera do headset. O aplicativo é lançado em uma nova janela no dispositivo, permitindo recarregamento ao vivo e iteração rápida.

5. Itere como de costume

   Mudanças no código são refletidas imediatamente no dispositivo, seguindo o mesmo ciclo de edição-recarga usado em Android e iOS.

   Construções de desenvolvimento e recursos nativos

   O Expo Go é suficiente para o desenvolvimento inicial e trabalho com a interface do usuário. Quando acesso a módulos nativos ou integração mais profunda com a plataforma for necessária, são usadas construções de desenvolvimento. Essas construções seguem o fluxo de trabalho padrão de construção de desenvolvimento do Expo e executam diretamente no dispositivo Quest.

   Configuração específica da plataforma e diferenças em relação ao móvel

   Embora o fluxo de trabalho geral permaneça o mesmo, o Meta Quest requer um conjunto pequeno de ajustes específicos à plataforma.

   As aplicações Meta Quest devem atender a requisitos específicos para funcionar corretamente e serem elegíveis para submissão na loja. Isso inclui configuração específica da plataforma Android, sabores do produto e metadados de aplicativo.

   O Expo fornece um plugin para o Meta Horizon OS que aplica esses requisitos no momento da construção. Usar esse plugin garante que a configuração do projeto esteja alinhada com as expectativas do Meta Quest sem modificação manual dos arquivos nativos.

   Instale expo-horizon-core e adicione-o ao app.json ou app.config.js:

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

   Também altere o valor da orientação:

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

   Atualize o package.json com scripts específicos para o 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"
     }
   

   Usando React Native sem Expo

   O Expo oferece a maneira mais fácil de começar com o React Native no Meta Quest. Se você preferir construir sem um framework, também pode aplicar a configuração necessária do Meta Horizon OS diretamente em seu projeto Android.

   No mínimo, isso inclui:

   • Criando uma build flavor específica para Meta Quest em android/app/build.gradle
   • Definindo o horizonAppId
   • Definindo um tamanho de painel padrão no manifesto Android
   • Declarando dispositivos suportados (por exemplo: quest2|quest3|quest3s)
   • Removendo permissões proibidas
   • Ajustando a versão mínima do SDK Android compatível
   • Adicionando verificações em tempo de execução como isHorizonDevice() e isHorizonBuild()

   Para entender o conjunto completo de alterações, você pode inspecionar a implementação do plugin expo-horizon-core e replicar manualmente a mesma configuração.

   Android sem Serviços do Google Play

   O Meta Horizon OS é construído sobre o Android Open Source Project (AOSP), que fornece a plataforma Android básica sem os serviços proprietários da Google. Do ponto de vista do desenvolvimento, isso significa que as aplicações funcionam em APIs padrão do Android, mas não têm acesso aos Serviços Móveis da Google como Play Services ou integrações específicas ao Play Store.

   Quando o alvo é o Meta Quest, as aplicações devem ser projetadas para evitar dependências diretas nos serviços da Google ou fornecer alternativas específicas à plataforma onde necessário.

   Uma lista de dependências não suportadas está disponível na documentação do Meta Horizon OS.

   Permissões e capacidades do dispositivo

   Alguns Android permissions e suposições de hardware comuns em dispositivos móveis não se aplicam a headsets VR. Recursos celulares (por exemplo, SMS), certos sensores (como GPS) e permissões restritas são ou não disponíveis ou proibidos. Projetos devem explicitamente levar essas diferenças em consideração durante a configuração.

   Avaliando compatibilidade de bibliotecas

   A maioria das bibliotecas React Native funciona no Meta Quest, mas a compatibilidade depende das suposições que uma biblioteca faz sobre o sistema subjacente. Em particular, as bibliotecas podem depender de hardware móvel exclusivo, entrada por toque ou serviços não disponíveis no Horizon OS.

   Como uma diretriz geral:

   • As bibliotecas que são autossuficientes e dependem apenas de React Native padrão e APIs do Android geralmente funcionam sem alterações.
   • As bibliotecas que assumem entrada exclusivamente por toque, hardware móvel ou serviços da Google Mobile Services requerem adaptação ou uso condicional.
   • As bibliotecas que dependem de permissões restritas ou capacidades do dispositivo não disponíveis não são suportadas.

   Para casos comuns, como localização e notificações, o Expo fornece substitutos prontos para Meta Horizon OS. Outras bibliotecas podem funcionar como estão ou exigir tratamento específico de plataforma dependendo de suas dependências.

   Rotas de código conscientes da plataforma

   Aplicativos que visam tanto o Meta Quest quanto outras plataformas devem proteger comportamentos específicos da plataforma. O Meta Horizon OS fornece utilitários em tempo de execução para detectar se o aplicativo está sendo executado em um dispositivo Quest, permitindo desabilitar ou substituir recursos não suportados quando necessário.

   
   import ExpoHorizon from 'expo-horizon-core'; 
   
   
   
   if (ExpoHorizon.isHorizonDevice) { 
   
     console.log('Running on Meta Horizon OS!'); 
   
   }
   
   
   if (ExpoHorizon.isHorizonBuild) { 
   
     console.log('This is a Horizon build variant'); 
   Considerações de design e experiência do usuário para VR
   O design para um dispositivo montado na cabeça introduz restrições que diferem das telas touch-based de dispositivos móveis. Interfaces são visualizadas à distância, renderizadas no espaço e interagidas usando uma ampla gama de métodos de entrada.
   Os elementos da interface do usuário geralmente requerem alvos maiores para cliques, espaçamento maior e tipografia que permaneça legível em distâncias variáveis. Esses desafios são semelhantes aos encontrados em desktops, tablets e dispositivos dobráveis, onde os aplicativos funcionam em janelas redimensionáveis e as layouts devem se adaptar dinamicamente.
   Uma das principais diferenças entre Meta Quest e Android móvel é a entrada. Em vez de depender principalmente do toque, os aplicativos da Meta Quest são comumente controlados por meio de controles, rastreamento de mãos e opcionalmente mouse e teclado. Os controles se comportam mais como um dispositivo ponteiro, o que introduz padrões de interação mais próximos às interfaces do web e desktop, incluindo navegação baseada em hover e foco.
   O sistema de eventos e modelo de componentes do React Native pode suportar esses padrões de interação, mas os aplicativos devem evitar suposições exclusivas para toque e garantir que os elementos da interface do usuário forneçam estados de foco claros e navegação previsível quando controlados por meio de dispositivos ponteiro.
   Juntos, essas considerações favorecem layouts responsivos e interações isentas de entrada. O sistema de layout e modelo de componentes do React Native fornecem uma base sólida para construir interfaces VR confortáveis e usáveis.
   
   Exemplos e referências
   Projeto de referência
   
   Saiba mais
   
   Agradecimentos
   Levar React Native para novas plataformas requer mais do que código. Estamos gratos a todos que contribuíram com seu tempo, feedback e suporte ao longo do caminho.