A small, focused example app that shows the ReactVision Geospatial API in action. Walk outside, tap a button to drop a GPS-anchored marker where you're standing, and watch nearby anchors appear in augmented reality as bouncing spheres.
It's intentionally minimal. The goal is to demonstrate one thing well: placing and discovering geospatial anchors with ViroReact.
- Explore (AR) screen, a full-screen AR camera view powered by ViroReact.
- Place Anchor button, centred at the bottom of the screen, hosts a geospatial anchor at your current location.
- A status label reports anchor-creation progress, from starting to saving to the cloud to placing in AR to anchor created and ready.
- Every 5 seconds the app searches for hosted anchors near you and renders any it finds.
- Anchors are drawn as bouncing
ViroSpheres.
- Settings screen, which shows the app name and version number.
- Expo (SDK 57, expo-router, New Architecture), the app framework and native tooling.
- ViroReact (
@reactvision/react-viro), cross-platform AR/VR for React Native, including the Geospatial Anchor API powered by the ReactVision Platform. - ViroReact MCP server, a Model Context Protocol server that gives AI coding agents an always-current understanding of ViroReact's components, props, and examples.
📖 Full walkthrough: Build a Geospatial AR App in React Native with Claude Code and ViroReact
This project started as the standard fresh Expo app you get from npx create-expo-app@latest {app name}, which gives you a simple two-tab interface. From there, using Claude Code with the ViroReact MCP server, the following single prompt was used to reconfigure the app layout and screens and then create the geospatial experience. The MCP server let the agent look up the exact ViroReact geospatial APIs and component props as it worked, rather than guessing.
Here is the exact prompt used, so you can try it yourself:
Remove the home screen from the tab bar.
Add a new Settings screen which shows the name of the app, and its version number.
Change the explore screen in this app to be an AR experience.
For this exerpeine we will use ViroReacts Geospatial anchors.
Users should be able to place an anchor where they are - by tapping a place anchor button
that's in the cetnre of the bottom of the screen, and the app should also toggle every 5
seconds to find anchors near the user, rendering them in the AR view when they are nearby.
When a user is creating an anchor, be sure to show them a label on screen indicating how
anchor creation is progressing from starting to anchor created and ready.
Anchors should be represented within the view using bounching ViroSpheres.
My ReactVision API key is {insert your key}
and my project id is {insert your project id}
After prompting, the only manual steps were a native prebuild and running the app on a device.
Geospatial AR needs a real camera and GPS, so run this on a physical iOS or Android device. It will not work in Expo Go or a simulator.
-
Install dependencies
npm install
-
Add your ReactVision credentials. Get an API key and project id for free from ReactVision Studio, then open
app.jsonand replace the placeholders in the@reactvision/react-viroplugin config:[ "@reactvision/react-viro", { "provider": "reactvision", "rvApiKey": "REPLACE_WITH_YOUR_REACTVISION_API_KEY", "rvProjectId": "REPLACE_WITH_YOUR_REACTVISION_PROJECT_ID", ... } ]
The plugin injects these into the native build at prebuild time.
-
Prebuild the native projects
npx expo prebuild
-
Run on a connected device
npm run ios # or: npm run androidHead outside with a clear view of your surroundings so Earth tracking can lock on (the Place Anchor button stays disabled and shows "Locating you..." until it does).
src/app/explore.tsx, the AR scene: geospatial pose polling, placing anchors, the 5-second nearby sweep, and the bouncing spheres.src/app/settings.tsx, the Settings screen.src/components/app-tabs.tsx, the tab bar (Explore and Settings).app.json, Expo config and the ReactVision plugin setup.