All Projects → shahnawaz → React Native Barcode Mask

shahnawaz / React Native Barcode Mask

Licence: mit
A barcode and QR scan layout for react-native applications with customizable styling

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Native Barcode Mask

Code Scanner
Code scanner library for Android, based on ZXing
Stars: ✭ 543 (+136.09%)
Mutual labels:  barcode-scanner, barcode
Qr Code Scanner
📠 A simple, fast and useful progressive web application
Stars: ✭ 982 (+326.96%)
Mutual labels:  barcode-scanner, barcode
Zxing
ZXing ("Zebra Crossing") barcode scanning library for Java, Android
Stars: ✭ 28,795 (+12419.57%)
Mutual labels:  barcode-scanner, barcode
Flutter barcode scanner
Barcode scanner plugin for flutter. Supports barcode scanning for Android and iOS
Stars: ✭ 194 (-15.65%)
Mutual labels:  barcode-scanner, barcode
Pwa Barcode Scanner
Information about food from the barcode, on your phone 🛒
Stars: ✭ 122 (-46.96%)
Mutual labels:  barcode-scanner, barcode
Qzxing
Qt/QML wrapper library for the ZXing library. 1D/2D barcode image processing library
Stars: ✭ 401 (+74.35%)
Mutual labels:  barcode-scanner, barcode
Mlkit
A collection of sample apps to demonstrate how to use Google's ML Kit APIs on Android and iOS
Stars: ✭ 949 (+312.61%)
Mutual labels:  barcode-scanner, barcode
pola-ios
Pola pomoże Ci odnaleźć polskie wyroby. Zabierając Polę na zakupy odnajdujesz produkty “z duszą” i wspierasz polską gospodarkę.
Stars: ✭ 17 (-92.61%)
Mutual labels:  barcode, barcode-scanner
Barcodescanner.xf
Barcode Scanner using GoogleVision API for Xamarin Form
Stars: ✭ 82 (-64.35%)
Mutual labels:  barcode-scanner, barcode
Scannermapp
A QR-code and barcode acanner app built in Delphi using ZXing and TFrameStand
Stars: ✭ 65 (-71.74%)
Mutual labels:  barcode-scanner, barcode
Zbar
ZBar is an open source software suite for reading bar codes from various sources, including webcams. As its development stopped in 2012, I took the task of keeping it updated with the V4L2 API. This is the main repository for it. There's a clone at at LinuxTV.org, and another one at gitlab.
Stars: ✭ 291 (+26.52%)
Mutual labels:  barcode-scanner, barcode
Zxinglite
🔥 ZXing的精简版,优化扫码和生成二维码/条形码,内置闪光灯等功能。扫描风格支持:微信的线条样式,支付宝的网格样式。几句代码轻松拥有扫码功能 ,ZXingLite让集成更简单。(扫码识别速度快如微信)
Stars: ✭ 2,117 (+820.43%)
Mutual labels:  barcode-scanner, barcode
Nativescript Barcodescanner
🔎 NativeScript QR / barcode (bulk)scanner plugin
Stars: ✭ 280 (+21.74%)
Mutual labels:  barcode-scanner, barcode
Efqrcode
A better way to operate QR Code in Swift, support iOS, macOS, watchOS and tvOS.
Stars: ✭ 4,121 (+1691.74%)
Mutual labels:  barcode-scanner, barcode
barcode scan2
[reborned barcode_scan] A flutter plugin for reading 2D barcodes and QR codes.
Stars: ✭ 43 (-81.3%)
Mutual labels:  barcode, barcode-scanner
Ngx Barcode Scanner
An angular barcode reader
Stars: ✭ 29 (-87.39%)
Mutual labels:  barcode-scanner, barcode
barcode-server
Barcode Server for Barcode Client-Server android application
Stars: ✭ 40 (-82.61%)
Mutual labels:  barcode, barcode-scanner
BarcodeReader
Simple multi-format barcode reader for Windows
Stars: ✭ 26 (-88.7%)
Mutual labels:  barcode, barcode-scanner
Fiscalberry
[JSON ↔ HW] Connect things using JSON API with the fiscalberry websocket server interact easily with any kind of Hardware. Another IoT solution...
Stars: ✭ 44 (-80.87%)
Mutual labels:  barcode-scanner, barcode
Barcode To Pc App
Barcode to PC app
Stars: ✭ 121 (-47.39%)
Mutual labels:  barcode-scanner, barcode

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].