Feature: add qr scanner

[QuinsZouls]

This PR Solves #310

What's includes:

• A modal with a webview for QR scanning
• OTPScanner.html: html with camera and qr functionalities
• Added Android Camera permission
• Install react-native-webview
• Offline functionality

Tested on Android SDK 30 and iOS 16 emulators.

What's next:

• Check if it works on final build
• Check qrjs script (i took it from this CDN)

Notes:

• due offline functionalities, i have to put all jsqr CDN code in to HTML file (looks kinda crap :/)

  Preview

  

[julianpoemp]

About the CDN script: What about installing jsqr via npm and copying the js file to the assets directory as part of the postinstall/prebuild step?

[perry-mitchell]

This looks awesome! I honestly thought this would have been more of a headache but you proved otherwise.

I agree with @julianpoemp - would be best if we could build the ugly parts (minified) of that HTML at build time if possible. What do you think?

[QuinsZouls]

It's not possible import a local JavaScript file from HTML, the only viable option is create a custom script that embed jsqr library from node_modules. Probably a post install script. I'm working on that.

[julianpoemp]

It's not possible import a local JavaScript file from HTML, the only viable option is create a custom script that embed jsqr library from node_modules. Probably a post install script. I'm working on that.

perhaps a static web server would be possible (https://github.com/futurepress/react-native-static-server). You could serve the html file and its assets using a static web server.

Don't know if this is a solution since resources are consumed to run a webserver that are not needed if the script is directly embedded to the HTML file. On the other hand it would makes handling the html file easier. Just an idea to throw in :)

[QuinsZouls]

I just added a nodejs script that builds the HTML file with jsqr dependency, also excluded HTML bundled from git

[perry-mitchell]

Thank you @QuinsZouls - I hope you'll bear with me, I'm not able to review and merge this yet but will try to get to it at the start of this coming week. Very excited for this.

[perry-mitchell]

And if you'd have time to check the podfile lock conflict too, that'd be great. I had to do a larger update to get the new 2.6.2 build working, so it might be wise to just delete the lock and install from scratch again.

[QuinsZouls]

Unfortunately, my Xcode has updated, so I'm not longer able to compile and run for IOS. I'm investigating this issue.

[perry-mitchell]

Ok, it didn't run when I started it.. lots of pod issues. I merged in master, killed ios/Pods and the podfile lock, killed node_modules and installed everything again.

After building the webview manually, I get the following error..

Seems the new modal view isn't stable across all environments (I'm on Mac Sonoma, latest xcode).

[perry-mitchell]

I pushed the merge from master.

[QuinsZouls]

It's working now without issues on lasted xcode with Sonoma, make sure the HTML is builded before running ios command.

[perry-mitchell]

Tested on my iPhone 14 Pro and the camera never starts:

Running from Xcode straight on my device. No errors that I can see that'd be relevant.

[perry-mitchell]

To clarify: It worked on the simulator as you showed, but not on a real device.

[QuinsZouls]

I think it's a permission problem, probably on a bare metal devices need camera permission to work properly. Maybe my approach is ask for camera permission before Camera modal shows. I'm working on that.

[AlecMcCutcheon]

Hope to see this in the app soon :)