How to build an augmented reality (AR) app with Expo and ReactVision

Augmented Reality (AR) technology continues to evolve rapidly, revolutionising how we interact with our surroundings through mobile apps. From gaming experiences to healthcare applications, interior design to real estate, and now, with the advent of spatial computing, the possibilities are endless.

As a mobile app developer, you will undoubtedly encounter AR. While Expo (React Native) is renowned for its ability to create stunning apps with a single codebase, options for integrating AR have been somewhat limited.

This is where ReactVision comes to the scene! Formerly known as NativeVision and ViroCommunity before that, ReactVision is a user-friendly yet powerful library for React Native to create Augmented Reality experiences (and VR for Android), running an in-house rendering engine created with performance in mind.

In this post, Eduardo guides you through building an augmented reality app with Expo and React Vision.

‍

Looking for help with your AR app? Book a call today to discuss your options.

‍

Getting Started

‍

Thanks to Morrow's Expo plugin, Getting ReactVision up and running in your Expo is a breeze, so you won't have to worry about linking!

To install ReactVision, run:

npx expo install @reactvision/react-viro

Current version is 2.41.6

Next, register the plugin in your app.json file by adding "@reactvision/react-viro" to your plugins array. ReactVision takes care of permissions (like Camera), no additional code is needed to get started.

‍

Partner with Morrow to transform your Expo app into a high-performing, secure, and user-friendly solution. Fill out our Expo audit form and take the first step towards app excellence.

‍

Creating an AR View

‍

There are two main concepts used in ReactVision: Scene Navigation and Scenes. Scene Navigation components handle transitions between Scene objects, akin to a navigation stack, while Scenes represent the 3D equivalent of Views, housing all the content rendered in AR, including UI controls and 3D objects. Objects within scenes are positioned in a 3D coordinate system using meters as units.

We start by importing our components from @reactvision/react-viro this way:

Let's illustrate this by displaying Morrow's logo in an AR View, 1 meter in front of my eyes as a square of 0.5 meters each side:

In the onARInitialized function, which is triggered upon AR scene initialising, you can retrieve the tracking status and react accordingly. This step ensures that 3D elements are anchored appropriately within the AR environment.

In order to see our AR view on screen, we must pass it to a ViroARSceneNavigator and export it. Let’s define it with the following code:

With the Morrow logo now displayed in AR, consider this just a glimpse of what you can achieve.

With ReactVision, the possibilities for creating immersive AR experiences are limited only by your imagination. Whether you're envisioning interactive games, educational tools, or innovative marketing campaigns, ReactVision empowers you to bring your ideas to life.

The ReactVision team, in collaboration with Morrow, is committed to continually enhancing the library's features. For support, feedback, and to stay updated on the latest developments, join the Discord community and explore the project's roadmap on GitHub.

Please note: ReactVision is not yet compatible with React Native 0.74 and Expo 51, but it will be soon!

Find ReactVision on Github, Roadmap and Discord.

‍