Getting Blank screen for QRCode scanner for the first time app installed in Android react-native

Question

I am getting blank screen for QRCode scanner when the app is launcehed for the first time happening only on android devcies. I am trying to scan QRcode in my app for this is have used react-native-qrcode-scanner.

Here is the package.json file details for the packages is used

"react": "17.0.2",
"react-native": "0.66.3",
"react-native-camera": "^4.2.1",
"react-native-qrcode-scanner": "^1.5.5",

Hers is the code for accesing QRCode scanner

import React, { useState } from 'react';
import Colors from '../../utility/Colors';
import {
  TouchableOpacity,
  Image,
  View
} from 'react-native';
import QRCodeScanner from 'react-native-qrcode-scanner';
import { useDispatch } from 'react-redux';
import * as booking from '../../store/action/booking';
import TextView from '../../components/UI/TextView';
import StringConstants from '../../utility/StringConstants';
import {Dimensions } from "react-native";
import normalize from '../../utility/ViewPortScaling';
import Images from '../../utility/Images';

const BarcodeReader = (props) => {
  const dispatch = useDispatch();
  const [isBarcodeRead, setBarcode] = useState(false);

  const screenHeight = Math.round(Dimensions.get('window').height);
  const onSuccess = e => {
    // console.log("inside success", e.data);
    dispatch(booking.isBarcodeRead(true, e.data));
    props.navigation.goBack();
  };

  return (
    <View style={{height:'100%', width: '100%', backgroundColor: Colors.toledo, paddingTop:30}}>
          <View style={{marginStart:20,flexDirection:'row',height:150}}>
                {/* back button */}
                <View style={{  height: 80, width: 50 }}>
                  <TouchableOpacity style={{height:80,width:50}}
                    onPress={() => {
                      props.navigation.goBack();
                    }}>
                    <Image style={{top:50, height:15,resizeMode: 'contain' }} source={Images.backArrow} />
                  </TouchableOpacity>
                </View>

              <View style={{flexDirection:'column',alignItems:'center',justifyContent:'center',alignContent:'center',alignSelf:'auto'}}>
                    {/* company logo */}
                    <View style={{alignItems:'flex-start'}}>
                      <Image style={{ height: 77 }} source={Images.logo} />
                    </View>
                  
                      <View style={{ alignItems:'flex-end',paddingTop:15 }}>
                        <TextView style={{fontSize: 14,fontFamily:'Montserrat-SemiBold',lineHeight:normalize(21)}}>{StringConstants.scanString}</TextView>
                      </View>
                </View>
              
          </View>
      <QRCodeScanner
        onRead={onSuccess}
        cameraStyle={{height: screenHeight}}
        reactivate={true}
        reactivateTimeout={20000}
        fadeIn={false}
      />
        <View style={{height:50,width:50,right:10,position:'absolute',alignSelf:'flex-end',flex:1,bottom:10}}>
            
          <TouchableOpacity style={{height:100,width:50}}

                        onPress={() => {
                              props.navigation.goBack();
                        }}>
          <Image style={{ width:50, height:50,resizeMode: 'contain' }} source={Images.closeWithBox} />
          </TouchableOpacity>
          </View>
    </View>

  );

}
export default BarcodeReader;

Android device details Vivo X60 Android version 13 Realme 5pro Android version 11

This same code was working fine QRCode Scanning worked properly but suddenly it started showing blank while using App for the first time. Its working fine on restarting App sometimes it requires to restart the app 2-3 times

Answer 1

You will need to install below, run the following commands:

1. npm install react-native-qrcode-scanner --save
2. npm install react-native-camera --save
3. npm install react-native-permissions --save

Please check the below configuration for android:

You need to add the "Vibration" 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.VIBRATE"/>

You need to add the "missingDimensionStrategy" config for the 'react-native-camera' setting to 'general', this should be found in your android/app/build.gradle add the following:

android {
  ...
  defaultConfig {
    ...
    missingDimensionStrategy 'react-native-camera', 'general' <-- insert this line
  }
}

Working code:

import React from 'react';
import { Linking, StyleSheet, Text, TouchableOpacity, } from 'react-native';
import { RNCamera } from 'react-native-camera';
import QRCodeScanner from 'react-native-qrcode-scanner';


const App = () => {

  const onSuccess = e => {
    Linking.openURL(e.data).catch(err =>
      console.error('An error occured', err)
    );
  };

  return (
    <QRCodeScanner
      onRead={onSuccess}
      flashMode={RNCamera.Constants.FlashMode.torch}
      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
  }
});

export default App;

versions of npm:

    "react-native-camera": "^4.2.1",
    "react-native-permissions": "^3.8.0",
    "react-native-qrcode-scanner": "^1.5.5",

Hope it will help you!

Answer 2

Maybe it has something to do with the app permission to use the camera.