Conflicts using both 'Google Maps' and 'QR Scanner' native plugins in same iOS app?

I’m trying to use both google-maps & qr-scanner Ionic native plugins in the same iOS application.

They both work pretty well when used alone but give issue when mixed in the same application.

The problem is; After a cold start of the application, I first move to a map view where the map is displayed correctly. I then move to a QR scan view where the Camera stream is displayed correctly. No issue until now. However, if I go back to the map view, the Camera stream is displayed instead of the map. Even if the ‘googleMaps.create()’ is successful and the ‘MAP_READY’ event is received.

As far as I known, both plugins use the same mechanism of rendering the native view (Camera or Google Map) behind the Cordova WebView and make it visible through HTML transparency. Could this be the problem? Apparently QR scanner native view is interfering with the Google Map one…

Any idea?

Thanks in advance!

Yeah, both make the HTML transparent to show the native element behind.

What exact QR Scanner Ionic Native and Cordova plugin are you using? Some of them have a method to destroy/remove the native element - calling this might solve your problem (by making a second use of the qr scanner a bit slower)

Thanks for the feedback…

I’m using ‘@ionic-native/qr-scanner’ which uses the Bitpay ‘cordova-plugin-qrscanner’ (https://github.com/bitpay/cordova-plugin-qrscanner).

This one has a destroy method but which is apparently not published by the ionic wrapper plugin. I was however able to test by issuing a QRScanner.destroy() directly through Safari Web Inspector which seems to indeed ‘kill’ the QRScanner instance. But when I then move to the map view, the view is ‘blank’. No Camera stream displayed anymore but no map as well…

Can you create an issue so this gets implemented?
Issues · danielsogl/awesome-cordova-plugins · GitHub

Can you modify your app so it first shows a qr scanner and then the map instead of the other way around?

I’ll create an issue and post it to this topic…

Modifying the application workflow as you propose is not possible as the QR scanning feature and the map feature are not related. It’s not part of e.g. a wizard where the 2 steps could be inverted. Moreover, accessing the QR scanner view only once is sufficient to break the map view for the rest of the application’s lifetime…

I should maybe post this issue on the BitPay Cordova QR scanner plugin forum?

1 Like

You can do that, my suggestion was just to debug the problem a bit more to find out what is going on.

Someone else was faster and actually implemented the destroy method already:
https://github.com/ionic-team/ionic-native/pull/1971 :smiley:

I am having exactly the same problem.
Destroying the scanner only makes the map blank.
Has anybody made any progress on that issue?
Thank you very much in advance,

Thank you for your answer.
I don’t quite understand.
Do you mean the problem cab be solved with the LoadController patch?
I tried but didn’t work.
Thank you again.
Djamel