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 dependencies licence

📷 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} transparency={0.8}/>

// Barcode example 3
<BarcodeMask width={300} height={100} edgeBorderWidth={1} />

⭐ 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

`backgroundColor`

Value: string rgba(0, 0, 0, 0.6)
Default: rgba(0, 0, 0, 0.6)

Use this to modify the background color of area around finder

`showAnimatedLine`

Value: boolean true | false
Default: true

`animatedLineColor`

Value: string
Default: #FFF

`animatedLineHeight`

Value: number
Default: 2

`lineAnimationDuration`

Value: number
Default: 1500

Contribution

Want to add some new styles or layout?
Want to update few things?

Feel free to open a PR.

License

MIT