Skip to main content

Getting started with the React Native Barcode Scanner SDK's Classic UI

ScanbotBarcodeCameraView​

ScanbotBarcodeCameraView exposes a configurable camera view that allows you to detect barcodes in real time.

Usage​

Include the component in your views and use the onBarcodeScannerResult callback to handle the detection results.

Customize the UI and behavior of ScanbotBarcodeCameraView by using the component's properties. Each property is optional, and falls back to its default value if not specified.

You can learn more about the available properties in the API documentation.

Example:

ScanbotBarcodeCameraView
loading...

AR Overlay​

ScanbotBarcodeCameraView allows for enabling a Barcode Selection Overlay that displays a contour of the barcode in front of the camera preview (AR-like).

It is possible to customize the polygon itself and also the view shown below the barcode contour.

ScanbotBarcodeCameraView AR Overlay
loading...

This example uses a general configuration for all scanned barcodes. If you want to customize the polygon and view for each barcode item individually, you need to use the barcodeItemOverlayViewBinder callback. In this callback, you can process scan results as needed (e.g., query the server to check the barcode) and return the style configuration for the corresponding barcode.

The React Native Barcode Scanner SDK's Classic UI AR Overlay view binder

ScanbotBarcodeCameraView with overlay view binder
loading...

Want to scan longer than one minute?

Generate a free trial license to test the Scanbot SDK thoroughly.

Get free trial license

On this page