ReactVision XR Demo

A React Native (Expo) demo app showing off two new components in ViroReact 2.55.0:

• XRSceneNavigator - lets your ViroReact scenes render across iOS, Android and HorizonOS from a single React Native codebase.
• StudioSceneNavigator - brings XR scenes authored in ReactVision Studio into your app through a single component. StudioSceneNavigator derives from XRSceneNavigator, so every Studio scene supports XR out of the box.

The app has two scenes that exercise each navigator:

• XR Scene - an XR scene written entirely in React Native using XRSceneNavigator. Runs on phones and headsets.
• Studio Scene - an XR scene whose contents are managed remotely through ReactVision Studio via StudioSceneNavigator.

Download this app

You can download a prebuilt version of this app and install it on an Android device or a Meta Quest headset (the Quest must be in developer mode) directly from the ReactVision website:

https://reactvision.xyz/quest-demo

If you just want to try the demo, this is the fastest way - no toolchain setup required. If you'd rather build and run it yourself, follow the instructions below.

Prerequisites

• Node.js 20+
• Xcode (for iOS) and/or Android Studio (for Android)
• A ReactVision Studio account - register here

Environment variables

The app reads its ReactVision credentials from environment variables. Copy the example file:

cp .env.example .env

Then fill in:

Variable	Required	Description
RV_API_KEY	yes	Your ReactVision API key. Get it from ReactVision Studio under Project Settings -> API Keys.
RV_PROJECT_ID	yes	The ID of the Studio project this app should load content from. Find it in ReactVision Studio under Project Settings.
EAS_PROJECT_ID	only for EAS builds	Your Expo EAS project ID. Find it in your Expo dashboard under Project Settings. Leave blank if you're only running locally.
EAS_OWNER	only for EAS builds	Your Expo account or organization slug that owns the EAS project. Leave blank if you're only running locally.

Need a walkthrough? Watch the setup video: How to set up ReactVision Studio.

The .env file is gitignored - never commit your real keys.

These values are consumed by app.config.js and injected into both the @reactvision/react-viro plugin config and the iOS Info.plist (RVApiKey, RVProjectId).

Run locally

1. Install dependencies:

   npm install

2. Generate the native projects (required after changing app.config.js, plugins, or env vars that flow into native config):

   npx expo prebuild --clean

3. Run on a device or simulator:

   npm run ios
   # or
   npm run android

ViroReact requires a development build - Expo Go is not supported.

Run on Meta Quest

ViroReact's Quest support builds on top of the regular Android target - the Quest runs an Android-based OS, so you ship the app as a standard .apk and sideload it onto the headset. The Quest must be in developer mode before it will accept sideloaded builds.

1. Put the Quest in developer mode and enable USB debugging

1. Create an organisation in the Meta Developer dashboard and verify your account.

2. In the Meta Horizon mobile app, pair your headset, open Devices -> Headset settings -> Developer mode, and turn it on.

3. Plug the Quest into your machine with a USB-C cable. Put the headset on, accept the Allow USB debugging prompt, and tick Always allow from this computer.

4. Confirm the headset is visible to adb:

   adb devices

   You should see the Quest's serial number listed as device (not unauthorized).

2. Build an APK with Expo

You have two options for producing an APK - pick whichever matches your setup.

Option A - Build locally with expo run:android

This compiles natively on your machine and produces a debug APK under android/app/build/outputs/apk/.

npx expo prebuild --clean
npx expo run:android --variant release --device <quest-serial-from-adb>

Passing --device makes Expo install and launch the build directly onto the connected Quest, so for most local iteration this is all you need.

If you just want the APK file (e.g. to share or sideload manually), run a release build from the generated Android project:

cd android
./gradlew assembleRelease

The signed APK will be at android/app/build/outputs/apk/release/app-release.apk.

Option B - Build in the cloud with EAS

If you don't want to install Android Studio / the Android SDK locally, use EAS Build. You'll need EAS_PROJECT_ID and EAS_OWNER set in your .env (see Environment variables).

npm install -g eas-cli
eas login
eas build --platform android --profile preview

The preview profile produces an installable APK (rather than an AAB). When the build finishes, download the .apk from the build page or the URL the CLI prints.

3. Sideload the APK onto the Quest

With the headset connected and authorised:

adb install -r path/to/app-release.apk

-r reinstalls over an existing version without wiping data. To uninstall first:

adb uninstall com.oliedis.StudioIntrgration

4. Launch the app on the Quest

Sideloaded apps don't appear in your main library by default. Inside the headset, open the App Library, change the source filter from All to Unknown Sources, and you'll find XR Demo there. Launch it like any other app.

Tip: if the app fails to start or immediately crashes, run adb logcat *:E while launching to surface native errors.

Project layout

• app/ - Expo Router screens (index, vr, studio, settings, modal).
• components/ - Shared UI and the settings store.
• app.config.js - Dynamic Expo config; reads RV_API_KEY / RV_PROJECT_ID from the environment.
• assets/images/ - App icon, splash, and adaptive icon assets.