Note: ARKit is only supported by devices with A9 or later processors (iPhone 6s/7/SE, iPad 2017/Pro) on iOS 11 beta. You also need Xcode 9 beta to build the project.
Getting started
$ npm install react-native-arkit --save
Mostly automatic installation
$ react-native link react-native-arkit
Manual installation
iOS
In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
Go to node_modules ➜ react-native-arkit and add RCTARKit.xcodeproj
In XCode, in the project navigator, select your project. Add libRCTARKit.a to your project's Build Phases ➜ Link Binary With Libraries
Run your project (Cmd+R)<
Usage
A simple sample React Native ARKit App
// index.ios.jsimportReact,{Component}from'react';import{AppRegistry,View}from'react-native';import{ARKit}from'react-native-arkit';exportdefaultclassReactNativeARKitextendsComponent{render(){return(<Viewstyle={{flex: 1}}><ARKitstyle={{flex: 1}}debugplaneDetectionlightEstimationonPlaneDetected={console.log}// event listener for plane detectiononPlaneUpdate={console.log}// event listener for plane update><ARKit.Boxpos={{x: 0,y: 0,z: 0}}shape={{width: 0.1,height: 0.1,length: 0.1,chamfer: 0.01}}/><ARKit.Spherepos={{x: 0.2,y: 0,z: 0}}shape={{radius: 0.05}}/><ARKit.Cylinderpos={{x: 0.4,y: 0,z: 0}}shape={{radius: 0.05,height: 0.1}}/><ARKit.Conepos={{x: 0,y: 0.2,z: 0}}shape={{topR: 0,bottomR: 0.05,height: 0.1}}/><ARKit.Pyramidpos={{x: 0.2,y: 0.15,z: 0}}shape={{width: 0.1,height: 0.1,length: 0.1}}/><ARKit.Tubepos={{x: 0.4,y: 0.2,z: 0}}shape={{innerR: 0.03,outerR: 0.05,height: 0.1}}/><ARKit.Toruspos={{x: 0,y: 0.4,z: 0}}shape={{ringR: 0.06,pipeR: 0.02}}/><ARKit.Capsulepos={{x: 0.2,y: 0.4,z: 0}}shape={{capR: 0.02,height: 0.06}}/><ARKit.Planepos={{x: 0.4,y: 0.4,z: 0}}shape={{width: 0.1,height: 0.1}}/><ARKit.Texttext="ARKit is Cool!"pos={{x: 0.2,y: 0.6,z: 0}}font={{size: 0.15,depth: 0.05}}/><ARKit.Modelpos={{x: -0.2,y: 0,z: 0,frame: 'local'}}model={{file: 'art.scnassets/ship.scn',// make sure you have the model file in the ios projectscale: 0.01,}}/></ARKit></View>);}}AppRegistry.registerComponent('ReactNativeARKit',()=>ReactNativeARKit);
Components
<ARKit />
Props
Prop
Type
Default
Note
debug
Boolean
false
Debug mode will show the 3D axis and feature points detected.
planeDetection
Boolean
false
ARKit plane detection.
lightEstimation
Boolean
false
ARKit light estimation.
Events
Event Name
Returns
Notes
onPlaneDetected
{ id, center, extent }
When a plane is first detected.
onPlaneUpdate
{ id, center, extent }
When a detected plane is updated
Static methods
Method Name
Arguments
Notes
snapshot
Take a screenshot (will save to Photo Library)
getCameraPosition
Get the current position of the ARCamera
focusScene
Sets the scene's position/rotation to where it was when first rendered (but now relative to your device's current position/rotation)
If you find a bug or would like to request a new feature, just open an issue. Your contributions are always welcome! Submit a pull request and see CONTRIBUTING.md for guidelines.