{"id":15634645,"url":"https://github.com/nartc/react-native-barcode-mask","last_synced_at":"2025-04-09T10:04:49.228Z","repository":{"id":36461341,"uuid":"225209797","full_name":"nartc/react-native-barcode-mask","owner":"nartc","description":"BarcodeMask Component for RNCamera ","archived":false,"fork":false,"pushed_at":"2025-04-01T16:32:55.000Z","size":2028,"stargazers_count":137,"open_issues_count":43,"forks_count":15,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-02T09:03:52.835Z","etag":null,"topics":["react","react-native-camera","reactnative","typescript"],"latest_commit_sha":null,"homepage":null,"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/nartc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":["nartc"]}},"created_at":"2019-12-01T18:37:14.000Z","updated_at":"2025-03-29T03:21:44.000Z","dependencies_parsed_at":"2023-10-18T18:15:14.126Z","dependency_job_id":"d43bc38d-71ef-476a-b5a5-56a826d8b5ef","html_url":"https://github.com/nartc/react-native-barcode-mask","commit_stats":{"total_commits":326,"total_committers":4,"mean_commits":81.5,"dds":0.4478527607361963,"last_synced_commit":"c27f5857271e3a0ddeca6e039fd9ee760da81732"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nartc%2Freact-native-barcode-mask","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nartc%2Freact-native-barcode-mask/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nartc%2Freact-native-barcode-mask/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nartc%2Freact-native-barcode-mask/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nartc","download_url":"https://codeload.github.com/nartc/react-native-barcode-mask/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248018060,"owners_count":21034048,"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":["react","react-native-camera","reactnative","typescript"],"created_at":"2024-10-03T10:55:06.613Z","updated_at":"2025-04-09T10:04:49.184Z","avatar_url":"https://github.com/nartc.png","language":"TypeScript","funding_links":["https://github.com/sponsors/nartc"],"categories":[],"sub_categories":[],"readme":"# @nartc/react-native-barcode-mask\n\n![travis](https://badgen.net/travis/nartc/react-native-barcode-mask)\n![bundlephobia](https://badgen.net/bundlephobia/minzip/@nartc/react-native-barcode-mask)\n![downloads](https://badgen.net/npm/dt/@nartc/react-native-barcode-mask)\n![npm](https://badgen.net/npm/v/@nartc/react-native-barcode-mask)\n![license](https://badgen.net/github/license/nartc/react-native-barcode-mask)\n[![Known Vulnerabilities](https://snyk.io/test/github/nartc/react-native-barcode-mask/badge.svg?targetFile=package.json)](https://snyk.io/test/github/nartc/react-native-barcode-mask?targetFile=package.json)\n\n![QR](https://i.imgur.com/CRImCD7.gif)\n![PDF417](https://i.imgur.com/Q6Q65ox.gif)\n\n### Acknowledgement\n\nI want to acknowledge the current [react-native-barcode-mask](https://github.com/shahnawaz/react-native-barcode-mask) library. Most of `@nartc/react-native-barcode-mask` is \"cloned\" from the original but rewritten with [React Hooks](https://reactjs.org/docs/hooks-intro.html) and [Reanimated](https://github.com/software-mansion/react-native-reanimated)\n\n### Installation\n\n```\nnpm install @nartc/react-native-barcode-mask\n```\n\n```\nyarn add @nartc/react-native-barcode-mask\n```\n\n### Usage\n\n1. Import `BarcodeMask` from `@nartc/react-native-barcode-mask`\n2. Use `\u003cBarcodeMask /\u003e` as a `child` of `\u003cRNCamera\u003e` from `react-native-camera`\n\n```typescript jsx\n\u003cRNCamera {...props}\u003e\n \u003cBarcodeMask {...barcodeMaskProps} /\u003e\n\u003c/RNCamera\u003e\n```\n\n### Features\n\n1. Provide customizable masks to be used as `RNCamera`'s `SubViews`\n2. Provide custom `Hook` for `Detect Barcode within Finder Area` feature.\n\n### BarcodeMaskProps\n\n| name | type | description | default |\n| ----------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |\n| width | DimensionUnit | Width of the Barcode Finder Area | 280 |\n| height | DimensionUnit | Height of the Barcode Finder Area | 230 |\n| edgeWidth | DimensionUnit | Width of corner edges | 20 |\n| edgeHeight | DimensionUnit | Height of corner edges | 20 |\n| edgeColor | string | Color of corner edges | #fff |\n| edgeRadius | number | Border Radius of corner edges | 0 |\n| edgeBorderWidth | DimensionUnit | 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| startValue | number | Start value of Animated Line (only applicable if `showAnimatedLine` is set to `true`) | 0 |\n| destinationValue | number | Destination value of Animated Line (depends on`animatedLineOrientation`) | `Length of respective orientation` - `animatedLineThickness` |\n| animatedComponent | (width: number, height: number) =\u003e ReactElement | Allow consumers to provide a Render Prop to render custom animated component. Render Prop will be executed with the computed `width` and `height` | null |\n| animatedLineThickness | DimensionUnit | 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| runTimingFn | RunTimingFn | Function to trigger the animation | internal `runTiming` function |\n| onLayoutChange | OnLayoutChangeHandler | Handler to handle LayoutChange. Useful if you want to only detect barcode inside the Finder Area. | `noop` |\n\n### RunTimingFn\n\nThis is a function with the following form:\n\n```typescript\nexport type RunTimingFn = (\n clock: Animated.Clock,\n value: number,\n destination: number,\n duration: number\n) =\u003e Animated.Node\u003cnumber\u003e;\n```\n\nThis function basically will start the `Animated.Clock` and loop the value from `value` \u003c-\u003e `destination` in a loop. By default, an internal `runTiming` fn will be used (which would work for most cases). You can find the internal function defined [here](https://github.com/nartc/react-native-barcode-mask/blob/master/src/BarcodeMask.tsx#L156)\n\n### OnLayoutChangeHandler\n\nThis library also provides functionality to only scan the barcode that is in within bounds of the Finder Area (Inner Mask).\nTo use this feature, you need to import and use `useBarcodeRead` custom hook:\n\n```typescript jsx\nconst {\n barcodeRead,\n onBarcodeRead,\n onBarcodeFinderLayoutChange,\n} = useBarcodeRead(\n isFocused,\n barcodeData =\u003e {},\n processedBarcodeData =\u003e {}\n);\n```\n\n`useBarcodeRead` takes in the following arguments:\n\n1. `isFocused`: If you're using `react-navigation` then you should be familiar (or should get familiarized) with the concept of `focus`. When you navigate to a screen on the same `Stack` (or different `Tab`), the previous (current) screen is not **unmounted**, but only **unfocused**. `RNCamera` requires you to reinitialize when a screen is `re-focus`. `react-navigation` provides multiple ways to get access to `isFocused` property. If you don't use `react-navigation`, you can just pass in `true`\n2. `(barcodeData: string) =\u003e string`: This is a callback to process barcode **raw** data. This gets exposed so you can apply your own logic to process the raw data.\n3. `(processedData: string) =\u003e void`: This is a callback that takes in the `processedData`. This is where you **want** to do with the processed barcode data: call API, or navigating to a different screen etc...\n4. `barcodeReadDelay: number`: `useBarcodeRead` now takes in an optional `delay` which will handle the frequency of scanning barcode internally, instead of using `barcodeRead` to manipulate `barcodeTypes`. Default to `500ms`\n\n`useBarcodeRead` returns the following:\n\n1. `barcodeRead: boolean`: This is a boolean flag whether the barcode has been read for the first time. This is to prevent `RNCamera` captures a barcode too many times too quick. You can use this `barcodeRead` flag to modify the `barcodeTypes` props on `RNCamera` to an empty array to prevent capturing barcode. Like so:\n\n```typescript jsx\n\u003cRNCamera\n barcodeTypes={barcodeRead ? [] : [RNCamera.Constants.BarCodeType.qr]}\n/\u003e\n```\n\n**NOTE: I noticed that this trick \"kind of stopped\" working since couple of the latest issue ago. Haven't looked into the commit log of `react-native-camera` but `barcodeRead` is returned for the sake of `barcodeRead`, frequency of scanning barcode is handled internally now.**\n\n2. `onBarcodeRead`: This is a handler that the hook returns so you can pass to `onBarCodeRead` prop on `RNCamera`\n3. `onBarcodeFinderLayoutChange`: This is a handler that the hook returns so you can pass to `onLayoutChange` prop on `BarcodeMask`\n\n`useBarcodeRead` is exported based on `Platform`: `ios` or `android` because of how the bounds of the scanned barcode are returned differently on each `Platform`.\nOn iOS, this feature works very well and stable.\n\nHowever, on Android, this feature isn't as stable because of the randomness of the bounds returned. The bounds returned are differently based on the `barcodeType` as well. For my specific case, I use `QR` and `PDF417` so I was able to identify the bounds for these two types, even so it's not very reliable for `PDF417`. Contributions/Suggestions are definitely welcomed to improve support for Android.\n\n### useCustomBarcodeRead\n\nA new Hook is introduced: `useCustomBarcodeRead`\n\nThe purpose of this hook is to provide customization to how the Mask will handle barcode read within the Mask's bounds. On iOS, you probably don't need to worry about this because the mask works pretty stable. However on Android, because of the randomness of the bounds and device's coordinate system, this hook will allow the consumers to customize the BarcodeMask internal functionality instead of introducing a fix for a variety of Android devices which would take, probably forever, to complete.\n\nJust like the normal `useBarcodeRead()`, `useCustomBarcodeRead` takes in: `isFocused`, `dataProcessor` function and `processedData` callback function. In addition, it also takes in two new parameters:\n\n1. `customBarcodeRead`: This is an object with two properties: `beforeScan` and `afterScan`. The idea is to provide customization to how `BarcodeMask` affects the `RNCamera`. With `useBarcodeRead`, the returned flag `barcodeRead` is used to turn on/off scanning ability by setting the `barcodeTypes` to an `[]` when `barcodeRead` is `true`. Internally, it's just a `useState` and `setBarcodeRead(true/false)` is called at a certain point. With this new hook, you can setup a state at your component's level and pass two callbacks `beforeScan` and `afterScan`, `BarcodeMask` will call those at the same point it calls the internal `useState`. `beforeScan` and `afterScan`, if provided, will override the internal `useState`.\n\n```typescript jsx\nconst [customBarcodeRead, setCustomBarcodeRead] = useState(false);\nconst {} = useCustomBarcodeRead(\n isFocused,\n dataProcessor,\n processedData =\u003e {\n /*do stuff*/\n },\n {\n beforeScan: () =\u003e {\n setCustomBarcodeRead(true);\n },\n afterScan: () =\u003e {\n setCustomBarcodeRead(false);\n },\n }\n);\n```\n\n**NOTE:** When `beforeScan` and `afterScan` are provided, internal `barcodeRead` state will be returned as `null`.\n\n2. `customBarcodeReadCallback`: This is a callback with the following signature. It's a function that returns the `RNCamera's BarcodeRead` callback.\n\n```typescript\nexport interface CustomBarcodeReadCallback {\n (\n finderBoundingRect: { x: number; y: number; width: number; height: number },\n isFinderBoundingInitialized: boolean,\n processingBarcodeFn: (data: string) =\u003e void\n ): (event: {\n data: string;\n bounds:\n | { width: number; height: number; origin: Array\u003cPoint\u003cstring\u003e\u003e }\n | { origin: Point\u003cstring\u003e; size: Size\u003cstring\u003e };\n type: keyof BarCodeType;\n }) =\u003e void;\n}\n```\n\nBasically, `BarcodeMask` will now delegate the helpful data: `finderBoundingRect`, `isFinderBoundingInitialized` and the `processedData` function that you pass in `useCustomBarcodeRead` in the beginning for the consumers to handle the dimensions related issue.\n\n1. `finderBoundingRect`: the dimensions of the `BarcodeMask` calculated from top-left `edgeCorner`.\n2. `isFinderBoundingInitialized`: a flag to notify when the `BarcodeMask` is finished initialized.\n3. `processBarcodeFn`: this is the combined function with the logic of: `dataProcessor`, `processedData` and `customBarcodeRead` (if provided). This function takes in `event.data` (raw barcode data) and run through `dataProcessor` and ultimately ends up calling `processedData()` function.\n\n### BarcodeMaskWithOuterLayout\n\nA new HOC is added and is exported as `withOuterLayout(BarcodeMask)` and named `BarcodeMaskWithOuterLayout`. If you want to explore `withOuterLayout`, feel free to.\n\nThe purpose of this component is to be able to use percentage value for `width` and `height`. For example, I want to setup a mask with a set `width` but I want the `height` of the mask to take up the `height` of the `RNCamera` component, then `BarcodeMaskWithOuterLayout` will help me achieve that.\n\n```typescript jsx\n\u003cBarcodeMaskWithOuterLayout width={200} height={'100%'} /\u003e\n```\n\n### Contributions\n\nAs mentioned, contributions are always welcomed.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnartc%2Freact-native-barcode-mask","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnartc%2Freact-native-barcode-mask","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnartc%2Freact-native-barcode-mask/lists"}