Select Page

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:

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() {


<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.`); }}



); }


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


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) {


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


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


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






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


  • 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:














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


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
Implement A React Native Barcode Scanner

Chetan Patel

Director at Metizsoft Solutions, Chetan Sheladiya today stands at the top of a leading Mobile Application Development company, which further specializes in Online Business Marketing, Social Media Marketing, Web Development, amongst other areas. A tech-lover at heart, Chetan has had more than a decade worth of experience, dealing with hundreds of projects, and creating a bunch of unique IT solutions along the way. His other interest lies in sharing his ideas and opinions with people as passionate about technology, as he is. You can find his thoughts expressed on LinkedIn, Twitter, and Facebook.

Facebook Twitter Linkedin