Implement A React Native Barcode Scanner

React Native Barcode Scanner comes as a great utility for scanning barcodes. It runs fine on Android. However, Use something like react-native-camera for iOS.

The postfix -Google is added since the native implementation is based on Google’s Barcode API: https://developers.google.com/vision/barcodes-overview

Let’s see how it works

• How to install Barcode Scanner Using React Native?

To include the latest version (1.4.0) react-native-barcode-scanner in your project, run the following terminal commands in your React Native project root folder

1>npm i react-native-barcode-scanner-google –save

2>react-native link react-native-barcode-scanner-google

• Benefits using this barcode scanner

1. Faster
2. More accurate
3. More convenient ( supports scanning in any direction)

Note that this barcode scanner doesn’t ship with a fancy overlay to display a scanning interface to the user. It’s just a fast scanner view that shows the camera stream, on top of which you can overlay your own UI.

Simple Usage

importReact, { Component } from ‘react’;

import{ AppRegistry, StyleSheet, Text, View, Alert } from ‘react-native’;

importBarcodeScanner from ‘react-native-barcode-scanner-google’;

exportdefaultclassBarcodeAppextendsComponent {

render() {

return(

<View style={{flex: 1}}>

<BarcodeScanner  style={{flex: 1}}

onBarcodeRead={({data, type}) => {

// handle your scanned barcodes here!

               // as an example, we show an alert:

Alert.alert(`Barcode ‘${data}’ of type ‘${type}’ was scanned.`); }}

/>

</View>

); }

}

AppRegistry.registerComponent(‘BarcodeApp’, () =>BarcodeApp);

Advanced Usage

import React, { Component } from ‘react’;

import { AppRegistry, StyleSheet, Text, View, Alert } from ‘react-native’;

importBarcodeScanner, { Exception, FocusMode, BarcodeType, pauseScanner, resumeScanner } from ‘react-native-barcode-scanner-google’;

export default class BarcodeApp extends Component {

render() {

return (

<View style={{flex: 1}}>

<BarcodeScanner

style={{flex: 1}}

onBarcodeRead={({data, type}) => {

// handle your scanned barcodes here!

// as an example, we show an alert:

Alert.alert(`Barcode ‘${data}’ of type ‘${type}’ was scanned.`);

}}

onException={exceptionKey => {

// check instructions on Github for a more detailed overview of these exceptions.

switch (exceptionKey) {

caseException.NO_PLAY_SERVICES:

// tell the user they need to update Google Play Services

caseException.LOW_STORAGE:

// tell the user their device doesn’t have enough storage to fit the barcode scanning magic

caseException.NOT_OPERATIONAL:

// Google’s barcode magic is being downloaded but is not yet operational.

default: break;

}

}}

focusMode={FocusMode.AUTO /* could also be TAP or FIXED */}

barcodeType={BarcodeType.CODE_128 | BarcodeType.EAN_13 | BarcodeType.EAN_8 /* replace with ALL for all alternatives */}

/>

</View>

);

}

}

AppRegistry.registerComponent(‘BarcodeApp’, () =>BarcodeApp);

Properties

• onBarcodeRead

Will call the specified method when a barcode is detected in the camera’s view. Event contains data (barcode value) and type (barcode type). The following barcode types can be recognized:

BarcodeFormat.UPC_A

BarcodeFormat.UPC_E

BarcodeFormat.EAN_13

BarcodeFormat.EAN_8

BarcodeFormat.RSS_14

BarcodeFormat.CODE_39

BarcodeFormat.CODE_93

BarcodeFormat.CODE_128

BarcodeFormat.ITF

BarcodeFormat.CODABAR

BarcodeFormat.QR_CODE

BarcodeFormat.DATA_MATRIX

BarcodeFormat.PDF_417

• torchMode

Values: on, off (default)

Use the torchMode property to specify the camera torch mode.

• cameraType

Values: back (default), front

Use the camera Type property to specify the camera to use. If you specify the front camera, but the device has no front camera the back camera is used.

Conclusion

React Native Barcode scanner offers a great facility for scanning barcodes. In today’s increasingly commercialized environment barcode scanning facility has become a must-have feature for every smartphone. We have thus brought you the very positive aspects of React Native Barcode Scanner and its associated ‘know-how’.

For more information feel free to contact our Metizsoft team. We are mobile developers and build mobile apps through react native framework.

Read More:

React Native Firebase Integration

React Native DOC Scanner Only iPhone

React Native Image Crop Picker Android