A screenshot of an app codebase, written using React Native and ViroReact

ViroReact, Open-Source AR & VR for React Native and Expo

ViroReact is the most widely used open-source library for building augmented and virtual reality apps with React Native and Expo. Your existing TypeScript skills, your existing toolchain, just point them at 3D space. No new engine, no new languages, no steep learning curve.

Get Started with ViroReact View on GitHub

Documentation

Discord

ViroReact Starter Kit

Meet ViroReact

ViroReact is the most-used XR framework in the React Native ecosystem. Unlike WebXR solutions that render into a browser canvas, ViroReact converts your React Native code into true native draw calls - giving you access to ARKit on iOS and ARCore on Android at full hardware speed, with device-specific features intact. That native rendering layer also unlocks additional capabilities including: custom shaders that run directly on the device GPU, real-time PBR lighting, and hardware-accelerated physics. Write once, ship natively to iOS, Android, and beyond.

Supported Platforms

Platform	Status
🍎 iOS (ARKit)	✅ Supported
🤖 Android (ARCore)	✅ Supported
🥽 visionOS	⏳ Internal Preview
◼ Meta HorizonOS	Coming Soon
🤖 Android XR	Coming Soon

Up and Running in Minutes

The ViroReact Starter Kit is an Expo + TypeScript project with working AR demos ready to run on your device. It covers the core concepts - scenes, 3D objects, user interaction, plane detection, shaders - so you can learn by tweaking real examples rather than starting from a blank file.

Official ViroReact Starter Kit

Free and Open-Source (MIT)

ViroReact is licensed under the MIT License. There are no paywalls, no feature tiers, no runtime fees, and no strings attached. The full source is on GitHub — fork it, extend it, or contribute back. A community of developers collaborates with the ReactVision team to keep things stable and moving forward.

View on GitHub

The Stack You Love, Made Spatial

ViroReact is a React Native library, which means your existing mobile team can build AR experiences without switching tools, learning a new language, or hiring specialists. Everything - state management, navigation, CI, TypeScript types - works exactly as it does in the rest of your app.

🆕

New in v2.53.0 - Powered by the ReactVision Platform

Cloud Anchors and Geospatial Anchors now connect to the ReactVision platform by default. Simply use an rvApiKey and rvProjectId from your ReactVision account and the platform handles anchor hosting, resolution, and geospatial infrastructure for you. This is the same backend that powers ReactVision Studio, and it makes persistent and location-based AR significantly easier to set up and scale. ARCore remains available as an explicit option for teams who prefer.

Create a Studio Account Cloud Anchors Docs Geospatial Anchors Docs

What You Can Build

ViroReact gives you a production-grade 3D rendering engine through standard React Native components. Here's what ships out of the box - no third-party plugins, no paid add-ons.

🌎

AR Plane Detection & Anchors

Detect real-world horizontal and vertical surfaces via ARKit (iOS) and ARCore (Android). ViroARPlaneSelector lets users tap to place 3D content precisely on detected surfaces. Cloud Anchors take this further - anchor content persistently so it survives app restarts and can be shared between multiple users in the same physical space.

Tracking and Anchors docs →

📷

Image & Object Recognition

Trigger AR experiences when the camera sees a specific image; product packaging, posters, business cards. Register targets with ViroARTrackingTargets, then attach any scene content to a ViroARImageMarker. For physical 3D objects, ViroARObjectMarker anchors content directly to recognised real-world items.

Image Recognition docs →

⚛️

Physics Engine

Add a physicsBody prop to any scene object to bring it into the physics simulation. Dynamic bodies respond to gravity, forces, and impulses. Static bodies act as immovable surfaces. Collision callbacks fire on impact, letting you drive animations, sounds, or game logic directly from your React Native component state.

Physics docs →

✨

Particle System

