Building VR Apps for Meta Quest with React Native: A Complete Developer Guide

Overview

React Native has always been about reusing knowledge across platforms. Originally built for Android and iOS, it now extends to Apple TV, Windows, macOS, and even the web via react-strict-dom. In 2021, the Many Platform Vision post described a future where React Native could adapt to new devices and form factors without splitting the ecosystem. At React Conf 2025, that vision took a big step forward with official support for Meta Quest devices. This guide walks you through how to develop VR applications using familiar React Native tools and patterns. You’ll learn exactly what works today, how to set up your environment, and how to ship your first VR app.

Building VR Apps for Meta Quest with React Native: A Complete Developer Guide

Prerequisites

Hardware and Software Requirements

A Meta Quest device (Quest 2, Quest 3, Quest Pro) with developer mode enabled.
A development computer (macOS, Windows, or Linux) with Node.js 18+ and npm or yarn installed.
Expo CLI (or direct React Native CLI) – we recommend Expo for simplicity.
A USB cable for wired debugging, or a Wi-Fi network for wireless testing.
Basic familiarity with React Native and command-line tools.

Step-by-Step Instructions

Understanding Platform Foundations

Meta Quest devices run Meta Horizon OS, which is based on Android. From a React Native perspective, this means all the existing Android tooling, build systems, and debugging workflows work with minimal changes. If you’ve built React Native apps for Android before, much of that development model carries over. No new runtime or separate framework is needed – just add a few platform-specific considerations.

Running an Expo App on Meta Quest

The quickest way to get started is using Expo Go on your headset. Here’s how:

Install Expo Go on the headset
- Open the Meta Horizon Store on your Quest device.
- Search for Expo Go and install it (it’s free).
- Once installed, launch the app – it will show a QR code scanner and connection status.

Create a new Expo project (or use an existing one)

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

Start the development server
```
npx expo start
```
This launches the Metro bundler and prints a QR code in your terminal.
Connect your Quest
- Put on your headset and open Expo Go.
- Use the headset cameras to scan the QR code from your terminal.
- The app will load in a new floating window inside the Quest’s home environment.
Iterate as usual
- Make changes to your JavaScript code (e.g., change text in App.js) – the app will hot-reload instantly on the headset.

That’s it! You now have a React Native app running in VR. Note that Expo Go is great for early prototyping but doesn’t support all native modules.

Moving to Development Builds for Native Features

When you need access to native VR APIs – like head tracking, hand controllers, or spatial anchors – you must create a development build. This is a custom Expo binary that includes your native modules.

Install the necessary dependencies
```
npx expo install expo-dev-client
```
Create a development build for Android
```
npx expo run:android
```
This will compile a native Android app using the Meta Horizon OS SDK. The first build may take several minutes.
Install the build on your Quest
- Enable Developer Mode on your Quest (via the Meta Quest Developer Hub app on your computer).
- Connect your headset via USB and use adb to install the generated APK:
```
adb install android/app/build/outputs/apk/debug/app-debug.apk
```
- Alternatively, use the Meta Quest Developer Hub to sideload the app.
Launch and debug
- The app will appear in your Quest’s app library under Unknown Sources.
- Run npx expo start to connect the Metro bundler and enable live reloading even from a development build.

Platform-Specific Setup and Differences from Mobile

Because Meta Horizon OS is Android-based, you can reuse most of your Android configuration. However, there are key differences:

Window management: Unlike a mobile screen, VR apps run inside a resizable window. Your layout should adapt to different window sizes (use flexbox with percentage-based sizing).
Input handling: Touch events on mobile become pointer events from controllers. Use onPointerDown, onPointerMove, etc., or higher-level libraries like react-native-gesture-handler (works with pointer events).
Permissions: You may need to request spatial data or motion tracking permissions in your AndroidManifest.xml using the Expo config plugin system.

Design and UX Considerations for VR

Building for VR isn’t just about code – the user experience is fundamentally different:

Distance and depth: Place UI elements at a comfortable reading distance (1–2 meters in virtual space). Avoid placing content too close or far away.
Text readability: Use larger font sizes (minimum 16–20pt virtual) and high contrast. Avoid thin fonts.
Interactions: Buttons and clickable areas should be large enough (at least 2–3 cm in virtual space) to accommodate imprecise controller pointing.
Movement: Minimize forced camera movement to reduce motion sickness. Let users teleport or turn in place.

Common Mistakes

1. Trying to Use Standard Touch Events

VR controllers don’t produce onPress events like a finger on a phone screen. If your app ignores pointer events, users won’t be able to interact. Always test with controllers, and use gesture libraries that support pointer or raycasting inputs.

2. Forgetting to Enable Developer Mode

Without developer mode, the Quest will refuse to install custom APKs. Enable it in the Meta Quest Developer Hub on your PC before attempting any sideloading.

3. Ignoring Performance on Older Quest Models

Older devices (Quest 2) have less GPU power. Avoid heavy animations, large images, or complex 3D scenes rendered in JavaScript. Offload rendering to native modules or use React Native’s InteractionManager to defer non-critical work.

4. Hardcoding Screen Dimensions

In VR, windows can be resized arbitrarily by the user. Using fixed pixel sizes will break your layout. Always use relative units (percentages, flex, vw / vh via dimensions) and consider safe areas.

Summary

React Native on Meta Quest brings the ease of cross-platform development to virtual reality. By leveraging the Android foundation, you can reuse your existing React Native skills and even some code. Start with Expo Go for quick prototyping, then move to development builds when you need native VR features. Adapt your UI for depth, large text, and controller input, and you’ll be able to ship engaging VR apps that feel right at home on Meta Quest. The ecosystem is still evolving, but the foundation is solid – and you’re now equipped to be part of it.

Tags: