Ionic 4 | Add Barcode/ QR Code Scanner/ Encoder Generator Ionic 4 Native Plugin

Updated ( 06 Apr 2019 ) for latest Ionic CLI v4.12.0

In this tutorial, we will implement a Barcode or QR Scanner / Encoder plugin in Ionic 4 application. Barcodes and QR codes are widely used for multiple purposes like to add a link where a user doesn’t need to type the whole URL it can be easily scanned from a QR code. Barcodes can also be seen everywhere on the day to day items like eatables clothes etc, we can wimple scan these barcodes to get information like item code date of manufacturing, prices etc.

We will create a similar app to scan these codes.

Let’s start…

Create new Ionic 4 application:

To start Ionic 4 application we need to run below command as still, it is in beta phase.

then enter root of the created application

Install the Cordova and Ionic Native plugins:


Import Native Barcode Scanner in the Application’s Module

To open the application in Visual Studio code use  code . command

In app.module.ts, import Barcode scanner module then add in providers

here we have added FormsModule in imports and also added it in imports array.

Also Check : Ionic 4 | Adding Barcode / QR Code Scanner in Ionic 4 Application using ZBar Cordova and Native Plugin

Call Component Method to Scan Barcode or QR Code

In, define an object scannedData to carry scan result and scanCode() method.

We have also defined BarcodeScannerOptions to define options like to show torch button, show button to flip camera front or back etc, you can check out more options here available to configure scanner format encoding.

Add Button to Scan Barcode

In, add a button and show the result of scanned Barcode, having text information bar type.

Encode Your Data into a barcode

In, add input to get you value and an object to get in return

In, add encode method

Add Native Platform Android or IOS

We need a real device to test this plugin, So now we will add the Android platform to create app-debug.apk file to test on an Android device

Run the following command to add Android platform and create app-debug.apk

You can generate QR codes online here

See mine 😛

Source Code link on GitHub

In this tutorial, we have created a sample app to scan Barcode and QR code using Cordova plugins in Ionic Native.

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

8 Comment threads
5 Thread replies
Most reacted comment
Hottest comment thread
10 Comment authors
Julian VargasEduardo CorteVadimjoao vitorBlaqPrynx Recent comment authors
newest oldest most voted
Notify of
Christopher Solís

Hi Jolly. I’m having a problem when I try to open the camera to read the QR code that every time I press the button it doesn’t do anything.

Szymon Kiciński

Hello, could you please share this code on e.g. GitHub? Thanks! 🙂

Pichit W
Pichit W

Hello Jolly, I’ve try this project then show the problem about ‘Cannot find module ‘node-sass’ ‘ with npm v 6.8.0. How can I fix this?


hello, i have a problem, when I scann the code, the app show and alert: barcode data{“text”:”\n.”,”format”:”QR_CODE”,”cancelled”:false}


wow i really love this …Jolly you are the man it actually worked for me when i used the ionic devApp to try….. But my problem is it only shows the number… can i get details like the name of the product ,manufacturing date or the expiring date of the product……………..but really its a GoodWork out there….God Bless you…….will be looking forward to hear from you soon

joao vitor
joao vitor

how do I get the string of the link that was scanned? I need to put it in an array of strings


Jolly, thank you!
To run this command “ionic cordova build android”, do i need to have installed:
• Android Studio;
• Android Studio SDK;
• Java 8 SDK

Eduardo Corte
Eduardo Corte

Hi, The qr code generator works great on android, but when testing it on ios the pop up window with the qr code doesn’t appear, is there any solution for ios?

Julian Vargas
Julian Vargas

was you result the problem?