Building Immersive VR Experiences with React Native on Meta Quest

Overview

React Native has long empowered developers to reuse code and skills across Android, iOS, Apple TV, Windows, macOS, and even the web. At React Conf 2025, the ecosystem took a monumental leap forward by officially supporting Meta Quest devices. This guide walks you through everything you need to know to get started building virtual reality (VR) applications using React Native on Meta Horizon OS (the Android-based operating system powering Meta Quest headsets).

Building Immersive VR Experiences with React Native on Meta Quest

By leveraging familiar tools and patterns, you can create immersive VR experiences without learning a new framework or runtime. This tutorial covers the complete workflow—from initial setup with Expo Go to advanced development builds, platform-specific configuration, and VR-specific design considerations. Whether you're a seasoned React Native developer or just beginning, you'll find practical steps and code examples to launch your first VR app on Meta Quest.

Prerequisites

Before diving in, ensure you have the following:

A Meta Quest headset (Quest 2, Quest 3, or Quest Pro) with the latest firmware installed.
Node.js (version 18 or later) and npm or yarn.
Expo CLI installed globally (npm install -g expo-cli).
Basic familiarity with React Native development (components, state, navigation).
A Meta Developer account (free) to enable developer mode on your headset—required for sideloading and debugging.

If you've built React Native apps for Android before, you're already most of the way there. Meta Quest runs on Meta Horizon OS, which is built on Android, so your existing toolchain (adb, Android SDK, Metro bundler) works with minimal changes.

Step-by-Step Instructions

1. Install Expo Go on Your Headset

Expo Go is available on the Meta Horizon Store and serves as the fastest way to iterate during early development. Use the headset's built-in browser or the store app to search for and install Expo Go.

2. Create (or Use) an Expo Project

Start a standard Expo project. No special template is required because React Native on Meta Quest reuses the Android foundation.

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

If you have an existing Expo project, you can use it directly—just ensure your dependencies are up to date.

3. Start the Development Server

Run the following command in your project directory:

npx expo start

This launches the Metro bundler and Expo DevTools in your browser. You'll see a QR code in the terminal or browser tab.

4. Connect with Quest Using Expo Go

Put on your Meta Quest headset and open the Expo Go app. Use the built-in camera (or the browser-based QR scanner) to scan the QR code displayed by Expo CLI. The headset will open a new window showing your React Native app. Live reloading works automatically—any code changes you make are reflected within seconds.

This workflow mirrors the Android development cycle: edit, save, see updates. You can even use the React Native DevTools (shake the headset or use the in-app menu) for debugging.

5. Development Builds and Native Features

While Expo Go is perfect for quick prototyping, production apps often require native modules or custom Met. If you need direct access to the headset's hardware (e.g., hand tracking, spatial anchors), you'll need to create a development build.

Create a development build with EAS Build or locally on your machine. For example, using EAS:
```
eas build --profile development --platform android
```
This produces an APK that you can sideload onto the headset.
Enable developer mode on your headset via the Meta Horizon mobile app (Settings > Developer Mode).
Sideload the APK using adb install. Ensure your headset is connected via USB or the same Wi-Fi network.

Once installed, the development build supports the same Metro bundler, fast refresh, and debugging features as Expo Go, but now you can integrate native Swift/Java modules or use community libraries for VR-specific features.

6. Platform-Specific Setup and Differences

Because Meta Quest runs on Android, most React Native Android-specific code works out of the box—but there are a few nuances:

Input handling: Meta Quest uses controllers and hand gestures. You'll need to use the react-native-vr or similar community packages to handle events like button presses, thumbstick movement, or pinch gestures.
Permissions: VR apps often require spatial tracking permissions. Add these to your AndroidManifest.xml (e.g., <uses-permission android:name="com.oculus.permission.HAND_TRACKING" />).
Window management: On Quest, your app runs in a floating window. You can specify its size and position using the React Native Dimensions API or by configuring the AndroidManifest with custom meta-data entries (e.g., com.oculus.vr.settings).

For more details, refer to the Meta Horizon developer documentation.

7. Design and UX Considerations for VR

Building for VR isn't just about code—it's about creating comfortable, intuitive experiences. Keep these principles in mind:

Maintain a consistent frame rate (72 Hz or higher) to prevent motion sickness. Avoid complex animations or heavy rerenders.
Use large, legible text. A typical 20px font on a phone might be unreadable in VR. Aim for at least 48px, and test with the headset.
Design for 3D space with depth. Use the perspective property or a 3D library like three.js (via react-three-fiber) to position UI elements in a spatial layout.
Provide clear interactions: use gaze-based input (look and tap) or laser pointers from controllers. Avoid requiring precise pinch or swipe gestures that are hard to perform in VR.
Test often on the actual headset—emulators can't fully reproduce the VR experience.

Refer to the Common Mistakes section for pitfalls to avoid.

Common Mistakes

Even experienced developers can stumble when moving to VR. Here are the most frequent issues and how to avoid them:

Forgetting to enable developer mode on the headset. Without it, Expo Go and sideloaded APKs won't run. Verify in the mobile app before starting.
Ignoring performance. VR renders at higher resolutions and frame rates. Use React.memo, lazy loading, and avoid inline styles or unnecessary state updates.
Using mobile-style UI components. A 44-point tap target on a phone is tiny in VR. Make buttons at least 200x200 pixels in VR space.
Neglecting controller input. Many VR apps fail to handle both controller and gaze inputs. Provide fallback controls or clear instructions.
Not testing on actual hardware until late in development. The Quest's field of view, comfort, and latency issues only become apparent when you wear the headset.

Summary

React Native on Meta Quest opens a new frontier for VR app development using the tools and patterns you already know. By following this guide, you've learned how to run an Expo app on Quest, create development builds with native features, adapt to platform specifics, and design for a comfortable VR experience. The future of multi-platform development is here—now go build something immersive!

Tags: