Barcode Scanner UI | React Native Document Scanner

Barcode and QR Code Scanner

ScanbotSdk.UI.startBarcodeScanner(configuration: BarcodeScannerConfiguration): Promise

Opens a Scanning UI for barcodes and QR codes.

Returns

The promise resolves to an object with the following properties:

• status - 'OK' if a barcode was scanned, 'CANCELED' if the user canceled the scanner UI.
• format - Format of detected barcode/QR code (e.g. CODE_128, EAN_13, QR_CODE, etc).
• value - Text value of detected barcode/QR code.

Options:

All settings are optional.

configuration.barcodeFormats is an optional array of barcode formats that acts as a detection filter. By default all supported formats will be detected.

• configuration.acceptedDocumentFormats is an optional array of barcode document formats that act as a detection filter. By default all supported document formats will be detected.

export interface BarcodeScannerConfiguration {
  /** An optional array of barcode document formats that act as a detection filter. By default all supported document formats will be detected. */
  acceptedDocumentFormats?: BarcodeDocumentFormat[];

  /** The extension filter for EAN and UPC barcodes. */
  barcodesExtensionFilter?: BarcodesExtensionFilter;

  /** Filter barcodes results by regular expression. To accept scanned barcode, regular expression should match the entire barcode value. By default, no filter is applied */
  barcodeValueFilter?: string;

  /** Background color of the detection overlay. */
  cameraOverlayColor?: string;

  /** Background color of the detection overlay. */
  cameraModule?: CameraModule;

  /** The relative initial zoom level of the camera in the range (0,1), where 0 is zoomed out and 1 is zoomed in. Default value is 0.0. */
  cameraZoomFactor?: number;

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

  /** String being displayed on the cancel button. */
  cancelButtonTitle?: string;

  /** The engine mode to be used for barcode scanning. The default value is NEXT_GEN. */
  engineMode?: EngineMode;

  /** 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;

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

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

  /** String being displayed as description. */
  finderTextHint?: string;

  /** Foreground color of the description label. */
  finderTextHintColor?: string;

  /** Aspect ratio of finder frame (width \ height), which is used to build actual finder frame. Default is 1 - it is a square frame, which is good for QR capturing. */
  finderAspectRatio?: AspectRatio;

  /** Controls whether the flash toggle button is hidden or not. iOS only. */
  flashButtonHidden?: boolean;

  /** String being displayed on the flash button. iOS only. */
  flashButtonTitle?: string;

  /** Foreground color of the flash button when flash is off. */
  flashButtonInactiveColor?: string;

  /** Whether flash is toggled on or off. */
  flashEnabled?: boolean;

  /** Disables auto-focus and locks the lens at the specified focus lock lens position. Default value is false. iOS only. For Android, minFocusDistanceLock can be used. */
  focusLockEnabled?: boolean;

  /** The position of the lens. Values can be between 0.0f (minimum focusing distance) and 1.0f (maximum focusing distance). The default value is 0.0 iOS only. For Android, minFocusDistanceLock can be used. */
  focusLockPosition?: number;

  /** Whether touch-to-focus is enabled on camera preview. Enabled by default. Android only. */
  touchToFocusEnabled?: boolean;

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

  /** Optional minimum required text length of the detected barcode. The default is 0 (setting is turned off). NOTE - This feature works on ITF barcodes only. */
  minimumTextLength?: number;

  /** Optional maximum text length of the detected barcode. The default is 0 (setting is turned off). NOTE - This feature works on ITF barcodes only. */
  maximumTextLength?: number;

  /** Lock focus distance withing minimum possible range */
  minFocusDistanceLock?: boolean;

  /** Optional minimum required quiet zone on the barcode. Measured in modules (the size of minimal bar on the barcode). The default is 10. NOTE - This feature works on ITF barcodes only. */
  minimum1DBarcodesQuietZone?: number;

  /** With this option enabled, the scanner removes checks digits for UPC, EAN and MSI Plessey codes. Has no effect if both single and double digit MSI Plessey checksums are enabled. The default is `false` */
  stripCheckDigits?: boolean;

  /** Whether scanner screen should make a sound on successful barcode or MRZ detection. */
  successBeepEnabled?: boolean;

  /** Background color of the top bar. */
  topBarBackgroundColor?: string;

  /** Foreground color of the cancel button. */
  topBarButtonsColor?: string;

  /** Accepted barcode formats */
  barcodeFormats?: BarcodeFormat[];

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

