react-native-barcode-mask

!version
!download
!licence
!build
!vulnerabilities
!dependencies

> :camera: A barcode and QR code scan layout for react-native applications with customizable styling

height="300"
src="https://user-images.githubusercontent.com/20506431/53305262-40d37200-38a1-11e9-9f87-c83a5cb44ac6.gif"
>

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 ... tag as a child component.

``javascript
'use strict';
import React, { Component } from 'react';
import { RNCamera } from 'react-native-camera';
import BarcodeMask from 'react-native-barcode-mask';

...
...
>


...
`

Examples

Few style modifications:


height="300"
src="https://user-images.githubusercontent.com/20506431/53305263-40d37200-38a1-11e9-8106-6c79f4d59ead.png"
>
height="300"
src="https://user-images.githubusercontent.com/20506431/53305265-416c0880-38a1-11e9-9364-7fd0b987207a.png"
>
height="300"
src="https://user-images.githubusercontent.com/20506431/53305266-416c0880-38a1-11e9-8ef0-9ec9912fd355.png"
>
height="300"
src="https://user-images.githubusercontent.com/20506431/53305264-40d37200-38a1-11e9-8752-1c5deaf78c65.png"
>


`javascript
// Barcode


// QR


// Barcode example 2


// Barcode example 3

`

#### Barcode full code example:
https://gist.github.com/shahnawaz/d24ae843fc3a6056bef9c752d9b35e03


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