react-native-barcode-mask
📷 A barcode and QR code scan layout for react-native applications with customizable styling
Install
npm i react-native-barcode-mask -s
Usage
All you need is to import
BarcodeMask
from the react-native-barcode-mask
module and then use it.
Example use with RNCamera
Inside <RNCamera>...</RNCamera>
tag as a child component.
'use strict';
import React, { Component } from 'react';
import { RNCamera } from 'react-native-camera';
import BarcodeMask from 'react-native-barcode-mask';
...
<RNCamera
...
>
<BarcodeMask />
</RNCamera>
...
Examples
Few style modifications:
// Barcode
<BarcodeMask width={300} height={100} />
// QR
<BarcodeMask edgeColor={'#62B1F6'} showAnimatedLine={false}/>
// Barcode example 2
<BarcodeMask width={100} height={300} showAnimatedLine={false} outerMaskOpacity={0.8}/>
// Barcode example 3
<BarcodeMask width={300} height={100} edgeBorderWidth={1} />
Properties
width
Value: number
| string
(%
)
Default: 280
Finder's width (the visible area)
height
Value: number
| string
(%
)
Default: 230
Finder's height (the visible area)
edgeWidth
Value: number
| string
(%
)
Default: 20
Edge/Corner's width
edgeHeight
Value: number
| string
(%
)
Default: 20
Edge/Corner's height
edgeColor
Value: string
Default: #FFF
Use this to give custom color to edges
edgeBorderWidth
Value: number
| string
(%
)
Default: 4
Use this to modify the border (thickness) of edges
edgeRadius
Value: number
Default: 0
Use this to modify the border radius of edges
backgroundColor
Value: string
Default: rgb(0, 0, 0, 0.6)
Use this to modify the background color of area around finder
outerMaskOpacity
Value: number
(0 - 1)
Default: 0.6
Use this to modify the transparency of outer mask
showAnimatedLine
Value: boolean
Default: true
animatedLineColor
Value: string
Default: #FFF
animatedLineHeight
Value: number
Default: 2
animatedLineWidth
Value: number
| string
(%
)
Default: 85%
lineAnimationDuration
Value: number
Default: 1500
animatedLineOrientation
Value: string
(horizontal
| vertical
)
Default: horiontal
useNativeDriver
Value: boolean
Default: true
React Native > 0.62.x
requires us to sepcify useNativeDriver
while working with animation
onLayoutMeasured
value: function
Details: Handler to receive onLayout
event of finder. Useful if you want to only detect barcode inside the Finder area.
parameter: nativeEvent
{
target: number,
layout: { height: number, width: number, x: number, y: number}
}
Contribution
Want to add some new styles or layout?
Want to update few things?
Feel free to open a PR.