React Native binding for iOS ARKit.
Tutorial: How to make an ARKit app in 5 minutes using React Native
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.
$ npm install react-native-arkit --save
$ react-native link react-native-arkit
- In XCode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
- Go to
node_modules
➜react-native-arkit
and addRCTARKit.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRCTARKit.a
to your project'sBuild Phases
➜Link Binary With Libraries
- Run your project (
Cmd+R
)<
A simple sample React Native ARKit App
// index.ios.js
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
import ARKit from 'react-native-arkit';
export default class ReactNativeARKit extends Component {
componentDidMount() {
// Add a cube in the scene. Only support cube geometry at the moment
this.arkit.addBox({ x: 0, y: 0, z: 0, width: 0.1, height: 0.1, length: 0.1, chamfer: 0.01 });
this.arkit.addSphere({ x: 0.2, y: 0, z: 0, radius: 0.05 });
this.arkit.addCylinder({ x: 0.4, y: 0, z: 0, radius: 0.05, height: 0.1 });
this.arkit.addCone({ x: 0, y: 0.2, z: 0, topR: 0, bottomR: 0.05, height: 0.1 });
this.arkit.addPyramid({ x: 0.2, y: 0.15, z: 0, width: 0.1, height: 0.1, length: 0.1 });
this.arkit.addTube({ x: 0.4, y: 0.2, z: 0, innerR: 0.03, outerR: 0.05, height: 0.1 });
this.arkit.addTorus({ x: 0, y: 0.4, z: 0, ringR: 0.06, pipeR: 0.02 });
this.arkit.addCapsule({ x: 0.2, y: 0.4, z: 0, capR: 0.02, height: 0.06 });
this.arkit.addPlane({ x: 0.4, y: 0.4, z: 0, width: 0.1, height: 0.1 });
}
render() {
return (
<View style={{ flex: 1 }}>
<ARKit
ref={arkit => this.arkit = arkit}
style={{ flex: 1 }}
debug
planeDetection
lightEstimation
onPlaneDetected={console.log} // event listener for plane detection
onPlaneUpdate={console.log} // event listener for plane update
/>
</View>
);
}
}
AppRegistry.registerComponent('ReactNativeARKit', () => ReactNativeARKit);
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. |
Event Name | Returns | Notes |
---|---|---|
onPlaneDetected |
{ id, center, extent } |
When a plane is first detected. |
onPlaneUpdate |
{ id, center, extent } |
When a detected plane is updated |
Method Name | Arguments | Notes |
---|---|---|
snapshot |
Take a screenshot (will save to Photo Library) | |
getCameraPosition |
Get the current position of the ARCamera |
|
addBox |
{ x, y, z, width, height, length, chamfer } |
Add a SCNCube |
addSphere |
{ x, y, z, radius } |
Add a SCNSphere |
addCylinder |
{ x, y, z, radius, height } |
Add a SCNCylinder |
addCone |
{ x, y, z, topR, bottomR, height } |
Add a SCNCone |
addPyramid |
{ x, y, z, width, length, height } |
Add a SCNPyramid |
addTube |
{ x, y, z, innerR, outerR, height } |
Add a SCNTube |
addTorus |
{ x, y, z, ringR, pipeR } |
Add a SCNTorus |
addCapsule |
{ x, y, z, capR, height } |
Add a SCNCapsule |
addPlane |
{ x, y, z, width, length } |
Add a SCNPlane |
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.