Skip to main content

React Native Document Scanner SDK - Getting Started

Installation​

The Scanbot SDK module is available as an npm package.

 yarn add react-native-scanbot-sdk

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 (plugin will try to add these permissions automatically 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 manually in your Info.plist file)

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

Android Setup​

Starting from v5.1.0, there is no need to manually link the plugin in your project. Linking is done automatically, but you need to remove the manual linking (if it already exists in your project) in android/settings.gradle, otherwise the plugin won't work.

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

  • 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:
pod 'RNScanbotSDK/ALL', :path => '../node_modules/react-native-scanbot-sdk'

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

Expo​

npx expo install react-native-scanbot-sdk

Integration with Expo is possible only when using a development build. The project is configurable using our config plugin or manually configure the native projects. To utilize the plugin you can add the following in your app config file:

"plugins": [
  [
    "react-native-scanbot-sdk",
    {
      "iOSCameraUsageDescription": "Document & Barcode Scanning permission",
      "largeHeap": true,
      "mavenURLs": true,
      "ocrBlobsDirPath": "./ocr_blobs"
    }
  ]
],
  • iOSCameraUsageDescription: Adds NSCameraUsageDescription in Info.plist. The permission can also be added via Expo Permissions
  • largeHeap: Adds android:largeHeap property in <application> element in AndroidManifest.xml
  • mavenURLs: Adds Scanbot Barcode Scanner SDK Maven urls for Android local development. These URLs are already included in our package's build.gradle, but need to be added due to how Expo starts the Android app
  • ocrBlobsDirPath: Adds ocr_blobs for Android and iOS. Specify a path of a directory that contains only .traineddata files. For Android, the files are copied over from the specified path in android/app/src/main/assets/ocr_blobs. For iOS, a ScanbotSDKOCRData.bundle is created and added as a resource, and the files are copied over from the specified path. See more about ocr installation

Want to scan longer than one minute?

Generate a free trial license to test the Scanbot SDK thoroughly.

Get your free Trial License

What do you think of this documentation?

On this page

Scroll to top