npm install @nartc/react-native-barcode-mask
yarn add @nartc/react-native-barcode-mask
<BarcodeMask />as a
- Provide customizable masks to be used as
- Provide custom
Detect Barcode within Finder Areafeature.
|width||DimensionUnit||Width of the Barcode Finder Area||280|
|height||DimensionUnit||Height of the Barcode Finder Area||230|
|edgeWidth||DimensionUnit||Width of corner edges||20|
|edgeHeight||DimensionUnit||Height of corner edges||20|
|edgeColor||string||Color of corner edges||#fff|
|edgeRadius||number||Border Radius of corner edges||0|
|edgeBorderWidth||DimensionUnit||Thickness of corner edges||4|
|backgroundColor||string||Background color of Outer Finder Area||#eee|
|maskOpacity||number||Opacity of Outer Finder Area||1|
|showAnimatedLine||boolean||Whether to show Animated Line||true|
|startValue||number||Start value of Animated Line (only applicable if
|destinationValue||number||Destination value of Animated Line (depends on
|animatedComponent||(width: number, height: number) => ReactElement||Allow consumers to provide a Render Prop to render custom animated component. Render Prop will be executed with the computed
|animatedLineThickness||DimensionUnit||Thickness of Animated Line||2|
|animatedLineOrientation||'vertical' or 'horizontal'||Orientation that the Animated Line will be drawn||'horizontal'|
|animatedLineColor||string||Color of Animated Line||#fff|
|animationDuration||number||Duration of Animated Line animation (in ms)||20000|
|runTimingFn||RunTimingFn||Function to trigger the animation||internal
|onLayoutChange||OnLayoutChangeHandler||Handler to handle LayoutChange. Useful if you want to only detect barcode inside the Finder Area.||
This is a function with the following form:
This function basically will start the
Animated.Clock and loop the value from
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
This library also provides functionality to only scan the barcode that is in within bounds of the Finder Area (Inner Mask).
To use this feature, you need to import and use
useBarcodeRead custom hook:
useBarcodeRead takes in the following arguments:
isFocused: If you're using
react-navigationthen you should be familiar (or should get familiarized) with the concept of
focus. When you navigate to a screen on the same
Tab), the previous (current) screen is not unmounted, but only unfocused.
RNCamerarequires you to reinitialize when a screen is
react-navigationprovides multiple ways to get access to
isFocusedproperty. If you don't use
react-navigation, you can just pass in
(barcodeData: string) => 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.
(processedData: string) => 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...
useBarcodeReadnow takes in an optional
delaywhich will handle the frequency of scanning barcode internally, instead of using
barcodeTypes. Default to
useBarcodeRead returns the following:
barcodeRead: boolean: This is a boolean flag whether the barcode has been read for the first time. This is to prevent
RNCameracaptures a barcode too many times too quick. You can use this
barcodeReadflag to modify the
RNCamerato an empty array to prevent capturing barcode. Like so:
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
barcodeRead is returned for the sake of
barcodeRead, frequency of scanning barcode is handled internally now.
onBarcodeRead: This is a handler that the hook returns so you can pass to
onBarcodeFinderLayoutChange: This is a handler that the hook returns so you can pass to
useBarcodeRead is exported based on
android because of how the bounds of the scanned barcode are returned differently on each
On iOS, this feature works very well and stable.
However, 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
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.
A new Hook is introduced:
The 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.
Just like the normal
useCustomBarcodeRead takes in:
dataProcessor function and
processedData callback function. In addition, it also takes in two new parameters:
customBarcodeRead: This is an object with two properties:
afterScan. The idea is to provide customization to how
useBarcodeRead, the returned flag
barcodeReadis used to turn on/off scanning ability by setting the
true. Internally, it's just a
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
BarcodeMaskwill call those at the same point it calls the internal
afterScan, if provided, will override the internal
afterScan are provided, internal
barcodeRead state will be returned as
customBarcodeReadCallback: This is a callback with the following signature. It's a function that returns the
BarcodeMask will now delegate the helpful data:
isFinderBoundingInitialized and the
processedData function that you pass in
useCustomBarcodeRead in the beginning for the consumers to handle the dimensions related issue.
finderBoundingRect: the dimensions of the
BarcodeMaskcalculated from top-left
isFinderBoundingInitialized: a flag to notify when the
BarcodeMaskis finished initialized.
processBarcodeFn: this is the combined function with the logic of:
customBarcodeRead(if provided). This function takes in
event.data(raw barcode data) and run through
dataProcessorand ultimately ends up calling
A new HOC is added and is exported as
withOuterLayout(BarcodeMask) and named
BarcodeMaskWithOuterLayout. If you want to explore
withOuterLayout, feel free to.
The purpose of this component is to be able to use percentage value for
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.
BarcodeMaskWithOuterLayout width= height= /
As mentioned, contributions are always welcomed.