Blur event is not fired

[leethree]

Current Behavior

• In stack navigator, blur event is not fired when navigating back to previous screen.

Expected Behavior

• blur should be fired when going back.

How to reproduce

class SomeScreen extends React.Component {
  unsubscribeListener: () => void;

  componentDidMount() {
    this.unsubscribeListener = this.props.navigation.addListener(
      'blur',
      () => { console.log('blur'); },
    );
  }

  componentWillUnmount() {
    this.unsubscribeListener();
  }

  render() {
    // omitted
  }
}

Your Environment

software	version
react-navigation	5.0.0-alpha.8
react-native	0.59.10
expo	N/A
node	10.15.0
npm or yarn	yarn 1.17.3

[leethree]

Same thing happen after I upgraded to the latest versions

    "@react-navigation/bottom-tabs": "5.0.0-alpha.9",
    "@react-navigation/core": "5.0.0-alpha.10",
    "@react-navigation/native": "5.0.0-alpha.8",
    "@react-navigation/stack": "5.0.0-alpha.19",

[satya164]

This is kind of expected behaviour that blur event doesn't fire for a screen that is getting removed. I'll try to make it work, but ideally whatever you were doing in blur, you should do in componentWillUnmount as well (the useFocusEffect hook handles it), so it's not very critical.

[leethree]

I'm trying to prevent the back behaviour when the form on the screen is not saved.
componentWillUnmount won't work in this case.

I'll try convert it to functional component and use useFocusEffect.

[satya164]

I'm trying to prevent the back behaviour when the form on the screen is not saved.

Don't think subscribing to blur event is correct here? You cannot prevent focus/blur events. You'll need to manually disable the hardware back button (by subscribing to BackHandler in useFocusEffect) and the back button on the toolbar.

[leethree]

I thought I could call preventDefault on the blur event, which would be very handy in many use cases. I guess it's not possible 🤷‍♂

[Nerogee]

Hi Guys,
any updates? the feature @leethree looked after is mentioned here
https://reactnavigation.org/docs/en/next/navigation-prop.html#navigation-events

but I'm failed to implemented. May I know useFocusEffect is the key to this? Because I used componentDidMount to addListener for 'blur' event, but it's an error saying invalid event.

[leethree]

@Nerogee You won't be able to prevent the screen from going back using blur event. We end up implementing a custom logic to do that.