Skip to content
This repository has been archived by the owner on May 12, 2023. It is now read-only.

Camera Blackout in Android Version 8.1.0 #177

Open
vivekkritikal opened this issue Apr 4, 2019 · 9 comments
Open

Camera Blackout in Android Version 8.1.0 #177

vivekkritikal opened this issue Apr 4, 2019 · 9 comments

Comments

@vivekkritikal
Copy link

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
Copy link
Author

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
Copy link
Author

Any update on this issue?

@ThailanHigor
Copy link

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
Copy link
Owner

moaazsidat commented May 2, 2019

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
Copy link

superp commented May 18, 2019

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
Copy link

superp commented May 20, 2019

I've fixed it!
It was a redux-helpers problem from ignite:
react-navigation/redux-helpers#53 (comment)

mnzaki added a commit to jolocom/smartwallet-app that referenced this issue Jul 15, 2019
infinitered/ignite-andross#277
moaazsidat/react-native-qrcode-scanner#161
moaazsidat/react-native-qrcode-scanner#177
moaazsidat/react-native-qrcode-scanner#136
react-native-camera/react-native-camera#1797
react-native-camera/react-native-camera#1686
react-native-camera/react-native-camera#1686
react-navigation/redux-helpers#87
react-navigation/redux-helpers#60
react-navigation/redux-helpers#53
https://www.youtube.com/watch?v=CnQ8N1KacJc

Fixes #1326

The navigation actions were turned into ThunkActions and now directly
call react-navigation's navigator.dispatch, which handles state
internally

Usages of the navigationActions were fixed

Also QRcodeScanner was cleaned up a bit and hacked to properly re-enable
the camera by re-rendering it (so it gets remounted). Now camera works
again if you press back after scanning a QR code.
@bbeckk
Copy link

bbeckk commented Aug 26, 2019

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
Copy link

brunovianarezende commented Feb 7, 2020

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
Copy link

damiadeh commented Jul 16, 2021

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

7 participants