react-native-arkit
React Native binding for iOS ARKit.
Tutorial: How to make an ARKit app in 5 minutes using React Native
Sample Project: https://github.com/HippoAR/ReactNativeARKit
Note: ARKit is only supported by devices with A9 or later processors (iPhone 6s/7/SE/8/X, iPad 2017/Pro) on iOS 11. You also need Xcode 9 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.js
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
import { ARKit } from 'react-native-arkit';
export default class ReactNativeARKit extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<ARKit
style={{ flex: 1 }}
debug
planeDetection
lightEstimation
onPlaneDetected={console.log} // event listener for plane detection
onPlaneUpdate={console.log} // event listener for plane update
>
<ARKit.Box
position={{ x: 0, y: 0, z: 0 }}
shape={{ width: 0.1, height: 0.1, length: 0.1, chamfer: 0.01 }}
/>
<ARKit.Sphere
position={{ x: 0.2, y: 0, z: 0 }}
shape={{ radius: 0.05 }}
/>
<ARKit.Cylinder
position={{ x: 0.4, y: 0, z: 0 }}
shape={{ radius: 0.05, height: 0.1 }}
/>
<ARKit.Cone
position={{ x: 0, y: 0.2, z: 0 }}
shape={{ topR: 0, bottomR: 0.05, height: 0.1 }}
/>
<ARKit.Pyramid
position={{ x: 0.2, y: 0.15, z: 0 }}
shape={{ width: 0.1, height: 0.1, length: 0.1 }}
/>
<ARKit.Tube
position={{ x: 0.4, y: 0.2, z: 0 }}
shape={{ innerR: 0.03, outerR: 0.05, height: 0.1 }}
/>
<ARKit.Torus
position={{ x: 0, y: 0.4, z: 0 }}
shape={{ ringR: 0.06, pipeR: 0.02 }}
/>
<ARKit.Capsule
position={{ x: 0.2, y: 0.4, z: 0 }}
shape={{ capR: 0.02, height: 0.06 }}
/>
<ARKit.Plane
position={{ x: 0.4, y: 0.4, z: 0 }}
shape={{ width: 0.1, height: 0.1 }}
/>
<ARKit.Text
text="ARKit is Cool!"
position={{ x: 0.2, y: 0.6, z: 0 }}
font={{ size: 0.15, depth: 0.05 }}
/>
<ARKit.Model
position={{ 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 project
scale: 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) |
snapshotCamera | | Take a screenshot without 3d models (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) |
hitTestPlanes | point, type | check if a plane has ben hit by point ({x,y}) with detection type (any of ARKit.ARHitTestResultType). See https://developer.apple.com/documentation/arkit/arhittestresulttype?language=objc for further information |
hitTestSceneObjects | point | check if a scene object has ben hit by point ({x,y}) |
Props
| Prop | Type |
|---|
position | { x, y, z } |
eulerAngles | { x, y, z } |
shape | { width, height, length, chamfer } |
material | { diffuse, metalness, roughness, lightingModel } |
Props
| Prop | Type |
|---|
position | { x, y, z } |
eulerAngles | { x, y, z } |
shape | { radius } |
material | { diffuse, metalness, roughness, lightingModel } |
Props
| Prop | Type |
|---|
position | { x, y, z } |
eulerAngles | { x, y, z } |
shape | { radius, height } |
material | { diffuse, metalness, roughness, lightingModel } |
Props
| Prop | Type |
|---|
position | { x, y, z } |
eulerAngles | { x, y, z } |
shape | { topR, bottomR, height } |
material | { diffuse, metalness, roughness, lightingModel } |
Props
| Prop | Type |
|---|
position | { x, y, z } |
eulerAngles | { x, y, z } |
shape | { width, height, length } |
material | { diffuse, metalness, roughness, lightingModel } |
Props
| Prop | Type |
|---|
position | { x, y, z } |
eulerAngles | { x, y, z } |
shape | { innerR, outerR, height } |
material | { diffuse, metalness, roughness, lightingModel } |
Props
| Prop | Type |
|---|
position | { x, y, z } |
eulerAngles | { x, y, z } |
shape | { ringR, pipeR } |
material | { diffuse, metalness, roughness, lightingModel } |
Props
| Prop | Type |
|---|
position | { x, y, z } |
eulerAngles | { x, y, z } |
shape | { capR, height } |
material | { diffuse, metalness, roughness, lightingModel } |
Props
| Prop | Type |
|---|
position | { x, y, z } |
eulerAngles | { x, y, z } |
shape | { width, length } |
material | { diffuse, metalness, roughness, lightingModel } |
Props
| Prop | Type |
|---|
text | String |
position | { x, y, z } |
eulerAngles | { x, y, z } |
font | { name, size, depth, chamfer } |
material | { diffuse, metalness, roughness, lightingModel } |
<ARKit.Model />
SceneKit only supports .scn and .dae formats.
Props
| Prop | Type |
|---|
position | { x, y, z } |
eulerAngles | { x, y, z } |
model | { file, node, scale, alpha } |
Contributing
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.