{"id":24510771,"url":"https://github.com/rhdeck/react-reality-rnarkit-bridge","last_synced_at":"2025-03-15T09:41:34.608Z","repository":{"id":104234404,"uuid":"136824540","full_name":"rhdeck/react-reality-rnarkit-bridge","owner":"rhdeck","description":"Bridge for using react-native-arkit API on react-reality base","archived":false,"fork":false,"pushed_at":"2018-07-04T15:33:27.000Z","size":21,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-22T00:35:38.234Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rhdeck.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-10T16:15:19.000Z","updated_at":"2018-07-04T15:33:28.000Z","dependencies_parsed_at":"2023-11-25T16:30:22.797Z","dependency_job_id":null,"html_url":"https://github.com/rhdeck/react-reality-rnarkit-bridge","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhdeck%2Freact-reality-rnarkit-bridge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhdeck%2Freact-reality-rnarkit-bridge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhdeck%2Freact-reality-rnarkit-bridge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhdeck%2Freact-reality-rnarkit-bridge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rhdeck","download_url":"https://codeload.github.com/rhdeck/react-reality-rnarkit-bridge/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243713393,"owners_count":20335566,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-22T00:30:57.914Z","updated_at":"2025-03-15T09:41:34.588Z","avatar_url":"https://github.com/rhdeck.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-reality-rnarkit-bridge\n\nBindings 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\n\n# Purpose\n\n`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.\n\n# 30 second Installation - now quicker with react-reality-cli!\n\nShortest path to POC at this time (where you can replace bridgetest with your preferred test app name):\n\n```bash\nyarn global add rhdeck/react-reality-cli\nrr init bridgetest\ncd bridgetest\nyarn add rhdeck/react-reality-rnarkit-bridge\nreact-native run-ios --device\n```\n\nThen copy the sample code below into your App.js file. Reload and get your ARKit code!\n\n# Usage\n\nReplace 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.\n\n# Sample App.js\n\n```jsx\nimport React, { Component } from \"react\";\nimport { AppRegistry, View } from \"react-native\";\nimport { ARKit } from \"react-reality-rnarkit-bridge\";\n\nexport default class ReactNativeARKit extends Component {\n  render() {\n    return (\n      \u003cView style={{ flex: 1 }}\u003e\n        \u003cARKit\n          style={{ flex: 1 }}\n          debug\n          // enable plane detection (defaults to Horizontal)\n          planeDetection={ARKit.ARPlaneDetection.Horizontal}\n          // enable light estimation (defaults to true)\n          lightEstimationEnabled\n          // get the current lightEstimation (if enabled)\n          // it fires rapidly, so better poll it from outside with\n          // ARKit.getCurrentLightEstimation()\n          onLightEstimation={e =\u003e console.log(e.nativeEvent)}\n          // event listener for (horizontal) plane detection\n          onPlaneDetected={anchor =\u003e console.log(anchor)}\n          // event listener for plane update\n          onPlaneUpdated={anchor =\u003e console.log(anchor)}\n          // arkit sometimes removes detected planes\n          onPlaneRemoved={anchor =\u003e console.log(anchor)}\n          // event listeners for all anchors, see [Planes and Anchors](#planes-and-anchors)\n          onAnchorDetected={anchor =\u003e console.log(anchor)}\n          onAnchorUpdated={anchor =\u003e console.log(anchor)}\n          onAnchorRemoved={anchor =\u003e console.log(anchor)}\n          // you can detect images and will get an anchor for these images\n          detectionImages={[{ resourceGroupName: \"DetectionImages\" }]}\n          onARKitError={console.log} // if arkit could not be initialized (e.g. missing permissions), you will get notified here\n        \u003e\n          \u003cARKit.Box\n            position={{ x: 0, y: 0, z: 0 }}\n            shape={{ width: 0.1, height: 0.1, length: 0.1, chamfer: 0.01 }}\n          /\u003e\n          \u003cARKit.Sphere\n            position={{ x: 0.2, y: 0, z: 0 }}\n            shape={{ radius: 0.05 }}\n          /\u003e\n          \u003cARKit.Cylinder\n            position={{ x: 0.4, y: 0, z: 0 }}\n            shape={{ radius: 0.05, height: 0.1 }}\n          /\u003e\n          \u003cARKit.Cone\n            position={{ x: 0, y: 0.2, z: 0 }}\n            shape={{ topR: 0, bottomR: 0.05, height: 0.1 }}\n          /\u003e\n          \u003cARKit.Pyramid\n            position={{ x: 0.2, y: 0.15, z: 0 }}\n            shape={{ width: 0.1, height: 0.1, length: 0.1 }}\n          /\u003e\n          \u003cARKit.Tube\n            position={{ x: 0.4, y: 0.2, z: 0 }}\n            shape={{ innerR: 0.03, outerR: 0.05, height: 0.1 }}\n          /\u003e\n          \u003cARKit.Torus\n            position={{ x: 0, y: 0.4, z: 0 }}\n            shape={{ ringR: 0.06, pipeR: 0.02 }}\n          /\u003e\n          \u003cARKit.Capsule\n            position={{ x: 0.2, y: 0.4, z: 0 }}\n            shape={{ capR: 0.02, height: 0.06 }}\n          /\u003e\n          \u003cARKit.Plane\n            position={{ x: 0.4, y: 0.4, z: 0 }}\n            shape={{ width: 0.1, height: 0.1 }}\n          /\u003e\n          \u003cARKit.Text\n            text=\"ARKit is Cool!\"\n            position={{ x: 0.2, y: 0.6, z: 0 }}\n            font={{ size: 0.15, depth: 0.05 }}\n          /\u003e\n          \u003cARKit.Light\n            position={{ x: 1, y: 3, z: 2 }}\n            type={ARKit.LightType.Omni}\n            color=\"white\"\n          /\u003e\n          \u003cARKit.Light\n            position={{ x: 0, y: 1, z: 0 }}\n            type={ARKit.LightType.Spot}\n            eulerAngles={{ x: -Math.PI / 2 }}\n            spotInnerAngle={45}\n            spotOuterAngle={45}\n            color=\"green\"\n          /\u003e\n          \u003cARKit.Model\n            position={{ x: -0.2, y: 0, z: 0, frame: \"local\" }}\n            scale={0.01}\n            model={{\n              scale: 1, // this is deprecated, use the scale property that is available on all 3d objects\n              file: \"art.scnassets/ship.scn\" // make sure you have the model file in the ios project\n            }}\n          /\u003e\n          \u003cARKit.Shape\n            position={{ x: -1, y: 0, z: 0 }}\n            eulerAngles={{\n              x: Math.PI\n            }}\n            scale={0.01}\n            shape={{\n              // specify shape by svg! See https://github.com/HippoAR/react-native-arkit/pull/89 for details\n              pathSvg: `\n              \u003csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"\u003e\n                \u003cpath d=\"M50,30c9-22 42-24 48,0c5,40-40,40-48,65c-8-25-54-25-48-65c 6-24 39-22 48,0 z\" fill=\"#F00\" stroke=\"#000\"/\u003e\n              \u003c/svg\u003e`,\n              pathFlatness: 0.1,\n              // it's also possible to specify a chamfer profile:\n              chamferRadius: 5,\n              chamferProfilePathSvg: `\n                \u003cpath d=\"M.6 94.4c.7-7 0-13 6-18.5 1.6-1.4 5.3 1 6-.8l9.6 2.3C25 70.8 20.2 63 21 56c0-1.3 2.3-1 3.5-.7 7.6 1.4 7 15.6 14.7 13.2 1-.2 1.7-1 2-2 2-5-11.3-28.8-3-30.3 2.3-.4 5.7 1.8 6.7 0l8.4 6.5c.3-.4-8-17.3-2.4-21.6 7-5.4 14 5.3 17.7 7.8 1 .8 3 2 3.8 1 6.3-10-6-8.5-3.2-19 2-8.2 18.2-2.3 20.3-3 2.4-.6 1.7-5.6 4.2-6.4\"/\u003e\n              `,\n              extrusion: 10\n            }}\n          /\u003e\n        \u003c/ARKit\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\n# What's Missing\n\n- `withProjectedPosition` not yet implemented - and it seems really cool!\n\n# Credit-Where-Credit-Is-Due\n\nThe `react-reality` project was inspired by the `react-native-arkit` project.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frhdeck%2Freact-reality-rnarkit-bridge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frhdeck%2Freact-reality-rnarkit-bridge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frhdeck%2Freact-reality-rnarkit-bridge/lists"}