Skip to main content

React Native Document Scanner SDK - Getting Started

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.

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.

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 at the bottom of your settings.gradle, after the :app module and the React Native related configurations, as such:

...
include ':app'

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

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.

The iOS SDK comes in various bundles:

  • NONE (or default): the default SDK bundle with no additional data

  • OCR: Default OCR data bundle ScanbotSDKOCRData.bundle containing default language files for DE and EN

  • MRZ: MRZ Scanner data bundle ScanbotSDKMRZData.bundle

  • MLDETECT: ML-based Document detection

  • ALL: All available bundles

If you want to go with the default NONE bundle, you don't have to do any further configuration, since React Native Autolinking will take care of that for you.

However, if you need additional bundles, you have to disable autolinking and include the pods manually.

To disable autolinking, create a react-native.config.js file in your project folder and paste the following content:

module.exports = {
dependencies: {
'react-native-scanbot-sdk': {
platforms: {ios: null},
},
},
};

Then you can include the desired subspecs/bundles in your ios/Podfile:

  • 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 for RN < v0.62 and react-native-scanbot-sdk < v4.1.0: For versions older than v0.62 of react-native and v4.1.0 of react-native-scanbot-sdk, you have to link the SDK manually, even if you only want the default bundle. You can add the RNScanbotSDK pod in your ios/Podfile:

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

This is equivalent to installing the NONE bundle.

Installing the Pods

When you are done, you can then install the pods:

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

That is it! 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

Want to scan longer than one minute?

Generate your free "no-strings-attached" Trial License and properly test the Scanbot SDK.

Get your free Trial License

What do you think of this documentation?