This example app demonstrates how to integrate the Scanbot Document Scanner SDK and Scanbot Data Capture Modules for React Native.
The Scanbot SDK is a set of high-level APIs that lets you integrate document scanning and data extraction functionalities into your mobile apps and websites. It runs on all common mobile devices and operates entirely offline. No data is transmitted to our or third-party servers.
With our Ready-To-Use UI (RTU 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.
Note: Make sure you have completed the Set Up Your Environment guide before proceeding.
Testing on an actual device is essential, so ensure you have one available, for both iOS or Android platforms.
# Install the required dependencies
yarn install
# OR using npm
npm install
For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps).
The first time you create a new project, run the Ruby bundler to install CocoaPods itself:
bundle install
Then, and every time you update your native dependencies, run:
cd ios
bundle exec pod install
-
Open the workspace file
ScanbotBarcodeExampleReact.xcworkspace(not .xcodeproj) from theiOSdirectory in Xcode. -
Adjust Provisioning and Signing settings.
Also, ensure that your app correctly handles the camera permission request in the Info.plist file to allow barcode and document scanning.
# Using npm
npm run android
# OR using Yarn
yarn android
# Using npm
npm run ios
# OR using Yarn
yarn ios
If everything is set up correctly, you should see your new React Native app running on your device.
This is not the only way to run your app — you can also run it directly from within Android Studio and Xcode respectively:
If you experience any issues, it's likely a cache problem. To clear it, run:
yarn run clean
npm cache clean --force && watchman watch-del-all- Then, restart the metro server, and your React Native document scanner should be working smoothly again.
The Scanbot React Native Document Scanner SDK offers the following 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 with decreased camera brightness. 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 the scan when the device camera is optimally positioned over the document. This minimizes blurry or incomplete scans.
-
Automatic cropping: Our SDK automatically applies perspective correction and crops scanned documents, ensuring a properly cropped image every time.
-
Custom image filters: Every use case has specific image requirements. The SDK’s custom filters allow you to transform the captured image into optimal input for your backend systems. They include several color, grayscale, and binarization options.
-
Document Quality Analyzer: This feature automatically rates the quality of the scanned pages from “very poor” to “excellent.” If it is low, it can prompt the user to rescan.
-
Export formats: The Scanbot React Native Document Scanner SDK supports several formats for exporting digitized documents (JPG, PDF, TIFF, and PNG).
 |
 |
 |
|---|
The Scanbot SDK Data Capture Modules allow you to extract data from a wide range of structured documents and to integrate OCR text recognition capabilities. They include:
This module allows quick and accurate data extraction from the machine-readable zones on identity documents. It captures all important MRZ data from IDs and passports and returns it in the form of simple key-value pairs. This is much simpler, faster, and less mistake-prone than manual data entry.
The MICR Scanner offers reliable data extraction 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.
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.
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.
Through this feature, our SDK offers document detection and data capture capabilities for a wider range of documents. It accurately identifies and crops 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 requiring additional OCR language files.
 |
 |
 |
|---|
Need help integrating or testing our React Native Document Scanner SDK? 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.
The Scanbot SDK examples will run for one minute per session without a license. After that, all functionalities and UI components will stop working.
To try the Scanbot React Native SDK without the one-minute limit, you can request a free, no-strings-attached 7-day trial license for your React Native project.
Alternatively, check out our demo apps to test the SDK.
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 to receive your quote.
Besides React Native, the Scanbot Document Scanner SDK is also available on:
- Android (native)
- iOS (native)
- Flutter
- Capacitor & Ionic (Angular)
- Capacitor & Ionic (React)
- Capacitor & Ionic (Vue.js)
- Cordova & Ionic
- .NET MAUI
- JavaScript
- Xamarin & Xamarin.Forms
Our Barcode Scanner SDK additionally also supports Compose Multiplatform / KMP, UWP (Windows), and Linux.