This plugin is used with @nativescript/mlkit-core. It enables barcode scanning and provides the BarcodeResult type for the barcode-scanned data.
npm install @nativescript/mlkit-barcode-scanning
Follow these steps to scan a barcode:
- 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>
- 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)
}
}
}
You can try a demo app at StackBlitz with the NativeScript Preview app.
The scanned barcode data object has the following properties:
| Property | Type | Optional |
|---|
encryptionType | string | No |
password | string | No |
ssid | string | No |
| Property | Type | Optional |
|---|
title | string | Yes |
url | string | Yes |
| Property | Type | Optional |
|---|
message | string | No |
honeNumber | string | No |
| Property | Type | Optional |
|---|
number | string | No |
type | PhoneType | No |
| Property | Type | Optional |
|---|
address | string | No |
subject | string | No |
body | string | No |
type | EmailType | |
| Property | Type | Optional |
|---|
documentType | string | No |
firstName | string | No |
middleName | string | No |
lastName | string | No |
gender | string | No |
addressStreet | string | No |
addressCity | string | No |
addressState | string | No |
addressZip | string | No |
licenseNumber | string | No |
issueDate | string | No |
expiryDate | string | No |
birthDate | string | No |
issuingCountry | string | No |
| Property | Type | Optional |
|---|
description | string | Yes |
location | string | Yes |
organizer | string | Yes |
status | string | Yes |
summary | string | Yes |
start | string | Yes |
end | string | Yes |
| Property | Type | Optional |
|---|
addressLines | string[] | No |
type | AddressType | No |
| Property | Type | Optional |
|---|
addresses | Address[] | No |
| Property | Type | Optional |
|---|
x | number | No |
y | number | No |
| Property | Type | Optional |
|---|
width | number | No |
height | number | No |
| Property | Type | Optional |
|---|
x | number | No |
y | number | No |
| Property | Type | Optional |
|---|
lat | number | No |
lng | number | No |
Open = 'open'
WPA = 'wpa'
WEP = 'wep'
Unknown = 'unknown'
Unknown = "unknown"
Home = "home"
Work = "work"
Fax = "fax"
Mobile = "mobile"
Unknown = "unknown"
Home = "home"
Work = "work"
Unknown = "unknown"
Home = "home"
Work = "work"
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"
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'
Apache License Version 2.0