Build AR apps with
React Native and Expo.

How to build an AR app with React Native

Four steps from empty project to AR running on a phone, using ViroReact, the open-source AR library for React Native.

import React, { useState } from 'react';
import {
  ViroARScene,
  ViroARSceneNavigator,
  ViroText,
  ViroTrackingStateConstants,
} from '@reactvision/react-viro';

function HelloArScene() {
  const [text, setText] = useState('Initializing AR...');
  return (
    <ViroARScene
      onTrackingUpdated={(state) => {
        if (state === ViroTrackingStateConstants.TRACKING_NORMAL) {
          setText('Hello, React Native AR!');
        }
      }}
    >
      <ViroText
        text={text}
        scale={[0.5, 0.5, 0.5]}
        position={[0, 0, -1]}
      />
    </ViroARScene>
  );
}

export default function App() {
  return (
    <ViroARSceneNavigator
      autofocus
      initialScene={{ scene: HelloArScene }}
    />
  );
}

AR in React Native, on the stack you already use

ViroReact is a first-class React Native library. There is no new engine to learn, no new language to adopt.

Prefer no code? Design AR scenes in your browser

ReactVision Studio is the visual editor for the same renderer. Design a scene in your browser, publish it, and drop it into your app with the StudioSceneNavigator component. Connected apps pick up scene updates without a redeploy.

React Native AR vs Unity vs WebAR

Where ReactVision sits against a browser-based runtime and a full game engine, line by line.

Common questions about React Native AR

Support