react-ar

AR features for React Native, based on ARKit

Usage no npm install needed!

<script type="module">
  import reactAr from 'https://cdn.skypack.dev/react-ar';
</script>

README

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
Custom model with plane detection

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

npm version npm downloads

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.