How do I shut of camera/scanner in react-native-qrcode-scanner?

Question

Current code:

import QRCodeScanner from 'react-native-qrcode-scanner';
function ScanScreen({ navigation }) {
  return (
    <SafeAreaView style={styles.screen}>
      <QRCodeScanner reactivate={true} reactivateTimeout={3000}
        onRead={data => navigation.navigate('Third', {target:data.data})}
      />
    </SafeAreaView>
  );
}

It works, but here's what I want to do: The user can navigate between screens, one of them being a QR code scanner. While scanning, I need to debounce the scanner so it doesn't keep generating onRead events. The user could a) start a scan in the scan screen without reading a QR code and navigate manually to another screen. b) read a QR and automatically move to another screen for processing, then go back to scan again. For this reason I need to re-enable the scanner after some reasonable time. I can't just set reactivate to false because then the QR scanner is inactive until I restart the app. The problem is that when the user stays in Another screen, the QR scanner re-activates after the timeout and tries to scan when it is not desired. What I ideally would like to do is to deactivate the QR scanner while the user is not in the scan screen, and re-activate it with the above mentioned parameters whenever the user enters the scan screen. Is there any way to do this? Thanks!

Answer 1

I had almost the same problem. The scanner does not stop scanning while showing another View (using reactivate={true}). I am using react-navigation and so I came up to following solution.

You can listen on what is happening with your view with focus and blur.

this.props.navigation.addListener('focus', () => {
    this.setState({viewFocused: true});
});

this.props.navigation.addListener('blur', () => {
    this.setState({viewFocused: false});
});

Note: you place this piece of code in componentDidMount or using React.useEffect.

Based on the state viewFocused you can render the QR Code Scanner.

this.state.viewFocused && (
    <QRCodeScanner
        onRead={onRead}
        reactivate={true}
        reactivateTimeout={2000}
    /> );

This helps me to solve my problem. To not scan while showing other views but to scan if the view is shown again. Credits to pkyeck on github.com

Answer 2

With React hooks:

let scanner = useRef(null);

<QRCodeScanner
onRead={onSuccess}
ref={node => { scanner = node;}}
/>

Then you can attach it to a button. For example:

onPress={() => scanner.reactivate()}