Fbhchile

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.

What You Need

• A Meta Quest headset (Quest 2, Quest 3, or Quest Pro) charged and updated
• A development computer (macOS, Windows, or Linux) with Node.js 18+ installed
• npm or yarn package manager
• An Expo account (free) – sign up at expo.dev
• USB-C cable for sideloading (optional but recommended for faster iteration)
• Basic familiarity with React Native and Android development (but even beginners can follow along)

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:

• Screen dimensions: The headset renders at a fixed resolution (~1832x1920 per eye for Quest 3). Your layout will appear inside a movable window unless you use immersive mode.
• Touch vs. controller: There is no touch screen. Use Pressable with controller click events or hand tracking gestures. The Expo libraries expo-hand-tracking and expo-controller help bridge this gap.
• Permissions: You may need spatial awareness (passthrough) or microphone permissions. Add them in AndroidManifest.xml under android/app/src/main.
• Package name: Create a unique package name in app.json under expo.android.package.

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:

• Use large touch targets: Minimum 60px equivalent in VR to avoid accidental clicks.
• Keep content centered: Users should not have to crane their necks. Default to the center of the window.
• Minimize motion: Avoid rapid animations that could cause motion sickness.
• Leverage depth: Add subtle shadows or z-offsets to buttons to create a sense of spatial hierarchy.
• Test in passthrough mode: Some apps run in mixed reality – ensure text remains readable against real-world backgrounds.

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

• Use a wired connection for initial builds: USB-C to the headset is more stable than Wi-Fi for installing large APKs.
• Enable developer mode on your Quest: In the Meta Horizon mobile app, go to Devices > Developer Mode and toggle it on. This allows sideloading and debug output.
• Check for battery drain: Development builds can drain the headset faster than release builds. Keep a charger nearby.
• Join the React Native for Meta Quest community: The community forums have dedicated threads for VR development.
• Start with a sample app: The [Expo GitHub repo](https://github.com/expo/expo) includes a vr-demo folder with basic boilerplate.
• Optimize for 72fps: Use InteractionManager to defer heavy operations, and profile with expo-profiler.

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.