Barcode Reader Integration Guide (Ready-To-Use Edition)
This guide will help you develop a barcode scanning app with the Ready-To-Use (RTU) component BarcodeScanner.
System Requirements
- React Native
- Supported Version: 0.71.0 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:
- IDE: Android Studio 2024.3.2 suggested.
- JDK: Java 17 or higher.
- Gradle: 8.0 or higher.
- iOS
- Supported OS: iOS 13+.
- Supported ABI: arm64 and x86_64.
- Development Environment: Xcode 13+ (Xcode 14.1+ recommended).
Installation
Run the following commands in the root directory of your react-native project to add the required dependencies:
# using npm
npm install dynamsoft-capture-vision-react-native
npm install dynamsoft-barcode-reader-bundle-react-native
# OR using Yarn
yarn add dynamsoft-capture-vision-react-native
yarn add dynamsoft-barcode-reader-bundle-react-native
Than run the command to install all dependencies:
# using npm
npm install
# OR using Yarn
yarn install
For iOS, you must install the necessary native frameworks from CocoaPods by running the pod install command as below:
cd ios
pod install
License Actication
License is configured when launching the BarcodeScanner via BarcodeScanConfig. For example:
const LICENSE = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
const StartScanning = (): Promise<BarcodeScanResult> => {
let barcodeScanConfig = {
license: LICENSE
} as BarcodeScanConfig;
return BarcodeScanner.launch(barcodeScanConfig);
};
- The LICENSE string here grants a time-limited free trial which requires network connection to work.
- You can request a 30-day trial license via the Request a Trial License link.
- If you download the Installation Package, it comes with a 30-day trial license by default.
Build Your Barcode Scanner App
Preparation
-
Initialize a new React Native project with the following command:
npx @react-native-community/cli init BarcodeScanner -
Open the project folder and follow the installation section to install the dependencies.
Implementing the Barcode Scanner
Find the App.tsx file in your project and replace the file with the following code:
import React, {useState} from 'react';
import {Button, ScrollView, StyleSheet, Text, View} from 'react-native';
import {
BarcodeScanConfig,
BarcodeScanner,
BarcodeScanResult,
EnumResultStatus,
EnumScanningMode,
} from 'dynamsoft-barcode-reader-bundle-react-native';
const LICENSE = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
const StartScanning = (): Promise<BarcodeScanResult> => {
let barcodeScanConfig = {
license: LICENSE,
scanningMode: EnumScanningMode.SM_SINGLE,
} as BarcodeScanConfig;
return BarcodeScanner.launch(barcodeScanConfig);
};
const BarcodeScanResultToDisplayString = (barcodeResult: BarcodeScanResult) => {
let displayString: string;
if (barcodeResult.resultStatus === EnumResultStatus.RS_FINISHED) {
let barcode = barcodeResult?.barcodes![0];
displayString = `${barcode.formatString}: ${barcode.text}`;
} else if (barcodeResult.resultStatus === EnumResultStatus.RS_CANCELED) {
displayString = 'Scan cancelled.';
} else {
displayString = `ErrorCode: ${barcodeResult.errorCode}\n\nErrorMessage: ${barcodeResult.errorString}`;
}
return displayString;
};
function App(): React.JSX.Element {
const [display, setDisplay] = useState({text: '', isError: false});
const scanBarcode = async () => {
let barcodeResult: BarcodeScanResult;
barcodeResult = await StartScanning();
let displayString = BarcodeScanResultToDisplayString(barcodeResult);
setDisplay({text: displayString, isError: barcodeResult.resultStatus === EnumResultStatus.RS_EXCEPTION})
};
return (
<View style={styles.container}>
<ScrollView>
<Text style={[styles.text, display.isError ? styles.error : null]}>
{display.text}
</Text>
</ScrollView>
<View style={styles.spacer}/>
<Button title={'Start Scanning'} onPress={() => scanBarcode()}/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
padding: 20,
marginBottom: 50,
},
text: {marginTop: 20, fontSize: 16, color: 'black'},
error: {color: 'red'},
spacer: {height: 20},
});
export default App;
(Optional) Configure Your Barcode Scanner
You can configure the BarcodeScanner by setting the following properties in the BarcodeScanConfig object:
let barcodeScanConfig = {
license: LICENSE,
scanningMode: EnumScanningMode.SM_SINGLE,
/** Set the supported barcode format.*/
barcodeFormats: EnumBarcodeFormat.BF_QR_CODE | EnumBarcodeFormat.BF_ONED,
/** Restrict the scan region.*/
scanRegion: {top: 0.35, bottom: 0.65, left: 0.15, right: 0.85, measuredInPercentage: true},
/** Set to true to display the torch button, enabling users to turn the flashlight on/off. Default is true.*/
isTorchButtonVisible: true,
/** Enable the beep sound, or false to disable it. Default is false. */
isBeepEnabled: false,
/** Enable the vibration, or false to disable it. Default is false. */
isVibrateEnabled: false,
/** Automatically zoom in to improve barcode detection. Default is false. */
isAutoZoomEnabled: false,
/** This button allows users to exit the scanning interface. Default is true. */
isCloseButtonVisible: true,
/** This button lets users switch between available cameras (e.g., front and rear). Default is false. */
isCameraToggleButtonVisible: false,
/** A scanning laser overlay on the scanning screen. Default is true. */
isScanLaserVisible: true,
} as BarcodeScanConfig;
View all available BarcodeScanConfig properties.
Run the App
Android
Run the following command to start the app:
# using npm
npm run android
# OR using Yarn
yarn android
iOS
-
Include the camera permission via
ios/your-project-name/Info.plistinside the<dict>element:<key>NSCameraUsageDescription</key> <string></string> -
Open the workspace via the Xcode.
-
Configure the Provisioning and Signing settings.
-
Run the app via the Xcode workspace.
Full Sample Code
The full sample code is available here.
License
You can request a 30-day trial license via the Request Trial License link.
Yes
No