Skip to main content

Getting started | React Native Document Scanner

Installation#

The Scanbot SDK module is available as an npm package.

You can simply add it to your project with npm install:

npm install --save react-native-scanbot-sdk

React Native Autolinking#

Since version 4.0 react-native-scanbot-sdk requires React Native v0.60 or higher, which supports the Autolinking feature. So "react-native link" should not be used anymore. Please unlink the native dependencies of react-native-scanbot-sdk if you are migrating from a previous version to react-native-scanbot-sdk@4.x.

Android Setup#

Scanbot SDK Maven Repositories

This React Native module depends on the native Scanbot SDK for Android. The Scanbot SDK for Android is distributed through our private Maven repositories. Please add these repositories in your android/build.gradle file in the section allprojects > repositories:

allprojects {    repositories {        mavenLocal()        maven {            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm            url "$rootDir/../node_modules/react-native/android"        }
        google()        jcenter()
        // Scanbot SDK Maven repositories:        maven { url 'https://nexus.scanbot.io/nexus/content/repositories/releases/' }        maven { url 'https://nexus.scanbot.io/nexus/content/repositories/snapshots/' }    }}

Add SDK Project Reference

As of react-native v0.62, Scanbot SDK reference needs to be included in your settings.gradle, as such:

include ':react-native-scanbot-sdk'project(':react-native-scanbot-sdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-scanbot-sdk/android/app')

Enable Multidex

Make sure you have enabled multidex by setting multiDexEnabled to true in your app module-level build.gradle file:

android {  ...  defaultConfig {    ...    multiDexEnabled true  }}

Also add the following config in your build.gradle to avoid conflicts with the lib filename libc++_shared.so, which is used by React Native as well as by many other 3rd-party modules:

android {  ...  packagingOptions {      pickFirst '**/libc++_shared.so'  }}

Tuning the Android Manifest

Since your application will work with high-resolution images, it is strongly recommended to add the property android:largeHeap="true" in the <application> element of your android/app/src/main/AndroidManifest.xml file, especially for Android <= 7.x. Processing hi-res images is a memory intensive task and this property will ensure your app has enough heap allocated to avoid OutOfMemoryError exceptions.

<application ... android:largeHeap="true">  ...</application>

iOS Setup#

Please note that since version 4.0 of react-native-scanbot-sdk the iOS integration can be done only via CocoaPods.

In your ios/Podfile add the "RNScanbotSDK" pod:

pod 'RNScanbotSDK', :path => '../node_modules/react-native-scanbot-sdk'

The pod RNScanbotSDK defines a dependency to the pod ScanbotSDK which is the native Scanbot SDK iOS Framework.

If you need features like OCR or MRZ Scanner, you have to add the corresponding additional bundles by specifying the following subspecs:

  • OCR: for the default OCR data bundle ScanbotSDKOCRData.bundle containing default language files for DE and EN
  • MRZ: for the MRZ Scanner data bundle ScanbotSDKMRZData.bundle
  • MLDETECT: For ML-based Document detection
  • ALL: for all available bundles (default, currently OCR + MRZ)

Example for MRZ subspecs/bundle:

pod 'RNScanbotSDK/MRZ', :path => '../node_modules/react-native-scanbot-sdk'

Example to include all bundles - ALL subspecs:

pod 'RNScanbotSDK/ALL', :path => '../node_modules/react-native-scanbot-sdk'

NOTE!

As of v0.62 of react-native and v4.1.0 of react-native-scanbot-sdk, the above step is not required if you do not need the Scanbot SDK features OCR, MRZ or MLDETECT. react-native resolves your native dependencies (.podspec) from the package name in your package.json file and adds the default podspec 'NONE'. The podspec 'NONE' does not include the Scanbot SDK features OCR, MRZ, MLDETECT.

Run:

$ cd ios/$ pod install --repo-update

That is it, no manual linking required anymore! Just open the Xcode workspace (.xcworkspace) and you should be able to build the native Scanbot SDK linked via CocoaPods.

The following screenshot shows the proper setup of the pod RNScanbotSDK with the resolved dependency to the pod ScanbotSDK via CocoaPods using the subspec ALL:

xcode_pods

Permissions#

In order to operate correctly an application that utilizes ScanbotSDK module must have all required permissions to your App. Here is a listing of those permissions:

Android (must be added in your android/app/src/main/AndroidManifest.xml file)

  • <uses-permission android:name="android.permission.CAMERA" /> - This permission is used for the camera views.
  • <uses-feature android:name="android.hardware.camera" /> - Camera hardware features.

iOS (must be added in your Info.plist file)

  • NSCameraUsageDescription - "Privacy - Camera Usage Description". Describe why your app wants to access the device's camera.