how to Scan qr code after capturing an image in react native - react-native

Question

I am making a qr code scanner, where user can upload a qr code image from gallery and from that we can get the data of qr code.
Below is my code:
import RNQRGenerator from 'rn-qr-generator';
import {launchImageLibrary} from 'react-native-image-picker';
const options = {
title: 'photoUpload',
takePhotoButtonTitle: 'photoTake',
chooseFromLibraryButtonTitle: 'photoLibrary',
cancelButtonTitle: 'cancel',
quality: 0.7,
base64: true,
maxWidth: 728,
};
const App = () => {
const onPick = () => {
launchImageLibrary(options, response => {
if (response.didCancel) {
console.log('User cancelled photo picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
} else {
RNQRGenerator.detect({uri: response.assets[0].uri})
.then(res => {
console.log('Detected value', res);
if (res.values.length === 0) {
console.log('Code not found');
} else {
console.log('value: ', res.values);
}
})
.catch(err => {
console.log('Cannot detect', err);
});
}
});
};
return (
<Button
title="Pick from library"
onPress={() => {
onPick();
}}
/>
);
};
This is working fine if user has the actual qr code image
I have an edge case: if user clicks an image of qr code, and then upload this image from gallery.
For this edge case, my written code is not working. I am not sure how to solve this edge case issue.

Answer 1

Try this
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));

Answer 2

To scan the image and get the information about that image barcode and qrcode...
you have to install npm i rn-qr-generator and to choose the image you have to install npm i react-native-image-picker
example:-
import {launchImageLibrary} from 'react-native-image-picker';
import RNQRGenerator from 'rn-qr-generator';
const openlibrary=async()=>{
const galleryOptions = {
mediaType: 'photo',
includeBase64: true,
};
launchImageLibrary(galleryOptions,(res)=>{
if(res.didCancel){
console.error("cancelled")
}else{
RNQRGenerator.detect({
base64:res?.assets[0]?.base64
}).then((item)=>{
console.log(item)
}).catch((err)=>{
console.log(err)
})
}
console.log(res)
}).catch(err=>{
console.log("err",err)
})
}