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.
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.