ViroReact — React Native AR for iOS, Android, and Meta Quest 3

A pivot in the series. The earlier posts covered browser WebXR (A-Frame, Babylon.js, Immersive Web SDK) and Web-as-native (WebSpatial). ViroReact comes from a different audience entirely: a React Native team that wants AR on the mobile devices in everyone’s pocket — plus, in the same codebase, the Meta Quest 3 headset.

▸ github.com/ReactVision/viro · npm @reactvision/react-viro · MIT · 1.8k★ · maintained by ReactVision

Platforms

The currently-shipping support matrix from the README:

Apple Vision Pro and Android XR are not in the supported list yet — for those targets, the WebSpatial article covers AVP and the Android XR getting-started covers AXR.

ViroReact works with both React Native CLI projects and Expo, with one caveat: it requires native code, so Expo Go can’t host it — use Expo development builds or prebuild.

Quick start — Expo + TypeScript

The official Expo starter kit is the fastest path:

git clone https://github.com/ReactVision/expo-starter-kit-typescript.git
cd expo-starter-kit-typescript
npm install
npx expo prebuild
npx expo run:ios       # or run:android

For a fresh project, add the package directly:

npm install @reactvision/react-viro

The full installation guide (iOS permissions, Android Gradle, dev-build setup) lives in the community docs.

The component surface

A minimal AR scene with plane detection and a draggable 3D model:

import {
  ViroARSceneNavigator,
  ViroARScene,
  ViroARPlane,
  Viro3DObject,
  ViroAmbientLight,
} from '@reactvision/react-viro';

function ARScene() {
  return (
    <ViroARScene>
      <ViroAmbientLight color="#ffffff" intensity={300} />
      <ViroARPlane minHeight={0.1} minWidth={0.1} alignment="Horizontal">
        <Viro3DObject
          source={require('./assets/robot.glb')}
          type="GLB"
          position={[0, 0, 0]}
          scale={[0.2, 0.2, 0.2]}
          dragType="FixedToPlane"
          dragPlane={{ planePoint: [0, 0, 0], planeNormal: [0, 1, 0], maxDistance: 5 }}
        />
      </ViroARPlane>
    </ViroARScene>
  );
}

export default function App() {
  return <ViroARSceneNavigator initialScene={{ scene: ARScene }} />;
}

ViroARSceneNavigator manages scene transitions with push / pop. ViroARPlane auto-anchors to detected horizontal planes. Viro3DObject loads GLB/GLTF/OBJ/FBX models, and the dragType="FixedToPlane" constraint keeps interaction natural.

Feature highlights

All of the following are first-party in the OSS package (no extra plugins):

• Tracking & anchoring — horizontal + vertical plane detection, image and object recognition triggers
• Rendering — PBR lighting, HDR environment maps, real-time shadows, 360° photo/video environments, portals
• Models — OBJ, FBX, GLTF/GLB with embedded animations; custom procedural geometry; custom GPU shaders
• Interaction & motion — built-in physics, particle system, declarative animations, full event set (onClick, onDrag, onPinch, onRotate, onFuse, onHover)
• Audio — spatial audio, 360° sound fields, positioned 3D audio

Cloud features — ReactVision Platform

Cloud Anchors (persistent / shared AR content), Geospatial Anchors (lat/lng/altitude pinning), and AI-powered 3D asset generation are gated behind ReactVision Platform. Add rvApiKey and rvProjectId to the app config and the managed service handles hosting, resolution, and geospatial infrastructure. A free Studio account at studio.reactvision.xyz includes Platform access.

Where it fits in the series

ViroReact is the path when the team already has React Native skills and the demo needs to run on the mobile phones every attendee has, plus optionally the Quest 3 — no new engine layer to learn.

Caveats

• Not Expo Go. Use Expo dev builds or React Native CLI.
• No Vision Pro / Android XR yet in the supported-platform matrix.
• Platform credentials are required for Cloud / Geospatial Anchors (free Studio tier covers it).
• Permissions — iOS requires NSCameraUsageDescription; Android requires CAMERA and (for Cloud / Geospatial Anchors) location. Set these up before the first build.

Useful links

• ViroReact docs · Get-started tutorial
• Expo + TS starter kit · React Native CLI starter kit
• ReactVision Studio · Discord
• Related: WebSpatial (visionOS) · Android XR · A-Frame WebXR
• Hackathon details — eligibility, team formation, AI policy
• Register on Luma

Questions? Reach the team via the Contact page.