Thanks for downloading Dynamsoft Barcode Reader Package!
Your download will start shortly. If your download does not begin, click here to retry.
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
- Installation
- Build Your Barcode Scanner App
- Customizing the Barcode Reader
- Licensing
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 suchnpx 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 theios
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.