Scanbot React Native Document Scanner SDK and Data Capture Modules

Table of contents

• Scanbot React Native Document Scanner SDK and Data Capture Modules
  • Table of contents
  • About the Scanbot SDK
    • Changelog
  • How to use the SDK
    • Requirements
    • Install steps
      • Expo Integration
    • Camera permissions
      • Android
      • iOS
    • SDK initialization
    • Implementing the document scanner
  • Overview of the Scanbot SDK
    • Document Scanner SDK
    • Data Capture Modules
      • MRZ Scanner
      • Check Scanner (MICR)
      • Text Pattern Scanner
      • VIN Scanner
      • Document Data Extractor
  • Additional information
    • Trial license
    • Free developer support
    • Guides and tutorials

About the Scanbot SDK

The Scanbot SDK provides high-level APIs that let you integrate document scanning and data extraction into your mobile apps and websites. It runs on all common mobile devices entirely offline, without transmitting data to our or third-party servers.

With our Ready-To-Use UI components, you can integrate the Scanbot SDK into your React Native app in less than an hour.

💡 For more details about the Scanbot Document Scanner SDK and Data Capture Modules, please check out our documentation or see our example app.

Changelog

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

How to use the SDK

Requirements

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

Install steps

Install the Scanbot SDK module by running:

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

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

# Using Expo
npx expo install react-native-scanbot-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-sdk",
    {
      "iOSCameraUsageDescription": "Document & Barcode Scanning permission",
      "largeHeap": true,
      "mavenURLs": true,
      "ocrBlobsDirPath": "./ocr_blobs"
    }
  ]
],
Copy

Camera permissions

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

Note: If you use Expo, you can configure the permissions using our config plugin, and skip this step.

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

iOS

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

<key>NSCameraUsageDescription</key>
<string>Camera permission is needed to scan documents</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 ScanbotSDK from 'react-native-scanbot-sdk';
Copy

Initialize the SDK with:

ScanbotSDK
.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.

Implementing the document scanner

With our Ready-To-Use UI (RTU UI) components, you can start the document scanner screen with just a few lines of code:

// Example for launching the Scanbot Document Scanner SDK

import {
  DocumentScanningFlow,
  startDocumentScanner,
} from 'react-native-scanbot-sdk/ui_v2';

async function startScanning() {
  try {
    /** Create the default configuration instance */
    const configuration = new DocumentScanningFlow();
    /** Start the Document Scanner UI */
    const documentResult = await startDocumentScanner(configuration);
    /** Handle the document if the status is 'OK' */
    if (documentResult.status === 'OK') {
    }
  } catch (e: any) {
    console.error(e.message);
  }
}
Copy

Note: This example demonstrates the minimal implementation. For more configuration options or to learn how to integrate our data capture modules, visit our full documentation.

Overview of the Scanbot SDK

Document Scanner SDK

The Scanbot React Native Document Scanner SDK includes these key features:

• User guidance: Ease of use is crucial for large user bases. Our on-screen user guidance helps even non-tech-savvy users create perfect scans under any conditions, even in poor lighting conditions. This feature ensures that documents are properly framed and aligned before the scan is taken, ensuring the best quality of the captured image.

• Automatic capture: The SDK automatically captures scans when the device camera is optimally positioned over the document, minimizing blurry or incomplete scans.

• Automatic cropping: Our SDK applies perspective correction and crops scanned documents automatically, ensuring properly cropped images every time.

• Custom image filters: Transform captured images to meet your specific requirements with custom filters, including several color, grayscale, and binarization options.

• Document Quality Analyzer: Automatically rates scanned page quality from "very poor" to "excellent." If quality is low, it prompts users to rescan.

• Export formats: Export digitized documents in several formats (JPG, PDF, TIFF, and PNG).

Data Capture Modules

The Scanbot SDK Data Capture Modules allow you to extract data from structured documents and integrate OCR text recognition. These modules include:

MRZ Scanner

Quickly extract data from machine-readable zones on identity documents. It captures all important MRZ data from IDs and passports and returns it as simple key-value pairs—faster and more accurate than manual data entry.

Check Scanner (MICR)

Extract data from international paper checks, capturing check numbers, routing numbers, and account numbers from MICR codes. This simplifies workflows and reduces errors that frustrate customers and employees.

Text Pattern Scanner

Our Text Pattern Scanner allows quick and accurate extraction of single-line data. It captures information based on customizable patterns tailored to your specific use case. This replaces error-prone manual data entry with automatic capture.

VIN Scanner

The VIN scanner enables instant capture of vehicle identification numbers (VINs) from trucks or car doors. It uses OCR to convert the image of the VIN code into structured data for backend processing. This module integrates into mobile or web-based fleet management applications, enabling you to replace error-prone manual entry with fast, reliable data extraction.

Document Data Extractor

Identify and crop various standardized document types, including German ID cards, passports, driver's licenses, residence permits, and the EHIC. It uses the Scanbot OCR engine for accurate data field recognition without needing additional OCR language files.

Additional information

Trial license

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

To try the React Native Document 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 document scanning for a flat annual license fee, full support included. There are no tiers, usage charges, or extra fees. Contact our team for your quote.

Free developer support

Need help integrating our Document 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

Want to enable document scanning in your app? You can integrate the Scanbot React Native Document Scanner plugin in just minutes.

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