QRcode not being read when needed

0
votes

I am using the react-native-qrcode-scanner library to scan a barcode and return its result. However it does not read the barcode and returns no information

    import React, { Component } from 'react';
import { View, Text, Dimensions, StyleSheet, TouchableOpacity } from 'react-native';
import QRCodeScanner from "react-native-qrcode-scanner";


export default class QRcodeScan extends Component {

  state = {
    id: ''
  };
  onSuccess = async (e) => {
    console.log(e)
    await this.setState({ id: e.data });
    console.log(this.state.id)
  };

  render () {

    return (
      <QRCodeScanner
      onRead={this.onSuccess}   
      topContent={
        <Text style={styles.centerText}>
          Go to <Text style={styles.textBold}>wikipedia.org/wiki/QR_code</Text> on your computer and scan the QR code.
        </Text>
      }
      bottomContent={
        <TouchableOpacity style={styles.buttonTouchable}>
          <Text style={styles.buttonText}>OK. Got it!</Text>
        </TouchableOpacity>
      }
    />
  );
}
}
const styles = StyleSheet.create({
  centerText: {
    flex: 1,
    fontSize: 18,
    padding: 32,
    color: '#777',
  },
  textBold: {
    fontWeight: '500',
    color: '#000',
  },
  buttonText: {
    fontSize: 21,
    color: 'rgb(0,122,255)',
  },
  buttonTouchable: {
    padding: 16,
  },
});
  • react-native-qrcode-scanner": "^1.3.1"
  • react-native-permissions": "^2.0.3"
  • react-native-camera": "^3.11.1"
  • react-native": "^0.60.4"
2
javascriptreact-nativereact-native-androidqr-code

2 Answers

2
votes

If you have a react-native-camera module installed, you can use the installed module to fix it.

  1. You must add the following permissions to android/app/src/main/AndroidManifest.xml:
     <uses-permission android:name="android.permission.INTERNET" />
+    <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" />

2.You’ll also need to set the dimension strategy in android/app/build.gradle

    defaultConfig {
         applicationId "com.example"
+        missingDimensionStrategy 'react-native-camera', 'general'

3.import RNCamera from the App.js file.

import { RNCamera } from 'react-native-camera';

4.Scan the QRcode using the onBarCodeRead component.

  constructor(props) {
    super(props);
    this.state = {
      camera: {
        type: RNCamera.Constants.Type.back,
      }
    };
  }

  onBarCodeRead(scan) {
    console.warn(scan.type);
    console.warn(scan.data);
  }

 render() {
    return (
      <View style={styles.container}>
        <RNCamera
            ref={ref => {
              this.camera = ref;
            }}
            defaultTouchToFocus
            mirrorImage={false}
            onBarCodeRead={this.onBarCodeRead.bind(this)}
            type={this.state.camera.type}
        />
      </View>
    );
  }
}
1
votes

I slightly modified my code and everything went back to normal. The end result was this:

import React, { Component } from 'react';
import { View, Text, StatusBar } from 'react-native';
import QRCodeScanner from "react-native-qrcode-scanner";


    export default class QRcodeScan extends Component {
      render() {
        return (
          <View style={{backgroundColor:'#000', flex:1}}>
            <StatusBar backgroundColor='black' barStyle='light-content'/>
            <QRCodeScanner
              styles={{height:'100%'}}
              reactivate={true}
              onRead = { ( e )  => this.props.navigation.navigate('DetailQR', {id: e.data})}
              showMarker = {true}
            />
          </View>
        )
      }
    }