React Native

Dashboard Knowledge Base React Native

Integrate the cmbSDK React-Native Module in your App

Download the plugin via npm

$ npm install cmbsdk-react-native --save

Mostly automatic installation

$ react-native link cmbsdk-react-native

Import the component in your react-native app by adding this

JavaScript

import { CMBReader, cmb } from 'cmbsdk-react-native';

You can access all of the API methods through the cmb constant, and all of the enums and constants are available in the CMBReader class.

Before continuing, download the cmbSDK React-Native zip file from our download section, and see the API reference.

Download page: https://cmbdn.cognex.com/download

API reference: https://cmbdn.cognex.com/knowledge/react-nat/rct-api-metho

Integrating cmbSDK iOS React-Native Module

Make sure you have downloaded the cmbSDK React-Native zip archive from our download page. From the downloaded zip file, open the iOS directory.

1. If you are using the mobile device's built in camera, do the same with the "MWBScannerImages.xcassets" file located in the iOS/Resources directory.

2. In your projects info.plist file you need to add a key depending on the readerDevice type that you are using.

If you are using the device camera for scanning, add the "NSCameraUsageDescription" key with a description on how your app will use the camera (for example: Scanning barcodes").
If you're using a MX-1xxx device, you will need to add a "Supported external accessory protocols" array with an item "com.cognex.dmcc". You will also need to follow this GUIDE before publishing your MX-1xxx enabled app to the app store. This is ONLY required for scanning with an MX mobile terminal.

And that's it. You should be able to run your app with the cmbSDK react-native module working.

Integrating cmbSDK Android React-Native Module

Open the app build.gradle located in yourRNApp/android/app and add these lines:

- Above the dependencies add this:

repositories {
    flatDir {
        dirs '../../node_modules/cmbsdk-react-native/android/cmbsdk-android-binary/cmbsdklib-release/', '../../node_modules/cmbsdk-react-native/android/cmbsdk-crossplatform-android-binary/'
    }
}

And that's it. You should be able to run your app with the cmbSDK react-native module working.

Updating cmbSDK Android React-Native Module to 1.2.260+

If you are updating from an older version of the cmbSDK React-Native module to 1.2.260 or newer, you will need to do the following changes:

Open the yourRNApp/android/app/libs directory and delete the cmbsdklib-release.aar file. If this is the only file inside the libs directory, the whole libs directory can be deleted.
Open the app build.gradle located in yourRNApp/android/app

- Above the dependencies, replace the previously added repositories with this:

repositories {
    flatDir {
        dirs '../../node_modules/cmbsdk-react-native/android/cmbsdk-android-binary/cmbsdklib-release/', '../../node_modules/cmbsdk-react-native/android/cmbsdk-crossplatform-android-binary/'
    }
}

And that's it. You should be able to run your app with the cmbSDK react-native module working.

API METHODS

loadScanner()

To get a scanner up and running, the first thing to do, is to call the loadScanner() method. It expects a CMBReader.DEVICE_TYPE param. This method does not connect to the Reader Device. We need to call connect() in the callback to actually connect to the Reader Device

cmb.loadScanner(CMBReader.DEVICE_TYPE.MXReader).then((response) => {
	cmb.getAvailability().then((response) => {
		if (response == CMBReader.AVAILABILITY.Available) {
			connectReader();
		}
	}).catch((rejecter) => {
	})
});

connect()

/*   @return 
    (promise)  {
        status : boolean, if connection succeeded true if not false
        err : string , if status false err will not be null
    }
*/

The result from the connect() method is returned as a Promise and it will contain the result of the connection attempt:

cmb.connect().then((connectMethodResult) => {
	// do something after a connection has been established
	configureReader();
}).catch((failure) => {
	console.log("CMB - connectReader failed: "+JSON.stringify(failure))
});

There is an Event Listener for the connection status of the ReaderDevice, namely the CMBReader.EVENT.ConnectionStateChanged event which is explained in more detail below.

disconnect()

/*   @return 
    (promise)  {
        status : boolean, if disconnect succeeded true if not false
        err : string , if status false err will not be null
    }
*/

Just as there is connect(), there is a disconnect() method that does the opposite of connect() :

cmb.disconnect();

Similarly to connect(), disconnect() also triggers the CMBReader.EVENT.ConnectionStateChanged event.

startScanning()

/*   @return Promise
      (bool) value of the Scanner Activity (true if the command was successful, false otherwise ex: if readerDevice not initialized)
*/

To start / stop the scanning process, we use these methods. They return a promise, which will be resolved if the command was successful (the scanning has started or stopped) or rejected otherwise (if there is no active ReaderDevice initialized or isn't connected).

After starting the scanner and scanning a barcode, the scan result triggers the CMBReader.EVENT.ReadResultReceived event.

setSymbologyEnabled()

Once there is a connection to the Reader, we can enable symbologies by calling setSymbologyEnabled(). It expects three params: a CMBReader.SYMBOLOGY which is the symbology to be enabled or disabled, a boolean for ON/OFF, and a String for the commandID for handling the command result.

cmb.setSymbology(CMBReader.SYMBOLOGY.QR, true, CMBReader.SYMBOLOGY_NAME.QR);

This method triggers the CMBReader.EVENT.CommandCompleted event, whose result contains the commandID string from the third parameter, so that you know which commands have succeeded and which have failed in the event result.

isSymbologyEnabled()

To check if we have a symbol enabled, we use isSymbologyEnabled(). It takes two arguments: the CMBReader.SYMBOLOGY that we are checking, and a commandID string used for identifying the response. The result triggers the CMBReader.EVENT.CommandCompleted event, and it contains the commandID string from the second parameter, so that you know which commands have succeeded and which have failed in the event result.

cmb.isSymbologyEnabled(CMBReader.SYMBOLOGY.QR, CMBReader.SYMBOLOGY_NAME.QR);

setLightsOn()

/*   @return 
    (promise)  {
        status : boolean, true if successfully executed command
        err : string , if status false err will not be null
    }
*/

If we want to enable the flash we can use setLightsOn(). It expects one argument boolean and returns a promise.

isLightsOn()

/*   @return 
    (promise)  {
        status : boolean, true if lights are on, false otherwise
        err : string , in case of error (e.g. reader not initialized)
    }
*/

We can check the lights status with isLightsOn(), which returns a promise.

getConnectionState()

/**
@return A promise that resolves with the CMBReader.CONNECTION_STATE value of the current reader device
*/

If you need to get the current connection state, getConnectionState() can be used

cmb.getConnectionState().then(function(connectionState){
  if (connectionState == CMBReader.CONNECTION_STATE.Connected) {
  		// reader is connected
  }
});