Barcode Scanning

@nativescript/mlkit-barcode-scanning #

This plugin is used with @nativescript/mlkit-core. It enables barcode scanning and provides the BarcodeResult type for the barcode-scanned data.

Contents #

• Installation
• Use @nativescript/mlkit-barcode-scanning
  • Demo app
• API
  • BarcodeResult

Installation #

npm install @nativescript/mlkit-barcode-scanning

Use @nativescript/mlkit-barcode-scanning #

Follow these steps to scan a barcode:

1. Add MLKitView to your page and set the detectionType property to "barcode".

<StackLayout>
  <MLKitView detectionType="barcode" detection="{{ onDetection }}" />
  <Label row="6">
    <FormattedString>
      <Span text="Barcode: " />
      <Span text="{{ barcode }}" class="text-green-500" />
    </FormattedString>
  </Label>
</StackLayout>

2. To receive the scanned barcode data, handle the detection event and get the data if the event's type is "barcode".

import { Observable } from "@nativescript/core"
import { DetectionEvent, DetectionType } from "@nativescript/mlkit-core";
import { BarcodeResult } from "@nativescript/mlkit-barcode-scanning";

export class BarcodeScannerViewModel extends Observable {
    barcode = ""
...
    onDetection(event: DetectionEvent){

        if(event.type == DetectionType.Barcode){
            const barcodeData: BarcodeResult = event.data[0] as BarcodeResult;
            this.set("barcode", barcodeData?.rawValue)
        }
}
}

Demo app #

You can try a demo app at StackBlitz with the NativeScript Preview app.

API #

Interfaces #

BarcodeResult #

The scanned barcode data object has the following properties:

WiFi #

UrlBookmark #

Sms #

Phone #

Email #

DriverLicense #

CalenderEvent #

Address #

ContactInfo #

Origin #

Size #

Bounds #

Point #

GeoPoint #

Enums #

EncryptionType #

• Open = 'open'
• WPA = 'wpa'
• WEP = 'wep'
• Unknown = 'unknown'

PhoneType #

• Unknown = "unknown"
• Home = "home"
• Work = "work"
• Fax = "fax"
• Mobile = "mobile"

EmailType #

• Unknown = "unknown"
• Home = "home"
• Work = "work"

AddressType #

• Unknown = "unknown"
• Home = "home"
• Work = "work"

ValueType #

• ContactInfo= "contactInfo"
• Email= "email"
• ISBN= "isbn"
• Phone= "phone"
• Product= "product"
• Text= "text"
• Sms= "sms"
• URL= "url"
• WiFi= "wifi"
• Geo= "geo"
• CalenderEvent= "calender"
• DriverLicense= "driverLicense"
• Unknown= "unknown"

BarcodeFormats #

• ALL = 'all'
• CODE_128 = 'code_128'
• CODE_39 = 'code_39'
• CODE_93 = 'code_93'
• CODABAR = 'codabar'
• DATA_MATRIX = 'data_matrix'
• EAN_13 = 'ean_13'
• EAN_8 = 'ean_8'
• ITF = 'itf'
• QR_CODE = 'qr_code'
• UPC_A = 'upc_a'
• UPC_E = 'upc_e'
• PDF417 = 'pdf417'
• AZTEC = 'aztec'
• UNKOWN = 'unknown'

License #

Apache License Version 2.0