Weird pop-up rectangle bug when camera is unauthorized

[keithoys]

What's happening?

When camera permission is not granted for the app, this long white rectangle pop-up will always appear first. User has to click anywhere outside of the rectangle pop-up before the native Android pop-up comes up to request for camera permission.

This is all I did in render:

            <SafeAreaView style={styles.container}>
                <QRCodeScanner
                    onRead={this.onSuccess}
                    showMarker={true}
                    notAuthorizedView={this.renderCameraUnauthorizedView()} // For iOS
                    cameraProps={{ notAuthorizedView: this.renderCameraUnauthorizedView() }} // For Android
                    permissionDialogTitle={"Camera Unauthorized"}
                    permissionDialogMessage={"Please enable camera access for this app"}
                    topContent={
                        <Text style={styles.headerText}>Point at a QR Code to Scan</Text>
                    }
                    bottomContent={
                        <TouchableOpacity style={styles.buttonDoneTouchable} onPress={() => this.handleClickDone()}>
                            <Text style={styles.buttonDoneText}>Done</Text>
                        </TouchableOpacity>
                    }
                    isAuthorized={console.log("laooooo")}
                />
            </SafeAreaView>
        );

Build details?

Android 9.0, react-native-qrcode-scanner 1.2.1

[songoten28]

add this

<QRCodeScanner
...
cameraProps={{
androidCameraPermissionOptions: null
}}
/>

[jegathispandi]

Same problem here. any solution for this problem?

[TeruyaHaroldo]

I am using the react-native-camera version 3.8.0 and everything is working. Version of react-native is 0.61.2.

const { height, width } = Dimensions.get('window');

<Camera
  style={{ height: height, width: width }}
  onBarCodeRead={(e) => console.log(e.data)}            
  androidCameraPermissionOptions={null}
  pendingAuthorizationView={<My View behind the dialog that is asking for permission />}
  notAuthorizedView={<My View that shows that user declined permission />}
>
</Camera>

[jegathispandi]

<QRCodeScanner cameraProps={{ androidCameraPermissionOptions: null }} onRead={this.onSuccess} ref={(node) => { this.scanner = node; }} />

Its working fine. thanks @songoten28