Web Setup Guide

ViroReact runs in the browser through react-native-web and a WebAssembly build of the same C++ renderer, shipped as the optional peer @reactvision/viro-web-renderer.

Available in ViroReact 3.0.0 and later. For ViroReact 3.0.2, use @reactvision/viro-web-renderer 1.0.1+ (the peer range asks for it) — heap growth, tap fixes, and pose hold live in that renderer build. Use ViroReact 3.0.3+ to bundle with Vite or webpack (3.0.2's dist/ shipped raw JSX).

Requirements

Camera, 6-DoF pose, plane detection, and hit test come from ReactVision's visual-inertial tracker bundled with the web renderer — no ARCore/ARKit in the browser.

Install

npm install @reactvision/react-viro @reactvision/viro-web-renderer@^1.0.1 react-native-web

Use the same scene components you already know (ViroScene, ViroBox, …). Wire your bundler for react-native-web as you would for any React Native Web app; the Viro package resolves web stubs for native-only modules.

Bundlers: Vite and webpack (3.0.3+)

From 3.0.3 the published package bundles directly with Vite and webpack. You don't need to transpile node_modules.

• dist/ is compiled with the automatic JSX runtime ("jsx": "react-jsx"). 3.0.2 left raw JSX in 105 of 242 dist/ files, which Vite and webpack do not transform, so 3.0.2 could not be bundled for the web.
• Asset sources resolve on the web without React Native's AssetSourceResolver, which react-native-web lacks. Sources pass through as the web components take them, so calls like ViroARTrackingTargets.createTargets no longer throw on the first asset.
• Keep your usual react-native-web setup (alias react-native → react-native-web).

What works / what does not

• Works: 3D scenes, AR tracking (pose / planes / hit test), most geometry and materials, Studio scenes via StudioSceneNavigator (web).
• Does not: Co-location / VPS cloud anchors (a browser cannot align with a device's scan — FRAME_KIND_UNSUPPORTED), AR session recording, Quest/visionOS-only input (e.g. onGaze).

Native-only components without a .web implementation stub out safely rather than crashing the import barrel (fixed in 2.58.x).

Web AR options (3.0.2+)

Pass capture/tuning options through arOptions on ViroARSceneNavigator / StudioSceneNavigator (web):

Denied motion permission (or no motion events) is reported via onMotionUnavailable on both navigators, with an on-screen message.

Reliability (3.0.2+)

• Renderer heap grows up to 2 GB (was fixed at 256 MB); glTF loads no longer copy the model — large (~30–40 MB) models no longer black out the scene.
• StudioSceneNavigator (web): onAssetError(asset, error), onRendererAbort, and renderError so failures reach your UI; Studio scenes mount once (no double fetch/parse).
• Taps are no longer mirrored vertically; transparent image borders no longer hide content behind them.

Related

• Overview
• StudioSceneNavigator
• visionOS Setup Guide
• HorizonOS Setup Guide