  /** If `true`, replaces the cancel button in the top bar with a back arrow icon. The default value is FALSE. Android only. */
  replaceCancelButtonWithIcon?: boolean;

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

  /** The range of valid camera zoom factors. Default value is (1.0; 12.0). */
  cameraZoomRange?: ZoomRange;

  /** Sets auto close timer in seconds. 0 = disabled and it is the default value. */
  autoCancelTimeout?: number;

  /** The GS1 handling mode. The default value is PARSE. */
  gs1HandlingMode?: Gs1HandlingMode;

  /** The checksum algorithm for MSI Plessey barcodes. The default value is MOD_10. */
  msiPlesseyChecksumAlgorithm?: MSIPlesseyChecksumAlgorithm;

  /** If `true`, enabled the mode which slightly decreases the scanning quality and the energy consumption, and increases the scanning speed. If `false` - mode is disabled. The default is `false`. Android only. */
  lowPowerMode?: boolean;

  /** The expected density of QR codes in an image. */
  codeDensity?: CodeDensity;

  /** Scanning delay after scanner appearance in seconds. Defaults to 0 secs. */
  initialScanDelay?: number;

  /** Freezes a preview after a scan for a given amount of seconds. Defaults to 0 secs. Android only. */
  delayAfterScan?: number;

  /** When this property is set to true, the zoom can be activated by double tapping somewhere in the receivers view. iOS only. */
  doubleTapToZoomEnabled?: boolean;

  /** When this property is set to true, the zoom can be activated by a pinch gesture somewhere in the receivers view. iOS only. */
  pinchToZoomEnabled?: boolean;

  /** Defines, if zooming in or out should be animated. iOS only. */
  shouldAnimateZooming?: boolean;

  /** Display the region of interest. The default value is TRUE. */
  viewFinderEnabled?: boolean;

  /** The confirmation dialog configuration. */
  confirmationDialogConfiguration?: ConfirmationDialogConfiguration;

  /** The selection overlay configuration. */
  overlayConfiguration?: SelectionOverlayConfiguration;
}

Batch Barcode and QR Code Scanner

ScanbotSdk.UI.startBatchBarcodeScanner(configuration: BatchBarcodeScannerConfiguration): Promise

Opens a Scanning UI to scan multiple barcodes and QR-codes in a row.

Result:

The promise resolves to a result object with the following properties:

• result.status - 'OK' If there is at least one barcode in the result list available, 'CANCELED' if the user canceled the operation (tapped on the "cancel" button).
• result.barcodes[] - Array of scanned barcodes/QR codes.
• result.barcodes[n].type - Format of detected barcode/QR code (e.g. CODE_128, EAN_13, QR_CODE, etc).
• result.barcodes[n].text - Text value of detected and decoded barcode/QR code.

Options:

All configuration options are optional.

uiConfigs.barcodeFormats is an optional array of barcode formats that acts as a detection filter. By default all supported formats will be detected.

• configuration.acceptedDocumentFormats is an optional array of barcode document formats that act as a detection filter. By default all supported document formats will be detected.

export interface BatchBarcodeScannerConfiguration {
  /** An optional array of barcode document formats that act as a detection filter. By default all supported document formats will be detected. */
  acceptedDocumentFormats?: BarcodeDocumentFormat[];

  /** The extension filter for EAN and UPC barcodes. */
  barcodesExtensionFilter?: BarcodesExtensionFilter;

  /** Filter barcodes results by regular expression. To accept scanned barcode, regular expression should match the entire barcode value. By default, no filter is applied */
  barcodeValueFilter?: string;

  /** Background color of the detection overlay. */
  cameraOverlayColor?: string;

  /** Background color of the detection overlay. */
  cameraModule?: CameraModule;

  /** The relative initial zoom level of the camera in the range (0,1), where 0 is zoomed out and 1 is zoomed in. The default value is 0. */
  cameraZoomFactor?: number;

  /** The range of valid camera zoom factors. Default value is (0.0; 12.0). iOS only. */
  cameraZoomRange?: ZoomRange;

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

  /** String being displayed on the cancel button. */
  cancelButtonTitle?: string;

  /** When this property is set to true, the zoom can be activated by double tapping somewhere in the receivers view. iOS only. */
  doubleTapToZoomEnabled?: boolean;

