React Native 如何从图库中读取二维码

Question

I have the functionality to Scan QR to view the profile of a person. Everything is working fine but I also want a functionality to decode/to read QR from my gallery instead of scanning it.

So it would go like this.

1. Users can Scan QR to view profiles.
2. There's an option above that the user can import the QR code image from the gallery and once it's imported it will decode the image if its a correct QR or not.
3. If the QR is correct and it exists in DB then go to the user profile.
4. If not return an error saying either an invalid qr or user does not exist.

I think Apps like LINE, WeChat have this functionality instead of scanning the QR they can just save the QR code into their library sent by their friend or another user then import that and decode it or read and then tadah.

What I had in mind is first I need a native library for reading my gallery. Once the user selected I need a library or functionality to read/decode the image if its a QR code or not.

How can I achieve this? I did some googling and research already but I haven't found an existing library for that.

Appreciate it if someone could help. Thanks

Answer 1

Use rn-qr-generator to decode a QR code in an image.

import RNQRGenerator from 'rn-qr-generator';

RNQRGenerator.detect({
  uri: PATH_TO_IMAGE, // local path of the image. Can be skipped if base64 is passed.
  base64: imageBase64String, // If uri is passed this option will be skipped.
})
  .then(response => {
    const { values } = response; // Array of detected QR code values. Empty if nothing found.
  })
  .catch(error => console.log('Cannot detect QR code in image', error));

It will return an array of detected QR codes' values Works well on iOS and Android platforms.