Build a Geospatial AR App in React Native with Claude Code and ViroReact
If you can write a React Native component, you already have most of what you need to build augmented reality. The part that usually stops people is the gap between “I know JavaScript” and “I understand ARKit, ARCore, world tracking, and geospatial pose.” That gap is exactly what this tutorial closes.
We’re going to build a small AR app that drops a GPS-anchored marker where you’re standing, then discovers other anchors nearby and renders them as bouncing spheres floating in the real world. And we’re going to build most of it with a single prompt to Claude Code, using the ViroReact MCP server to keep the AI honest about our APIs.
If you’ve never touched AR, don’t worry. That’s the point.
What we’re building
The app has two screens. An Explore screen is a full-screen AR camera view. Tap a button and it hosts a geospatial anchor at your exact location, saving it to the cloud. Every five seconds the app sweeps for anchors near you and renders any it finds as bouncing ViroSpheres. A Settings screen just shows the app name and version.
Under the hood, three pieces do the work. Expo (expo.dev) gives us the app framework and native tooling. ViroReact (@reactvision/react-viro) is the cross-platform AR/VR renderer: one codebase, native rendering on iOS and Android. ReactVision Platform (studio.reactvision.xyz) provides the geospatial anchor backend that ViroReact talks to. You add an API key and project ID, and hosting, resolution, and proximity search are handled for you.
Geospatial anchors are the interesting part. Instead of pinning content to a surface the camera can see right now, they pin it to real-world latitude, longitude, and altitude. Walk away, come back tomorrow, and the anchor is still there.
Why the MCP server matters
Here’s the honest problem with AI coding agents and specialised libraries: they guess. An agent trained on generic React Native will happily invent a ViroReact prop that doesn’t exist, or call a geospatial method with the wrong signature. You then spend your afternoon debugging the AI’s hallucination instead of shipping.
The ViroReact MCP server (reactvision.xyz/viro-react/mcp-server) fixes this. It’s a Model Context Protocol server that gives your coding agent an always-current, queryable understanding of ViroReact: its components, their props, real event names, and working examples. When Claude Code needs to know how getCameraGeospatialPose, createGeospatialAnchor, or rvFindNearbyGeospatialAnchors actually work, it looks them up instead of guessing.
The result: the agent writes code against the real API surface on the first pass.
Step 1: Start from a fresh Expo app
Scaffold the standard Expo starter, which ships with a simple two-tab interface:
npx create-expo-app@latest geospatial-demoThat gives us the tab navigation and two placeholder screens we’ll reshape into the AR experience.
Step 2: Connect the ViroReact MCP server to Claude Code
Point Claude Code at the ViroReact MCP server so it can query the library as it works. You’ll find the current setup instructions at reactvision.xyz/viro-react/mcp-server. Once it’s connected, the agent can search components, read props, and pull examples on demand.
Step 3: Build the whole experience with one prompt
This is where the workflow earns its keep. Grab a free API key and project ID from ReactVision Studio (studio.reactvision.xyz), then give Claude Code this exact prompt:
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 experience we will use ViroReact’s Geospatial anchors.
Users should be able to place an anchor where they are by tapping a place anchor button that’s in the centre 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 bouncing ViroSpheres.
My ReactVision API key is {insert your key} and my project id is {insert your project id}
As Claude Code works through this, watch what the MCP server does for it. It looks up the real geospatial methods on ViroARSceneNavigator: polling the camera’s geospatial pose, calling createGeospatialAnchor to host a WGS84 anchor, and running rvFindNearbyGeospatialAnchors for the five-second nearby sweep. It wires the ViroSphere markers with the correct props. The status label (“starting”, then “saving to the cloud”, then “placing in AR”, then “ready”) comes straight from the real anchor-creation lifecycle rather than an invented one.
One prompt gets you a working geospatial AR app.
Step 4: Prebuild and run on a real device
Geospatial AR needs a real camera and GPS, so this won’t run in Expo Go or a simulator. You need a physical iOS or Android device.
npx expo prebuild
npm run ios (or npm run android)
Then head 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. Once it’s ready, tap to drop an anchor, walk a few metres, and watch it reappear as a bouncing sphere.
What you just learned
You built real geospatial AR without writing ARKit or ARCore code, without hand-wiring a cloud backend, and without memorising ViroReact’s API. Expo handled the native build, ViroReact and ReactVision Platform handled the AR and the anchors, and Claude Code plus the MCP server turned a plain-English description into working code that used the correct APIs the first time.
That’s the workflow we want every XR developer to have: describe the experience, let the tools handle the complexity, and ship to any device from one codebase.
Try it yourself
Grab your free API key and project ID from ReactVision Studio, connect the ViroReact MCP server to Claude Code, and build your first geospatial anchor today. When you’ve got spheres bouncing in your backyard, tell us how you got on.