Web Demos

BARCODE READER SDK DEMO

Explore the flexibe barcode reading settings to optimize for your specific usage scenario.

WEB TWAIN SDK DEMO

Try the most popular web scanner features: scan images, import local images and PDF files, edit, save to local, upload to database, and etc.

BARCODE READER JAVASCRIPT DEMO

Transform any camera-equipped devices into real-time, browser-based barcode and QR code scanners.

MRZ SCANNER WEB DEMO

Detects the machine-readable zone of a passport, scans the text, and parses into human-readable data.

APP STORE DEMOS

BARCODE READER SDK FOR IOS

BARCODE READER SDK FOR ANDROID

VIEW MORE DEMOS >
Resource Base
Table of contents

Barcode Reader User Guide for React Native

In this guide, we will explore the Barcode Reader module of the Dynamsoft Capture Vision library.

Table of Contents

System Requirements

React Native

  • Supported Version: 0.60 or higher

Android

  • Supported OS: Android 5.0 (API Level 21) or higher.
  • Supported ABI: armeabi-v7a, arm64-v8a, x86 and x86_64.
  • Development Environment: Android Studio 3.4+ (Android Studio 4.2+ recommended).
  • JDK: 1.8+

iOS

  • Supported OS: iOS 10.0 or higher.
  • Supported ABI: arm64 and x86_64.
  • Development Environment: Xcode 7.1 and above (Xcode 13.0+ recommended), CocoaPods 1.11.0+.

Others

  • Node: 16.15.1+ recommended

Installation

  • yarn

    yarn add dynamsoft-capture-vision-react-native
    
  • npm

    npm install dynamsoft-capture-vision-react-native
    

Build Your Barcode Scanner App

Now you will learn how to create a simple barcode scanner using Dynamsoft Capture Vision SDK.

Note: You can get the full source code of a similar project: Barcode Reader Simple Sample

Set up Development Environment

If you are a beginner with React Native, please follow the guide on the React Native official website to set up the development environment.

Initialize the Project

Create a new React Native project.

npx react-native init SimpleBarcodeScanner

Note: This sample uses React 17.0.2 and React Native 0.67.2.

Include the Library

Add the SDK to your new project. Once the SDK is added, you will see a reference to it in the package.json.

  • yarn

    yarn add dynamsoft-capture-vision-react-native
    
  • npm

    npm install dynamsoft-capture-vision-react-native
    

For iOS, you can install the necessary native frameworks from cocoapods by running the pod install command as below:

cd ios
pod install

Configure the Barcode Reader

In App.js, import the following components:

import React from 'react';
import {Text} from 'react-native';
import {
    DCVBarcodeReader,
    DCVCameraView,
    EnumBarcodeFormat
} from 'dynamsoft-capture-vision-react-native';

Next in App.js, let’s define the state to your component. In the state, add a results variable, initialized to null. In the following steps, we will store the newly decoded barcodes to results.

class App extends React.Component {
    state = {
        results: null
    };
}
export default App;

Next is the componentDidMount implementation. First up is adding the code to start barcode decoding:

class App extends React.Component {
    ...
    componentDidMount() {
        (async () => {
            // Initialize the license so that you can use full feature of the Barcode Reader module.
            try {
                await DCVBarcodeReader.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
            } catch (e) {
                console.log(e);
            }
            // Create a barcode reader instance.
            this.reader = await DCVBarcodeReader.createInstance();

            // Add a result listener. The result listener will handle callback when barcode result is returned. 
            this.reader.addResultListener((results) => {
                // Update the newly detected barcode results to the state.
                this.setState({results});
            });

            // Enable video barcode scanning.
            // If the camera is opened, the barcode reader will start the barcode decoding thread when you triggered the startScanning.
            // The barcode reader will scan the barcodes continuously before you trigger stopScanning.
            this.reader.startScanning();
        })();
    }
    ...
}

After implementing componentDidMount, componentWillUnmount will then include code to stop the barcode decoding and remove the result listener.

class App extends React.Component {
    ...
    async componentWillUnmount() {
        // Stop the barcode decoding thread when your component is unmount.
        await this.reader.stopScanning();
        // Remove the result listener when your component is unmount.
        this.reader.removeAllResultListeners();
    }
    ...
}

Rendering the UI

Lastly, let’s create the DCVCameraView UI component in the render function.

class App extends React.Component {
    ...
    render() {
        // Add code to fetch barcode text and format from the BarcodeResult
        let results = this.state.results;
        let resultBoxText = "";
        if (results && results.length>0){
            for (let i=0;i<results.length;i++){
                resultBoxText+=results[i].barcodeFormatString+"\n"+results[i].barcodeText+"\n";
            }
        }
        // Render DCVCameraView componment.
        return (
            <DCVCameraView
                style={
                    {
                        flex: 1
                    }
                }
                ref = {(ref)=>{this.scanner = ref}}
                overlayVisible={true}
            >
                {/*Add a text box to display the barcode result.*/}
                <Text style={
                    {
                        flex: 0.9,
                        marginTop: 100,
                        textAlign: "center",
                        color: "white",
                        fontSize: 18,
                    }
                }>{results && results.length > 0 ? resultBoxText : "No Barcode Detected"}</Text>
            </DCVCameraView>
        );
    }
}

