Building Virtual Reality Apps: A Guide to React Native on Meta Quest

Overview

React Native has always been about code reuse across platforms, starting with Android and iOS and expanding to Apple TV, Windows, macOS, and the web. At React Conf 2025, we took another leap: official React Native support for Meta Quest devices. This guide shows you how to harness familiar tools—React Native and Expo—to build VR apps for Meta Horizon OS. You’ll learn the workflow, pitfalls to avoid, and how to leverage Android tooling without reinventing the wheel.

Building Virtual Reality Apps: A Guide to React Native on Meta Quest

Prerequisites

Before diving in, ensure you have:

React Native or Expo experience – Basic familiarity with npx create-expo-app and the React Native component model.
A Meta Quest headset (Quest 2, Quest 3, or Quest Pro) with Developer Mode enabled (found in the mobile app under Settings > Developer).
Node.js and npm installed (v18 or later recommended).
A Wi-Fi network that both your development computer and Quest headset can access.
Expo Go installed from the Meta Horizon Store onto your headset.

Meta Horizon OS is Android-based, so all existing Android tooling (adb, Android Studio, React Native Android build chain) works with minimal changes. If you can build for Android, you’re most of the way there.

Step-by-Step Guide

1. Install Expo Go on the Headset

Open the Meta Horizon Store from inside your Quest headset, search for “Expo Go,” and install it. This app acts as a development client, allowing you to load your React Native app without a full build process.

2. Create a New Expo Project

You don’t need a special VR template. A standard Expo project works out of the box because Meta Quest renders React Native components into a windowed view (like a floating panel) rather than requiring a 360° canvas.

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

3. Start the Development Server

Run the Expo dev server from your project directory:

npx expo start

You’ll see a QR code in the terminal, along with the standard Metro bundler interface.

4. Connect with Quest Using Expo Go

On your headset, open Expo Go. Use the headset’s camera to scan the QR code from your computer screen. The app will load into a new floating window inside the Quest environment. Note: Ensure your headset and computer are on the same Wi-Fi network—otherwise the QR code won’t connect.

5. Iterate with Live Reloading

Now you can edit your code (e.g., change the text in App.js) and see updates appear instantly on the headset. The same edit-refresh cycle you’re used to on mobile works here. Press Cmd+S (or Ctrl+S) and the app reloads.

6. (Optional) Development Builds for Native Features

Expo Go is great for rapid prototyping, but if you need native modules—like hand tracking, spatial anchors, or lower-level VR features—you’ll need a development build. The process mirrors Android development builds:

Run npx expo run:android to create a native Android project.
Use Android Studio to add any custom native code.
Build and deploy directly to the headset via USB or ADB.

Expo’s documentation covers this in detail under “Development builds.” For Meta Quest, the key difference is disabling the overlay permission requirement (Meta Horizon OS doesn’t support overlays during development).

Common Mistakes

Forgot Developer Mode

Without Developer Mode enabled on the headset, Expo Go cannot install sideloaded apps or connect to the dev server. Double-check in the Meta Quest mobile app under Devices > Headset Settings > Developer Mode.

Network Mismatch

If the QR code fails, ensure both devices are on the same subnet. Corporate networks or guest Wi-Fi often block peer-to-peer connections. Use a personal hotspot or a dedicated router if needed.

Ignoring VR UX Design

React Native on Quest renders components in a 2D window by default. This is fine for menus and dashboards, but for immersive experiences you need to think about depth, gaze input, and comfort. Avoid tiny touch targets and fast-moving UI.

Assuming All Android Features Work

While Meta Horizon OS is Android-based, it lacks some standard Android APIs (e.g., Google Play Services, overlays, notifications). Test your app early to catch these gaps. Use platform-specific code with Platform.OS === 'android' and check for feature availability via native modules.

Overlooking Input Differences

On Quest, users interact with controllers or hand gestures, not a touchscreen. React Native’s touch events translate to “pointer” events, but you may need to adjust hit slop areas or add separate gaze-based interactions. Consider using onPointerEnter and onPointerLeave for hover effects.

Summary

React Native on Meta Quest lets you reuse your existing React and React Native skills to build VR applications with minimal friction. The workflow mirrors Android development: create a standard Expo project, connect via Expo Go, iterate with live reload, and move to development builds when you need native features. Watch out for network issues, missing developer mode, and the different input paradigm. With these foundations, you can start experimenting with spatial computing using the same tools you already love.

Tags: