{"id":20444860,"url":"https://github.com/snapchat/camera-kit-react-native","last_synced_at":"2025-04-04T15:05:16.187Z","repository":{"id":231196036,"uuid":"775146571","full_name":"Snapchat/camera-kit-react-native","owner":"Snapchat","description":"Camera Kit wrapper for React Native","archived":false,"fork":false,"pushed_at":"2025-03-15T01:49:31.000Z","size":2067,"stargazers_count":88,"open_issues_count":2,"forks_count":10,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-28T14:11:18.606Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Snapchat.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":"2024-03-20T21:02:50.000Z","updated_at":"2025-03-17T17:55:15.000Z","dependencies_parsed_at":"2024-04-03T00:55:57.654Z","dependency_job_id":"76075e06-887f-4baf-9b6c-5d9fb15a7a38","html_url":"https://github.com/Snapchat/camera-kit-react-native","commit_stats":null,"previous_names":["snapchat/camera-kit-react-native"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Snapchat%2Fcamera-kit-react-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Snapchat%2Fcamera-kit-react-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Snapchat%2Fcamera-kit-react-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Snapchat%2Fcamera-kit-react-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Snapchat","download_url":"https://codeload.github.com/Snapchat/camera-kit-react-native/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247198446,"owners_count":20900079,"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":"2024-11-15T10:09:27.631Z","updated_at":"2025-04-04T15:05:16.168Z","avatar_url":"https://github.com/Snapchat.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Camera Kit wrapper for React Native\n\n\u003e [!IMPORTANT] \n\u003e This repository contains example projects to help you get started with Camera Kit integrations. The software is provided \"as is\" without any warranties or guarantees, and it is not officially supported for production use.\n\u003e\n\u003e Advanced functionalities like Remote API support, Inclusive Camera features, etc. are not supported in this wrapper implementation. If your project needs missing features, feel free to implement them yourself and submit a PR to this repo or use native development environment.\n\nThe project provides a wrapper to Snap's [Camera Kit](https://ar.snap.com/camera-kit) solution that simplifies and speeds up the integration process for developers building React Native apps. While development on native platforms is still a recommended way, this wrapper provides a convenient way to implement basic functionalities of Camera Kit in React Native application.\n\n## Installation\n\nYou can install the Camera Kit React Native package using npm:\n\n```sh\nnpm install @snap/camera-kit-react-native\n```\n\n## Usage\n\nStart with importing the following modules:\n\n```js\nimport { CameraKitContext } from '@snap/camera-kit-react-native';\nimport { useCameraKit } from '@snap/camera-kit-react-native';\n```\n\n`CameraKitContext` component will contain global configuration for CameraKit session whereas `useCameraKit` hook will provide API for managing native CameraKit session, load lenses, apply lens, etc.\n\nFor Android, make sure you have following permissions defined in `AndroidManifest.xml` file:\n\n```xml\n\u003cuses-permission android:name=\"android.permission.CAMERA\" /\u003e\n\n\u003c!-- optionally, if you want to record audio: --\u003e\n\u003cuses-permission android:name=\"android.permission.RECORD_AUDIO\" /\u003e\n```\n\n### Please refer to the [example](./example) directory for detailed usage examples on how to integrate and use this wrapper in your React Native project.\n\n***Usage example:***\n```js\nimport { PreviewView, useCamera } from \"@snap/camera-kit-react-native\"\nimport { useEffect } from \"react\"\nimport { View, FlatList, Pressable, Image } from \"react-native\"\nimport { Lenses } from \"./lenses\"\n\nexport function App() {\n    const { setPosition } = useCamera();\n\n    useEffect(async () =\u003e {\n        setPosition(\"front\");\n    })\n\n    return (\n        \u003cCameraKitContext apiToken=\"\u003cAPI Token from Camera Kit Portal\u003e\" safeArea={{top: 100, bottom: 200}}\u003e\n            \u003cPreviewView /\u003e\n            \u003cLenses /\u003e\n        \u003c/CameraKitContext\u003e\n    )\n}\n```\n\n***Lens carousel example:***\n```js\nimport { PreviewView, useCameraKitManager } from \"@snap/camera-kit-react-native\"\nimport { useEffect } from \"react\"\nimport { View, FlatList, Pressable, Image } from \"react-native\"\nimport { useCameraManager } from \"./partner-camera\"\n\nfunction Lenses({ groupId }: { groupId: string }) {\n    const { loadLenses, applyLens } = useCameraKitManager();\n    const [lenses, setLenses] = useState([]);\n\n    useEffect(async () =\u003e {\n        const getLenses = async () =\u003e {\n            const lenses = await loadLenses(groupId);\n            setLenses(lenses);\n        }\n\n        getLenses().catch(console.error)\n\n        return undefined;\n    }, [loadLenses])\n\n    return (\n        \u003cView style={{position: 'absolute'}}\u003e\n            \u003cFlatList\n                horizontal={true}\n                data={lenses}\n                renderItem={item =\u003e (\n                    \u003cPressable\n                        onPress={() =\u003e {\n                            applyLens(item.item.id);\n                        }}\u003e\n                        \u003cImage\n                            source={{uri: item.item.icon}}\n                        /\u003e\n                    \u003c/Pressable\u003e\n                )}\n                keyExtractor={item =\u003e item.id}\n            /\u003e\n        \u003c/View\u003e\n    )\n}\n```\n\n## Contributing\nThank you for your interest in improving our project!  :pray:\n\nHere's how you can contribute:\n\n1. Fork and clone this repository.\n2. Install dependencies by running `yarn install --immutable \u0026\u0026 yarn prepare`.\n3. Make your changes.\n4. Test your changes with the example app using `yarn example start`. Ensure everything works as expected.\n5. Update the documentation if necessary by running `yarn docs`.\n6. Submit a pull request with a clear description of your changes.\n\n## License\nPlease refer to the [LICENSE](/LICENSE) file for license information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnapchat%2Fcamera-kit-react-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsnapchat%2Fcamera-kit-react-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnapchat%2Fcamera-kit-react-native/lists"}