Check Scanner UI | React Native Document Scanner

The Scanbot SDK provides the ability to detect various types of checks in an image, crop them and recognize data fields via the Check Scanner.

Currently, the Check Scanner supports the following types of checks:

USACheck - a check compatible with the ASC X9 standard used in the USA
FRACheck - a check format commonly used in France
KWTCheck - a check format commonly used in Kuwait
AUSCheck - a check compatible with the Australian Paper Clearing System check standard
INDCheck - a check compatible with the CTS-2010 standard issued by the Reserve Bank of India in 2012
ISRCheck - a check format commonly used in Israel

Integrating the Check Scanner UI

import ScanbotSDK, { CheckRecognizerConfiguration } from 'react-native-scanbot-sdk';

const config: CheckRecognizerConfiguration = {
    topBarBackgroundColor: '#ff0000',
    acceptedCheckStandards: ['USA', 'IND'],
};

const result = await ScanbotSDK.UI.startCheckRecognizer(config);
if (result.status === 'CANCELED') {
  // user has canceled the scanning operation
  return;
}

Handling the Result

When using Typescript, you can cast your fields to a specific check standard result:

import {USACheckDocument, INDCheckDocument} from 'react-native-scanbot-sdk';

if(result.checkType === 'USA') {
    const usaResult = result.check as USACheckDocument;
    // ...
} else if (result.checkType === 'IND') {
    const indResult = result.check as INDCheckDocument;
    // ...
}

These are the available types:

export interface CheckRecognizerResult {
  /** Check Document */
  check:
    | USACheckDocument
    | FRACheckDocument
    | KWTCheckDocument
    | AUSCheckDocument
    | INDCheckDocument
    | ISRCheckDocument
    | UnknownCheckDocument;

  /** The status of the operation */
  checkStatus: CheckStatus;

  /** The URI of the snapped Check Image */
  imageFileUri?: string;

  /** The type of the recognized check */
  checkType: CheckStandard;
}
export interface CheckDocument extends GenericDocumentWrapper {
    /** Detected raw string */
    rawString: Field;
    /** type of check font */
    fontType?: Field;
}
/** A check compatible with the ASC X9 standard used in the USA  */
export interface USACheckDocument extends CheckDocument  {
    /** Auxiliary On-Us */
    auxiliaryOnUs?: Field;
    /** Transit number */
    transitNumber: Field;
    /** Account number */
    accountNumber: Field;
}
/** A check format commonly used in France  */
export interface FRACheckDocument extends CheckDocument  {
    /** Cheque number */
    chequeNumber: Field;
    /** Routing number */
    routingNumber: Field;
    /** Account number */
    accountNumber: Field;
}
/** A check format commonly used in Kuwait  */
export interface KWTCheckDocument extends CheckDocument  {
    /** Cheque number */
    chequeNumber: Field;
    /** Sort code */
    sortCode: Field;
    /** Account number */
    accountNumber: Field;
}
/** A check compatible with the Australian Paper Clearing System cheque standard  */
export interface AUSCheckDocument extends CheckDocument  {
    /** Extra auxiliary domestic */
    extraAuxDomestic?: Field;
    /** Auxiliary domestic */
    auxDomestic?: Field;
    /** BSB */
    bsb: Field;
    /** Account number */
    accountNumber: Field;
    /** Transaction code */
    transactionCode: Field;
}
/** A check compatible with the CTS-2010 standard issued by the Reserve Bank of India in 2012  */
export interface INDCheckDocument extends CheckDocument  {
    /** Serial number */
    serialNumber: Field;
    /** Sort number */
    sortNumber?: Field;
    /** Account number */
    accountNumber: Field;
    /** Transaction code */
    transactionCode: Field;
}
/** A check format commonly used in Israel  */
export interface ISRCheckDocument extends CheckDocument  {
    /** Cheque number */
    chequeNumber: Field;
    /** Bank number */
    bankNumber: Field;
    /** Branch number */
    branchNumber: Field;
    /** Account number */
    accountNumber: Field;
}

/** A check that doesn't conform to any supported standard  */
export interface UnknownCheckDocument extends CheckDocument  {
}

Customization

