Building Immersive VR Apps with React Native on Meta Quest: A Complete Developer's Guide

Overview

React Native has always been about reusing knowledge across platforms, from Android and iOS to Apple TV, Windows, macOS, and the web. At React Conf 2025, the vision expanded further with official support for Meta Quest devices. This guide walks you through building and shipping VR applications using familiar React Native tools and patterns. You'll learn how to set up your environment, run apps on the headset, leverage native features, and avoid common pitfalls—all while keeping your codebase portable.

Building Immersive VR Apps with React Native on Meta Quest: A Complete Developer's Guide

Prerequisites

Before diving in, ensure you have the following:

A Meta Quest headset (Quest 2, Quest 3, or Quest Pro) with Meta Horizon OS installed.
A development machine (Windows, macOS, or Linux) with Node.js 18+ and npm or Yarn.
Android Debug Bridge (ADB) set up – since Meta Quest runs on Android, you'll need ADB tools. Install Platform Tools and add them to your PATH.
Expo CLI (optional but recommended for quick starts). Install globally with npm install -g expo-cli.
Developer mode enabled on your Quest headset (via the Meta Quest mobile app under Device Settings).
A Meta developer account to access the Horizon Store for deploying apps.

Step-by-Step Instructions

1. Initial Setup and Environment Configuration

Start by creating a standard React Native project using Expo. No special VR template is needed—the same Android toolchain applies.

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

This generates a blank Expo project. Open package.json and verify React Native version is 0.76 or later (required for Quest support).

2. Install Expo Go on the Headset

Expo Go is available on the Meta Horizon Store. Put on your headset, navigate to the Store, search for Expo Go, and install it. This app acts as a development client for live reloading and quick iteration.

3. Launch the Development Server

From your project directory, run:

npx expo start

The CLI will print a QR code in the terminal. If you're using a Mac or Windows with a tunnel (ex: ngrok), ensure your machine and headset are on the same network.

4. Connect the Headset to the Dev Server

Open Expo Go on the Quest. Use the headset's camera to scan the QR code from the terminal. The app will load in a floating window inside your Quest environment. You'll see your React Native UI immediately – no VR-specific code yet, but the foundation is laid.

Tip: If the QR code is blurred, press '?' in the terminal and select 'show QR code in browser' for a cleaner scan.

5. Iterate with Hot Reload

Make changes to App.js (e.g., change text or background color) and save. The app updates live on the headset. This workflow is identical to mobile development.

6. Development Builds for Native Features

Expo Go is great for basic UI, but VR features like spatial tracking, hand input, or immersive layouts require a development build. Create one with:

npx expo run:android

This builds a standalone APK linked to your project. Install it on the Quest by sideloading via ADB:

adb install app-release.apk

Once installed, open the app from the Quest's library. Development builds give you full access to native modules, including react-native-quest-vr (a community package) for VR-specific APIs.

7. Platform-Specific Customizations

Since Meta Quest runs Meta Horizon OS (a fork of Android), you can use Platform.OS in your code:

import { Platform } from 'react-native';

const isQuest = Platform.OS === 'android' && Platform.Version >= 30;

To differentiate from phones, check the device model via Platform.constants or use the react-native-device-info library. For VR-specific UI, create a VRView component that wraps react-native-web views with proper depth and perspective.

8. Design and UX Considerations for VR

UI placement: Avoid screen edges – use flexbox margins to keep UI within the user's field of view (approx. 110 degrees).
Interactions: Use touch events or connect hand tracking via react-native-gesture-handler with spatial anchors.
Performance: Reduce re-renders using React.memo and avoid heavy animations. VR demands 72+ FPS.
Navigation: Use @react-navigation/native with custom transitions mimicking side-by-side or fade.

Common Mistakes

Not enabling developer mode: Your Quest must have developer mode enabled in the phone app. Otherwise, Expo Go won't detect the device.
Network issues: The QR code connection requires both devices on the same LAN. Use a 5GHz Wi-Fi for stability. If blocked, use --tunnel flag with Expo.
Ignoring Android specifics: Some React Native APIs (like Linking or BackHandler) behave differently on Horizon OS. Always test on the headset.
Overcomplicating VR: You don't need three.js out of the box. Start with 2D UI floating in space – it's still a valid VR experience (like a dashboard).
Skipping development builds for native features: Expo Go cannot access Quest hardware (like controllers). Use development builds early if you need those.

Summary

React Native on Meta Quest bridges mobile development expertise with VR. By reusing Android tooling, Expo, and familiar patterns, you can rapidly prototype and ship spatial apps. Key takeaways: start with Expo Go for UI iteration, move to development builds for native features, and design with VR constraints in mind. The ecosystem is evolving—community packages like react-native-quest-vr will soon offer deeper integration. Test often on real hardware, and enjoy building the next generation of immersive experiences.

Tags: