{"id":21373748,"url":"https://github.com/riderodd/react-native-ar","last_synced_at":"2026-02-28T09:01:42.363Z","repository":{"id":36962952,"uuid":"483252719","full_name":"riderodd/react-native-ar","owner":"riderodd","description":"React native AR model viewer","archived":false,"fork":false,"pushed_at":"2023-12-04T07:07:06.000Z","size":22283,"stargazers_count":65,"open_issues_count":21,"forks_count":12,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-07-13T08:43:27.232Z","etag":null,"topics":["android","ar","arcore","arkit","ios","react","react-native","sceneform","sceneview"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","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/riderodd.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-19T13:14:04.000Z","updated_at":"2025-06-27T08:51:46.000Z","dependencies_parsed_at":"2023-02-12T21:15:58.340Z","dependency_job_id":"c85dfd5b-b52c-4516-90da-4f27db1512c6","html_url":"https://github.com/riderodd/react-native-ar","commit_stats":{"total_commits":100,"total_committers":4,"mean_commits":25.0,"dds":0.5,"last_synced_commit":"ff5e5b96797eefe690dbc8b5f3affede3428cae3"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/riderodd/react-native-ar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riderodd%2Freact-native-ar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riderodd%2Freact-native-ar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riderodd%2Freact-native-ar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riderodd%2Freact-native-ar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/riderodd","download_url":"https://codeload.github.com/riderodd/react-native-ar/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riderodd%2Freact-native-ar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29929115,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-27T19:37:42.220Z","status":"online","status_checked_at":"2026-02-28T02:00:07.010Z","response_time":90,"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":["android","ar","arcore","arkit","ios","react","react-native","sceneform","sceneview"],"created_at":"2024-11-22T08:29:30.205Z","updated_at":"2026-02-28T09:01:42.321Z","avatar_url":"https://github.com/riderodd.png","language":"Kotlin","funding_links":[],"categories":["OOM-Leaks-Crash"],"sub_categories":["AR-VR"],"readme":"# React Native AR Viewer\n[![npm version](https://img.shields.io/npm/v/react-native-ar-viewer.svg)](https://www.npmjs.com/package/react-native-ar-viewer)\n\nAR viewer for react native that uses Sceneform on Android and ARKit on iOS\n\n## Installation\n\n```sh\nnpm install react-native-ar-viewer\n```\n\n### Android\nRequired AR features:\n\n- Add `com.google.ar.core` meta data to your `AndroidManifest.xml` as follows:\n\n```xml\n\u003cmanifest xmlns:android=\"http://schemas.android.com/apk/res/android\" xmlns:tools=\"http://schemas.android.com/tools\"\u003e\n  ...\n  \u003capplication\u003e\n    ...\n    \u003cmeta-data android:name=\"com.google.ar.core\" android:value=\"required\" tools:replace=\"android:value\" /\u003e\n  \u003c/application\u003e\n  ...\n\u003c/manifest\u003e\n```\n\n- Check that your `\u003cmanifest\u003e` tag contains `xmlns:tools=\"http://schemas.android.com/tools\"` attribute.\n\n### iOS\n- Remember to add `NSCameraUsageDescription` entry in your Info.plist with a text explaining why you request camera permission.\n\n- In XCode file tree, go to Pods \u003e Development pods \u003e react-native-ar-viewer, right-click on \"Add Files to Pods\"... Then select the environment.skybox folder in your node_modules/react-native-ar-viewer/ios folder. In add file window, check \"react-native-ar-viewer-ARViewerBundle\". It should appear with a blue icon on the file tree. Check if res.hdr is present inside, if not, add it manually. It should look like that:\n![](https://raw.githubusercontent.com/riderodd/react-native-ar/main/docs/mac-bundle-tree.png)\n\n## File formats\nThe viewer only supports `USDZ` files for iOS and `GLB` for Android. Other formats may work, but are not officialy supported.\n\n## Usage\n\nYou should download your model locally using for example React Native File System in order to run the viewer on iOS. Android supports natively file URL (https:// instead of file://)\n\n```js\nimport { ArViewerView } from \"react-native-ar-viewer\";\nimport { Platform } from 'react-native';\n// ...\n\n\u003cArViewerView \n    style={{flex: 1}}\n    model={Platform.OS === 'android' ? 'dice.glb' : 'dice.usdz'}\n    lightEstimation\n    manageDepth\n    allowRotate\n    allowScale\n    allowTranslate\n    disableInstantPlacement\n    onStarted={() =\u003e console.log('started')}\n    onEnded={() =\u003e console.log('ended')}\n    onModelPlaced={() =\u003e console.log('model displayed')}\n    onModelRemoved={() =\u003e console.log('model not visible anymore')}\n    planeOrientation=\"both\" /\u003e\n```\n\n### Props\n\n| Prop | Type | Description | Required |\n|---|---|---|---|\n| `model`| `string` | Enables ambient light estimation (see below) | Yes |\n| `lightEstimation`| `bool` | Enables ambient light estimation (see below) | No |\n| `manageDepth` | `bool` | Enables depth estimation and occlusion (only iOS, see below) | No |\n| `allowRotate` | `bool` | Allows to rotate model | No |\n| `allowScale` | `bool` | Allows to scale model | No |\n| `allowTranslate` | `bool` | Allows to translate model | No |\n| `disableInstructions` | `bool` | Disables instructions view | No |\n| `disableInstantPlacement` | `bool` | Disables placement on load | No |\n| `planeOrientation` | `\"horizontal\"`, `\"vertical\"`, `\"both\"` or `\"none\"` | Sets plane orientation (default: `both`) | No |\n\n#### lightEstimation:\n\n| With | Without |\n|---|---|\n|![](https://raw.githubusercontent.com/riderodd/react-native-ar/main/docs/light.jpg)|![](https://raw.githubusercontent.com/riderodd/react-native-ar/main/docs/no-light.jpg)|\n\n#### manageDepth:\n\n| With | Without |\n|---|---|\n|![](https://raw.githubusercontent.com/riderodd/react-native-ar/main/docs/depth.jpg)|![](https://raw.githubusercontent.com/riderodd/react-native-ar/main/docs/no-depth.jpg)|\n\n#### Others:\n\n| allowRotate | allowScale | planeOrientation: both |\n|---|---|---|\n|![](https://raw.githubusercontent.com/riderodd/react-native-ar/main/docs/rotate.gif)|![](https://raw.githubusercontent.com/riderodd/react-native-ar/main/docs/scale.gif)|![](https://raw.githubusercontent.com/riderodd/react-native-ar/main/docs/planeOrientation.gif)|\n\n### Events\n\n| Prop | Parameter | Description |\n|---|---|---|\n| `onStarted` | `none` | Triggers on AR session started |\n| `onEnded` | `none` | Triggers on AR session ended |\n| `onModelPlaced` | `none` | Triggers when model is placed |\n| `onModelRemoved` | `none` | Triggers when model is removed |\n| `onError` | `{ message: string }` | Triggers on any error and returns an object containing the error message |\n\n### Commands\n\nCommands are sent using refs like the following example:\n\n```js\n  // ...\n  const ref = React.useRef() as React.MutableRefObject\u003cArViewerView\u003e;\n  \n  const reset = () =\u003e {\n    ref.current?.reset();\n  };\n  \n  return (\n    \u003cArViewerView\n      model={yourModel}\n      ref={ref} /\u003e\n  );\n  // ...\n```\n\n| Command | Args | Return | Description |\n|---|---|---|---|\n| `reset()` | `none` | `void` | Removes model from plane |\n| `rotate()` | `x, y, z` | `void` | Manually rotates the model using `yaw as x`, `pitch as y` and `roll as z` in degrees |\n| `takeScreenshot()` | `none` | `Promise\u003cString\u003e` | Takes a screenshot of the current view (camera + model) and returns a base64 jpeg string as a promise |\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Friderodd%2Freact-native-ar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Friderodd%2Freact-native-ar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Friderodd%2Freact-native-ar/lists"}