Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »


2.4.1 • Public • Published

Genius Scan SDK for React Native


This React Native component allows you to access the Genius Scan SDK core features from a React Native application:

  • Automatic document detection
  • Document perspective correction
  • Image enhancement with 4 different modes (Grayscale, Color, Black & white, Photo)


This component is based on the Genius Scan SDK for which you need to setup a licence. You can already try the "demo" version for free by not setting a licence key, the only limitation being that the app will exit after 60 seconds.

To buy a licence or for any question regarding the SDK, please contact us at sdk@thegrizzlylabs.com.

Demo application

As an example, you can check our demo application

Getting started

From your React Native root folder.

$ npm install @thegrizzlylabs/react-native-genius-scan --save
$ react-native link @thegrizzlylabs/react-native-genius-scan

Additional steps on Android

  • To your app's /android/build.gradle file, add the @thegrizzlylabs/react-native-genius-scan library dependency
allprojects {
    repositories {
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        flatDir {
            dirs "$rootDir/../node_modules/@thegrizzlylabs/react-native-genius-scan/android/libs"
  • To your app /android/app/build.gradle, change minSdkVersion to 19.

  • Add the required permissions in AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

Additional steps for iOS

Open your Xcode project file (ios/*****.xcodeproj), and:

  • Add GSSDK.framework, located in node_modules/@thegrizzlylabs/react-native-genius-scan/ios, to your project "Embedded Libraries"

  • Add the path ${PROJECT_DIR}/../node_modules/@thegrizzlylabs/react-native-genius-scan/ios to your project "Framework Search path" (in build )

  • Add the required permission to your Info.plist

NSCameraUsageDescription - “Privacy - Camera Usage Description”.

Manual linking

Instead of using react-native link, you can proceed manually. But you will still need to follow the additional steps described above.


  1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modules@thegrizzlylabs/react-native-genius-scan and add RNGeniusScan.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libRNGeniusScan.a to your project's Build PhasesLink Binary With Libraries
  4. Run your project Cmd+R


  1. Open up android/app/src/main/java/[...]/MainActivity.java
  • Add import com.reactlibrary.RNGeniusScanPackage; to the imports at the top of the file
  • Add new RNGeniusScanPackage() to the list returned by the getPackages() method
  1. Append the following lines to android/settings.gradle:
    include ':@thegrizzlylabs_react-native-genius-scan'
    project(':@thegrizzlylabs_react-native-genius-scan').projectDir = new File(rootProject.projectDir, '../node_modules/@thegrizzlylabs/react-native-genius-scan/android')
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
      compile project(':@thegrizzlylabs_react-native-genius-scan')


Set the licence key


Initialize the SDK with a valid licence key.

It returns a promise that is resolved if the licence key is valid and rejected if it is not.

Note that, for testing purpose, you can also use the plugin without a licence key, but it will only work for 60 seconds.

Scan an existing image

RNGeniusScan.scanPicture(imageUri, scanOptions)

Pass the given image through document detection, perspective correction and image enhancement.

It returns a promise that will resolve to the resulting imageURI, or reject with an error message.

Param Type Description
imageFileUri String file URI to the original JPEG file to be transformed with the plugin (Note: it won't be overriden by the plugin)
scanOptions Object Scan Options

Scan a picture from the camera


Same as RNGeniusScan.scanPicture but the initial picture is taken with the camera.

Param Type Description
scanOptions Object Scan Options

Generate a pdf from images

RNGeniusScan.generatePDF(imageFileUris, pdfOptions)

Generates a pdf from the list of image URIs given as first param.

It returns a promise that will resolve to the resulting pdf URI, or reject with an error message.

Param Type Description
imageFileUris Array Array of URIs to JPEG files that will be converted, in the given order, into a pdf
pdfOptions Object Options for pdf generation
pdfOptions.password String Password to protect the pdf

Scan options

scanOptions can be used to customize the scanning interface:

Param Type Description
scanOptions.defaultEnhancement String Force a specific image enhancement by default. Accepted values: RNGeniusScan.ENHANCEMENT_BW, RNGeniusScan.ENHANCEMENT_COLOR, RNGeniusScan.ENHANCEMENT_PHOTO


Scanning a picture from the camera

import RNGeniusScan from '@thegrizzlylabs/react-native-genius-scan';
.then(() => {
    return RNGeniusScan.scanCamera()
.then((enhancedImageUri) => {
    // Do something with the enhanced image
.catch((error) => {
    // Handle error

Scanning an existing picture

import RNGeniusScan from '@thegrizzlylabs/react-native-genius-scan';
const imageUri = 'file://xxxxx' // imageUri from an existing file
.then(() => {
    return RNGeniusScan.scanPicture(imageUri)
.then((enhancedImageUri) => {
    // Do something with the enhanced image
.catch((error) => {
    // Handle error


npm i @thegrizzlylabs/react-native-genius-scan

Downloadsweekly downloads






last publish


  • avatar
  • avatar
Report a vulnerability