NativeScript General example

Creating Barkoder Configuration #

This configuration includes the license key necessary for validating and activating the SDK. 

If the license key is invalid or missing, the scan results are marked (Unlicensed).

constructor() {
    super();
    this.bkdConfig = com.barkoder.BarkoderConfig;
    this.bkd = new com.barkoder.Barkoder();
    this.bkdView = new com.barkoder.BarkoderView(context, true);
    this.bkdView.config = new com.barkoder.BarkoderConfig(
      context,
      "LICENSE_KEY",
      null
    );
    this.bkdHelper = new com.barkoder.BarkoderHelper();
    this.nativeView = this.bkdView;
  }

Enabling Symbologies #

Here’s a detailed and refined explanation of how you can enable individual symbologies for barcode scanning

private setBarcodeTypeEnabled() : void {
  this.barkoderView.setBarcodeTypeEnabled(
    [
      BarkoderConstants.DecoderType.Ean13,
      BarkoderConstants.DecoderType.QR,
      BarkoderConstants.DecoderType.Aztec,
      BarkoderConstants.DecoderType.AztecCompact,
      BarkoderConstants.DecoderType.COOP25,
      BarkoderConstants.DecoderType.Codabar,
      BarkoderConstants.DecoderType.Code128,
      BarkoderConstants.DecoderType.Code11,
      BarkoderConstants.DecoderType.Code25,
      BarkoderConstants.DecoderType.Code32,
      BarkoderConstants.DecoderType.Datalogic25,
      BarkoderConstants.DecoderType.Datamatrix,
      BarkoderConstants.DecoderType.Code93,
      BarkoderConstants.DecoderType.Code39,
      BarkoderConstants.DecoderType.Code128,
      BarkoderConstants.DecoderType.Msi,
      BarkoderConstants.DecoderType.QRMicro
    ]
    )
}
                

Setting barkoder settings #

The BarkoderView method 

Next define a function BarkoderView where we will update our settings for the barcode scanner view (bkdView).

In our case we will enable image results and include barcode location within the image, also make the region of interest visible and enable pinch-to-zoom functionality.

Finally, configure the ROI to cover the central 90% of the scanner view.

These configurations enhance the user experience by providing more detailed scan results, interactive zooming, and visual feedback about the scan area.

<Page >
   ...

   <Barkoder:BarkoderView id="barkoderView"  class="scanner-container" width="100%" height="70%"/>

   ...

                
                

Starting Scan #

The startScanning method initiates the scanning process. If there is an error during the start process, the error message is printed for debugging. 

this.barkoderView.startScanning(this)
                

Handling Results #

Implementing the BarkoderResultCallback allows your view controller to receive scanning results. The scanningFinished method is called when scanning is complete, providing the results, optional thumbnails, and the captured image.

scanningFinished(results: any[], thumbnails: any[], resultImage: any): void {
    console.log(`${results[0].textualData}`)
    this.notifyPropertyChange('message', `${results[0].textualData}`)
    this.notifyPropertyChange('message2', `${results[0].barcodeTypeName}`)
  }
                

showResult #

The showResult function updates the UI based on the state of the scanning process and the results obtained

NativeScript plugin for the barKoder barcode scanning SDK