CODEWITHSUNDEEP
androidreact-nativeandroid-camerabarcode-scannerautofocus
forchetan01
forchetan01

Reputation: 136

React native , QR code Scanning Black screen in some devices

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.

Upvotes: 4

Views: 2072

Answers (2)

MeLean
MeLean

Reputation: 3441

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 ;).

Upvotes: 1

Matt Aft
Matt Aft

Reputation: 8936

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

Upvotes: 0

Related Questions