react-ar

React ARKit

AR library for React-Native, based on ARKit. Makes it super easy to use all the augmented reality features of iOS 11.

Check out the example app using react-arkit

iOS Only, until Android comes up with their version of ARKit

Library for create augmented reality applications with JavaScript, using declarative UI components in ReactJS. Allows for any geometric shape, as well as custom 3D models.

Install

Install the package, inside your React-Native app:

$ npm install react-arkit --save

Link the package to the existing app

react-native link react-native-arkit

Make sure that your app allows camera usage. (How?) Make sure that your app supports Swift runtime. (How?)

Or just clone the example app and make edits on it.

Usage

Import the ARScene component, and other node types that you need:

import ARScene, { ARBoxNode, ARTextNode, ARNode } from 'react-arkit';

Define a scene:

<ARScene style={{ height: 400, width: 300 }}>
{`Other AR nodes`}
</ARScene>

Add any node in it and manipulate freely:

<ARScene style={{ height: 400, width: 300 }}
    debugEnabled
    onPlaneDetected={({id, alignment, node, center, extent}) => {
        console.log("Detected plane:", id);
    }}
    onPlaneUpdated={({id, alignment, node, center, extent}) => {
        console.log("Updated plane:", id);
    }}>
    <ARBoxNode
        geoposition={{x: -0.5, y: 0.1, z:-1.0}}
        size={{ height: 0.05,
                width: 0.05,
                length: 0.05,
                chamferRadius: 0.01 }}
        color='#00F'/>
    <ARNode
        modelAssetPath={'Art.scnassets/billboard.dae:Billboard'}
        geoposition={{x: 0, y: 0.1, z:-1.0}}/>
    <ARTextNode
      text={'AR is Awesome'}
        color='#FF0'
        size={{ fontSize: 0.2, depth: 0.2 }}
        geoposition={{x: 0.5, y: 0.1, z:-1.0}}/>
</ARScene>

Refer to the example app for more detailed sample implementations.

Documentation

• ARScene

  Parent object that represents object represents a three-dimensional scene and its contents. (Props: debugEnabled, run)

• ARNode

  A structural element of in the 3D coordinate space, representing a position and transform in based on the parent node\scene. Can also represent custom 3d models as well as basic geometric shapes. (Props: geoposition, size, color, modelAssetPath)

  • ARBoxNode

    Node that has the box geometry. Subclass of ARNode.

  • ARSphereNode

    Node that has the sphere geometry. Subclass of ARNode.

  • ARTextNode

    Node that has the shape of a given text. Subclass of ARNode. (Additional prop: text)

Contributing

Any kind of contributions are very welcome. This library is still very bare-bones and has a lot of room for improvement. Please make sure to read the Contributing Guide and feel free to make pull-requests!

For issues or feedback, please create an Issue. For questions, or help, please get in touch with @icanb.