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
- 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. 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