Scanbot React Native Barcode Scanner SDK

Table of contents

• About the Scanbot Barcode Scanner SDK
  • Supported barcode types
  • Changelog
• How to use the SDK
  • Installation
    • Requirements
    • Install steps
    • Camera permissions
    • SDK initialization
  • Barcode scanner setup
    • Scanning modes
      • Single Scanning
      • Multi Scanning
      • Find & Pick
    • Configuration options
    • UI customization
• Additional information
  • Trial license
  • Free developer support
  • Guides and tutorials

About the Scanbot Barcode Scanner SDK

The Scanbot Barcode Scanner SDK provides intuitive APIs to integrate fast, reliable barcode scanning into your React Native app.

It works entirely offline and scans barcodes in 0.04 seconds, even in challenging conditions like poor lighting or with damaged codes.

💡 For more details, check out our documentation or see our example app.

Supported barcode types

Our library supports all common 1D and 2D barcodes and multiple postal symbologies, including:

Barcode type	Symbologies
1D Barcodes	EAN, UPC, Code 128, GS1-128, Code 39, Codabar, ITF, Code 25, Code 32, Code 93, Code 11, MSI Plessey, Standard 2 of 5, IATA 2 of 5, Databar (RSS), GS1 Composite
2D Barcodes	QR Code, Micro QR Code, Aztec Code, PDF417 Code, Data Matrix Code, GiroCode, PPN, UDI, Royal Mail Mailmark, MaxiCode
Postal Symbologies	USPS Intelligent Mail Barcode (IMb), RM4SCC Barcode and Mailmark, Australia Post 4-State Customer Code, Japan Post 4-State Customer Code, KIX

💡 Please visit our docs for a complete overview of the supported barcode symbologies.

Changelog

For a detailed list of changes in each version, see the changelog.

How to use the SDK

Installation

Requirements

Check out our documentation for a full overview of our SDK's requirements.

Install steps

Install the Scanbot Barcode Scanner SDK module by running:

# Using Yarn
yarn add react-native-scanbot-barcode-scanner-sdk

# Using npm
npm install react-native-scanbot-barcode-scanner-sdk

# Using Expo
npx expo install react-native-scanbot-barcode-scanner-sdk
Copy

Expo integration

Expo projects require a development build. Configure the project using our config plugin by adding this to your app config file:

"plugins": [
  [
    "react-native-scanbot-barcode-scanner-sdk",
    {
      "iOSCameraUsageDescription": "Barcode Camera permissions",
      "androidCameraPermission": true,
      "androidCameraFeature": true,
      "mavenURLs": true
    }
  ]
],
Copy

💡 See our full installation guide for complete details.

Camera permissions

Our SDK needs camera access to scan from a live camera stream.

Note: If you use Expo, the permissions can be configured using our config plugin, and this step can be skipped.

Android​

Add these camera permissions to your android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
Copy

We added the uses-feature tag for better recognition in the Google Play Store (learn more). Our Ready-to-Use UI Components handle runtime permissions automatically.

iOS​

Add this camera permission description to ios/{projectName}/Info.plist inside the element:

<key>NSCameraUsageDescription</key>
<string>Camera permission is needed to scan barcodes</string>
Copy

SDK initialization

Initialize the SDK before using any features, ideally when your app launches.

Add this import to the top of your file:

import ScanbotBarcodeSDK from 'react-native-scanbot-barcode-scanner-sdk';
Copy

Initialize the SDK with:

ScanbotBarcodeSDK
.initializeSdk({ licenseKey: "" })
.then(result => console.log(result))
.catch(err => console.log(err));
Copy

💡 You can test the SDK without a license key for 60 seconds per app session. Need longer testing? Get your free trial license key.

Barcode scanner setup

Scanning modes

In our ready-to-use UI, the Scanbot Barcode Scanner SDK offers the following scan modes right-out-of-the-box.

Single Scanning

This is the default scanning mode. It is optimized for detecting a single barcode at a time.

/**
 * Instantiate a configuration object of BarcodeScannerScreenConfiguration and
 * start the barcode scanner with the configuration
 */
const config = new BarcodeScannerScreenConfiguration();
const result = await ScanbotBarcodeSDK.startBarcodeScanner(config);
Copy

Multi Scanning

