View on GitHub

@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