{"id":4556,"url":"https://github.com/react-native-ar/react-native-arkit","last_synced_at":"2026-01-12T02:01:39.955Z","repository":{"id":45537323,"uuid":"96742289","full_name":"react-native-ar/react-native-arkit","owner":"react-native-ar","description":"React Native binding for iOS ARKit","archived":false,"fork":false,"pushed_at":"2023-01-11T18:46:48.000Z","size":4596,"stargazers_count":1739,"open_issues_count":43,"forks_count":140,"subscribers_count":48,"default_branch":"master","last_synced_at":"2025-10-17T07:56:29.711Z","etag":null,"topics":["arkit","augmented-reality","ios","objective-c","react-native"],"latest_commit_sha":null,"homepage":null,"language":"Objective-C","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/react-native-ar.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-10T06:17:34.000Z","updated_at":"2025-09-29T23:05:13.000Z","dependencies_parsed_at":"2023-02-09T04:15:15.189Z","dependency_job_id":null,"html_url":"https://github.com/react-native-ar/react-native-arkit","commit_stats":null,"previous_names":["hippoar/react-native-arkit"],"tags_count":33,"template":false,"template_full_name":null,"purl":"pkg:github/react-native-ar/react-native-arkit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-ar%2Freact-native-arkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-ar%2Freact-native-arkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-ar%2Freact-native-arkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-ar%2Freact-native-arkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-native-ar","download_url":"https://codeload.github.com/react-native-ar/react-native-arkit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-native-ar%2Freact-native-arkit/sbom","scorecard":{"id":62686,"data":{"date":"2025-08-11","repo":{"name":"github.com/react-native-ar/react-native-arkit","commit":"587107dba55206139a0d8e901e33e93521de429f"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Code-Review","score":2,"reason":"Found 4/19 approved changesets -- score normalized to 2","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 17 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"28 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546","Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx","Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm","Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574","Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v","Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx","Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-15T02:03:01.423Z","repository_id":45537323,"created_at":"2025-08-15T02:03:01.423Z","updated_at":"2025-08-15T02:03:01.423Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28331506,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T00:36:25.062Z","status":"online","status_checked_at":"2026-01-12T02:00:08.677Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["arkit","augmented-reality","ios","objective-c","react-native"],"created_at":"2024-01-05T20:17:16.175Z","updated_at":"2026-01-12T02:01:39.939Z","avatar_url":"https://github.com/react-native-ar.png","language":"Objective-C","funding_links":[],"categories":["Components"],"sub_categories":["System"],"readme":"⚠️  **LOOKING FOR MAINTAINERS - This Repo is currently not maintained. Give https://github.com/ViroCommunity/viro/ a try which has been open sourced and also supports android (ARCORE)** ⚠️ \n\n# react-native-arkit \n\n\n\n[![npm version](https://img.shields.io/npm/v/react-native-arkit.svg?style=flat)](https://www.npmjs.com/package/react-native-arkit)\n[![npm downloads](https://img.shields.io/npm/dm/react-native-arkit.svg?style=flat)](https://www.npmjs.com/package/react-native-arkit)\n\nReact Native binding for iOS ARKit.\n\n**Made with React Native Arkit**:\n\n- Homestory: An AI powered interior design assistant ([App store](https://itunes.apple.com/us/app/homestory-augmented-reality/id1292552232?ls=1\u0026mt=8))\n\n**Tutorial**: [How to make an ARKit app in 5 minutes using React Native](https://medium.com/@HippoAR/how-to-make-your-own-arkit-app-in-5-minutes-using-react-native-9d7ce109a4c2)\n\n**Sample Project**: https://github.com/HippoAR/ReactNativeARKit\n\n**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.\n\nThere is a Slack group that anyone can join for help / support / general questions.\n\n[**Join Slack**](https://join.slack.com/t/react-native-ar/shared_invite/enQtMjUzMzg3MjM0MTQ5LWU3Nzg2YjI4MGRjMTM1ZDBlNmIwYTE4YmM0M2U0NmY2YjBiYzQ4YzlkODExMTA0NDkwMzFhYWY4ZDE2M2Q4NGY)\n\n## Getting started\n\n`$ yarn add react-native-arkit`\n\nmake sure to use the latest version of yarn (\u003e=1.x.x)\n\n(npm does not work properly at the moment. See https://github.com/HippoAR/react-native-arkit/issues/103)\n\n\n### Mostly automatic installation\n\n⚠️ **Currently automatic installation does not work as PocketSVG is missing. Follow the manual installation.**\n\n`$ react-native link react-native-arkit`\n\n### Manual installation\n\n\n#### iOS\n\n1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`\n2. Go to `node_modules` ➜ add `react-native-arkit/ios/RCTARKit.xcodeproj` and `react-native-arkit/ios/PocketSVG/PocketSVG.xcodeproj`\n3. In XCode, in the project navigator, select your project. Add `libRCTARKit.a` `and PocketSVG.framework` to your project's `Build Phases` ➜ `Link Binary With Libraries`\n4. In Tab `General` ➜ `Embedded Binaries` ➜ `+` ➜ Add `PocketSVG.framework ios`\n5. Run your project (`Cmd+R`)\u003c\n\n\n##### iOS Project configuration\n\nThese steps are mandatory regardless of doing a manual or automatic installation:\n\n1. Give permissions for camera usage. In `Info.plist` add the following:\n\n```\n\u003ckey\u003eNSCameraUsageDescription\u003c/key\u003e\n\u003cstring\u003eYour message to user when the camera is accessed for the first time\u003c/string\u003e\n```\n2. ARKit only runs on arm64-ready devices so the default build architecture should be set to arm64: go to `Build settings` ➜ `Build Active Architecture Only` and change the value to `Yes`.\n\n\n\n\n## Usage\n\nA simple sample React Native ARKit App\n\n```javascript\n// index.ios.js\n\nimport React, { Component } from 'react';\nimport { AppRegistry, View } from 'react-native';\nimport { ARKit } from 'react-native-arkit';\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\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\n          // event listener for (horizontal) plane detection\n          onPlaneDetected={anchor =\u003e console.log(anchor)}\n\n          // event listener for plane update\n          onPlaneUpdated={anchor =\u003e console.log(anchor)}\n\n          // arkit sometimes removes detected planes\n          onPlaneRemoved={anchor =\u003e console.log(anchor)}\n\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\n          // you can detect images and will get an anchor for these images\n          detectionImages={[{ resourceGroupName: 'DetectionImages' }]}\n\n\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\nAppRegistry.registerComponent('ReactNativeARKit', () =\u003e ReactNativeARKit);\n\n```\n\n\u003cimg src=\"screenshots/geometries.jpg\" width=\"250\"\u003e\n\n\n\n### `\u003cARKit /\u003e`-Component\n\n#### Props\n\n| Prop | Type | Note |\n|---|---|---|\n| `debug` | `Boolean` | Debug mode will show the 3D axis and feature points detected.\n| `planeDetection` | `ARKit.ARPlaneDetection.{ Horizontal \\| Vertical \\| HorizontalVertical \\| None }` | ARKit plane detection. Defaults to `Horizontal`. `Vertical` is available with IOS 11.3\n| `lightEstimationEnabled` | `Boolean` | ARKit light estimation (defaults to false).\n| `worldAlignment` | `ARKit.ARWorldAlignment.{ Gravity \\| GravityAndHeading \\| Camera }` | **ARWorldAlignmentGravity** \u003cbr /\u003e The coordinate system's y-axis is parallel to gravity, and its origin is the initial position of the device. **ARWorldAlignmentGravityAndHeading** \u003cbr /\u003e The coordinate system's y-axis is parallel to gravity, its x- and z-axes are oriented to compass heading, and its origin is the initial position of the device. **ARWorldAlignmentCamera** \u003cbr /\u003e The scene coordinate system is locked to match the orientation of the camera. Defaults to `ARKit.ARWorldAlignment.Gravity`.  [See](https://developer.apple.com/documentation/arkit/arworldalignment)|\n| `origin` | `{position, transition}` | Usually `{0,0,0}` is where you launched the app. If you want to have a different origin, you can set it here. E.g. if you set `origin={{position: {0,-1, 0}, transition: {duration: 1}}}` the new origin will be one meter below. If you have any objects already placed, they will get moved down using the given transition. All hit-test functions or similar will report coordinates relative to that new origin as `position`. You can get the original coordinates with `positionAbsolute` in these functions |  \n| `detectionImages` | `Array\u003cDetectionImage\u003e` | An Array of `DetectionImage` (see below), only available on IOS 11.3 |  \n\n##### `DetectionImage`\n\nAn `DetectionImage` is an image or image resource group that should be detected by ARKit.\n\nSee https://developer.apple.com/documentation/arkit/arreferenceimage?language=objc how to add these images.\n\nYou will then receive theses images in `onAnchorDetected/onAnchorUpdated`. See also [Planes and Anchors](#planes-and-anchors) for more details.\n\n`DetectionImage` has these properties\n\n| Prop | Type | Notes\n|---|---|---|\n| `resourceGroupName` | `String` | The name of the resource group |\n\nWe probably will add the option to load images from other sources as well (PRs encouraged).\n\n#### Events\n\n| Event Name | Returns | Notes\n|---|---|---|\n| `onARKitError` | `ARKiterror` | will report whether an error occured while initializing ARKit. A common error is when the user has not allowed camera access. Another error is, if you use `worldAlignment=GravityAndHeading` and location service is turned off |\n| `onLightEstimation` | `{ ambientColorTemperature, ambientIntensity }` | Light estimation on every frame. Called rapidly, better use polling. See `ARKit.getCurrentLightEstimation()`\n| `onFeaturesDetected` | `{ featurePoints}` | Detected Features on every frame (currently also not throttled). Usefull to display custom dots for detected features. You can also poll this information with `ARKit.getCurrentDetectedFeaturePoints()`\n| `onAnchorDetected` | `Anchor` | When an anchor (plane or image) is first detected.\n| `onAnchorUpdated` | `Anchor` | When an anchor is updated\n| `onAnchorRemoved` | `Anchor` | When an anchor is removed\n| `onPlaneDetected` | `Anchor` | When a plane anchor is first detected.\n| `onPlaneUpdated` | `Anchor` | When a detected plane is updated\n| `onPlaneRemoved` | `Anchor` | When a detected plane is removed\n\nSee [Planes and Anchors](#planes-and-anchors) for Details about anchors\n\n\n\n#### Planes and Anchors\n\nARKit can detect different anchors in the real world:\n\n- `plane` horizontal and vertical planes\n- `image`, image-anchors [See DetectionImage](#DetectionImage)\n- face with iphone X or similar (not implemented yet)\n\nYou then will receive anchor objects in the `onAnchorDetected`, `onAnchorUpdated`, `onAnchorRemoved` callbacks on your `\u003cARKit /\u003e`-component.\n\nYou can use `onPlaneDetected`, `onPlaneUpdated`, `onPlaneRemoved` to only receive plane-anchors (may be deprecated later).\n\nThe `Anchor` object has the following properties:\n\n| Property | Type | Description\n|---|---|---|\n| `id` | `String` | a unique id identifying the anchor |\n| `type` | `String` | The type of the anchor (plane, image) |\n| `position` | `{ x, y, z }` | the position of the anchor (relative to the origin) |\n| `positionAbsolute` | `{ x, y, z }` | the absolute position of the anchor |\n| `eulerAngles` | `{ x, y, z }` | the rotation of the plane |\n\nIf its a `plane`-anchor, it will have these additional properties:\n\n| Property | Description\n|---|---|\n| `alignment` | `ARKit.ARPlaneAnchorAlignment.Horizontal` or `ARKit.ARPlaneAnchorAlignment.Vertical` \u003cbr /\u003e so you can check whether it was a horizontal or vertical plane |\n| `extent` | see https://developer.apple.com/documentation/arkit/arplaneanchor?language=objc |\n| `center` | see https://developer.apple.com/documentation/arkit/arplaneanchor?language=objc |\n\n`image`-Anchor:\n\n| Property | type | Description\n|---|---|---|\n| `image` | `{name}` | an object with the name of the image.\n\n\n\n### Static methods\n\nStatic Methods can directly be used on the `ARKit`-export:\n\n```\nimport { ARKit } from 'react-native-arkit'\n\n//...\nconst result = await ARKit.hitTestSceneObjects(point);\n\n```\n\nAll methods return a *promise* with the result.\n\n| Method Name | Arguments |  Notes\n|---|---|---|\n| `snapshot` |  |  | Take a screenshot (will save to Photo Library) |\n| `snapshotCamera` |  | Take a screenshot without 3d models (will save to Photo Library) |\n| `getCameraPosition` |  | Get the current position of the `ARCamera` |\n| `getCamera` |  | Get all properties of the `ARCamera` |\n| `getCurrentLightEstimation` |  | Get current light estimation  `{ ambientColorTemperature, ambientIntensity}` |\n| `getCurrentDetectedFeaturePoints` |  | Get current detected feature points (in last current frame)  (array) |\n| `focusScene` |  | Sets the scene's position/rotation to where it was when first rendered (but now relative to your device's current position/rotation) |\n| `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 |\n| `hitTestSceneObjects` | point |  check if a scene object has ben hit by point (`{x,y}`) |\n| `isInitialized` | boolean | check whether arkit has been initialized (e.g. by mounting). See https://github.com/HippoAR/react-native-arkit/pull/152 for details |\n| `isMounted` | boolean | check whether arkit has been mounted. See https://github.com/HippoAR/react-native-arkit/pull/152 for details |\n\n### 3D-Components\n\nThis project allows you to work with 3d elements like with usual react-components.\nWe provide some primitive shapes like cubes, spheres, etc. as well as\na component to load model-files.\n\nYou can also nest components to create new Components. Child-elements will\nbe relative to the parent:\n\n```\nconst BigExclamationMark = ({ position, eulerAngles, color = '#ff0000' }) =\u003e (\n  \u003cARKit.Group opacity={0.5} position={position} eulerAngles={eulerAngles}\u003e\n    \u003cARKit.Sphere\n      position={{ x: 0, y: 0, z: 0 }}\n      shape={{ radius: 0.06 }}\n      material={{ diffuse: color }}\n    /\u003e\n    \u003cARKit.Cone\n      position={{ x: 0, y: 0.4, z: 0 }}\n      shape={{ topR: 0.1, bottomR: 0.05, height: 0.5 }}\n      material={{ diffuse: color }}\n    /\u003e\n  \u003c/ARKit.Group\u003e\n)\n\n// somewhere else\n\n\u003cBigExclamationMark\n  eulerAngles={{ x: 0.2 }}\n  position={{ x: 0.2, y: 0.3, z: -0.2 }}\n  color=\"#00ff00\"\n/\u003e\n\n```\n\n\n#### General props\n\nMost 3d object have these common properties\n\n| Prop | Type | Description |\n|---|---|---|\n| `position` | `{ x, y, z }` | The object's position (y is up) |\n| `scale` | Number | The scale of the object. Defaults to 1 |\n| `eulerAngles` | `{ x, y, z }` | The rotation in eulerAngles |\n| `id` | String | a unique identifier. Only provide one, if you need to find the node later in hit-testing. |\n| `shape` | depends on object | the shape of the object (will probably renamed to geometry in future versions)\n| `material` | `{ diffuse, metalness, roughness, lightingModel, shaders }` | the material of the object |\n| `transition` | `{duration: 1}` | Some property changes can be animated like in css transitions. Currently you can specify the duration (in seconds). |\n\nAdvanced properties:\n\n| Prop | Type | Description |\n|---|---|---|\n| `rotation` | TODO | see scenkit documentation |\n| `orientation` | TODO | see scenkit documentation |\n| `renderingOrder` | Number | Order in which object is rendered. Usefull to place elements \"behind\" others, although they are nearer. |\n| `categoryBitMask` | Number / bitmask | control which lights affect this object |\n| `castsShadow` | `boolean` | whether this object casts shadows |\n| `constraint` | `ARKit.Constraint.{ BillboardAxisAll \\| BillboardAxisX \\| BillboardAxisY \\| BillboardAxisZ \\| None }` | Constrains the node to always point to the camera |\n\n*New experimental feature:*\n\nYou can switch properties on mount or onmount by specifying `propsOnMount` and `propsOnUnmount`.\nE.g. you can scale an object on unmount:\n\n```\n\u003cARKit.Sphere\n  position={{x:0,y:0,z:0}}\n  scale={1}\n  transition={{duration: 1}}\n  propsOnUnmount={{\n    scale: 0\n  }}\n/\u003e\n```\n\n#### Material\n\nMost objects take a material property with these sub-props:\n\n| Prop | Type | Description |\n|---|---|---|\n| `diffuse` | `{ ...mapProperties }` (see below) | [diffuse](https://developer.apple.com/documentation/scenekit/scnmaterial/1462589-diffuse?language=objc)\n| `specular` | `{ ...mapProperties }` (see below) | [specular](https://developer.apple.com/documentation/scenekit/scnmaterial/1462516-specular?language=objc)\n| `displacement` | `{ ...mapProperties }` (see below) | [displacement](https://developer.apple.com/documentation/scenekit/scnmaterial/2867516-displacement?language=objc)\n| `normal` | `{ ...mapProperties }` (see below) |  [normal](https://developer.apple.com/documentation/scenekit/scnmaterial/1462542-normal)\n| `metalness` | number | metalness of the object |\n| `roughness` | number | roughness of the object |\n| `doubleSided` | boolean | render both sides, default is `true` |\n| `litPerPixel` | boolean | calculate lighting per-pixel or vertex [litPerPixel](https://developer.apple.com/documentation/scenekit/scnmaterial/1462580-litperpixel) |\n| `lightingModel` | `ARKit.LightingModel.*` | [LightingModel](https://developer.apple.com/documentation/scenekit/scnmaterial.lightingmodel) |\n| `blendMode` | `ARKit.BlendMode.*` | [BlendMode](https://developer.apple.com/documentation/scenekit/scnmaterial/1462585-blendmode) |\n| `transparencyMode` | `ARKit.TransparencyMode.*` | [TransparencyMode](https://developer.apple.com/documentation/scenekit/scnmaterial/1462549-transparencymode?language=objc) |\n| `fillMode` | `ARKit.FillMode.*` | [FillMode](https://developer.apple.com/documentation/scenekit/scnmaterial/2867442-fillmode)\n| `shaders` | Object with keys from `ARKit.ShaderModifierEntryPoint.*` and shader strings as values | [Shader modifiers](https://developer.apple.com/documentation/scenekit/scnshadable) |\n| `colorBufferWriteMask` | `ARKit.ColorMask.*` | [color mask](https://developer.apple.com/documentation/scenekit/scncolormask). Set to ARKit.ColorMask.None so that an object is transparent, but receives deferred shadows. |\n\nMap Properties:\n\n| Prop | Type | Description |\n|---|---|---|\n| `path` | string | Currently `require` is not supported, so this is an absolute link to a local resource placed for example in .xcassets |\n| `color` | string | Color string, only used if path is not provided |\n| `wrapS` | `ARKit.WrapMode.{ Clamp \\| Repeat \\| Mirror }` | [wrapS](https://developer.apple.com/documentation/scenekit/scnmaterialproperty/1395384-wraps?language=objc) |\n| `wrapT` | `ARKit.WrapMode.{ Clamp \\| Repeat \\| Mirror }` |  [wrapT](https://developer.apple.com/documentation/scenekit/scnmaterialproperty/1395382-wrapt?language=objc) |\n| `wrap` | `ARKit.WrapMode.{ Clamp \\| Repeat \\| Mirror }` |  Shorthand for setting both wrapS \u0026 wrapT |\n| `translation` | `{ x, y, z }` | Translate the UVs, equivalent to applying a translation matrix to SceneKit's `transformContents`  |\n| `rotation` | `{ angle, x, y, z }` | Rotate the UVs, equivalent to applying a rotation matrix to SceneKit's `transformContents` |\n| `scale` | `{ x, y, z }` | Scale the UVs, equivalent to applying a scale matrix to SceneKit's `transformContents`  |\n\n\n#### `\u003cARKit.Group /\u003e`\n\nThis Object has no geometry, but is simply a wrapper for other components.\nIt receives all common properties like position, eulerAngles, scale, opacity, etc.\nbut no shape or material.\n\n\n\n#### [`\u003cARKit.Box /\u003e`](https://developer.apple.com/documentation/scenekit/scnbox)\n\n\n| Prop | Type |\n|---|---|\n| `shape` | `{ width, height, length, chamfer }` |\n\nAnd any common object property (position, material, etc.)\n\n#### [`\u003cARKit.Sphere /\u003e`](https://developer.apple.com/documentation/scenekit/scnsphere)\n\n\n| Prop | Type |\n|---|---|\n| `shape` | `{ radius }` |\n\n\n\n#### [`\u003cARKit.Cylinder /\u003e`](https://developer.apple.com/documentation/scenekit/scncylinder)\n\n\n| Prop | Type |\n|---|---|\n| `shape` | `{ radius, height }` |\n\n#### [`\u003cARKit.Cone /\u003e`](https://developer.apple.com/documentation/scenekit/scncone)\n\n\n| Prop | Type |\n|---|---|\n| `shape` | `{ topR, bottomR, height }` |\n\n#### [`\u003cARKit.Pyramid /\u003e`](https://developer.apple.com/documentation/scenekit/scnpyramid)\n\n\n| Prop | Type |\n|---|---|\n| `shape` | `{ width, height, length }` |\n\n#### [`\u003cARKit.Tube /\u003e`](https://developer.apple.com/documentation/scenekit/scntube)\n\n\n| Prop | Type |\n|---|---|\n| `shape` | `{ innerR, outerR, height }` |\n\n#### [`\u003cARKit.Torus /\u003e`](https://developer.apple.com/documentation/scenekit/scntorus)\n\n\n| Prop | Type |\n|---|---|\n| `shape` | `{ ringR, pipeR }` |\n\n#### [`\u003cARKit.Capsule /\u003e`](https://developer.apple.com/documentation/scenekit/scncapsule)\n\n\n| Prop | Type |\n|---|---|\n| `shape` | `{ capR, height }` |\n\n#### [`\u003cARKit.Plane /\u003e`](https://developer.apple.com/documentation/scenekit/scnplane)\n\n\n| Prop | Type |\n|---|---|\n| `shape` | `{ width, height }` |\n\nNotice: planes are veritcally aligned. If you want a horizontal plane, rotate it around the x-axis.\n\n*Example*:\n\nThis is a horizontal plane that only receives shadows, but is invisible otherwise:\n\n```\n\u003cARKit.Plane\n    eulerAngles={{ x: Math.PI / 2 }}\n    position={floorPlane.position}\n    renderingOrder={9999}\n    material={{\n      color: '#ffffff',\n      lightingModel: ARKit.LightingModel.Constant,\n      colorBufferWriteMask: ARKit.ColorMask.None,\n    }}\n    shape={{\n      width: 100,\n      height: 100,\n    }}\n  /\u003e\n```\n\n\n#### [`\u003cARKit.Text /\u003e`](https://developer.apple.com/documentation/scenekit/scntext)\n\n| Prop | Type |\n|---|---|\n| `text` | `String` |\n| `font` | `{ name, size, depth, chamfer }` |\n\n\n\n#### `\u003cARKit.Model /\u003e`\n\nSceneKit only supports `.scn` and `.dae` formats.\n\n\n| Prop | Type |\n|---|---|\n| `model` | `{ file, node, scale, alpha }` |\n\nObjects currently don't take material property.\n\n#### `\u003cARKit.Shape /\u003e`\n\nCreates a extruded shape by an svg path.\nSee https://github.com/HippoAR/react-native-arkit/pull/89 for details\n\n| Prop | Type |\n|---|---|\n| `shape` | `{ pathSvg, extrusion, pathFlatness, chamferRadius, chamferProfilePathSvg, chamferProfilePathFlatness }` |\n\n\n\n#### [`\u003cARKit.Light /\u003e`](https://developer.apple.com/documentation/scenekit/scnlight)\n\nPlace lights on the scene!\n\nYou might set `autoenablesDefaultLighting={false}` on The `\u003cARKit /\u003e` component to disable default lighting. You can use `lightEstimationEnabled` and `ARKit.getCurrentLightEstimation()` to find values for intensity and temperature. This produces much nicer results then `autoenablesDefaultLighting`.\n\n\n\n| Prop | Type | Description |\n|---|---|---|\n| `position` | `{ x, y, z }` |  |\n| `eulerAngles` | `{ x, y, z }` |  |\n| `type` | any of `ARKit.LightType` | see [here for details](https://developer.apple.com/documentation/scenekit/scnlight.lighttype) |\n| `color` | `string` | the color of the light |\n| `temperature` | `Number` | The color temperature of the light |\n| `intensity` | `Number` | The light intensity |\n| `lightCategoryBitMask` | `Number`/`bitmask` | control which objects are lit by this light |\n| `castsShadow` | `boolean` | whether to cast shadows on object |\n| `shadowMode`| `ARKit.ShadowMode.* | Define the shadowmode. Set to `ARKit.ShadowMode.Deferred` to cast shadows on invisible objects (like an invisible floor plane) |\n\n\n\nMost properties described here are also supported: https://developer.apple.com/documentation/scenekit/scnlight\n\nThis feature is new. If you experience any problem, please report an issue!\n\n\n### HOCs (higher order components)\n\n#### withProjectedPosition()\n\nthis hoc allows you to create 3D components where the position is always relative to the same point on the screen/camera, but sticks to a plane or object.\n\nThink about a 3D cursor that can be moved across your table or a 3D cursor on a wall.\n\nYou can use the hoc like this:\n\n```\nconst Cursor3D = withProjectedPosition()(({positionProjected, projectionResult}) =\u003e {\n  if(!projectionResult) {\n    // nothing has been hit, don't render it\n    return null;\n  }\n  return (\n    \u003cARKit.Sphere\n      position={positionProjected}\n      transition={{duration: 0.1}}\n      shape={{\n        radius: 0.1\n        }}\n    /\u003e\n  )\n})\n\n```\n\nIt's recommended that you specify a transition duration (0.1s works nice), as the position gets updated rapidly, but slightly throttled.\n\nNow you can use your 3D cursor like this:\n\n##### Attach to a given detected horizontal plane\n\nGiven you have detected a plane with onPlaneDetected, you can make the cursor stick to that plane:\n\n```\n\u003cCursor3D projectPosition={{\n  x: windowWidth / 2,\n  y: windowHeight / 2,\n  plane: \"my-planeId\"\n  }}\n/\u003e\n\n```\n\nIf you don't have the id, but want to place the cursor on a certain plane (e.g. the first or last one), pass a function for plane. This function will get all hit-results and you can return the one you need:\n\n```\n\u003cCursor3D projectPosition={{\n  x: windowWidth / 2,\n  y: windowHeight / 2,\n  plane: (results) =\u003e results.length \u003e 0 ? results[0] : null\n  }}\n/\u003e\n\n```\n\nYou can also add a property `onProjectedPosition` to your cursor which will be called with the hit result on every frame\n\nIt uses https://developer.apple.com/documentation/arkit/arframe/2875718-hittest with some default options. Please file an issue or send a PR if you need more control over the options here!\n\n##### Attach to a given 3D object\n\nYou can attach the cursor on a 3D object, e.g. a non-horizontal-plane or similar:\n\nGiven there is some 3D object on your scene with `id=\"my-nodeId\"`\n\n```\n\u003cCursor3D projectPosition={{\n  x: windowWidth / 2,\n  y: windowHeight / 2,\n  node: \"my-nodeId\"\n  }}\n/\u003e\n```\n\nLike with planes, you can select the node with a function.\n\nE.gl you have several \"walls\" with ids \"wall_1\", \"wall_2\", etc.\n\n```\n\u003cCursor3D projectPosition={{\n  x: windowWidth / 2,\n  y: windowHeight / 2,\n  node: results =\u003e results.find(r =\u003e r.id.startsWith('wall_')),\n  }}\n/\u003e\n```\n\n\nIt uses https://developer.apple.com/documentation/scenekit/scnscenerenderer/1522929-hittest with some default options. Please file an issue or send a PR if you need more control over the options here!\n\n\n## FAQ:\n\n#### Which permissions does this use?\n\n- **camera access** (see section iOS Project configuration above). The user is asked for permission, as soon as you mount an `\u003cARKit /\u003e` component or use any of its API. If user denies access, you will get an error in `onARKitError`\n- **location service**: only needed if you use `ARKit.ARWorldAlignment.GravityAndHeading`.\n\n#### Is there an Android / ARCore version?\n\nNot yet, but there has been a proof-of-concept: https://github.com/HippoAR/react-native-arkit/issues/14. We are looking for contributors to help backporting this proof-of-conept to react-native-arkit.\n\n#### I have another question...\n\n[**Join Slack!**](https://join.slack.com/t/react-native-ar/shared_invite/enQtMjUzMzg3MjM0MTQ5LWU3Nzg2YjI4MGRjMTM1ZDBlNmIwYTE4YmM0M2U0NmY2YjBiYzQ4YzlkODExMTA0NDkwMzFhYWY4ZDE2M2Q4NGY)\n\n\n## Contributing\n\nIf you find a bug or would like to request a new feature, just [open an issue](https://github.com/HippoAR/react-native-arkit/issues/new). Your contributions are always welcome! Submit a pull request and see [`CONTRIBUTING.md`](CONTRIBUTING.md) for guidelines.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-native-ar%2Freact-native-arkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-native-ar%2Freact-native-arkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-native-ar%2Freact-native-arkit/lists"}