React Native + Expo AR

Build native AR apps
with React Native and Expo.

ViroReact is the open-source library for building production AR apps with React Native and Expo. Full ARKit and ARCore access, declarative components, TypeScript-first. No Unity, no C#, no new engine to learn.

$npm install @reactvision/react-viro
npm versiondownloadsDiscord

Why ViroReact for React Native AR

Most AR engines hand you a renderer and leave the rest to figure out. ViroReact is built around the React Native model you already know, so the learning curve is shorter and the code stays clean.

TypeScript-first, declarative

Build AR scenes with JSX components and typed props. The same React Native patterns you use for screens, just rendered in 3D space.

True native rendering

ViroReact compiles to native ARKit on iOS and ARCore on Android, not a browser canvas. Hardware-speed performance, device features intact.

Full Expo support

ViroReact works inside an Expo project via a development build. Bring your existing Expo workflow and ship AR alongside it.

Built-in physics & particles

Dynamic and static physics bodies, collision callbacks, and a particle system for fire, smoke, rain, snow, and confetti, no plugins required.

PBR lighting & shadows

Physically-based materials, HDR environment maps, and real-time shadow casting bring 3D content to life on device.

MIT licensed, free forever

No paywalls, no feature tiers, no runtime fees, no per-seat charges. The full source is on GitHub: fork it, extend it, contribute back.

Mobile AR features, built in

Everything you need to ship a production AR experience, tracking, anchoring, interaction, audio, and rendering, lives inside a single library.

Plane & surface detection

Horizontal and vertical plane detection with surface anchors, so content snaps to the real world.

ViroARPlaneViroARPlaneSelector

Image & object triggers

Detect printed images, posters, packaging, and physical objects, then attach scene content to them.

ViroARImageMarkerViroARObjectMarker

3D model loading

Load OBJ, FBX, and GLTF/GLB models with embedded animations, or build custom procedural geometry.

Viro3DObjectViroGeometry

Full gesture input

Tap, drag, pinch, rotate, fuse, and hover events on every node, using the familiar React Native event pattern.

onClickonPinchonDrag

Spatial 3D audio

Positional 3D audio with distance attenuation, 360-degree sound fields, and ambient mixing.

ViroSpatialSoundViroSoundField

Custom shaders on device

Run custom vertex and fragment shaders directly on the device GPU for bespoke visual effects.

ViroMaterialsshader

ViroReact MCP server

Plug ViroReact into the AI coding agent your team already uses. The MCP server gives any agent full context of the renderer, components, prop schemas, events, and valid scene patterns, so it writes ViroReact code that runs first time.

MCPCursorClaude Code
MCP Server Docs

Additional capabilities

  • HDR environment maps and real-time shadows
  • Declarative animation sequencing and chaining
  • 360-degree photo and video environments
  • Portal rendering for pass-through experiences
  • Particle systems for fire, smoke, snow, confetti
  • Built-in physics with collision callbacks
Development build required. ViroReact uses native AR APIs, so it cannot run inside Expo Go. Use an Expo development build (or a bare React Native project) and a physical device, simulators do not support ARKit or ARCore.

Looks like React Native, because it is

A scene is a component. A 3D object is a component. Anchors, lights, and materials are all props.

Scene.tsx
import { ViroARScene, ViroARPlane, Viro3DObject } from '@reactvision/react-viro';

export function Scene() {
  return (
    <ViroARScene>
      {/* Snap content to the first detected horizontal surface */}
      <ViroARPlane minHeight={0.3} minWidth={0.3} alignment={"Horizontal"}>
        <Viro3DObject
          source={require('./assets/model.glb')}
          position={[0, 0, 0]}
          scale={[0.2, 0.2, 0.2]}
          type="GLB"
          onClick={() => console.log('tapped')}
        />
      </ViroARPlane>
    </ViroARScene>
  );
}

ViroReact vs Unity AR Foundation vs Niantic Lightship

If you have a React Native team shipping a mobile app, ViroReact fits the stack you already use, no new engine and no new language.

ViroReactUnity AR FoundationNiantic Lightship
LanguageTypeScript, React NativeC#, Unity EngineC#, Unity Engine
Open sourceMIT licensedProprietaryProprietary
CostFree foreverFree to $200K rev, then from $2,200/seat/yrFees above 50K MAU
React Native integrationFirst-classComplex native bridgesComplex native bridges
Expo supportFullNot compatibleNot compatible
Cloud + Geospatial AnchorsBuilt in via PlatformSelf-managed Google CloudProprietary hosted
Team ramp-upMinutes, with existing RN skillsMonths, new engine + languageMonths, new engine + language

Code your AI assistant already understands

ViroReact is built on React Native, one of the best-understood stacks in the world for both human developers and AI coding agents. Declarative JSX, typed props, familiar patterns, and a dedicated MCP server so your agent writes spatial code that runs first time.

Familiar to every RN developer

Components, props, hooks, refs. Your existing CI, linting, and testing all just work.

Easy for AI agents to reason about

Clean, readable JSX with typed props means tools like Cursor, Claude Code, and Copilot reason about your AR scene like any other React component.

Full context via the MCP server

The ViroReact MCP server hands your agent the renderer's components, prop schemas, event handlers, and working examples, so generated AR code compiles and runs on the first pass.

Need Cloud Anchors, Geospatial AR, or 3D assets?

ViroReact is the renderer. For the parts that need infrastructure, ReactVision Studio plugs straight in. Add an rvApiKey and rvProjectId, and the platform handles the rest.

Cloud Anchors

Persistent, multi-user shared AR content, powered by the ReactVision Platform.

Geospatial Anchors

Anchor AR content to real-world latitude, longitude, and altitude.

AI 3D asset creation

Generate 3D models from text or image prompts inside ReactVision Studio.

Start building

The fastest way in is the official Expo + TypeScript starter kit. Install the package, pair it with the starter kit, and have a working AR scene running on your phone today.

Starter Kit (Expo + TypeScript)

A working Expo project with AR demos ready to run on device.

Getting started guide

Full API documentation, examples, and code snippets.

Support

Community

Have a quick question or need feedback? Jump into our Discord for real-time chat, or post on r/ReactVision to get answers, code samples, and tips from thousands of fellow builders.

ReactVision Partners

Need deeper help? Engage a trusted ViroReact Partner. Certified agencies and consultants can architect, build, or optimise your XR app, run performance audits, and guide store launches so you ship faster with confidence.