Package Exports

react-native-barcode-mask

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-barcode-mask) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-barcode-mask

version download licence build vulnerabilities dependencies

📷 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