Apple recently announced there were over 1000 AR apps in the iOS app store. These AR apps were developed by a wide range of developers from big companies like the NBA, Amazon and Ikea, to indie game developers and independent hackers. Developers are flocking to this new computing paradigm to build the next great app.

This guide will help you rapidly build an AR app (or add AR features to your existing app) using React Native and ViroReact. ViroReact support both ARKit and ARCore, so you can write one code base that run across both mobile AR platforms.

Setup

Use our Quick Start guides to get setup with ViroReact in minutes. The Viro platform is free with open source. Check out our Github and start developing AR apps today:

You will also need either an iOS ARKit enabled device or an Android ARCore enabled device.

Your First AR App

Once you complete the ViroReact set up guide and get to “Hello World”, use this tutorial to build a simple AR app that helps you understand basic AR -> How to build an interactive AR app in 5 mins

Add More Features to your App

Use the following tutorials and sample code to add various features to your AR app:

How to build AR Portals in 5 mins — This tutorial is a step by step guide for developing AR Portals. Our goal by the end of this tutorial is to:

Add a portal with a 360 image to our scene Add a portal with a 360 video to our scene

AR Portals

Add Snapchat-like AR Lenses to any app — This tutorial is a step by step guide for adding AR features like animated characters and effects into any app. Our goal by the end of this tutorial is to:

Add an animated 3D character (Ice Cream Man) to the scene Add a shadow to the character to give it depth and realism Add a particle effect to the scene Add a filter to the scene

Snapchat AR Lens

How to use Particles to enhance any AR app — This tutorial is a step by step guide for using particles to enhance an AR application. Our goal by the end of this tutorial is to:

Add a flame to a candle on a birthday cake Add smoke effects to an emoji Create a fireball emoji

Smoke Effect w/ Particles

Add 2D Controls to your AR app with React Native — Sample code that shows how to create 2D UI for controls/buttons that are “on the glass” rather than “in the scene”.

Start Building Your Own AR App

By this point, you should be comfortable with the basics of AR app development. You can start building your own AR app by expanding upon what you created so far. Refer to our ViroReact Documentation to learn more about AR app development and other features like Videos, Images, Sounds, Physics and more. Look forward to seeing the great AR apps you build with Viro.