Build your first AR app
in an afternoon.

The ViroReact Starter Kit is a free, open source Expo and TypeScript project with seven working AR scenes ready to run on your device: plane detection, draggable 3D models, a physics bowling game, custom GLSL shaders, and geospatial anchors. Learn by tweaking real examples.


Up and running in minutes

Clone the repo, install, generate the native projects, and run on a physical device. Six of the seven demos work with zero configuration, straight out of the clone.

git clone https://github.com/ReactVision/expo-starter-kit-typescript.git
cd expo-starter-kit-typescript
yarn install
npx expo prebuild --clean
npx expo run:ios    # or: npx expo run:android
ViroReact requires a development build and cannot run in Expo Go, which is why the prebuild step matters. AR features need a physical iOS or Android device rather than a simulator.

Seven example scenes, ready to run

Each scene is a self-contained lesson in one ViroReact concept, from your first anchored model to physics and custom shaders. Open the source, change a value, rebuild, and see what happens.

Scene 01

Opening Scene

The navigation hub. Clickable 3D text buttons float in front of you, and tapping one pushes the matching demo through ViroARSceneNavigator. Every scene's Back button pops you home again, so it doubles as a working example of multi-scene navigation.

ViroARSceneViroText
Scene 02

Auto Plane Scene

Automatic surface detection. ViroARPlane watches for horizontal planes at least 0.1m square and fires onAnchorFound when it locks on, anchoring a robot GLB model to the surface. Drag the robot and the FixedToPlane drag type keeps it glued to the plane.

ViroARPlaneViro3DObjectViroAmbientLight
Scene 03

Manual Plane Scene

You pick the surface. ViroARPlaneSelector shows every detected plane and waits for a tap; onPlaneSelected then places a dog GLB model exactly where you chose. The pattern to reach for when placement matters more than speed.

ViroARPlaneSelectorViro3DObjectViroAmbientLight
Scene 04

No Plane Scene

AR with no anchoring at all. A lime green ViroBox floats in space, styled with ViroMaterials.createMaterials, and the FixedToWorld drag type lets you move it freely through 3D world coordinates. No plane detection required.

ViroBoxViroMaterials
Scene 05

Physics Demo

A playable AR bowling game. The scene turns on Earth gravity through physicsWorld, the alley and its invisible boundary walls are static ViroBox bodies, and the ball and pins are dynamic bodies with mass, friction, and restitution. Drag the ball with FixedDistance, let go to throw, and a keyed ViroNode remounts the pins for a clean reset.

ViroSphereViroBoxViroNodeViroARPlaneSelector
Scene 06

Shaders Scene

Custom GLSL on real materials. Spheres show rim lighting, a crystal shell, ocean water, and glass, all built with shaderModifiers on ViroMaterials. A time uniform pushed through updateShaderUniform drives the animation, with a ViroSpotLight bringing out the surfaces.

ViroSphereViroMaterialsViroSpotLightViroNode
Scene 07

Geospatial Anchor Scene

AR content anchored to real world GPS coordinates. Host an anchor at your current location, then resolve every anchor within 500m through the ReactVision Geospatial API. This is the only demo that needs API keys (ReactVision and Google Cloud, set in app.json); the other six run with zero configuration.

ViroARSceneViroTextViroNode
The whole project

Browse the full source

Everything lives in one small repo: the scenes, the Expo Router setup, the Metro config that registers GLB and GLTF assets, and the README that documents every demo in depth.

ReactVision/expo-starter-kit-typescript

The components you will learn

The Starter Kit covers the core of the ViroReact API. By the time you have poked through all seven scenes, these are the building blocks you will know how to use.

ViroARSceneNavigator

Mounts AR in the app and manages the scene stack. Every demo navigates with sceneNavigator.push() and returns with pop().

ViroARScene

The root container of every AR scene. The Physics Demo configures gravity on it with physicsWorld={{ gravity: [0, -9.8, 0] }}.

ViroText

3D text with styling, positioning, and onClick support. The whole menu system, plus every Back and Reset button, is built from it.

Viro3DObject

Loads external models. The kit ships robot and dog GLB files and registers .glb and .gltf with Metro so require() just works.

ViroBox and ViroSphere

Built-in primitives. They cover the free floating box, the bowling alley, pins, ball, and the shader demo spheres.

ViroARPlane

Automatic plane detection and anchoring, with minWidth and minHeight thresholds and an onAnchorFound callback.

ViroARPlaneSelector

Shows detected planes and lets the user tap to pick one, reported through onPlaneSelected. Used for the dog model and the bowling alley.

ViroMaterials

The material system: diffuse colours, blend modes, and custom GLSL shaderModifiers, animated at runtime with updateShaderUniform.

ViroAmbientLight and ViroSpotLight

Scene lighting. Ambient light keeps the 3D models visible everywhere; the spotlight gives the shader materials their highlights.

ViroNode

Groups objects into one transform. The Physics Demo keys a ViroNode so Reset remounts the ball and pins without touching the selected plane.

Already have an app?

Add ViroReact to an existing project

Already have a React Native or Expo project? Install the package directly and keep the Starter Kit around as a reference.

$npm install @reactvision/react-viro

Read the docs

Full API reference, guides, and code samples, from basic scenes to Cloud Anchors and particle effects.

Starter Kit FAQ

What is the ViroReact Starter Kit?
A free, MIT licensed Expo and TypeScript project from ReactVision with seven working AR example scenes: a 3D navigation menu, automatic and manual plane detection, free space placement, a physics bowling game, custom GLSL shaders, and geospatial anchors. Clone it from GitHub and run it on your device.
Can I run the Starter Kit in Expo Go?
No. ViroReact includes native code, so it cannot run in Expo Go. Run npx expo prebuild --clean to generate the native projects, then build with npx expo run:ios or npx expo run:android. AR features also need a physical device rather than a simulator.
Do the demos need any API keys?
Six of the seven scenes run with zero configuration. Only the Geospatial Anchor demo needs credentials: a ReactVision API key and project ID plus a Google Cloud API key with the ARCore API enabled, set in app.json. Leave the placeholders untouched and the rest of the app works normally.
Which ViroReact components does the Starter Kit teach?
The scenes use ViroARScene, ViroARSceneNavigator, ViroText, Viro3DObject, ViroBox, ViroSphere, ViroARPlane, ViroARPlaneSelector, ViroMaterials, ViroAmbientLight, ViroSpotLight, and ViroNode, plus all three drag types: FixedToPlane, FixedToWorld, and FixedDistance.
Does the Starter Kit work on both iOS and Android?
Yes. It is a standard Expo project, so the same TypeScript codebase builds for iOS with npx expo run:ios and for Android with npx expo run:android.
Can I use ViroReact in an existing app instead?
Yes. Install @reactvision/react-viro in your React Native or Expo project. The Starter Kit is still worth cloning as a reference for scene structure, plane detection, physics, and shaders.

Clone it and start building

Seven working AR scenes, MIT licensed, in TypeScript. The fastest way to see ViroReact running before you wire it into your own project.

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.