Want a quick demo?
Note that running this only makes sense on a real device.
git clone https://github.com/EddyVerbruggen/nativescript-barcodescanner barcodedemocd barcodedemo/src
Fullscreen, programmatically (iOS and Android)
npm run demo.android
Embedded (iOS only)
npm run demo-ng.ios
Supported barcode types
iOS and Android
- ITF (also known as ITF14)
- PDF_417 (on Android only when passed in explicity via
A note about
When either (or both) of these are specified, both can be returned.
You can check the actual type by inspecting the
format property of the result object.
For details, see #176.
From the command prompt go to your app's root folder and execute:
tns plugin add nativescript-barcodescanner
Embedding the scanner (iOS)
If you need to embed the scanner for Android as well, please consider using the Machine Learning powered Barcode scanner I've added to the ML Kit feature of the NativeScript Firebase plugin!
As you can see, you can style the view any way you like, and even overlay it with an image or button. To recreate the layout above, look at these lines in the demo app.
💡 TIP: If you don't destroy the component/page which embed the scanner (but instead show a modal, or navigate "forward") you can "pause" the scanner (since plugin version 3.4.0). Simply set that
Here's an example tag, showing all currently supported options. The property defaults are equal to the
Embedding in Angular
Component / Module:
See 'demo-ng' for details. Do not run it for Android, because embedding a view is not supported on that platform.
Embedding in Vue
See 'demo-vue' for details.
iOS runtime permission reason
You've probably seen a permission popup like this before (this plugin will trigger one as well, automatically):
iOS 10+ requires not only this popup, but also a reason. In this case it's "We'd like to use the Camera ..".
You can provide your own reason for accessing the camera by adding something like this to
NSCameraUsageDescriptionMy reason justifying fooling around with your camera
To not crash your app in case you forgot to provide the reason this plugin adds an empty reason to the
.plist during build. This value gets overridden by anything you specify yourself.
Tip: during a scan you can use the volume up/down buttons to toggle the torch.
function: scan (single mode)
result.formatabove is one of these.
var BarcodeScanner = BarcodeScanner;var barcodescanner = ;barcodescanner;
function: scan (bulk / continuous mode)
In this mode the scanner will continuously report scanned codes back to your code,
but it will only be dismissed if the user tells it to, or you call
The plugin handles duplicates for you so don't worry about checking those;
every result withing the same scan session is unique unless you set
Here's an example of scanning 3 unique QR codes and then stopping scanning programmatically. You'll notice that the Promise will no longer receive the result as there may be many results:
var count = 0;barcodescanner;
Note that the iOS implementation will always return
true at the moment,
on Android we actually check for a camera to be available.
var barcodescanner = ;barcodescanner;
function: hasCameraPermission / requestCameraPermission
On Android 6+ you need to request permission to use the camera at runtime when targeting API level 23+.
Even if the
uses-permission tag for the Camera is present in
On iOS 10+ there's something similar going on.
Since version 1.5.0 you can let the plugin handle this for you (if need be a prompt will be shown to the user when the scanner launches), but if for some reason you want to handle permissions yourself you can use these functions.
barcodescanner;// if no permission was granted previously this wil open a user consent screenbarcodescanner;
You may have injected the
BarcodeScanner class in your component constructor in the past,
but please don't do that anymore because in release builds you may experience a crash.
So instead of:
// my-component.ts;;//use the barcodescanner wherever you need it. See general usage above.scanBarcode}
If you run into an error when Webpacking, open
app.module.ts and add this:
If you get the error
TypeError: Cannot read property 'zxing' of undefined on android, try the following steps:
- Delete the app from your device
- Remove the folder
platforms/android. This triggers a complete rebuild
tns run android
Dependencies / Related Projects
This plugin wraps libaries for Android and iOS to make the barcode scanner easily accessible via a unified API. The Libraries used are:
Custom Framework to access iOS APIs: https://github.com/EddyVerbruggen/ios-framework-barcodescanner
As using that library as a direct dependency was not practical, there is a library-project that adopts the sources from ZXing and copiles them into a AAR for usage on android: https://github.com/EddyVerbruggen/barcodescanner-lib-aar/