  /** When this property is set to true, the zoom can be activated by a pinch gesture somewhere in the receivers view. iOS only. */
  pinchToZoomEnabled?: boolean;

  /** Defines, if zooming in or out should be animated. iOS only. */
  shouldAnimateZooming?: boolean;

  /** String being displayed on the cancel button. */
  engineMode?: EngineMode;

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

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

  /** String being displayed as description. */
  finderTextHint?: string;

  /** Foreground color of the description label. */
  finderTextHintColor?: string;

  /** Aspect ratio of finder frame (width \ height), which is used to build actual finder frame. Default is 1 - it is a square frame, which is good for QR capturing. */
  finderAspectRatio?: AspectRatio;

  /** Controls whether the flash toggle button is hidden or not. iOS only. */
  flashButtonHidden?: boolean;

  /** String being displayed on the flash button. iOS only. */
  flashButtonTitle?: string;

  /** Whether flash is toggled on or off. */
  flashEnabled?: boolean;

  /** Disables auto-focus and locks the lens at the specified focus lock lens position. The default value is false. iOS only. */
  focusLockEnabled?: boolean;

  /** The position of the lens. Values can be between 0.0f (minimum focusing distance) and 1.0f (maximum focusing distance). The default value is 0.0 iOS only. For Android, minFocusDistanceLock can be used. */
  focusLockPosition?: number;

  /** Whether touch-to-focus is enabled on camera preview. Enabled by default. Android only. */
  touchToFocusEnabled?: boolean;

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

  /** Optional minimum required text length of the detected barcode. The default is 0 (setting is turned off). NOTE - This feature works on ITF barcodes only. */
  minimumTextLength?: number;

  /** Optional maximum text length of the detected barcode. The default is 0 (setting is turned off). NOTE - This feature works on ITF barcodes only. */
  maximumTextLength?: number;

  /** Optional minimum required quiet zone on the barcode. Measured in modules (the size of minimal bar on the barcode). The default is 10. NOTE - This feature works on ITF barcodes only. */
  minimum1DBarcodesQuietZone?: number;

  /** Lock focus distance withing minimum possible range */
  minFocusDistanceLock?: boolean;

  /** With this option enabled, the scanner removes checks digits for UPC, EAN and MSI Plessey codes. Has no effect if both single and double digit MSI Plessey checksums are enabled. The default is `false` */
  stripCheckDigits?: boolean;

  /** Whether scanner screen should make a sound on successful barcode or MRZ detection. */
  successBeepEnabled?: boolean;

  /** Background color of the top bar. */
  topBarBackgroundColor?: string;

  /** Foreground color of the cancel button. */
  topBarButtonsColor?: string;

  /** Foreground color of the top bar buttons when disabled. */
  topBarButtonsInactiveColor?: string;

  /** Accepted barcode formats */
  barcodeFormats?: BarcodeFormat[];

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

  /** The GS1 handling mode. The default value is PARSE. */
  gs1HandlingMode?: Gs1HandlingMode;

  /** The checksum algorithm for MSI Plessey barcodes. The default value is MOD_10. */
  msiPlesseyChecksumAlgorithm?: MSIPlesseyChecksumAlgorithm;

  /** If `true`, enabled the mode which slightly decreases the scanning quality and the energy consumption, and increases the scanning speed. If `false` - mode is disabled. The default is `false`. Android only. */
  lowPowerMode?: boolean;

  /** The color for barcodes count text */
  barcodesCountText?: string;

  /** The color for barcodes count text */
  barcodesCountTextColor?: string;

  /** Text of the button which clears the list of scanned barcodes. */
  clearButtonTitle?: string;

  /** The color of Submit button */
  detailsActionColor?: string;

  /** The color of bottom sheet */
  detailsBackgroundColor?: string;

  /** The color of text elements in bottom sheet */
  detailsPrimaryColor?: string;

  /** String being displayed on the delete button. iOS only. */
  deleteButtonTitle?: string;

  /** 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 text for the data fetching state of the barcode item in a list. Smth "Fetching info…" */
  fetchingStateText?: string;

  /** Text of the message that there are no barcodes scanned */
  noBarcodesTitle?: string;

  /** Text of the button which finishes the flow */
  submitButtonTitle?: string;

  /** The expected density of QR codes in an image. */
  codeDensity?: CodeDensity;

  /** If `true`, replaces the cancel button in the top bar with a back arrow icon. The default value is FALSE. Android only. */
  replaceCancelButtonWithIcon?: boolean;

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

