@juit/nativescript-barcodeview
by juit | v1.1.3
Embedded barcode scanning view for NativeScript 7
npm i --save @juit/nativescript-barcodeview

Barcode-Scanning View for NativeScript 7

This package implements a minimalistic barcode-scanning View for NativeScript (from v. 7).

Sample

Sample

Attributes

The BarcodeScannerView exposes a few attributes to control the operation of barcode scanning:

XML

<BarcodeScannerView
formats="QR_CODE, CODE_39"
preferFrontCamera="false"
isPaused="false"
(scanResult)="barcodeScanned($event)"
/>

TypeScript

import { ScanResultEventData } from '@juit/nativescript-barcodeview'

export function barcodeScanned(event: ScanResultEventData) {
alert(`Scanned "${event.format}" barcode: ${event.text}`)
}

formats

The formats property is defined as a KnownBarcodeFormat[] and informs the barcode scanner what formats should be recognized.

When specified as a string, the formats are case-insensitive, comma and/or whitespace separated

See Barcode Formats below for a list of supported formats.

The default (empty array) represents all supported formats.

isPaused

The isPaused boolean attribute specifies whether barcode scanning is running (false) or paused (true)paused or running.

preferFrontCamera

The preferFrontCamera boolean attribute specifies whether preferentially the scanner should use the back camera (false) or the front one (true).

Events

The scanResult event is triggered once a barcode has been scanned. The event instance associated with this is a ScanResultEventData defined as follows:

export interface ScanResultEventData extends EventData {
/** The event name, always `scanResult` */
eventName: ScanResultEvent,
/** The `BarcodeScannerView` source of this event */
object: BarcodeScannerView,
/** The `BarcodeFormat` of the scanned barcode */
format: BarcodeFormat;
/** The text contained in the scanned barcode */
text: string;
}

Clearing results

The BarcodeScannerView will not emit a scanResult event once it detects the same barcode. To clear the last result and be notified of the same barcode, you can call the clearScanResult() method on its instance.

barcodeScannerView.on('scanResult', (result: ScanResultEventData) => {
// do something with the result and then clear it,
// allowing it to be reported it once more
result.object.clearScanResult()
})

Dismissal

Make sure that the BarcodeScannerView's own disposeNativeView() is called to release the camera and barcode-scanning resources

Image Parsing

In some cases (e.g. simulators) it might be necessary to simulate the scanning of a barcode using an image stored on the device.

While this library doesn't support picking images (see the wonderful @nativescript/imagepicker plugin for a good implementation), it offers function to scan ImageAssets.

import { parseBarcodes, BarcodeFormat } from '@juit/nativescript-barcodeview'

const ImageAsset asset = // ... get this with '@nativescript/imagepicker'

parseBarcode(asset, [ BarcodeFormat.QR_CODE ])
.then((result: scanResult) => {
console.log(`Scanned "${event.format}" barcode from image: ${event.text}`)
})

Barcode Formats

Format iOS Android
AZTEC
CODABAR
CODE_128
CODE_39
CODE_39_MOD_43
CODE_93
DATA_MATRIX
EAN_13
EAN_8
INTERLEAVED_2_OF_5
ITF_14
MAXICODE
PDF_417
QR_CODE
RSS_14
RSS_EXPANDED
UPC_A
UPC_E
UPC_EAN_EXTENSION