Qr code scanner in react native

Implementing Qrcode Scanner in React-Native.
QR-code-scanner: www.npmjs.com/...
2nd: npm i react-native-camera
_________
generate and download a QR code : • Generate and download ...
_________
Firebase CRUD :
• Firebase in React Nati...
_________
Firebase authentication:
• React Native Firebase ...

[@SaadCodify]

If you enjoy my content, I encourage you to hit the subscribe button.

[@ashishchaubey9237]

The package uses react-native-camera which is deprecated.

[@Imraann0]

Did you find an alternative ?

[@mukeshjamod8992]

another library compatible or not ??

[@timtom3403]

please continue making videos ,, very nice tutorial

[@SaadCodify]

thank you so much ❤️

[@auroramendezc1452]

Hi, could you help me pls?? 🥺I have the next error:
Error: react-native-permissions: NativeModule.RNPermissions is null.

[@TalJa00]

Have you had the answers

[@zainali-yi7ww]

thanks a lot, for making it look this much easy 💯

[@SaadCodify]

thank you for the feedback 💯

[@adityask865]

Nice tutorial, how can I call this qr scanner when i press a touchable icon in another module and export the data that was read?

[@user-ps4zv1uw1l]

don't proper scan this library please tell me which library fast scan any angle because this library very slow

[@TalJa00]

I feel so confused because I always face with the same problems after installing npm library Error: react-native-permissions: NativeModule.RNPermissions is null. I am trying to fix it with all suggestions that I found but it is still not working (I have never faced with these things while working with Flutter), can someone help me to deal with it.

[@visionm.ph1]

Facing the same Error :/

[@vijayreddy6351]

1.pod install
2.clean and rebuild the app
3.npx react-native-clean-project
or else do just delete node_modules folder, yarn.lock file, and add this code to package.json
"resolutions": {
"react-native-permissions": "^3.8.0"
},
"overrides": {
"react-native-qrcode-scanner": {
"react-native-permissions": "^3.8.0"
}
},

[@mahesh-zf4ll]

Error: react-native-permissions: NativeModule.RNPermissions is null. please help

[@dechols87]

same, did u find a solution?

[@user-xq6ge8dn8b]

i am gettitng error Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types' how to resolve this while running the above code how to resolve

[@Trishul-Industries]

i am facing the same issue did you solve it yet now ?

[@muhammadumer5483]

You need to make a patch for react native camera , remove the viewprops as they are depricated
@@Trishul-Industries

[@kibadev918]

Thanks a lot. great content

[@SaadCodify]

thank you 💯

[@pritigurav3654]

what styles should i apply to get Camera in fullscreen. plz guide

[@SaadCodify]

import { StatusBar } from 'react-native';
return (


)
hide status bar,
give a height of 100% at the cameraStyle
and add other props that you need in QRCodeScanner
i hope this would help you 💯

[@caiomendeslima5541]

Thank you very much!

[@rakhikumari9717]

Great work 👏 thank u so much 😊

[@SaadCodify]

thank you for the feedback 💯

[@Hardy-zf8em]

good job man keep it up

[@SaadCodify]

thank you 💯

[@usmansiddiqui3026]

That's really helpful , keep it up

[@SaadCodify]

thank you ♥️

[@timtom3403]

coould you tell how i can programmtically enable scanning again, like i want to click a button only then scanning shall start and when detected it should stop,and again when needed presss the button,,, i read the docs for react-native-qrcodescanner found out theres a method callled reactivate() but im not sure how to implement it

[@SaadCodify]

this is how you can make it reactive :
make reactivate as True
and if you want you can also give it time, that how much seconds it should take to get reactive,
for example i have given it 5000 milliseconds = 5 seconds, you can adjust it according to your need ♥️

[@timtom3403]

@@SaadCodify ok bro thanks

[@timtom3403]

why dont you make more videos on react native

[@SaadCodify]

more videos will come on react native, stay tuned 💯

[@katerinaneprasova2939]

Hello, great tutorial! Is there a way to force the scanner into a centered square box please?

[@ibsharakrami8330]

did you get the solutions?

[@justelaima2896]

can u provide the source code please?

[@timtom3403]

hi can you suggest how we can scan from a gallery image using this library ,thanks

[@SaadCodify]

for scanning a image from gallery you would need to install a additional library "npm install react-native-image-picker",
set a state and create a function in which set the image Uri from gallery to that state you created than,
use the prop of QrCodeScanner "ImageData" and pass that state. in "onRead" prop add a new state which displays the data of the image.
I hope this will help you in scanning a picture from the gallery.

[@timtom3403]

@@SaadCodify in the docs i did not find a prop named ImageData

[@SaadCodify]

so sorry this prop was removed in the updates
you can use rn-qr-generator
to scan a image from galley
www.npmjs.com/package/rn-qr-generator
prop : fileName : Name of the image file to store in FileSystem.

[@timtom3403]

@@SaadCodify i tiried this and it worked thanks

[@SaadCodify]

Awesome! I'm glad to hear that it worked for you!
Thank you for your feedbacks!

[@jumamakorere8597]

That's nice video, How can scan and stored on the database?

[@ringgo6521]

when onRead properties in QRCodeScanner, update setData(data) and just call your function to submit your data to database. in this function, send your data with axios