The barcode scanner can also be configured to scan multiple barcodes in one go without closing the scanning screen. It can also count the scanned items.

/**
 * Instantiate a configuration object of BarcodeScannerScreenConfiguration and
 * start the barcode scanner with the configuration
 */
const config = new BarcodeScannerScreenConfiguration();
config.useCase = new MultipleScanningMode();
const result = await ScanbotBarcodeSDK.startBarcodeScanner(config);
Copy

Find & Pick

Given one or more barcodes, the SDK visually highlights and scans the correct items for your users. It automatically selects the barcode with the right barcode value from your camera feed.

/**
 * Instantiate a configuration object of BarcodeScannerScreenConfiguration and
 * start the barcode scanner with the configuration
 */
const config = new BarcodeScannerScreenConfiguration();
config.useCase = new FindAndPickScanningMode();
config.useCase.expectedBarcodes = [
  new ExpectedBarcode({
    barcodeValue: '123456',
    title: 'numeric barcode',
    count: 4,
    image: 'https://avatars.githubusercontent.com/u/1454920',
  }),
  new ExpectedBarcode({
    barcodeValue: 'SCANBOT',
    title: 'value barcode',
    count: 3,
    image: 'https://avatars.githubusercontent.com/u/1454920',
  }),
];
const result = await ScanbotBarcodeSDK.startBarcodeScanner(config);
Copy

Configuration options

The Scanbot React Native Barcode Scanner SDK offers numerous configuration options:

• Barcode filters: Apply filters by barcode type or content, with regex pattern support to capture only relevant barcodes.

• AR overlay: Optional feature providing real-time barcode highlighting, preview, and tap-to-select functionality. Recognized barcodes are highlighted with customizable frames and text.

• Barcode parsers: Extract structured information from 2D barcodes like QR and Data Matrix codes. These include parsers for documents such as driving licenses (AAMVA), boarding passes, medical certificates, SEPA forms, Swiss QR codes, and vCard business cards.

• Scanning barcodes from an image: Detect barcodes from still images in JPG or other formats, with support for single and multi-image detection.

UI customization

Customize the UI to match your app's look and feel. Please refer to our documentation for a full overview of the visual configuration options.

• Configuring UI Elements: Tailor interface elements with custom guidance text, enable or disable the Top Bar, or configure the Action Bar with features like Flashlight and Zoom buttons.

• Palette: Configure your UI's color palette to match your brand design for a cohesive user experience.

• Localization: Easily localize strings displayed on buttons, labels, and text fields.

// Example for configuring the Scanbot SDK's UI customization options

/**
 * Instantiate a configuration object of BarcodeScannerScreenConfiguration and
 * start the barcode scanner with the configuration
 */
const config = new BarcodeScannerScreenConfiguration();

// Adjusting the text for your user guidance
config.localization.userGuidance = 'Please hold your camera over the barcode';

// Adjusting the text on the 'Cancel' Button
config.localization.topBarCancelButton = 'Dismiss';

// Changing the color palette
config.palette.sbColorPrimary = '#000000';
config.palette.sbColorNegative = '#ff3737';

const result = await ScanbotBarcodeSDK.startBarcodeScanner(config);
Copy

Additional information

Trial license

The Scanbot SDK will run for one minute per session without a license. After that, all functionalities and UI components will stop working.

To try the React Native Barcode Scanner SDK without the one-minute limit, you can request a free, no-strings-attached 7-day trial license.

Our pricing model is simple: Unlimited barcode scanning for a flat annual license fee, full support included. There are no tiers, usage charges, or extra fees. Contact our team to receive your quote.

Free developer support

Need help integrating or testing our Barcode Scanner SDK in your React Native project? We offer free developer support via Slack, MS Teams, or email.

As a customer, you also get access to a dedicated support Slack or Microsoft Teams channel to talk directly to your Customer Success Manager and our engineers.

Guides and tutorials

Do you want to enable your app to scan barcodes or QR codes? Integrating the Scanbot React Native Barcode Scanner plugin into your mobile app takes just a few minutes.

💡 Our React Native Barcode Scanner tutorial walks you through the integration process step by step. Follow along to implement a powerful QR code scanner feature quickly.

Alternatively, check out our developer blog for a collection of in-depth tutorials, use cases, and best practices.