Question 32769 in React native Question posted in
The official React Native documentation can be found here.

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

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

Tags:

2

Answers


  1. 0

    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!

    Login or Signup to reply.
  2. 0

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search