How to proper deactivate scanning if you are using react-navigation and go to next screen

[nadzic]

What's happening?

I would like to know the most proper way how to deactivate qr scanner if you go to next screen with react navigation

• I tried with additional variable {qrScannerEnabled && <QRCode.. />}, that has performance issues - I just want enable/disable scanner, not always rerender the whole scanner.

• I tried to set reactivate={qrScannerEnabled}, so to disable it when go to next screen, but it still scans code one more time, then it is disabled (I tried also force update with setState, but no effect)

Currently I am resetting the state with NavigationActions, but that is also not super performant.

Is there any smart solution for this?

Build details?

Android 8.1

[pkyeck]

I'm using react-navigation's NavigationEvents:

import { NavigationEvents, NavigationScreenProps } from 'react-navigation';

// ...

onDidFocus = payload => {
  this.setState({ isFocused: true });
};

onDidBlur = payload => {
  this.setState({ isFocused: false });
};

render() {
  const { isFocused } = this.state;

  return (
    <View style={styles.container}>
      <NavigationEvents
        onDidFocus={this.onDidFocus}
        onDidBlur={this.onDidBlur}
      />
      {isFocused && (
        <QRCodeScanner />
      )}
    </View>
  );
}

But this is also rerendering on every page-switch. If you find a better solution, let me know.

[superp]

If you still have problem with onDidFocus not firing, maybe you have the same:
react-navigation/redux-helpers#53

[cs-manughian]

Hi, set to de/reactivate the scanner by hooking into the focus lifecycle from react-navigation (this is typescript with react native):

    import { useFocusEffect, useIsFocused } from '@react-navigation/native';

    // Inside your component:
    
    // Use this to determine the focus state of the screen
    const isFocused = useIsFocused();
    
    // Alternatively, hook into the focus lifecycle method
    const [isReactivated, setIsReactivated] = useState<boolean>(true);
    useFocusEffect(
        useCallback(() => {
            // Do something when the screen is focused
            // Add some custom logic here...
            setIsReactivated(true);
            return () => {
                // Do something when the screen is unfocused
                setIsReactivated(false);
            };
        }, [])
    );
    
    return (
           isFocused && 
            <QRCodeScanner
                reactivate={isReactivated} // Or, you can use isFocused here
                ... />
    )
    ...

References:

• https://reactnavigation.org/docs/use-is-focused
• https://reactnavigation.org/docs/navigation-lifecycle/#react-navigation-lifecycle-events