Skip to main content

Native Components | React Native Barcode Scanner

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-barcode-scanner-sdk starting from v3.0.1

Barcode Camera View​

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-barcode-scanner-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: BarcodeScannerResult) => {
              console.log(result);
          }}
          />
      </SafeAreaView>
    </>
  );
}

Result Object​

  • barcodes -> the array of barcodes that have been detected
    • text -> the barcode text
    • type -> the barcode type
    • textWithExtension -> recognized barcode text with extension (if available)
    • rawBytes - > array of raw bytes that compose the recognized barcode
    • parsedSuccessful - > true if the Barcode Document has been parsed successfully
    • formattedResult - > optional formatted barcode document (if it was parsed succesfully)

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.

  /**
   * 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[];
  /**
   * An optional array of barcode document formats that acts as a detection filter.
   * By default all supported document formats will be detected.
   */
  acceptedDocumentFormats?: BarcodeDocumentFormat[];
  /**
   * 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.
   * The default value is 0.-
   */
  cameraZoomFactor?: number;
  /**
   *  The extension filter for EAN and UPC barcodes.
  */
  barcodesExtensionFilter?: BarcodesExtensionFilter;
  /** 
   * Enable or disable barcode detection. If disabled, the camera preview is active but no barcodes will be detected.
   * Default is enabled.
   */
  scanningEnabled?: boolean;
  /**
    * 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;
  /**
   * Set the finderInsets left, top, bottom, right
   */
  finderInset?: FinderInset
  /**
  * If `true`, enables the mode which slightly decreases the scanning quality and the energy consumption, thus increasing the scanning speed.
  * The default is `false`.
  * Android only.
  */
  lowPowerMode?: boolean;
  /**
   * Optional minimum required text length of the detected barcode.
   * The default is 0 (setting is turned off).
   * NOTE: This feature works on ITF and MSI Plessey 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 and MSI Plessey barcodes only.
   */
  maximumTextLength?: number;
  /**
   * Optional minimum required quiet zone on the barcode.
   * Measured in modules (the size of narrowest bar in the barcode).
   * The default is 10.
   * NOTE: This feature works on ITF and MSI Plessey barcodes only.
   */
  minimum1DBarcodesQuietZone?: number;
  /**
   * With this option enabled, the scanner removes check 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;
  /** The GS1 handling mode. The default value is PARSE. */
  gs1HandlingMode?: Gs1HandlingMode;
  /**
   * The checksum algorithm for MSI Plessey barcodes.
   * The default value is MSIPlesseyChecksumAlgorithm.MOD_10.
   */
  msiPlesseyChecksumAlgorithm?: MSIPlesseyChecksumAlgorithm;
  /**
   * Low density. Finds up to 6 QR codes in one image or video frame. This is the default value.
   * High density. Finds up to 24 QR codes in one image or video frame.
   */
  codeDensity?: CodeDensity;

Example

<ScanbotBarcodeCameraView
  configuration={{
    shouldUseFinderView: true,
    finderAspectRatio: {
      width: 2,
      height: 1
    },
    finderLineWidth: 2.0,
    finderLineColor: '#ffffff',
    finderBackgroundColor: '#000000',
    finderBackgroundOpacity: 0.66,
    finderInset: {
      left: 48,
      top: 48,
      bottom: 48,
      right: 48
    },
    barcodeFormats: ["CODE_128", "EAN_13"]
  }}

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

  style={this.styles.cameraView} />

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?

On this page

Scroll to top