React native , QR code Scanning Black screen in some devices

Question

I am trying to create a QR code scanner using react native library barcode-scanner-google

But facing black screen issue. It is also an open GitHub issue.

Anyone please help here to resolve.

I found this is specific to some android versions and devices. Please find below some devices with OS details where this issue replicate.

• Android Version: 6.0.1 Redmi Note 3
• Android Version: 7.1.1 (Unstable version & rooted mobile with cyanogen nightly14.1)
• Android Version: 7.0.0 (Lenovo K6 Power)

Answer 1

If the issue is that when they hit 'back' it makes the camera screen black you can add a listener for that screen to pop to previous screen using the backHandler. More info here - https://facebook.github.io/react-native/docs/backhandler.html

Answer 2

I had the same problem and I found a solution here

    import { withNavigationFocus } from "react-navigation";
    import QRCodeScanner from "react-native-qrcode-scanner";

    class QrCodeCamera extends Component {

          renderCamera() {
             const isFocused = this.props.navigation.isFocused();

             if (!isFocused) {
                 return null;
             } else if (isFocused) {
                 return (
                    <QRCodeScanner />
                 )
             }
          }

          render() {
             return (
               <View style={{ flex: 1 }}>
                  {this.renderCamera()}
               </View>
         }
    }

export default withNavigationFocus(QrCodeCamera);

It is not a clear solution but it is a working workaround. The QrCodeCamera view is showing after the focus is gained but it is a better functionality than a balck screen ;).