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: 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.

  /**
* The finder view is a rectangular overlay view that clips the camera view,
* so that the detection will focus on 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;
/**
* Set the finderInsets left, top, bottom, right
*/
finderInset?: FinderInset;
/**
* How many pixel units the finder view should be moved vertically by;
*
* Positive values -> (UP); Negative values -> (DOWN)
*/
finderVerticalOffset?: number;
/**
* Whether the 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 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;
/**
* 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;
/**
* Use a filter to determine which type of barcode can be detected; see `BarcodeFilter`
*/
barcodeFilter?: BarcodeFilter;
/**
* 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;
/**
* The number of stacks to split a 1D barcode crop by before extracting its scanlines.
* For stacked RSS barcodes this should be set to the number of stacks with which the barcode was printed.
* For other barcode formats the default of 1 is sufficient.
* Setting it higher will improve the performance of difficult barcodes, but slightly increase the recognition time
* and possibly increase the number of false positives.
*/
decodeStacks1D?: Number;
/**
* Enable or disable barcode detection. If disabled, the camera preview is active but no barcodes will be detected.
* Default is enabled.
*/
scanningEnabled?: boolean;

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
},
finderVerticalOffset: -300,
barcodeFormats: ["CODE_128", "EAN_13"]
}}

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

style={this.styles.cameraView} />

Cleanup

ScanbotBarcodeSdk.cleanup(): Promise By calling ths function all optional barcode image files generated by the Scanbot Barcode Scanner SDK module will be deleted.

File Handling & Storage Concept

The Scanbot Barcode SDK module works with file URIs. That means all input and output files (images, etc) are identified by a file URI. Please note that a file URI is not just a file path : "file:///some/file/path/.." vs. "/some/file/path/.."

Examples of valid file URIs:

  • On Android: file:///storage/emulated/0/Android/data/my.awesome.app/cache/sbsdk-temp/ce8de3c4-3c96-4ce1-b285-483d01e1dc9a.jpg

  • On iOS: file:///var/mobile/Containers/Data/Application/D2BF9FB2-1024-4418-99B2-3709AB2C171E/Documents/sbsdk-temp/05719BF8-63DB-4C8A-9A57-25B233AED33C.jpg

All output files generated by the Scanbot Barcode SDK module are temporary files. We recommend copying, moving or deleting the files you get from callbacks to an appropriate storage place.

There is no automatic file clean mechanism in the module, because only your App can decide when the perfect time is to remove a file.

To avoid storage space issues caused by temporary files please implement a suitable hook for the cleanup function in your App.

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?