Skip to main content

Get Started

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

  • Barcode Find: The data capture mode that is used for search and find functionality.
  • A Barcode Find View: The pre-built UI elements used to highlight found items.

The general steps are:

  1. Create a new Data Capture Context instance.
  2. Configure the Barcode Find Mode.
  3. Setup the BarcodeFindView.
  4. Register a listener to be notified with found items
  5. Start searching

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 Find Mode​

The main entry point for the Barcode Find Mode is the BarcodeFind object. You can configure the supported Symbologies through its BarcodeFindSettings, and set up the list of items that you want MatrixScan Find to highlight (e.g. a list of products).

For this tutorial, we will set up Barcode Find for tracking EAN13 codes. Change this to the correct symbologies for your use case (e.g. Code 128, Code 39…).

First create the settings:

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

Then you have to create the list of items that will be actively searched for.

In this tutorial, let’s look up two items based on their EAN13 codes. We will attach to the first item some optional information that can be used by the BarcodeFindView to display extra information.

const items = [
new BarcodeFindItem(new BarcodeFindItemSearchOptions("9783598215438"),
new BarcodeFindItemContent("Mini Screwdriver Set", "(6-Piece)", null)),
new BarcodeFindItem(new BarcodeFindItemSearchOptions("9783598215414"), null) // Item information is optional, used for
display only
]

Create the mode with the previously created settings and set the items:

const mode = new BarcodeFind(settings);
mode.setItemList(items);

Setup the BarcodeFindView​

MatrixScan Find’s built-in AR user interface includes buttons and overlays that guide the user through the searching process. By adding a BarcodeFindView, the scanning interface (camera preview and searching UI elements) will be added automatically to your application.

The BarcodeFindView appearance can be customized through BarcodeFindViewSettings:

  • Colors of dots in augmented reality overlay
  • Enable sound and haptic alerts
const viewSettings = new BarcodeFindViewSettings();

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

let barcodeFind;
<BarcodeFindView
	barcodeFind={barcodeFind}
	context={dataCaptureContext}
	viewSettings={viewSettings}
	ref={(view) => {
		barcodeFindView = view;
		// Handle the view as needed, for example
		barcodeFindView.startSearching();
	}}
></BarcodeFindView>;

Register a listener to be notified with found items​

The BarcodeFindView displays next to its shutter button a handy “finish” button. Register a BarcodeFindViewUiListener 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.

barcodeFindView.barcodeFindViewUiListener = {
	didTapFinishButton(foundItems: BarcodeFindItem[]) {
		// 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​

As soon as everything is set up, control the BarcodeFindView to start the search.

barcodeFindView.startSearching();

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.