In:Mobile Apps

Implement A React Native Barcode Scanner

Chetan Patel February 25, 2019 0

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 of using this barcode scanner

Faster
More accurate
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. The 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.