Skip to main content

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.

alt

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[];

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

/** The preferred camera module (default: BACK). */
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 of the barcode recognizer. Defaults to NEXT_GEN. To use legacy recognizer, please specify LEGACY. */
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?: FinderAspectRatio;

/** 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 value will be clamped to [0.0f, 1.0f]. The default value is 0.0. iOS only. For Android, minFocusDistanceLock can be used. */
focusLockPosition?: number;

/** 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 at minimum focus position. */
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 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; 3.0). iOS only. For Android, minFocusDistanceLock can be used. */
cameraZoomRange?: ZoomRange;

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

/** When set to `true`, the scanner assumes that the barcode can be a GS1 barcode. Turn it off, if you don't want to see decoded FNC1 characters ("]C1" and ASCII char 29). The default value is `true`. NOTE - Currently works for CODE128 barcodes only! */
gs1DecodingEnabled?: boolean;

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

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

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

/** The type of barcode image generation. */
barcodeImageGenerationType?: BarcodeImageGenerationType;

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

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

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

/** The preferred camera module (default: BACK). */
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 (1.0; 3.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;

/** The engine mode of the barcode recognizer. Defaults to NEXT_GEN. To use legacy recognizer, please specify LEGACY. */
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?: FinderAspectRatio;

/** 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. */
focusLockEnabled?: boolean;

/** The position of the lens. Values can be between 0.0f (minimum focusing distance) and 1.0f (maximum focusing distance). The value will be clamped to [0.0f, 1.0f]. The default value is 0.0. */
focusLockPosition?: number;

/** 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 at minimum focus position. */
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 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;

/** When set to `true`, the scanner assumes that the barcode can be a GS1 barcode. Turn it off, if you don't want to see decoded FNC1 characters ("]C1" and ASCII char 29). The default value is `true`. NOTE - Currently works for CODE128 barcodes only! */
gs1DecodingEnabled?: boolean;

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

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

/** String used for displaying the number of scanned barcodes. Use %d for number formatting symbol. */
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. */
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. */
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;

/** The selection overlay 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?: FinderAspectRatio;
/**
* 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.
* The default value is 0.
*/
cameraZoomFactor?: number;
/**
* When set to `true`, the scanner assumes that the barcode can be a GS1 barcode.
* Turn it off, if you don't want to see decoded FNC1 characters ("]C1" and ASCII char 29).
* The default value is `true`.
* NOTE: Currently works for CODE128 barcodes only.
*/
gs1DecodingEnabled?: boolean;
/**
* 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'
/** RSS_14 barcode type */
| 'RSS_14'
/** RSS_EXPANDED barcode type */
| 'RSS_EXPANDED'
/** UPC_A barcode type */
| 'UPC_A'
/** UPC_E barcode type */
| 'UPC_E'
/** Unknown barcode type */
| 'UNKNOWN'
/** 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';

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?