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:

``bash
$ npm install react-arkit --save
`

Link the package to the existing app

`bash
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:

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

Define a scene:

`javascript

{Other AR nodes}

`

Add any node in it and manipulate freely:

`javascript
debugEnabled
onPlaneDetected={({id, alignment, node, center, extent}) => {
console.log("Detected plane:", id);
}}
onPlaneUpdated={({id, alignment, node, center, extent}) => {
console.log("Updated plane:", id);
}}>
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'/>
modelAssetPath={'Art.scnassets/billboard.dae:Billboard'}
geoposition={{x: 0, y: 0.1, z:-1.0}}/>
text={'AR is Awesome'}
color='#FF0'
size={{ fontSize: 0.2, depth: 0.2 }}
geoposition={{x: 0.5, y: 0.1, z:-1.0}}/>

`

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.