{"id":15046197,"url":"https://github.com/reime005/react-native-camera-hooks","last_synced_at":"2025-04-07T11:04:14.870Z","repository":{"id":34814298,"uuid":"180657208","full_name":"reime005/react-native-camera-hooks","owner":"reime005","description":"React Hooks and API wrapper for the react-native-camera module. GitHub Actions CI/CD + Automatic Release","archived":false,"fork":false,"pushed_at":"2023-03-08T08:20:14.000Z","size":3150,"stargazers_count":107,"open_issues_count":12,"forks_count":16,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-31T10:01:36.461Z","etag":null,"topics":["cicd","github-actions","github-releases","hacktoberfest","hooks","javascript","react-native","react-native-camera","typescript"],"latest_commit_sha":null,"homepage":"","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/reime005.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2019-04-10T20:17:46.000Z","updated_at":"2024-07-08T01:36:45.000Z","dependencies_parsed_at":"2024-06-18T18:17:07.941Z","dependency_job_id":"ed36549f-0ef4-4852-9145-ba413dd44a16","html_url":"https://github.com/reime005/react-native-camera-hooks","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reime005%2Freact-native-camera-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reime005%2Freact-native-camera-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reime005%2Freact-native-camera-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reime005%2Freact-native-camera-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reime005","download_url":"https://codeload.github.com/reime005/react-native-camera-hooks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247640461,"owners_count":20971557,"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":["cicd","github-actions","github-releases","hacktoberfest","hooks","javascript","react-native","react-native-camera","typescript"],"created_at":"2024-09-24T20:52:50.352Z","updated_at":"2025-04-07T11:04:14.829Z","avatar_url":"https://github.com/reime005.png","language":"JavaScript","readme":"\u003cp\u003e\u0026nbsp;\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"logo.png\" width=\"350\" title=\"hover text\"\u003e\n  \u003cp align='center'\u003eHooks for React Native Camera\u003c/p\u003e\n\u003c/p\u003e\n\u003cp\u003e\u0026nbsp;\u003c/p\u003e\n\n\u003cp\u003e\n\nReact Native Camera Hooks provides you with functionality to use the React Native Camera API with Functional Components. \n\n\u003c/p\u003e\n\n\u003cp\u003e\u0026nbsp;\u003c/p\u003e\n\n[![npm](https://img.shields.io/npm/v/react-native-camera-hooks.svg?style=flat-square)](http://npm.im/react-native-camera-hooks)\n![GitHub](https://img.shields.io/github/license/reime005/react-native-camera-hooks.svg?style=flat-square)\n[![CircleCI](https://circleci.com/gh/reime005/react-native-camera-hooks.svg?style=svg)](https://circleci.com/gh/reime005/react-native-camera-hooks)\n![Deploy](https://github.com/reime005/react-native-camera-hooks/workflows/Deploy/badge.svg)\n\n```javascript\nimport { View, TouchableOpacity, TouchableWithoutFeedback } from 'react-native';\nimport { RNCamera } from 'react-native-camera';\nimport { useCamera } from 'react-native-camera-hooks';\n\nconst FunctionalComponentExample = ({ initialProps }) =\u003e {\n  const [\n    { cameraRef, type, ratio, autoFocus, autoFocusPoint, isRecording },\n    {\n      toggleFacing,\n      touchToFocus,\n      textRecognized,\n      facesDetected,\n      recordVideo,\n      setIsRecording,\n    },\n  ] = useCamera(initialProps);\n\n  return (\n    \u003cView style={{ flex: 1 }}\u003e\n      \u003cRNCamera\n        ref={cameraRef}\n        autoFocusPointOfInterest={autoFocusPoint.normalized}\n        type={type}\n        ratio={ratio}\n        style={{ flex: 1 }}\n        autoFocus={autoFocus}\n        onTextRecognized={textRecognized}\n        onFacesDetected={facesDetected}\n      /\u003e\n\n      \u003cTouchableWithoutFeedback\n        style={{\n          flex: 1,\n        }}\n        onPress={touchToFocus}\n      /\u003e\n\n      \u003cTouchableOpacity\n        testID=\"button\"\n        onPress={toggleFacing}\n        style={{ width: '100%', height: 45 }}\u003e\n        {type}\n      \u003c/TouchableOpacity\u003e\n\n      {!isRecording \u0026\u0026 (\n        \u003cTouchableOpacity\n          onPress={async () =\u003e {\n            try {\n              setIsRecording(true);\n              const data = await recordVideo();\n              console.warn(data);\n            } catch (error) {\n              console.warn(error);\n            } finally {\n              setIsRecording(false);\n            }\n          }}\n          style={{ width: '100%', height: 45 }}\n        /\u003e\n      )}\n    \u003c/View\u003e\n  );\n};\n```\n\n## Features\n\n  - React Hooks Support: Use React Native Camera with Functional Components\n  - Wrapper around the Camera API, that makes the usage easier\n  - TypeScript support\n\nConstants are defined in [constants](./src/constants.ts) and [initalState](./src/initialState.ts).\n\n|Function|Description|\n|---|---|\n|`useCamera(initialState)`|Includes all camera hooks described below. See also the example above|\n|`useZoom(state)`|Zoom feature. Includes `zoom`, `setZoom`, `zoomIn` (increment by 0.01) and `zoomOut` (decrement by 0.1) |\n|`useToggleFacing(state, modes)`|Toggles between two values (front and back side of the camera). Includes `type`, `toggleFacing`.|\n|`useAutoFocus(state, modes)`|Toggles between two values (focus on or off). Includes `autoFocus` and `toggleAutoFocus`.|\n|`useWhiteBalance(state)`|Toggles between white balance values. Includes `whiteBalance`, `toggleWB` and `setWhiteBalance`.|\n|`useFlash(state)`|Toggles between flash modes. Includes `flash`, `toggleFlash` and `setFlash`.|\n|`useAutoFocusTouch(state)`|Touch to focus feature. Includes `autoFocusPoint`, `touchToFocus` (callback to be used in `onPress` for example) and `setAutoFocusPoint`.|\n|`useTextRecognition(state)`|Text recognition feature. Includes `textBlocks`, `setTextblocks` and `textRecognized` (callback).|\n|`useFaceDetection(state)`|Face detection feature. Includes `faces`, `setFaces` and `facesDetected` (callback).|\n|`useBarcodeDetection(state)`|Barcode detection feature. Includes `barcodes`, `setBarcodes` and `barcodeRecognized` (callback).|\n|`takePicture({ cameraRef }, options)`|Function to take a picture. Returns a Promise with the result. `defaultPictureTakeOptions` can also be imported from the same file.|\n|`recordVideo({ cameraRef }, options)`|Function to record a video. Returns a Promise with the result. `defaultVideoRecordOptions` can also be imported from the same file.|\n|`stopRecording({ cameraRef })`|Function to stop recording. Returns a Promise.|\n|`pausePreview({ cameraRef })`|Function to pause the camera preview. Returns a Promise with the result as a boolean.|\n|`resumePreview({ cameraRef })`|Function to resume the camera preview. Returns a Promise with the result as a boolean.|\n\n\u003cp\u003e\u0026nbsp;\u003c/p\u003e\n\n---\n\n## Installation\n\nTo install react-native-camera-hooks, do either\n\n```bash\nnpm install --save react-native-camera-hooks\n```\n\nor\n\n```bash\nyarn add react-native-camera-hooks\n```\n\nNote that this requires a react-native version \u003e 0.59 which supports React Hooks. Also, react-native-camera has to be installed.\n\n\u003cp\u003e\u0026nbsp;\u003c/p\u003e\n\n---\n\n## TODO\n\n* Improve TypeScript support\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freime005%2Freact-native-camera-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freime005%2Freact-native-camera-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freime005%2Freact-native-camera-hooks/lists"}