{"id":18896216,"url":"https://github.com/meksiabdou/react-native-barcode-mask","last_synced_at":"2025-04-15T01:51:13.449Z","repository":{"id":47393543,"uuid":"516094220","full_name":"meksiabdou/react-native-barcode-mask","owner":"meksiabdou","description":"BarcodeMask Component For React-Native Camera","archived":false,"fork":false,"pushed_at":"2024-02-23T11:14:33.000Z","size":1857,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-30T12:45:28.758Z","etag":null,"topics":["barcode","barcode-mask","camera","react-native"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/meksiabdou.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-07-20T18:31:14.000Z","updated_at":"2024-05-12T20:51:48.000Z","dependencies_parsed_at":"2024-11-08T08:36:24.685Z","dependency_job_id":"2c90617b-6381-40c1-b9b8-35e959043879","html_url":"https://github.com/meksiabdou/react-native-barcode-mask","commit_stats":{"total_commits":14,"total_committers":1,"mean_commits":14.0,"dds":0.0,"last_synced_commit":"520bd3ad1222a4889ac75da7da7ffa0aa74e3700"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meksiabdou%2Freact-native-barcode-mask","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meksiabdou%2Freact-native-barcode-mask/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meksiabdou%2Freact-native-barcode-mask/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meksiabdou%2Freact-native-barcode-mask/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/meksiabdou","download_url":"https://codeload.github.com/meksiabdou/react-native-barcode-mask/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248991539,"owners_count":21194894,"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":["barcode","barcode-mask","camera","react-native"],"created_at":"2024-11-08T08:32:56.695Z","updated_at":"2025-04-15T01:51:13.416Z","avatar_url":"https://github.com/meksiabdou.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @meksiabdou/react-native-barcode-mask\n\nBarcodeMask Component For React-Native Camera\n\n![bundlephobia](https://badgen.net/bundlephobia/minzip/@meksiabdou/react-native-barcode-mask)\n![downloads](https://badgen.net/npm/dt/@meksiabdou/react-native-barcode-mask)\n![npm](https://badgen.net/npm/v/@meksiabdou/react-native-barcode-mask)\n![license](https://badgen.net/github/license/meksiabdou/react-native-barcode-mask)\n[![Known Vulnerabilities](https://snyk.io/test/github/meksiabdou/react-native-barcode-mask/badge.svg?targetFile=package.json)](https://snyk.io/test/github/meksiabdou/react-native-barcode-mask?targetFile=package.json)\n\n[![Watch the video](https://i.imgur.com/VOYum4oh.jpg)](https://i.imgur.com/y7JEoAF.mp4)\n\n## Requirements\n\n- [react-native-reanimated v2.2.0 or higher](https://github.com/software-mansion/react-native-reanimated)\n\n## Installation\n\n```sh\nnpm install @meksiabdou/react-native-barcode-mask\n```\n\n```sh\nyarn add @meksiabdou/react-native-barcode-mask\n```\n\n## Usage\n\n```tsx\nimport React, from 'react';\nimport {View, TouchableOpacity, StyleSheet, Linking, Text} from 'react-native';\nimport { Camera, useCameraDevices } from 'react-native-vision-camera';\nimport BarcodeMask from 'react-native-barcode-mask';\n\nconst App = () =\u003e {\n  const [hasPermission, setHasPermission] = useState(false);\n  const devices = useCameraDevices();\n  const device = devices.back;\n\n  const requestCameraPermission = async () =\u003e {\n    return await Camera.requestCameraPermission();\n  };\n\n  useEffect((): ReturnType\u003cany\u003e =\u003e {\n    let isMounted = true;\n    requestCameraPermission().then(permission =\u003e {\n      if (isMounted) {\n        if (permission === 'denied') {\n          Linking.openSettings();\n        }\n        setHasPermission(permission === 'authorized');\n      }\n    });\n    return () =\u003e (isMounted = false);\n  }, []);\n\n  if (device == null || !hasPermission) {\n    return \u003cView style={styles.container} /\u003e;\n  }\n\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cCamera\n        device={device}\n        style={StyleSheet.absoluteFill}\n        isActive={true}\n        torch={'off'}\n      /\u003e\n      \u003cBarcodeMask\n        lineAnimationDuration={2000}\n        showAnimatedLine={true}\n        width={width}\n        height={height}\n        outerMaskOpacity={0.4}\n        backgroundColor=\"#eee\"\n        edgeColor={'#fff'}\n        edgeBorderWidth={4}\n        edgeHeight={25}\n        edgeWidth={25}\n        edgeRadius={5}\n        animatedLineColor={'#0097AB'}\n        animatedLineThickness={3}\n        animatedLineOrientation=\"horizontal\"\n      /\u003e\n    \u003c/View\u003e\n  );\n\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    flexDirection: 'column',\n    backgroundColor: '#000',\n    //paddingVertical: 50,\n  },\n});\n\nexport default App;\n\n```\n\n### BarcodeMaskProps\n\n| name                    | type                       | description                                      | default      |\n| ----------------------- | -------------------------- | ------------------------------------------------ | ------------ |\n| width                   | number                     | Width of the Barcode Finder Area                 | 280          |\n| height                  | number                     | Height of the Barcode Finder Area                | 230          |\n| edgeWidth               | number                     | Width of corner edges                            | 20           |\n| edgeHeight              | number                     | Height of corner edges                           | 20           |\n| edgeColor               | string                     | Color of corner edges                            | #fff         |\n| edgeRadius              | number                     | Border Radius of corner edges                    | 0            |\n| edgeBorderWidth         | number                     | Thickness of corner edges                        | 4            |\n| backgroundColor         | string                     | Background color of Outer Finder Area            | #eee         |\n| maskOpacity             | number                     | Opacity of Outer Finder Area                     | 1            |\n| showAnimatedLine        | boolean                    | Whether to show Animated Line                    | true         |\n| animatedLineThickness   | number                     | Thickness of Animated Line                       | 2            |\n| animatedLineOrientation | 'vertical' or 'horizontal' | Orientation that the Animated Line will be drawn | 'horizontal' |\n| animatedLineColor       | string                     | Color of Animated Line                           | #fff         |\n| animationDuration       | number                     | Duration of Animated Line animation (in ms)      | 20000        |\n| isActive                | boolean                    | Animation line active or not                     | true         |\n| onPress                 | function                   | #                                                | undefined    |\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\n---\n\nMade with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeksiabdou%2Freact-native-barcode-mask","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeksiabdou%2Freact-native-barcode-mask","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeksiabdou%2Freact-native-barcode-mask/lists"}