{"id":24258403,"url":"https://github.com/icanb/react-arkit","last_synced_at":"2025-08-03T19:16:31.820Z","repository":{"id":57349532,"uuid":"99746700","full_name":"icanb/react-arkit","owner":"icanb","description":"AR library for React-Native based on ARKit","archived":false,"fork":false,"pushed_at":"2018-01-04T20:57:15.000Z","size":33,"stargazers_count":59,"open_issues_count":1,"forks_count":8,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-01-03T08:07:38.252Z","etag":null,"topics":["arkit","augmented-reality","react-native","react-native-component","reactjs","swift"],"latest_commit_sha":null,"homepage":null,"language":"Swift","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/icanb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-09T00:03:18.000Z","updated_at":"2024-01-28T07:11:56.000Z","dependencies_parsed_at":"2022-09-11T14:41:29.217Z","dependency_job_id":null,"html_url":"https://github.com/icanb/react-arkit","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/icanb%2Freact-arkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icanb%2Freact-arkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icanb%2Freact-arkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icanb%2Freact-arkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/icanb","download_url":"https://codeload.github.com/icanb/react-arkit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233834609,"owners_count":18737578,"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":["arkit","augmented-reality","react-native","react-native-component","reactjs","swift"],"created_at":"2025-01-15T05:37:23.941Z","updated_at":"2025-01-15T05:37:24.519Z","avatar_url":"https://github.com/icanb.png","language":"Swift","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React ARKit\n\nAR library for React-Native, based on ARKit. Makes it super easy to use all the augmented reality features of iOS 11. \n\n#####  [Check out the example app using react-arkit](https://github.com/icanb/react-arkit-example)\n\n\u003cimg src=\"https://user-images.githubusercontent.com/803072/29694758-684de644-88f3-11e7-8c6d-bf7b55de44a3.PNG\" style=\"display:inline';\" width=\"200\" alt=\"Custom model with plane detection\"\u003e\n\n\n_iOS Only, until Android comes up with their version of ARKit_\n\n[![npm version](https://img.shields.io/npm/v/react-arkit.svg?style=flat)](https://www.npmjs.com/package/react-arkit)\n[![npm downloads](https://img.shields.io/npm/dm/react-arkit.svg?style=flat)](https://www.npmjs.com/package/react-arkit)\n\nLibrary for create augmented reality applications with JavaScript, using declarative UI components in ReactJS. Allows for any geometric shape, as well as custom 3D models.\n\n\n## Install\n\nInstall the package, inside your React-Native app:\n\n```bash\n$ npm install react-arkit --save\n```\n\nLink the package to the existing app\n\n```bash\nreact-native link react-native-arkit\n```\n\nMake sure that your app allows camera usage. ([How?](https://github.com/icanb/react-arkit/blob/master/SETUP.md#camera-permissions))\nMake sure that your app supports Swift runtime. ([How?](https://github.com/icanb/react-arkit/blob/master/SETUP.md#making-the-project-swift-compatible))\n\nOr just clone the [example app](https://github.com/icanb/react-arkit-example) and make edits on it.\n\n## Usage\n\nImport the ``ARScene`` component, and other node types that you need:\n\n```javascript\nimport ARScene, { ARBoxNode, ARTextNode, ARNode } from 'react-arkit';\n```\n\nDefine a scene:\n\n```javascript\n\u003cARScene style={{ height: 400, width: 300 }}\u003e\n{`Other AR nodes`}\n\u003c/ARScene\u003e\n```\n\nAdd any node in it and manipulate freely:\n\n```javascript\n\u003cARScene style={{ height: 400, width: 300 }}\n    debugEnabled\n    onPlaneDetected={({id, alignment, node, center, extent}) =\u003e {\n        console.log(\"Detected plane:\", id);\n    }}\n    onPlaneUpdated={({id, alignment, node, center, extent}) =\u003e {\n        console.log(\"Updated plane:\", id);\n    }}\u003e\n    \u003cARBoxNode\n        geoposition={{x: -0.5, y: 0.1, z:-1.0}}\n        size={{ height: 0.05,\n                width: 0.05,\n                length: 0.05,\n                chamferRadius: 0.01 }}\n        color='#00F'/\u003e\n    \u003cARNode\n        modelAssetPath={'Art.scnassets/billboard.dae:Billboard'}\n        geoposition={{x: 0, y: 0.1, z:-1.0}}/\u003e\n    \u003cARTextNode\n      text={'AR is Awesome'}\n        color='#FF0'\n        size={{ fontSize: 0.2, depth: 0.2 }}\n        geoposition={{x: 0.5, y: 0.1, z:-1.0}}/\u003e\n\u003c/ARScene\u003e\n```\n\nRefer to the [example app](https://github.com/icanb/react-arkit-example/blob/master/index.ios.js) for more detailed sample implementations.\n\n## [Documentation](DOCUMENTATION.md)\n\n\n* #### [ARScene](DOCUMENTATION.md#arscene)\n    Parent object that represents object represents a three-dimensional scene and its contents. (Props: `debugEnabled`, `run`)\n\n* #### [ARNode](DOCUMENTATION.md#arnode)\n    A structural element of in the 3D coordinate space, representing a position and transform in based on the parent node\\scene. Can also represent custom 3d models as well as basic geometric shapes. (Props: `geoposition`, `size`, `color`, `modelAssetPath`)\n\n    * ##### [ARBoxNode](DOCUMENTATION.md#arboxnode)\n        Node that has the box geometry. Subclass of ARNode.\n\n    * ##### [ARSphereNode](DOCUMENTATION.md#arspherenode)\n        Node that has the sphere geometry. Subclass of ARNode.\n\n    * ##### [ARTextNode](DOCUMENTATION.md#artextnode)\n        Node that has the shape of a given text. Subclass of ARNode. (Additional prop: `text`)\n\n\n## Contributing\n\nAny kind of contributions are very welcome. This library is still very bare-bones and has a lot of room for improvement. Please make sure to read the [Contributing Guide](CONTRIBUTING.md) and feel free to make pull-requests!\n\nFor issues or feedback, please create an [Issue](https://github.com/icanb/react-arkit/issues/new). For questions, or help, please get in touch with @icanb.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficanb%2Freact-arkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ficanb%2Freact-arkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficanb%2Freact-arkit/lists"}