Barcode and QR code layout for react-native camera 📷

2 min readFeb 28, 2019

The only missing UI piece of barcode and QR code scanning in react-native is finally here :)

(In all seriousness) I have used react-native-camera in few projects and well, whenever there is a feature like barcode/QR code scanning, clients and customers request to see a styled view instead of a plain screen. I googled a few times and yet haven’t found any meaningful results (tho there were some alternative but not in organized way), so I decided to just create one and share with others.

Install

npm i react-native-barcode-mask -s

shahnawaz/react-native-barcode-mask

A barcode and QR scan layout for react-native applications with customizable styling …

github.com

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:

⭐️ Pretty cool! Right? (Don’t forget to star the repository)

// 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} />

Read more about customizing layout here react-native-barcode-mask

Pros?

This would make life much more easier for people who are using react-native for barcode or QR code scanning.
Easy to use and customize layout.
Uses RNCamera subview style (children).

If you feel this would help you in your development, feel free to clap many times (you know you want to!) or share with others.