Have ideas to improve npm?Join in the discussion! »

    react-native-barcode-mask
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.4 • Public • Published

    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

    Install

    npm i react-native-barcode-mask

    DownloadsWeekly Downloads

    4,486

    Version

    1.2.4

    License

    MIT

    Unpacked Size

    16.7 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar