React Native Augmented Reality (AR)

Question

I'm investigating a couple of iOS/Android mobile apps for clients at the moment, that involve Augmented Reality:

1. The ability to preview what a piece of their furniture would look like in your home
2. A digital dressing room - preview what the clothes will look like in yourself

We primarily use React Native to build mobile apps (one of the projects would be building the feature into an existing React Native app).

Can anyone share their experience with React Native and AR? Share any links to frameworks/components that may help get started? Or simply lead some discussion around where to start?

Answer 1

It looks like React AR is yet to materialise. But there are already apps that implement certain libraries on top of React.

An example here .

Some JS libraries for AR include JSAruco and JSARToolKit . JSAruco is based on OpenCV and JSARToolkit is a port of ARToolkit via the in-between ports NyARToolkit (Java) and FLARToolkit (Actionscript). Some examples .

React VR is coming soon. Facebook announced alpha release of React VR, which is built on top of React Native, the tweet here .

1. The github page of framework
2. Sample projects and documentation of React VR here

EDIT

Ar.js is a new opensource js toolkit (based on three.js + jsartoolkit5 ) that looks very promising

UPDATE

Apple introduced ARKit with iOS 11 for iPhone and iPad, Here is a react native binding for the same. Find a curated list of awesome ARKit projects and resources here . 5 minutes example app

Resources

• react-native-live-translator - An augmented reality experiment in react native

• arcore-android-sdk - Google ARCore SDK for Android

• three.ar.js - A helper three.js library for building AR web experiences from Google

• ARKit-Sampler - Code examples for ARKit.

• React-AR - Augmented Reality with React (Work in progress)

• Expo AR - IOS only

Answer 2

Another option (shameless plug) is my company's platform, Viro AR: https://viromedia.com/viroar/

It's a React-Native library that pairs ARKit for iOS (ARCore for Android coming soon) with our own proprietary native renderer and wraps it in an easy-to-use React-Native API so that you can start building your AR experiences immediately!

We've even dog-fooded our own product by building an AR app, Figment AR, available right now on the Apple App Store: https://itunes.apple.com/app/id1270018902

We built it using React Native for the 2D UI (buttons, list view, preview screen) and Viro for the camera display, 3D rendering and world tracking.

Check us out!

• Documentation: http://docs.viromedia.com/
• Sample Code: https://github.com/viromedia/viro
• Issues/Support: https://github.com/viromedia/viro/issues & https://viromedia.com/contact-1/

Answer 3

I'm building a React Native library for Apple's newly released AR library ARKit. It should be a good start since ARKit did a good job to package the CV algorithm so you can focus on what you want to implement.

You are welcome to check my GitHub repo ( react-native-arkit ).