Skip to main content

Get Started

In this guide you will learn step-by-step how to add MatrixScan Pick to your application. Implementing MatrixScan Pick involves two primary elements:

  • Barcode Pick: The data capture mode that is used for scan and pick functionality.
  • A Barcode Pick View: The pre-built UI elements used to highlight items to be picked.

The general steps are:

  • Creating a new Data Capture Context instance
  • Configuring the Barcode Pick Mode
  • Setup the Barcode Pick View
  • Registering the Listener to notify about found items

Prerequisites​

Before starting with adding a capture mode, make sure that you have a valid Scandit Data Capture SDK license key and that you added the necessary dependencies. If you have not done that yet, check out this guide.

note

You can retrieve your Scandit Data Capture SDK license key by signing in to your Scandit account.

Create the Data Capture Context​

The first step to enable any data capture mode is to create a new DataCaptureContext. The DataCaptureContext handles licensing and a valid Scandit Data Capture SDK license key must be passed during initialization to activate scanning.

tip

If an error message appears on screen after initialization, review the Context Status Codes to learn more about the specific reason.

If the app uses only a single scanning mode, create a single DataCaptureContext within the scanner component.

const context = useMemo(() => {
	return DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --');
}, []);

If the app uses multiple scanning modes, create the DataCaptureContext as a singleton instance and import it into each scanner component.

import { DataCaptureContext } from 'scandit-react-native-datacapture-core';

DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --');

export default DataCaptureContext.instance;
import dataCaptureContext from 'path/to/DataCaptureContext'

Configure the Barcode Pick Mode​

The main entry point for the Barcode Pick Mode is the BarcodePick object. You can configure the supported Symbologies through its BarcodePickSettings, and set up the list of items that you want MatrixScan Pick to highlight.

Here we configure it for tracking EAN13 codes, but you should change this to the correct symbologies for your use case.

const settings = BarcodePickSettings();
settings.enableSymbology(Symbology.ean13Upca, true);

Then you have to create the list of items that will be picked and quantity to be picked for each item.

const items = [
    new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215438"),
                        new BarcodePickProductQuantityToPick(3),
    new BarcodePickProduct(new BarcodePickProductIdentifier("9783598215414"), new BarcodePickProductQuantityToPick(3)
]

Create the mode with the previously created settings:

const mode = new BarcodePick(settings);

Setup the BarcodePickView​

MatrixScan Pick’s built-in AR user interface includes buttons and overlays that guide the user through the scan and pick process. By adding a BarcodePickView, the scanning interface is added automatically to your application.

The BarcodePickView appearance can be customized through BarcodePickViewSettings to match your application’s look and feel. The following settings can be customized:

  • Colors of dots in augmented reality overlay
  • Enable sound and haptic alerts
  • Guidelines text
  • Showing hints
  • Finish button
  • Pause button
  • Zoom button
  • Loading Dialog
const viewSettings = new BarcodePickViewSettings();
// ...

Construct a new BarcodePickView. The BarcodePickView is automatically added to the provided parent view.

let BarcodePick;
<BarcodePickView
        BarcodePick={BarcodePick}
        context={dataCaptureContext}
        viewSettings={viewSettings}
        ref={view => {
          BarcodePickView = view;
          // Handle the view as needed, for example
          BarcodePickView.start();
        }}
></BarcodePickView>

Register the Listener​

The BarcodePickView displays a Finish button next to its shutter button.

Register a BarcodePickViewUiListener to be notified what items have been found once the finish button is pressed.

In this tutorial, we will then navigate back to the previous screen to finish the find session.

BarcodePickView.BarcodePickViewUiListener = {
    didTapFinishButton(foundItems: BarcodePickProduct[]) {
    // This method is called when the user presses the
    // finish button. It returns the list of all items that were found during
    // the session.
    }
};

Start Searching​

With everything configured, you can now start searching for items. This is done by calling BarcodePickView.start().

BarcodePickView.start();

This is the equivalent of pressing the Play button programmatically. It will start the search process, turn on the camera, and hide the item carousel.