Implement A Barcode Scanner Using React Native

Previously I wrote about using the device camera in your React Native mobile application. However, what if we wanted to go a step further and start scanning barcodes?

This is not a problem because the react-native-camera component we used in the last tutorial also supports barcode scanning.

Open your Terminal and execute the following command to create a new React Native project:

react-native init ReactProject

Just like in the previous tutorial we’re going to install the react-native-camera plugin. With the project as your current working directory in the Terminal, execute the following command:

npm install react-native-camera --save

At the time of writing this, I’m using component commit b1daed1e from the GitHub repository. Newer versions will probably work fine, but just so we’re on the same page I wanted to make it clear what I was using.

The component may be downloaded, but you still need to include it in your Xcode project. This can be done with the following steps:

1. In Xcode, right click on Libraries found in the project tree and choose Add Files to “ReactProject”…. Choose to add node_modules/react-native-camera/RCTCamera.xcodeproj when prompted.
2. On the Build Phases tab in Xcode, choose to Link Binary With Libraries and select libRCTCamra.a when prompted.

The component is now ready to be used. More information on adding components can be found in the official React Native documentation.

Per a react-native-camera component issue ticket I opened, the following barcode types are supported:

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

A pretty good number of options.

A quick summary of what we’re going to do. We are going to start the application with the rear camera capturing. When any barcode is scanned then disable the camera and display the barcode data in an alert dialog. We are going to disable the camera so it doesn’t keep trying to scan the barcode.

The following code will be entered in your project’s index.ios.js file.

getInitialState: function() {
    return {
        showCamera: true,
        cameraType: Camera.constants.Type.back
    }
}

In the above snippet we are saying that we want to show the camera and have it be the rear camera.

renderCamera: function() {
    if(this.state.showCamera) {
        return (
            <Camera
                ref="cam"
                style={styles.container}
                onBarCodeRead={this._onBarCodeRead}
                type={this.state.cameraType}>
            </Camera>
        );
    } else {
        return (
            <View></View>
        );
    }
}

The renderCamera function will be responsible for determining if we show the camera. If our showCamera state variable ever becomes false then just show an empty view, otherwise show the camera. Notice the onBarCodeRead property that we set as well. That function can be seen as follows:

_onBarCodeRead: function(e) {
    this.setState({showCamera: false});
    AlertIOS.alert(
        "Barcode Found!",
        "Type: " + e.type + "\nData: " + e.data
    );
}

When a barcode is detected we will set the showCamera state to false and alert with the barcode data. Finally we want to render everything to the screen for real:

render: function() {
    return (
        this.renderCamera()
    );
}

I split the render functions in case you want to add some further template code to this example.

The full code I used can be seen below:

"use strict";

var React = require("react-native");
var Camera = require("react-native-camera");

var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    AlertIOS,
} = React;

var ReactProject = React.createClass({

    getInitialState: function() {
        return {
            showCamera: true,
            cameraType: Camera.constants.Type.back
        }
    },

    renderCamera: function() {
        if(this.state.showCamera) {
            return (
                <Camera
                    ref="cam"
                    style={styles.container}
                    onBarCodeRead={this._onBarCodeRead}
                    type={this.state.cameraType}>
                </Camera>
            );
        } else {
            return (
                <View></View>
            );
        }
    },

    render: function() {
        return (
            this.renderCamera()
        );
    },

    _onBarCodeRead: function(e) {
        this.setState({showCamera: false});
        AlertIOS.alert(
            "Barcode Found!",
            "Type: " + e.type + "\nData: " + e.data
        );
    }

});

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "transparent",
    }
});

AppRegistry.registerComponent('ReactProject', () => ReactProject);

There will be no button overlay on the screen. All scanning happens automatically.

Conclusion

Using code similar to what we saw in the camera example I wrote about previously we were able to scan barcodes in our React Native application. Per the GitHub ticket I opened, there are many supported barcode types.

If you’re interested in seeing how to scan barcodes in Ionic Framework I also have a tutorial for that.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.