  /** Sets auto close timer in seconds. 0 = disabled and it is the default value. Android only */
  autoCancelTimeout?: number;

  /** Scanning delay after scanner appearance in seconds. Defaults to 0 secs. */
  initialScanDelay?: number;

  /** Display the region of interest. The default value is TRUE. */
  viewFinderEnabled?: boolean;

  /** The selection overay configuration. */
  overlayConfiguration?: SelectionOverlayConfiguration;
}

Classic Component

Barcode Camera View (Native Component)

You can use native components to embed our Barcode Scanning functionalities directly into your React layouts, allowing you to customize the user interface and experience in great detail and precision.

Note: Native Components are bundled with react-native-scanbot-sdk starting from v4.10.0

The Barcode Camera View component (ScanbotBarcodeCameraView) exposes a configurable camera view that allows you to detect barcodes in real time.

Usage

import {ScanbotBarcodeCameraView} from 'react-native-scanbot-sdk';

You can then include it in your layout as you would normally do with other React components:

render() {
  return (
    <>
      <SafeAreaView>
        <ScanbotBarcodeCameraView style={this.styles.cameraView}/>
      </SafeAreaView>
    </>
  );
}

Detecting Barcodes

You can use the onBarcodeScannerResult property to handle the detection results.

render() {
  return (
    <>
      <SafeAreaView>
        <ScanbotBarcodeCameraView
          style={{this.styles.cameraView}}
          onBarcodeScannerResult={(result: ScanbotBarcodeCameraViewResult) => {
              console.log(result);
          }}
          />
      </SafeAreaView>
    </>
  );
}

Result Object

• status -> OK or CANCELED
• barcodes -> the array of barcodes that have been detected
  • text -> the barcode text
  • type -> the barcode type

Configuration

You can customise the UI and Behavior of the Barcode Camera View by using the component configuration property. Every property is optional and it falls back to its default value when not specified.

export interface ScanbotBarcodeCameraViewConfiguration {
  /**
   * The finder view is a rectangular overlay view that clips the camera view,
   * so that the detection will focus just a specific area. You can specify
   * the size and positioning, as well as other UI properties.
   * Set this property to `true` if you want to use the Finder View, `false` otherwise (default: false)
   */
  shouldUseFinderView?: boolean;
  /**
   * The finder view rectangular overlay border width
   */
  finderLineWidth?: number;
  /**
   * The finder view rectangular overlay border color
   */
  finderLineColor?: string;
  /**
   * The overlay background color, around the finder view rectangle
   */
  finderBackgroundColor?: string;
  /**
   * The overlay background color opacity, around the finder view rectangle
   */
  finderBackgroundOpacity?: number;
  /**
   * The finder view rectangle aspect ratio
   */
  finderAspectRatio?: AspectRatio;
  /**
   * The finder view minimum padding from the bounds of the screen
   */
  finderMinimumPadding?: number;
  /**
   * How many pixel units the finder view should be moved vertically;
   *
   * Positive values -> (UP); Negative values -> (DOWN)
   */
  finderVerticalOffset?: number;
  /**
   * Whether flash is toggled on or off.
   */
  flashEnabled?: boolean;
  /**
   * List of accepted Barcode Formats; any formats that are not included in this
   * list will not be detected by the `BarcodeCameraView`. By default, the list
   * includes all supported barcode types.
   */
  barcodeFormats?: BarcodeFormat[];
  /**
   * List of accepted Document Formats; any document formats that are not included
   * in this list will be ignored by the `BarcodeCameraView`. By default, the list
   * includes all supported document types.
   */
  acceptedDocumentFormats?: BarcodeDocumentFormat[];
  /**
   * The checksum algorithm for MSI Plessey barcodes.
   * The default value is `Mod10'
   */
  msiPlesseyChecksumAlgorithm?: MSIPlesseyChecksumAlgorithm;
  /**
   * The engine mode of the barcode recognizer. Defaults to NEXT_GEN.
   * To use legacy recognizer, please specify LEGACY
   */
  engineMode?: EngineMode;
  /**
   * The relative initial zoom level of the camera in the range (0,1), where 0 is zoomed out and 1 is zoomed in.
   * Default value is 0.0.
   */
  cameraZoomFactor?: number;
  /**
   * The GS1 handling mode. The default value is PARSE.
   */
  gs1HandlingMode?: Gs1HandlingMode;
  /**
   * Optional minimum required text length of the detected barcode.
   * The default is 0 (setting is turned off).
   * NOTE: This feature works on ITF barcodes only.
   */
  minimumTextLength?: number;
  /**
   * Optional maximum required text length of the detected barcode.
   * The default is 0 (setting is turned off).
   * NOTE: This feature works on ITF barcodes only.
   */
  maximumTextLength?: number;
  /**
   * With this option enabled, the scanner removes checks digits for UPC, EAN and MSI Plessey codes.
   * Has no effect if both single and double digit MSI Plessey checksums are enabled.
   * The default is `false`
   */
  stripCheckDigits?: boolean;
}

