react-native-arkit

react-native-arkit

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.

Getting started

$ npm install react-native-arkit --save

Mostly automatic installation

$ react-native link react-native-arkit

Manual installation

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ react-native-arkit and add RCTARKit.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRCTARKit.a to your project's Build Phases ➜ Link Binary With Libraries
4. 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
            pos={{ x: 0, y: 0, z: 0 }}
            shape={{ width: 0.1, height: 0.1, length: 0.1, chamfer: 0.01 }}
          />
          <ARKit.Sphere
            pos={{ x: 0.2, y: 0, z: 0 }}
            shape={{ radius: 0.05 }}
          />
          <ARKit.Cylinder
            pos={{ x: 0.4, y: 0, z: 0 }}
            shape={{ radius: 0.05, height: 0.1 }}
          />
          <ARKit.Cone
            pos={{ x: 0, y: 0.2, z: 0 }}
            shape={{ topR: 0, bottomR: 0.05, height: 0.1 }}
          />
          <ARKit.Pyramid
            pos={{ x: 0.2, y: 0.15, z: 0 }}
            shape={{ width: 0.1, height: 0.1, length: 0.1 }}
          />
          <ARKit.Tube
            pos={{ x: 0.4, y: 0.2, z: 0 }}
            shape={{ innerR: 0.03, outerR: 0.05, height: 0.1 }}
          />
          <ARKit.Torus
            pos={{ x: 0, y: 0.4, z: 0 }}
            shape={{ ringR: 0.06, pipeR: 0.02 }}
          />
          <ARKit.Capsule
            pos={{ x: 0.2, y: 0.4, z: 0 }}
            shape={{ capR: 0.02, height: 0.06 }}
          />
          <ARKit.Plane
            pos={{ x: 0.4, y: 0.4, z: 0 }}
            shape={{ width: 0.1, height: 0.1 }}
          />
          <ARKit.Text
            text="ARKit is Cool!"
            pos={{ x: 0.2, y: 0.6, z: 0 }}
            font={{ size: 0.15, depth: 0.05 }}
          />
          <ARKit.Model
            pos={{ 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
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})

<ARKit.Box />

Props

Prop	Type
pos	{ x, y, z }
shape	{ width, height, length, chamfer }
material	{ diffuse, metalness, roughness }

<ARKit.Sphere />

Props

Prop	Type
pos	{ x, y, z }
shape	{ radius }
material	{ diffuse, metalness, roughness }

<ARKit.Cylinder />

Props

Prop	Type
pos	{ x, y, z }
shape	{ radius, height }
material	{ diffuse, metalness, roughness }

<ARKit.Cone />

Props

Prop	Type
pos	{ x, y, z }
shape	{ topR, bottomR, height }
material	{ diffuse, metalness, roughness }

<ARKit.Pyramid />

Props

Prop	Type
pos	{ x, y, z }
shape	{ width, height, length }
material	{ diffuse, metalness, roughness }

<ARKit.Tube />

Props

Prop	Type
pos	{ x, y, z }
shape	{ innerR, outerR, height }
material	{ diffuse, metalness, roughness }

<ARKit.Torus />

Props

Prop	Type
pos	{ x, y, z }
shape	{ ringR, pipeR }
material	{ diffuse, metalness, roughness }

<ARKit.Capsule />

Props

Prop	Type
pos	{ x, y, z }
shape	{ capR, height }
material	{ diffuse, metalness, roughness }

<ARKit.Plane />

Props

Prop	Type
pos	{ x, y, z }
shape	{ width, length }
material	{ diffuse, metalness, roughness }

<ARKit.Text />

Props

Prop	Type
text	String
pos	{ x, y, z, angle }
font	{ name, size, depth, chamfer }
material	{ diffuse, metalness, roughness }

<ARKit.Model />

SceneKit only supports .scn and .dae formats.

Props

Prop	Type
pos	{ 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.