The UI and the behavior of the Check Scanner can be customized by passing the configs value via CheckRecognizerConfiguration:

All configuration options are optional.

export interface CheckRecognizerConfiguration {
  /** Accepted check standards. Optional, by default - all checks are accepted. With an empty list no filter is applied and all checks are accepted. */
  acceptedCheckStandards?: CheckStandard[];

  /** The preferred camera module (default - BACK). */
  cameraModule?: CameraModule;

  /** Background color outside of the finder window. */
  cameraOverlayColor?: string;

  /** Title of the cancel button. */
  cancelButtonTitle?: string;

  /** Whether the cancel button is hidden or not. iOS only. */
  cancelButtonHidden?: boolean;

  /** Set high-resolution Check image capturing. If set to TRUE a high-resolution photo of the check is captured to run the recognition on. Upon successful recognition the recognition result also contains a high-resolution image of the check. If set to FALSE, the video frames will be used for recognition and result image delivery. The default value is TRUE. */
  captureHighResolutionImage?: boolean;

  /** Title of the button that opens the screen where the user can allow the usage of the camera by the app. */
  enableCameraButtonTitle?: string;

  /** Text that will be displayed when the app is not allowed to use the camera, prompting the user to enable the usage of the camera. */
  enableCameraExplanationText?: string;

  /** The style of the dialog/alert in case of error. iOS only. */
  errorDialogStyle?: DialogStyle;

  /** The style of the dialogs/alerts OK button in case of error. iOS only. */
  errorDialogButtonStyle?: DialogButtonStyle;

  /** String being displayed as the title in the error alert that may occur when the recognition fails on captured high-resolution images. iOS only. */
  errorAlertTitle?: string;

  /** String being displayed as the message in the error alert that may occur when the recognition fails on captured high-resolution images. iOS only. */
  errorAlertMessage?: string;

  /** String being displayed as the button text in the error alert that may occur when the recognition fails on captured high-resolution images. iOS only. */
  errorAlertButtonText?: string;

  /** Aspect ratio of finder frame (width \ height), which is used to build actual finder frame. */
  finderAspectRatio?: FinderAspectRatio;

  /** Foreground color of the detection overlay. */
  finderLineColor?: string;

  /** Width of finder frame border. Default is 2. */
  finderLineWidth?: number;

  /** Controls whether the flash should be initially enabled. The default value is FALSE. */
  flashEnabled?: boolean;

  /** UI Interface orientation lock mode. */
  orientationLockMode?: OrientationLockMode;

  /** The background color of the top toolbar. */
  topBarBackgroundColor?: string;

  /** The color of all active toggle buttons in the toolbar. */
  topBarButtonsActiveColor?: string;

  /** The color of all inactive toggle buttons in the toolbar. */
  topBarButtonsInactiveColor?: string;

  /** The background color of the user guidance hints. */
  userGuidanceBackgroundColor?: string;

  /** The text color of the user guidance hints. */
  userGuidanceTextColor?: string;

  /** Configuration that helps to override default hint values. */
  userGuidanceStringValues?: CheckUserGuidanceStrings;

  /** Controls whether buttons should use all capitals style, as defined by the Android Material Design. Defaults to TRUE. Android only. */
  useButtonsAllCaps?: boolean;

  /** Preview mode of the camera. FILL_IN or FIT_IN. Default is FILL_IN. Android only. */
  cameraPreviewMode?: CameraPreviewMode;
}

Recognizing a check on an image

You can also recognize a check on an image by calling the SDK function:

import ScanbotSDK from 'react-native-scanbot-sdk';

const result = await ScanbotSDK.recognizeCheck(YOUR_IMAGE_URI);

In order to parse the result, please check the section above

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

Check Scanner UI | React Native Document Scanner

Integrating the Check Scanner UI

Handling the Result

Customization

Recognizing a check on an image

Want to scan longer than one minute?

What do you think of this documentation?

On this page

Check Scanner UI | React Native Document Scanner

Integrating the Check Scanner UI​

Handling the Result​

Customization​

Recognizing a check on an image​

Want to scan longer than one minute?

What do you think of this documentation?

On this page

Integrating the Check Scanner UI

Handling the Result

Customization

Recognizing a check on an image