mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-01-12 22:51:18 +08:00

Files

Satyajit Sahoo 6925e92dc3 feat: add a beforeRemove event

A lot of times, we want to prompt before leaving a screen if we have unsaved changes. Currently, we need to handle multiple cases to prevent this:

- Disable swipe gestures
- Override the back button in header
- Override the hardware back button on Android

This PR adds a new event which is emitted before a screen gets removed, and the developer has a chance to ask the user before closing the screen.

Example:

```js
React.useEffect(
  () =>
    navigation.addListener('beforeRemove', (e) => {
      if (!hasUnsavedChanges) {
        return;
      }

      e.preventDefault();

      Alert.alert(
        'Discard changes?',
        'You have unsaved changes. Are you sure to discard them and leave the screen?',
        [
          { text: "Don't leave", style: 'cancel', onPress: () => {} },
          {
            text: 'Discard',
            style: 'destructive',
            onPress: () => navigation.dispatch(e.data.action),
          },
        ]
      );
    }),
  [navigation, hasUnsavedChanges]
);
```

2020-07-02 14:32:31 +02:00