Black screen after scanning a qr code

[GaneshSaiKumar]

@moaazsidat @mamodom @mjgallag

What's happening?

after scanning a qr code successfully, I'm redirecting to other screen.
when i come back to qr code scanning screen, cam is blacked out.

How can it be reproduced?

add a qr code scanner screen and other screen in a tab nav bar

Build details?

version: react-native-qrcode-scanner - 1.1.2
android: 7.0
react-native: 57

[GaneshSaiKumar]

I think it is issue from RNcamera itself!

[GaneshSaiKumar]

react-native-camera/react-native-camera#1686 (comment)

` componentDidMount() {
const { navigation } = this.props;
navigation.addListener('willFocus', () =>
this.setState({ focusedScreen: true })
);
navigation.addListener('willBlur', () =>
this.setState({ focusedScreen: false })
);
}

render() {
const { hasCameraPermission, focusedScreen } = this.state;
if (hasCameraPermission === null) {
return ;
} else if (hasCameraPermission === false) {
return No access to camera;
} else if (focusedScreen){
return (this.cameraView());
} else {
return ;
}
}`

this solved my issue.

still the appearance of camera is flicker, using animated view in react-native-qrcode-scanner

[GaneshSaiKumar]

initial screen itself is freezing with blank black screen instead of camera interface
@moaazsidat @matthewconstantine
is there a way out?

[paakcmd]

initial screen itself is freezing with blank black screen instead of camera interface
@moaazsidat @matthewconstantine
is there a way out?

I think your camera component never remount after the first usage. The easiest way to fix is to give the component the unique value every time you rout to the component.
Actions.scanner({unique: Date.now() })

then I added some useless actions to the component to double make sure that it really rerendered like this

constructor(props) {
super(props);
this.state = {unique: ''}
}

componentDidMount() {
this.setState({unique: this.props.unique})
}

and now it works 10 out of 10 times

[j0nd0n7]

This issue is from RNCamera, and its solution is documented here:
https://github.com/react-native-community/react-native-camera/blob/master/docs/react-navigation.md

The solution is for react-navigation however a similar approach could be implemented with other navigation packages (like react-native-navigation using componentDidAppear and componentDidDisappear.

[AzranAzwer]

Thank you @j0nd0n7 for the link...

`import { useIsFocused } from '@react-navigation/core';

export const Component = () => {
const isFocused = useIsFocused();

// ...

if (hasCameraPermission === false) {
return No access to camera;
} else if (hasCameraPermission !== null && isFocused) {
return ;
} else {
return null;
}
}
`