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} />

Barcode full code example:

https://gist.github.com/shahnawaz/d24ae843fc3a6056bef9c752d9b35e03

⭐️ Pretty cool! Right?

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: event

{
    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.

License

MIT