Building VR Apps with React Native on Meta Quest: A Step-by-Step Guide

By

Introduction

React Native has long been the bridge between code and cross-platform reality, starting with Android and iOS and expanding to Apple TV, Windows, macOS, and even the web. In 2021, the Many Platform Vision outlined a future where React Native could adapt to new devices and form factors without fracturing the ecosystem. At React Conf 2025, this vision reached a new frontier: official React Native support for Meta Quest devices. This guide walks you through initial setup, development builds, platform-specific tweaks, and design considerations for virtual reality (VR). By the end, you will be building and shipping VR apps using tools you already know.

Building VR Apps with React Native on Meta Quest: A Step-by-Step Guide

What You Need

Step 1: Install Expo Go on Your Headset

Expo Go is the easiest way to test your React Native app on a real Meta Quest device. It behaves like a mobile Expo Go but tailored for Meta Horizon OS.

  1. Put on your headset and open the Meta Horizon Store.
  2. Search for Expo Go and install it (it's free).
  3. Launch Expo Go once to let it register with your account. You'll see a QR code scanner and a connection status.

Step 2: Create or Use an Existing Expo Project

No special template is required – a standard Expo project works immediately on Meta Quest. If you have a project already, skip to the next step.

  1. Open your terminal and run:
    npx create-expo-app@latest my-quest-app
    cd my-quest-app
  2. This generates a minimal Expo project with App.js or App.tsx as the entry point. You can edit this file later to add VR-specific UI components.

Step 3: Start the Development Server

Your computer runs the Expo dev server, and your headset connects to it over your local network.

  1. In your project root, run:
    npx expo start
  2. After a moment, a QR code appears in the terminal along with a local URL (usually http://localhost:8081).
  3. Keep the terminal window open – the server must stay running.

Step 4: Connect with Quest Using Expo Go

This step mirrors how you'd test on a physical Android phone.

  1. Put on your headset and open Expo Go.
  2. Select Scan QR Code using the controller or hand tracking.
  3. Point the headset's camera toward the QR code on your computer screen.
  4. Expo Go will load your app inside a new floating window. You can resize and reposition this window by grabbing its edges with your controller.

Tip: If scanning fails, you can enter the URL manually under Enter URL in Expo Go. You'll need your computer's local IP and the port shown in the terminal (e.g., 192.168.1.10:8081).

Step 5: Iterate with Live Reloading

One of React Native's superpowers is fast feedback.

  1. Edit any file in your project (e.g., change the text in App.js).
  2. Save the file – Expo will push changes to the headset almost instantly.
  3. Observe the update in the floating window. No rebuild or redeploy needed.

This loop works for most JavaScript changes. If you add native modules, you'll need to switch to development builds (covered in the next section).

Step 6: Move to Development Builds (for Native Features)

Expo Go is perfect for early prototyping, but it doesn't include every native module. For VR-specific APIs (like spatial tracking or controller input), you need a development build.

  1. Install the `expo-dev-client` package in your project:
    npx expo install expo-dev-client
  2. Create a development build for Android (since Meta Quest runs Android):
    npx expo run:android
  3. The build will compile and output an APK. Install it via USB or sideload using adb:
    adb install app-debug.apk
  4. Launch the built app on the headset. It will connect to your dev server automatically (make sure both devices are on the same network).

Development builds unlock access to native modules like react-native-vr (community package) or platform-specific SDKs. You can also add custom native code in android/app/src/main/java.

Step 7: Handle Platform-Specific Differences

Meta Quest is Android-based, but it's not a phone. Keep these in mind:

For a deeper dive, see the Tips section below for hardware optimization.

Step 8: Design for VR UX

A flat 2D interface in a VR headset can feel disorienting. Follow these guidelines:

You can use React Native's StyleSheet and Animated library as usual; just be mindful of the 90Hz refresh rate on Quest 3.

Tips & Best Practices

With these steps, you can transform a standard React Native project into a VR experience ready for Meta Quest. The tools are here – all that's left is to build.

Tags:

Related Articles

Recommended

Discover More

The Evolving Role of UX Designers: From Interface Design to AI-Augmented DevelopmentFrom Bruises to Diagnosis: Recognizing and Managing Medication-Induced Hyperpigmentation10 Key Developments in OpenSearch's Evolution Into an AI Data LayerChina Electric Vehicle Update: Highlights from Beijing Auto Show, Xiaomi SU7 Test Drive, BYD Developments, and New Home Battery PilotHow to Implement Agentic R&D with Microsoft Discovery: A Step-by-Step Guide