Configure Camera Permissions

You need to set the “Privacy - Camera Usage Description” field in the Info.plist file for iOS. If this property is not set, the iOS application will fail at runtime. In order to set this property, you might need to use Xcode and open the corresponding .xcworkspace located in the ios folder. Once open, you can edit the Info.plist to include this property.

Run the Project

Run Android on Windows

In the command line interface (Powershell recommended), go to your project folder and run the following command:

npx react-native run-android

Run iOS on macOS

In the terminal, go to the project folder in your project:

npx react-native run-ios

Note:

  • The application needs to run on a physical device rather than a simulator as it requires the use of the camera. If you try running it on a simulator, you will most likely run into a number of errors/failures.
  • On iOS, in order to run the React Native app on a physical device you will need to install the ios-deploy library. Afterwards, you can run the react native app from the terminal as such npx react-native run-ios --device assuming it’s the only device connected to the Mac.
  • Alternatively on iOS, you can simply open the xcworkspace of the project found in the ios folder using Xcode and run the sample on your connected iOS device from there. The advantage that this offers is that it is easier to deal with the developer signatures for deployment in there.

Note: You can get the full source code of a similar project: Barcode Reader Simple Sample

Customizing the Barcode Reader

There are several ways in which you can customize the Barcode Reader - but what they all have in common is that each involves the updateRuntimeSettings method. There are currently three methods in which you can update the runtime settings.

Using the settings templates

Dynamsoft barcode reader offers several preset templates for different popular scenarios. To prioritize speed over accuracy, then you will want to use one of the speed templates, choosing the corresponding template for images or video, respectively. And vice versa if you’re looking to prioritize read rate and accuracy over speed. For the full set of templates, please refer to EnumPresetTemplate. Here is a quick example:

componentDidMount() {
    ...
    (async () => {
        await this.reader.updateRuntimeSettings(EnumDBRPresetTemplate.VIDEO_SPEED_FIRST);
    })();
    ...
}

Using the DBRRuntimeSettings interface

The SDK also supports a more granular control over the individual runtime settings rather than using a preset template. The main settings that you can control via this interface are which barcode formats to read, the expected number of barcodes to be read in a single image or frame, and the timeout. For more info on each, please refer to DBRRuntimeSettings. Here is a quick example:

componentDidMount() {
    (async () => {
        // Get the current runtime settings of the barcode reader.
        let settings = await this.reader.getRuntimeSettings();
        // Set the expected barcode count to 0 when you are not sure how many barcodes you are scanning.
        // Set the expected barcode count to 1 can maximize the barcode decoding speed.
        settings.expectedBarcodesCount = 0;
        // Set the barcode formats to read.
        settings.barcodeFormatIds = EnumBarcodeFormat.BF_ONED | EnumBarcodeFormat.BF_QR_CODE | EnumBarcodeFormat.BF_PDF417 | EnumBarcodeFormat.BF_DATAMATRIX;
        // Apply the new settings to the barcode reader.
        await this.reader.updateRuntimeSettings(settings);
    })();
}

Customizing the scan region

You can also limit the scan region of the SDK so that it doesn’t exhaust resources trying to read from the entire image or frame. In order to do this, we will need to use the Region interface as well as the DCVCameraView component.

First, the region must be defined using the Region interface. In this example, we demonstrate how the region is first defined in the render() function and then assigned to the scanRegion parameter of the DCVCameraView component:

class App extends React.Component {
    render() {
        let barcode_text = "";
        // Define the scan region.
        let region = {
            regionTop: 30,
            regionLeft: 15,
            regionBottom: 70,
            regionRight: 85,
            regionMeasuredByPercentage: true
        }
        ...
        return (
            <DCVCameraView
                style={
                    {
                        flex: 1
                    }
                }
                ref = {(ref)=>{this.scanner = ref}}
                overlayVisible={true}
                scanRegionVisible={true}
                scanRegion={region}
            >
            ...
            </DCVCameraView>
        );
    }
}

Licensing

  • The BarcodeReader module of Dynamsoft Capture Vision needs a valid license to work.
  • A one-day trial license is available by default for every new device to try Dynamsoft Capture Vision.
  • You can request a 30-day free trial license via Dynamsoft customer portal for further evaluation.
  • Contact us to purchase a full license.

This page is compatible for:

Version 1.0

Is this page helpful?

YesYes NoNo

In this article:

latest version

  • Latest version
Change +
© 2003–2022 Dynamsoft. All rights reserved.
Privacy Statement / Site Map / Home / Purchase / Support