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:
;
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= { console; } onPlaneUpdated= { console; }> <ARBoxNode geoposition=x: -05 y: 01 z:-10 size= height: 005 width: 005 length: 005 chamferRadius: 001 color='#00F'/> <ARNode modelAssetPath='Art.scnassets/billboard.dae:Billboard' geoposition=x: 0 y: 01 z:-10/> <ARTextNode text='AR is Awesome' color='#FF0' size= fontSize: 02 depth: 02 geoposition=x: 05 y: 01 z:-10/></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.