Camera Blackout in Android Version 8.1.0

[vivekkritikal]

What's happening?

In Android version 8.1.0, camera not opening i.e. camera view is blackout.

How can it be reproduced?

1. Run application on Android Version 8.1.0
2. Provide Run Time Camera Permission.
3. Open QR Code scan camera.
4. Complete Blackout.

Build details?

Android version 8.1.0 "react-native-qrcode-scanner": "^1.1.2",

[vivekkritikal]

What's happening?

In Android version 8.1.0, camera not opening i.e. camera view is blackout.

How can it be reproduced?

1. Run application on Android Version 8.1.0
2. Provide Run Time Camera Permission.
3. Open QR Code scan camera.
4. Complete Blackout.

Build details?

Android version 8.1.0 "react-native-qrcode-scanner": "^1.1.2",

Hi All the issue is not of version....

This issue is raising only on Mi Devices with version 8.1.0 and version 6.0.1... This version is known till now...

Actual issue... When setting aspect Ratio to 1:1... Request to take this issue on priority.

Thanks

[vivekkritikal]

Any update on this issue?

[ThailanHigor]

I have the same problem with my Xiaomi MI 8 Lite. But, only when I navigate to another screen and comes back? Someone help me?

[moaazsidat]

Hmm, seems like it's happening for some specific devices. Is anyone with a device this is not working on, able to debug further and find the root cause? Will accept PRs fixing the issue.

[superp]

It doesn't work for me too with my own device Xiaomi Redmi Note 4x and emulator Nexus 5 (28 SDK). It works only for the first time, but when I change my tab navigation it becomes black. I've tried to use some rerendering hooks (forceUpdate and isFocused feature), but it hasn't helped. Here is a root part of my code:

...
import { withNavigationFocus } from 'react-navigation';

class ScannerScreen extends Component {
  constructor(props) {
    super(props);

    props.navigation.setParams({
      onTabFocus: this.handleTabFocus
    });

    this.scanner = null;
  }

  static navigationOptions = () => {
    return {
      tabBarOnPress({ navigation, defaultHandler }) {
        navigation.state.params.onTabFocus();
        defaultHandler();
     }
    };
  };

  handleTabFocus = () => {
    this.forceUpdate();
  }

  ...

  render () {
    const { isFocused } = this.props;
    console.log(isFocused, 'isFocused');

    return (
      <View style={styles.container}>
        { isFocused && <QRCodeScanner
          ref={(node) => { this.scanner = node; }}
          onRead={this.onBarCodeRead}
          showMarker={true}
          fadeIn={false}
          topContent={
            <Text style={styles.centerText}>
              {I18n.t('scanner.notes')}
            </Text>
          }
        /> }
      </View>
    )
  }
}

export default withNavigationFocus(ScannerScreen);

[superp]

I've fixed it! It was a redux-helpers problem from ignite: https://github.com/react-navigation/redux-helpers/issues/53#issuecomment-492942942

[bbeckk]

I've this black screen issue in all of the tested devices. I've used the scanner in tab navigation. It works for once. If I go to other tabs and get back to the qr scanner, The camera shows black background and scan doesn't work.

"react": "16.8.6", "react-native": "0.60.4", "react-native-camera": "^3.0.0", "react-native-qrcode-scanner": "^1.2.1",

For react navigation, tabs are not re-rendered upon subsequent visits. Is this the issue here? if I use it outside the tab it works all the time

Code:

onSuccess = (e) => {
  alert('abc');
}

render() {
    return (
        <View>
            <QRCodeScanner
                    onRead={this.onSuccess}
                    reactivate={true}
                    reactivateTimeout={5000}
            />
        </View>
    );
}

How can I solve it?

[brunovianarezende]

I had this problem and it seems this was caused by a problem with react-navigation. Some details of what happens can be found at https://github.com/react-native-community/react-native-camera/blob/master/docs/react-navigation.md. The solution I used in my project was based on the suggestion in the link.

First I create a new component:

import { withNavigationFocus } from 'react-navigation' 

const Hack = (props) => {
    const { isFocused } = props;
    if (isFocused) {
        return (<QRCodeScanner {...props} />)
    }
    else {
        return (<View />)
    }
}
const HackedQRCodeScanner = withNavigationFocus(Hack)

and then I use HackedQRCodeScanner instead of QRCodeScanner. E.g.

                <HackedQRCodeScanner
                    onRead={this.onSuccess}
                />

[damiadeh]

Please anyone with a fix that works react-navigation 5?