Create fire, smoke, rain, snow, confetti, and other effects using configurable quad-based particle emitters. Control spawn rate, lifetime, volume shape, velocity, and opacity over a particle's life - all through React Native props. Multiple emitters can be layered: a campfire scene might combine separate flame, ember, and smoke emitters to build a convincing effect.

Particle Effects docs →

💡

PBR Lighting & Materials

Physically-based rendering (PBR) and HDR lighting bring 3D content to life with accurate reflections and realistic shading. Directional, omni (point), and spot lights all support real-time shadow casting. ViroLightingEnvironment uses a 360° HDR image as an environment light map so objects reflect their real surroundings.

Lighting & Materials docs →

🎬

Animation System

Declare named animations with ViroAnimations and run them on any object via ViroAnimatedComponent. Animate position, rotation, scale, opacity, and material properties. Animations can be sequenced and chained - run A, then B, then loop C - letting you build complex choreographed experiences without stepping outside the React Native component model.

Animation docs →

🔊

Spatial Audio

Three audio modes cover every use case: background stereo via ViroSound, positioned 3D audio via ViroSpatialSound (with distance-based attenuation), and ambisonic 360° sound fields via ViroSoundField. Parent a spatial sound to an animated object and it moves through the scene with it.

Sound docs →

🚪

Portals

ViroPortal punches a hole in the real world and renders a fully immersive 3D environment on the other side. The portal can be any 3D mesh — a doorframe, an archway, a tear in space. It works well for virtual showrooms, brand experiences, and games where users step into another world without leaving your React Native app.

Portals docs →

📺

360° Media & Video

Wrap users in 360° photo or video environments using Viro360Image and Viro360Video as full scene skyboxes. Play standard video on any surface with ViroVideo, or use ViroMaterialVideo to project a live video feed as a material texture on a 3D object. Animated images support sprite sheets and looping GIF-style content in-scene.

Video docs →

🧱

3D Objects & Custom Geometry

Load OBJ, FBX, and GLTF/GLB models with Viro3DObject, including embedded animations and materials. Primitive shapes - box, sphere, polygon, polyline - cover simpler cases. ViroGeometry handles fully custom procedural meshes defined by vertex arrays, normals, and UVs. All objects participate in the same lighting, physics, and animation systems.

3D Objects docs →

🖱️

Input Events & Interaction

Handle tap, drag, pinch, rotate, fuse (gaze-dwell), hover, and click events on any 3D object using the same event handler pattern as the rest of React Native. AR hit testing maps a screen touch to a 3D world position for intuitive object placement. ViroDragPlane constrains dragging to a specific plane or axis.

Input Events docs →

🗺️

Cloud Anchors & Geospatial AR

Cloud Anchors and Geospatial AR are powered by the ReactVision platform and handles anchor hosting, resolution, and geospatial infrastructure for you. Cloud Anchors let multiple users share persistent AR content at the same physical location, surviving app restarts. The Geospatial API anchors 3D content to precise real-world coordinates (latitude, longitude, and altitude) using GPS and Visual Positioning System (VPS). ARCore anchors are also supported.

Clound Anchors docs →

Geospatial Anchors docs →

🏢

Enterprise Support

If your team needs hands-on help, whether that's architecting a new AR feature, migrating from another provider like 8th Wall or Unity, integrating ViroReact into an existing app, or getting a production experience shipped, the ReactVision team is available. We work directly with organisations adopting XR at scale.

Get in Touch

Familiar APIs, Spatial Results

ViroReact is built on React Native, which means whether you're writing code yourself or working with an AI coding agent, you're working in one of the best-understood tech stacks in the world. Declarative JSX, typed props, familiar component patterns - the kind of clean, readable code that's easy to reason about, easy to review, and easy for an agent to get right first time. The example below puts plane detection, image recognition, physics, and particle effects in a single TSX file. No engine-specific scripting, no unfamiliar paradigms - just components.

ARProductViewer.tsx