Example

<ScanbotBarcodeCameraView
  configuration={{
    shouldUseFinderView: true,
    finderAspectRatio: {
      width: 2,
      height: 1
    },
    finderLineWidth: 2.0,
    finderLineColor: '#ffffff',
    finderBackgroundColor: '#000000',
    finderBackgroundOpacity: 0.66,
    finderMinimumPadding: 16,
    finderVerticalOffset: -300,
    barcodeFormats: ["CODE_128", "EAN_13"]
  }}

  onBarcodeScannerResult={(result: ScanbotBarcodeCameraViewResult) => {
    console.log(result);
  }}

  style={this.styles.cameraView} />

Available Formats

Barcode Format Values

export type BarcodeFormat =
  /** Aztec barcode type */
  | 'AZTEC'
  /** CODABAR barcode type */
  | 'CODABAR'
  /** CODE_25 barcode type */
  | 'CODE_25'
  /** CODE_39 barcode type */
  | 'CODE_39'
  /** CODE_93 barcode type */
  | 'CODE_93'
  /** CODE_128 barcode type */
  | 'CODE_128'
  /** DATA_MATRIX barcode type */
  | 'DATA_MATRIX'
  /** EAN_8 barcode type */
  | 'EAN_8'
  /** EAN_13 barcode type */
  | 'EAN_13'
  /** ITF barcode type */
  | 'ITF'
  /** PDF_417 barcode type */
  | 'PDF_417'
  /** QR_CODE barcode type */
  | 'QR_CODE'
  /** MICRO_QR_CODE barcode type */
  | 'MICRO_QR_CODE'
  /** RSS_14 barcode type */
  | 'RSS_14'
  /** RSS_EXPANDED barcode type */
  | 'RSS_EXPANDED'
  /** UPC_A barcode type */
  | 'UPC_A'
  /** UPC_E barcode type */
  | 'UPC_E'
  /** MSI Plessey barcode type */
  | 'MSI_PLESSEY'
  /** IATA (2 of 5) barcode type */
  | 'IATA_2_OF_5'
  /** INDUSTRIAL (2 of 5) barcode type */
  | 'INDUSTRIAL_2_OF_5'
  /** USPS Intelligent Mail, a.k.a. USPS OneCode, USPS-STD-11 */
  | 'USPS_INTELLIGENT_MAIL'
  /** Royal Mail Four-State Customer Code, a.k.a. RM4SCC, CBC, BPO 4 State Code */
  | 'ROYAL_MAIL'
  /** Japan Post Four-State Barcode */
  | 'JAPAN_POST'
  /** Royal TNT Post Four-State Barcode, a.k.a. KIX, Klant IndeX */
  | 'ROYAL_TNT_POST'
  /** Australia Post Four-State Customer Code */
  | 'AUSTRALIA_POST'
  /** GS1 DataBar Limited */
  | 'DATABAR_LIMITED'
  /** GS1 DataBar Composite */
  | 'GS1_COMPOSITE';

Barcode Document Format Values

export type BarcodeDocumentFormat =
  /** American Association of Motor Vehicle Administrators barcode document */
  | 'AAMVA'
  /** Boarding pass barcode document */
  | 'BOARDING_PASS'
  /** German medical plan barcode document */
  | 'DE_MEDICAL_PLAN'
  /** German medical certificate barcode document */
  | 'MEDICAL_CERTIFICATE'
  /** ID Card barcode document */
  | 'ID_CARD_PDF_417'
  /** SEPA barcode document */
  | 'SEPA'
  /** Swiss QR barcode document */
  | 'SWISS_QR'
  /** VCard barcode document */
  | 'VCARD'
  /** GS1 barcode document */
  | 'GS1';

What do you think of this documentation?

What can we do to improve it? Please be as detailed as you like.

---