https://github.com/rhdeck/react-reality-rnarkit-bridge
Bridge for using react-native-arkit API on react-reality base
https://github.com/rhdeck/react-reality-rnarkit-bridge
Last synced: over 1 year ago
JSON representation
Bridge for using react-native-arkit API on react-reality base
- Host: GitHub
- URL: https://github.com/rhdeck/react-reality-rnarkit-bridge
- Owner: rhdeck
- License: mit
- Created: 2018-06-10T16:15:19.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-04T15:33:27.000Z (almost 8 years ago)
- Last Synced: 2025-01-22T00:35:38.234Z (over 1 year ago)
- Language: JavaScript
- Size: 20.5 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-reality-rnarkit-bridge
Bindings to support the [react-native-arkit](https://github.com/react-native-ar/react-native-arkit) API on the [react-reality](https://github.com/rhdeck/react-reality) platform
# Purpose
`react-native-arkit` is a popular React-Native extension for augmented reality. This bridge is intended as a "backport" to allow those who are familiar with that API but who want to leverage the extensions and flexibility of `react-reality` to more easily leverage their code.
# 30 second Installation - now quicker with react-reality-cli!
Shortest path to POC at this time (where you can replace bridgetest with your preferred test app name):
```bash
yarn global add rhdeck/react-reality-cli
rr init bridgetest
cd bridgetest
yarn add rhdeck/react-reality-rnarkit-bridge
react-native run-ios --device
```
Then copy the sample code below into your App.js file. Reload and get your ARKit code!
# Usage
Replace import sources from your existing app from "react-native-arkit" to "react-reality-rnarkit-bridge". Then most functionality will work. You get to leverage your existing components and code with the `react-reality` primitives and extensions without a total rewrite.
# Sample App.js
```jsx
import React, { Component } from "react";
import { AppRegistry, View } from "react-native";
import { ARKit } from "react-reality-rnarkit-bridge";
export default class ReactNativeARKit extends Component {
render() {
return (
console.log(e.nativeEvent)}
// event listener for (horizontal) plane detection
onPlaneDetected={anchor => console.log(anchor)}
// event listener for plane update
onPlaneUpdated={anchor => console.log(anchor)}
// arkit sometimes removes detected planes
onPlaneRemoved={anchor => console.log(anchor)}
// event listeners for all anchors, see [Planes and Anchors](#planes-and-anchors)
onAnchorDetected={anchor => console.log(anchor)}
onAnchorUpdated={anchor => console.log(anchor)}
onAnchorRemoved={anchor => console.log(anchor)}
// you can detect images and will get an anchor for these images
detectionImages={[{ resourceGroupName: "DetectionImages" }]}
onARKitError={console.log} // if arkit could not be initialized (e.g. missing permissions), you will get notified here
>
`,
pathFlatness: 0.1,
// it's also possible to specify a chamfer profile:
chamferRadius: 5,
chamferProfilePathSvg: `
`,
extrusion: 10
}}
/>
);
}
}
```
# What's Missing
- `withProjectedPosition` not yet implemented - and it seems really cool!
# Credit-Where-Credit-Is-Due
The `react-reality` project was inspired by the `react-native-arkit` project.