import {

ViroARScene, ViroARSceneNavigator,

ViroAmbientLight, ViroSpotLight,

Viro3DObject, ViroARPlaneSelector,

ViroARImageMarker, ViroARTrackingTargets,

ViroParticleEmitter,

} from '@reactvision/react-viro' ;

// Register an image target — point the camera at your product packaging

ViroARTrackingTargets .createTargets({

packaging: {

source: require ( './assets/product-box.png' ),

physicalWidth: 0.15 , // real-world width in metres

});

const ARScene = () => (

< ViroARScene physicsWorld ={{ gravity : [ 0 , -9.8 , 0 ] }}>

{/* Ambient light makes 3D objects visible */}

< ViroAmbientLight color = "#ffffff" intensity ={ 200 } />

{/* Detect a flat surface; user taps to place a 3D model on it */}

< ViroARPlaneSelector >

< ViroSpotLight position ={[ 0 , 3 , 0 ]} castsShadow ={ true } />

< Viro3DObject

source ={ require ( './assets/chair.glb' )}

type = "GLB"

position ={[ 0 , 0 , 0 ]}

animation ={{ name : "spin" , run : true , loop : true }}

physicsBody ={{ type : 'Dynamic' , mass : 1 }}

onDrag ={handleDrag}

</ ViroARPlaneSelector >

{/* Activate a particle effect when the camera sees the product box */}

< ViroARImageMarker target = "packaging" >

< ViroParticleEmitter

position ={[ 0 , 0.5 , 0 ]}

run ={ true }

image ={{ source : require ( './assets/sparkle.png' ), height : 0.1 , width : 0.1 }}

</ ViroARImageMarker >

</ ViroARScene >

);

export default () => (

< ViroARSceneNavigator initialScene ={{ scene : ARScene }} />

);

How ViroReact Compares

Unity AR Foundation and Niantic Lightship are solid choices if you have a C# game development team and are comfortable managing cloud infrastructure. If you have a React Native team shipping a mobile app, ViroReact is a much better fit - and the ReactVision platform means you get managed Cloud Anchor and Geospatial infrastructure out of the box, for free.

Feature	ViroReact	Unity AR Foundation	Niantic Lightship
Language	TypeScript / React Native	C# (Unity Engine)	C# (Unity Engine)
Open Source	✓ MIT License	Proprietary engine	Proprietary SDK
Cost	Free forever (MIT)	Free up to $200K revenue, then from $2,200/seat/yr	Free core SDK, fees above 50K monthly active users
React Native integration	✓ First-class	Requires complex native bridge	Requires complex native bridge
Expo support	✓ Full support	Not compatible	Not compatible
Native AR rendering	✓ ARKit + ARCore	✓ Via AR Foundation	✓ ARKit + ARCore
Plane detection	✓ Built-in	✓ Via AR Foundation	✓ Built-in
Image recognition	✓ Built-in	✓ Via AR Foundation	✓ Via AR Foundation
Physics engine	✓ Built-in	✓ PhysX	⚠ Via Unity only
Particle system	✓ Built-in	✓ Unity VFX Graph	⚠ Via Unity only
Cloud Anchors	✓ ReactVision platform (default)	✓ Via ARCore / Google Cloud	✓ Lightship VPS
Geospatial AR	✓ ReactVision platform (default)	⚠ Via ARCore / Google Cloud	✓ Lightship VPS
Managed backend infrastructure	✓ ReactVision platform	Self-managed (Google Cloud)	Niantic hosted (proprietary)
Scene semantics	✓ Built-in (12 labels)	⚠ Limited	✓ Semantics + object detection (200+ classes)
Team ramp-up time	Days (existing RN skills)	Months (new engine + language)	Months (new engine + language)

Get Started

Add ViroReact to an existing project, or spin up a fresh one with the Starter Kit.

📦

Install the package

Drop ViroReact into any existing React Native or Expo project.

npm install @reactvision/react-viro

⚡️

Start with the Starter Kit

Prefer a clean slate? The Starter Kit is an Expo + TypeScript template with working AR demos ready to run.