Activeer focusmodus
Deactiveer focusmodus

Augmented Reality & React Native

Rody Molenaar
Development intern
November 5, 2018

It all started with Google Glass’ and Oculus Rift’s announcements in 2012. Microsoft’s HoloLens’ in 2016, Apple’s ARKit in 2017 and Google’s ARCore following in 2018. The starting rise of virtual, mixed and augmented reality.

What is Augmented Reality really?

There’s a difference between seeing a complete virtual world and seeing virtual objects in your surroundings. Positioning objects in 3D space in the user’s view is simply called Augmented Reality, because you are “augmenting” their view of the world.

In Augmented Reality the objects are able to stay in place while you move around via world tracking, giving you a sense of realism.

The best known example of Augmented Reality on a smartphone could be Pokemon GO’s camera (AR) mode.

Pokemon GO’s camera mode

Another great example is an AR concept created by Google Maps, allowing a user to orient themselves within their surroundings easily.

Augmented Reality offers a lot of possibilities and we, Lightbase, as an app & web agency like to be able to jump in on this upcoming technology.

React Native

Released in 2013 and Android support being added in 2015, React Native is arguably the next big thing in Mobile Development.

From our inception little over a year ago we’ve used React Native extensively within our projects. Allowing us to build apps faster while at the same time supporting both Android and iOS devices.

I was tasked with finding out how we might use React Native to build cross-platform Augmented Reality experiences.

Existing options

I first started looking into existing options for AR with React Native. The native wrappers that exist lack proper documentation, are pretty new, and — in one case — very experimental.

Other options

Another option I looked into was creating an ARCore library using Sceneform under the hood with the same API as react-native-arkit. For which I needed Java & Sceneform knowledge, which I didn’t have yet.

So let’s get to it.

After a day of self-education I was able to place cars in the office and annoy my colleagues by constantly pointing my camera at them.

But being time constrained and with my little self-taught Java knowledge I didn’t consider it worthwhile to try and develop a complete native wrapper for ARCore.

Where ViroReact comes in

Continuing my search for a cross-platform solution I stumbled upon this funny looking cross-platform library called ViroReact from ViroMedia. It uses a custom renderer leveraging both ARCore and ARKit, allowing me to create a truly cross-platform AR experience.

Car model rendered by ViroReact

I was able to create a similar car placement within a few minutes after setting up a project through react-viro-cli.

ViroReact uses JSX to describe the scene, which makes creating AR or even VR (that’s supported too) experiences extremely easy.

Wanting to explore ViroReact’s capabilities I decided on creating an app similar to the Google Maps’ AR demo I showed you earlier.

Points of Interest prototype

The idea is to be able to look around in your environment and see these big blue posters announcing landmarks around you.

Since we’re based in close proximity to Utrecht’s central station I decided to use some landmarks in various distances surrounding it.

A dissection of the prototype I built


Pitfalls for me for this particular prototype where:

In conclusion

ViroReact is a well-documented and supported library for creating your AR or VR experiences with React Native, although it isn’t recommended to create very graphic apps and games with it.

ViroReact requires an API key to get started, but it’s free and there are no limits on distributing your AR or VR apps.

For more information on ViroReact and Augmented Reality I recommend watching these talks by Vladimir Novick and Pulkit Kakkar.

Share on Twitter