29

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?

mcnamee
  • 508
  • 1
  • 5
  • 11

3 Answers3

28

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

Tony Vincent
  • 13,354
  • 7
  • 49
  • 68
  • 1
    unfortunately, ar.js requires WebRTC and that is not supported on iOS or Safari on MacOS. :( – Shane May 22 '17 at 14:42
  • 1
    React VR is not built *on top* of React Native. It was forked from RN and uses the same build system but other than that, they're independent. Think of it as: take React core + toolset from RN and add a three.js-based rendering (so, WebVR, really) on top of that. – Petr Bela Jul 04 '17 at 18:43
9

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!

ACVM
  • 1,497
  • 8
  • 14
  • Hi @ACVM: Does my device need to be compatible with ARCore for your library to work? Cos, when I downloaded the Viromedia app, the AR feature is throwing me the error stating I dont have latest ARCore. So is it only possible to target only specific devices that support ARCore or all android devices? – Abhinav Mar 13 '18 at 07:27
  • 1
    Hi @Abhinav, we currently only support the devices that ARCore and ARKit support. You can find the list of supported ARCore devices here: https://developers.google.com/ar/discover/#supported_devices – ACVM Mar 13 '18 at 17:06
5

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).

qftgtr
  • 59
  • 1
  • 1