@juit/nativescript-barcodeview

Barcode-Scanning View for NativeScript 7

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

• Sample
• Attributes
• Events
• Clearing results
• Dismissal
• Image Parsing
• Barcode Formats
• Copyright Notice
• License

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	✗	✓