I need to scan a QR code in ionic 4 pwa application - ionic4

I had tried with cordova-plugin-qrscanner
It worked in my browser when I run my application using ionic serve.
I took the build of my ionic Project using command
"ionic build --prod" and i am running my www folder using http-server
Then I couldn't scan my qr code.In console i am receiving an error saying -
cannot read property enumeratedDevices of undefined

Extremely simple implementation!
Please check that out:
https://www.youtube.com/watch?v=oYChA-rPgpI
I did it using Ionic 5(build for Browser) and Angular 9. I deploy a small demo using firebase hosting.
https://qr-code-scanner-etc-test.firebaseapp.com/home
Tip: if you are working with Ionic don't use the Ionic native Plugins(BarcodeScanner and qrscanner)

You can use the BarcodeScanner Plugin to scan qrcode : plugin docs here
The integration is very simple to implement, you only have to follow the docs as it is. It will work fine in Android but you need to add the following to your config.xml to make it work in iOS.
<plugin name="phonegap-plugin-barcodescanner" />
<edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
<string>To scan barcodes</string>
</edit-config>

Related

React-Native, React-Native-Web and React-Navigation/Stack

Has anyone been able to get React-Native 0.7, React-Native-Web and React-Navigation/Stack 6.2.3 to work on web? I have a small app working on iOS and Android which I am trying to enable on web too. iOS and Android portion work fine and using metro.
However, webpack build continues to error out with "Module parse failed: Unexpected token" on the NavigationContainer.
I tried searching both react-native-web and react-navigation Issues on their respective GitHub Repositories. However, could not find something to solve my issue. Also tried modifying webpack.config with several different configurations/loaders.
Used links below as a reference too:
https://arry.medium.com/how-to-add-react-native-web-to-an-existing-react-native-project-eb98c952c12f
https://gist.github.com/skabbes/0bfa0a969aac8ec13f716dda1ad2ab43
Yes, it happens that I maintain a library that does just that: creates a bare React Native app that also runs on the web: 🌒 Luna - https://github.com/criszz77/luna
Here is the live example: https://criszz77.github.io/luna/
You can find more on the wiki page about how it's implemented and you can also implement it by yourself: https://github.com/criszz77/luna/wiki
By using react-scripts, you don't have to handle webpack, babel and other hard configs by yourself.
It currently doesn't run on 0.7 (didn't have time to make the update), but it's in plan to support all the latest versions of course ASAP.
EDIT: Updated to 0.70.3 🎉

React native app to react native web problem (typescript, babel)

Hello so I'm working on an app for android and iOS which is quite developed by now and I'd like to activate react-native-web on it. the problem is that I have a bug when I try to run the script to launch the web development server :
The first error at the top is the one I'm struggling with I've tried updating my babel config :
I tried deleting the babel config at the root of my project and it changed nothing like the babel config has no importance
It is being used though to build the android app i know that, but for the react native web build it seems he has no importance
But is still get the same error again and again
please let me know if you need any more information's on this issue

How to run a react native app (a bare workflow from expo or a regular one) in web (browser)?

I'm trying to run my React Native app as a web site, on a browser.
I tried to go according to https://necolas.github.io/react-native-web/docs/installation/ but the instructions on the Setup page are not clear.
I found some (rare) posts regarding this, but they are old (2019) and seem to deviate from the info in the link above.
I use yarn android to run it on android.
So, I tried using yarn web. Didn't work.
Also, tried the basic react-native start followed by react-native run-web.
It seems the run-web command is not what is needed.
Any assist appreciated.
P.S. I initialized my project through Expo, as a Bare Workflow project. Hope that helps
According to the docs:
Expo for web can work on any React Native project. When you initialize a new project with a bare workflow template using expo-cli, if you run yarn web or npm run web it will start up expo-cli and open your project in a web browser.
The same guides for web from the managed workflow apply here.
So basically just initialise your project using expo init project-name and then select bare workflow or managed workflow. After that you can execute npm run web. It will open up the browser and run the web version of it. Keep in mind that there are some incompatibility of libraries from expo, for example, the Webview is incompatible on the web so you need to switch when on web to an iframe or so.

Cordova plugin with Capacitor and Quasar

I'm building an app with Quasar and Capacitor.
I'd like to use phonegap-plugin-barcodescanner(or is there any other option for QR reading?).
I've installed plugin with npm i phonegap-plugin-barcodescanner to src-capacitor project. What's my next steps, do I need to register it in capacitor.config?
How do I call scan function on it?
I've figured it out. You need to run npx cap sync in src-capacitor folder. And than the plugin accessible via cordova.plugins.barcodeScanner like it was previously with Cordova

Why is that we cannot install native libraries on Expo? (that requires linking)

I am a newbie and learned react-native expo. I am curious why we can't use any native library with Expo.
For example, if I want to use filesystem on expo I just cant use it, I know expo has it's own file system but I want to use another library but that library requires linking so it is not working in expo. Why is that?
I have tried everything.
This is the library that I want to use ==> https://github.com/itinance/react-native-fs
It requires command : react-native link react-native-fs
How do I do it?
You first have to understand the difference between react-native cli & expo
Please read this documentation to understand the difference
React Native expo uses their own servers to compile your javascript into java and return APK file as a complete APP, and that is the reason you do not need android SDKs or android studio environment on your PC when you are using expo
but when you are using react-native cli you do need the android studio environment such as SDKs, because when you are using cli , it compiles the code using that android studio sdk/environment that you made in your PC that is why you do not need a third party server like expo do.
and thats the reason you get android files right in your react-native project and due to which you can add native modules to it.
However you also have the option to use expo-eject, You can read more about expo-eject in this documentation
Thank You!, Have a great day & welcome to stackoverflow community!.