Decode QR Code Image from Camera Roll React Native

Question

I am trying to implement a function in my application, where the user can select an image from the list of their cameras, and the application will decode the QR code in the detected image.

I am currently using a react camera selector: https://github.com/jeanpan/react-native-camera-roll-picker and response-native-qrcode-local-image: https://github.com/remobile/ react-native-qrcode-local-image

The problem is that the local QR code image library requires me to skip the local path and is not compatible with the native URI provided by the responsive camera selector. I would use another library to decode the QR code of the image, but this one seems to be the only one that works on iOS and Android and scans existing images, not a real camera.

I also tried implementing response-native-fetch-blob to temporarily save the camera image, but that also caused me problems: https://github.com/wkh237/react-native-fetch-blob

This is my current attempt in a function that I call in the "callback" support for the response-native-camera-roll-picker command (with previous attempts commented out):

_pickedImage(array,currentImg) { console.log(currentImg) var path = RNFS.DocumentDirectoryPath + '/pickedqr'; let rnfbURI = RNFetchBlob.wrap(RNFetchBlob.fs.asset(currentImg.uri)) const Blob = RNFetchBlob.polyfill.Blob Blob.build(rnfbURI, {type:'image/jpg'}).then((b) => { tmpBlob = b; RNFetchBlob.fs.readFile(tmpBlob, 'base64').then((data) => { console.log("Base64", data) QRDecoder.decode('data:image/gif;base64,${data}', (error, result)=>{ console.log("Code", result) console.log("Error", error) }); }); }) /*fullPath = currentImg.uri.replace("assets-library://", "cdvfile://localhost/assets-library/") QRDecoder.decode(fullPath, (error, result)=>{ console.log("Code", result) console.log("Error", error) });*/ /*let blb = Blob.build( rnfbURI, { type: 'image/jpg'}) console.log(blb)*/ /*RNFetchBlob.fs.readFile(rnfbURI, 'base64').then((data) => { console.log("Base64", data) QRDecoder.decode('data:image/gif;base64,${data}', (error, result)=>{ console.log("Code", result) console.log("Error", error) }); })*/ } 

At the moment, I am completely at a loss, so any methods or understanding will be highly appreciated.

Answer 1

You can use react-native-qrcode-scanner to scan QR from images or directly through the camera.

INSTALLATION:

establish a dependency using this command:

 yarn add react-native-camera react-native-qr-scanner 

link these libraries using:

 react-native link react-native-camera && react-native-qr-scanner 

You need to add permission to your AndroidManifest.xml of your project. This should be found in your android/app/src/main/AndroidManifest.xml Add the following:

 <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.RECORD_AUDIO"/> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.VIBRATE"/> 

In iOS 10 and above, you must add the key "Privacy - a description of the use of the camera" in the list of info.plist of your project. This should be found in your_project/ios/your_project/Info.plist . Add the following code:

 <key>NSCameraUsageDescription</key> <string/> <key>NSPhotoLibraryUsageDescription</key> <string/> <key>NSMicrophoneUsageDescription</key> <string/> <key>NSPhotoLibraryAddUsageDescription</key> <string/> 

Using:

 import React, {Component} from 'react'; import {Platform, StyleSheet, Text, View, TouchableOpacity} from 'react-native'; import {QRreader} from 'react-native-qr-scanner'; import ImagePicker from 'react-native-image-picker'; export default class Scanner extends Component { constructor(props) { super(props); this.state = { reader: { message: null, data: null } }; } render() { return ( <View style={styles.container}> <TouchableOpacity onPress={()=>{ this.openPhoto(); }}> <Text style={{marginTop: 20}}>打开相册识别二维码</Text> </TouchableOpacity> <View> {!this.state.reader? <Text>{!this.state.reader.message?'':'${this.state.reader.message}'}</Text>: <Text>{!this.state.reader.message?'':'${this.state.reader.message}:${this.state.reader.data}'}</Text>} </View> </View> ); } openPhoto(){ console.log('ImagePicker'); ImagePicker.launchImageLibrary({}, (response) => { console.log('Response = ', response); if (response.didCancel) { console.log('User cancelled image picker'); } else if (response.error) { console.log('ImagePicker Error: ', response.error); } else if (response.customButton) { console.log('User tapped custom button: ', response.customButton); } else { if(response.uri){ var path = response.path; if(!path){ path = response.uri; } QRreader(path).then((data)=>{ this.setState({reader: { message: '识别成功', data: data }}); // 十秒后自动清空setTimeout(() => { this.setState({reader: { message: null, data: null }}) }, 10000); }).catch((err)=>{ this.setState({reader: { message: '识别失败', data: null }}); }); } } }); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff' } }); 

You can learn more about this library here: https://www.npmjs.com/package/react-native-qr-scanner

Answer 2

You can use react-native-camera to easily solve this problem.

Here is a simple piece of code for this.

 handleCodeDetected = (data) => { // do whatever you want to do with data } ... ... <RNCamera type={RNCamera.Constants.Type.back} barCodeTypes={[RNCamera.Constants.BarCodeType.qr]} onBarCodeRead={this.handleCodeDetected} style={styles.preview} />