Implementing A Barcode Scanner by Using React Native Camera

As I researched on the internet the best way to implement the barcode scanner is by using react-native-camera library.

In this blog I will explain how to create a simple react native project and how to implement a barcode scanner functionality with flasher option.

First of all lets have a look what sort of barcode types supported by the react native camera.

React native camera library is supported to following barcode types.

• UPC E
• CODE 39
• CODE 39 MOD 43
• EAN 13
• EAN 8
• CODE 93
• CODE 138
• PDF 417
• QR
• AZTEC

As you can see these are the barcode types which supported by the react native camera.

uhh….

Now lets try to implement our barcode scanner functionality from the scratch.

First of all lets create a simple react native project.

Open your terminal and execute the following command to create a new react native project.

react-native init ProjectBarcodeScanner

For more about react native you can refer my react native article.by using following link.

React Native

Then we have to install react native camera library to implement our barcode scanner functionality,for that we need to execute following command.

 npm install react-native-camera --save 

Then we have to link it to our scanner application.For that we can use the following command.

react-native link react-native-camera

For more about react-native camera library you can use the following link.

react-native-community/react-native-camera

Alright now we are perfect to start coding.So lets start…

Create a barcodeScanner.js file and you can use following code step by step.

first we will import react native components into project file.

 import React, {Component} from 'react';
 import {
 Text,
 View,
 StyleSheet,Alert,TouchableOpacity,
 Image
}from 'react-native';

Then import react native camera into the project file.

import Camera from 'react-native-camera';

Then use constructor to handle states of the application.

export default class barcodeScanner extends Component {
   constructor(props) {
   super(props);
   this.handleTourch = this.handleTourch.bind(this);
   this.state = {
   torchOn: false
  }
  }
  }

Flasher is very important when it comes to dark area.

In the above code we are keeping the state torchOn:false as a default state of the flasher and once the torch icon clicks the state changes into true and the flasher will appear.

Now lets have a look into render function.

render() {
return (
<View style={styles.container}>
<Camera
style={styles.preview}
torchMode={this.state.torchOn ? Camera.constants.TorchMode.on : Camera.constants.TorchMode.off}
onBarCodeRead={this.onBarCodeRead}
ref={cam => this.camera = cam}
aspect={Camera.constants.Aspect.fill}
>
<Text style={{
backgroundColor: 'white'
}}>BARCODE SCANNER</Text>
</Camera>
<View style={styles.bottomOverlay}>
<TouchableOpacity onPress={() => this.handleTourch(this.state.torchOn)}>
<Image style={styles.cameraIcon}
source={this.state.torchOn === true ? require('../../images/flasher_on.png') : require('../../images/flasher_off.png')} />
</TouchableOpacity>
</View>
</View>
)
}

In this render function it will show a camera view for the user ,by using that user can scan the barcode.

wait…..

We are not yet completed we need to implement on barcode Read functionality.

onBarCodeRead = (e) => {
      Alert.alert("Barcode value is"+e.data ,"Barcode type is"+e.type);
}

In here if any of barcode is captured by the scanner it will show an alert message for the user.

That alert message contains the value of the barcode and the barcode type.

Now we are almost done but we have to write a code to handle torch option.

handleTourch(value) {
        if (value === true) {
            this.setState({ torchOn: false });
        } else {
            this.setState({ torchOn: true });
        }
    }

By using this code you can handle the states of the torch functionality.(you can enable the torch and disable the torch).

Then you can use the following style sheet to style your UI.

container: {
    flex: 1,
    flexDirection: 'row',
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
cameraIcon: {
        margin: 5,
        height: 40,
        width: 40
    },
 bottomOverlay: {
        position: "absolute",
        width: "100%",
        flex: 20,
        flexDirection: "row",
        justifyContent: "space-between"
    },
});

Here is the full component in one code snippet .

import React, { Component } from 'react';
import {
Text,
View,
StyleSheet,
Alert,
TouchableOpacity,
Image
} from 'react-native';
import Camera from 'react-native-camera';
export default class BarcodeScan extends Component {
constructor(props) {
super(props);
this.handleTourch = this.handleTourch.bind(this);
this.state = {
torchOn: false
}
}
onBarCodeRead = (e) => {
Alert.alert("Barcode value is" + e.data, "Barcode type is" + e.type);
}
render() {
return (
<View style={styles.container}>
<Camera
style={styles.preview}
torchMode={this.state.torchOn ? Camera.constants.TorchMode.on : Camera.constants.TorchMode.off}
onBarCodeRead={this.onBarCodeRead}
ref={cam => this.camera = cam}
aspect={Camera.constants.Aspect.fill}
>
<Text style={{
backgroundColor: 'white'
}}>BARCODE SCANNER</Text>
</Camera>
<View style={styles.bottomOverlay}>
<TouchableOpacity onPress={() => this.handleTourch(this.state.torchOn)}>
<Image style={styles.cameraIcon}
source={this.state.torchOn === true ? require('../../images/flasher_on.png') : require('../../images/flasher_off.png')} />
</TouchableOpacity>
</View>
</View>
)
}
handleTourch(value) {
if (value === true) {
this.setState({ torchOn: false });
} else {
this.setState({ torchOn: true });
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
},
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center'
},
cameraIcon: {
margin: 5,
height: 40,
width: 40
},
bottomOverlay: {
position: "absolute",
width: "100%",
flex: 20,
flexDirection: "row",
justifyContent: "space-between"
},
});

After implementing the above code our final output is like this.

If this article was helpful, click on the clap 👏 button below to show your support!

Thank you for reading .. Happy coding.. :)