rna

@panter/react-native-arkit

React Native binding for iOS ARKit

Showing:

Popularity

Downloads/wk

17

Maintenance

No Maintenance Data Available

Package

Dependencies

4

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

react-native-arkit

npm version npm downloads

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

  1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-native-arkit and add RCTARKit.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libRCTARKit.a to your project's Build PhasesLink 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
            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
PropTypeDefaultNote
debugBooleanfalseDebug mode will show the 3D axis and feature points detected.
planeDetectionBooleanfalseARKit plane detection.
lightEstimationBooleanfalseARKit light estimation.
Events
Event NameReturnsNotes
onPlaneDetected{ id, center, extent }When a plane is first detected.
onPlaneUpdate{ id, center, extent }When a detected plane is updated
Static methods
Method NameArgumentsNotes
snapshot
snapshotCameraTake a screenshot without 3d models (will save to Photo Library)
getCameraPositionGet the current position of the ARCamera
focusSceneSets the scene's position/rotation to where it was when first rendered (but now relative to your device's current position/rotation)
hitTestPlanespoint, typecheck 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
hitTestSceneObjectspointcheck if a scene object has ben hit by point ({x,y})

<ARKit.Box />

Props
PropType
position{ x, y, z }
eulerAngles{ x, y, z }
shape{ width, height, length, chamfer }
material{ diffuse, metalness, roughness, lightingModel }

<ARKit.Sphere />

Props
PropType
position{ x, y, z }
eulerAngles{ x, y, z }
shape{ radius }
material{ diffuse, metalness, roughness, lightingModel }

<ARKit.Cylinder />

Props
PropType
position{ x, y, z }
eulerAngles{ x, y, z }
shape{ radius, height }
material{ diffuse, metalness, roughness, lightingModel }

<ARKit.Cone />

Props
PropType
position{ x, y, z }
eulerAngles{ x, y, z }
shape{ topR, bottomR, height }
material{ diffuse, metalness, roughness, lightingModel }

<ARKit.Pyramid />

Props
PropType
position{ x, y, z }
eulerAngles{ x, y, z }
shape{ width, height, length }
material{ diffuse, metalness, roughness, lightingModel }

<ARKit.Tube />

Props
PropType
position{ x, y, z }
eulerAngles{ x, y, z }
shape{ innerR, outerR, height }
material{ diffuse, metalness, roughness, lightingModel }

<ARKit.Torus />

Props
PropType
position{ x, y, z }
eulerAngles{ x, y, z }
shape{ ringR, pipeR }
material{ diffuse, metalness, roughness, lightingModel }

<ARKit.Capsule />

Props
PropType
position{ x, y, z }
eulerAngles{ x, y, z }
shape{ capR, height }
material{ diffuse, metalness, roughness, lightingModel }

<ARKit.Plane />

Props
PropType
position{ x, y, z }
eulerAngles{ x, y, z }
shape{ width, length }
material{ diffuse, metalness, roughness, lightingModel }

<ARKit.Text />

Props
PropType
textString
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
PropType
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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100