react-native-toast-notifications icon indicating copy to clipboard operation
react-native-toast-notifications copied to clipboard

Enhancement: Handle onPanResponderTerminate for Toasts in Dismissible iOS Modals

Open landabaso opened this issue 1 year ago • 1 comments

I would like to propose an enhancement for handling Toast components within dismissible modals on iOS. I've encountered an issue where gesture conflicts arise when a Toast is displayed inside a modal that can be dismissed with a swipe gesture.

I suggest adding an onPanResponderTerminate handler:

      // This fix addresses an issue specific to iOS when using Modals.
      // If the Toast component is displayed within an iOS Modal and the user
      // initiates a swipe gesture to dismiss the Toast, there's a potential for
      // gesture conflicts. When a swipe right/left gesture is started within
      // the Toast, followed by a swipe up/down gesture in the
      // Modal, the Modal itself captures the gesture, interrupting the Toast's
      // gesture handling.
      // This results in the Toast's PanResponder receiving a termination
      // request.
      // The fix below ensures that when such a termination request occurs,
      // the Toast smoothly returns to its original position or completes,
      // thus maintaining a consistent and expected user experience.
      // If not handled, the Toast remains in an indeterminate position since
      // onPanResponderRelease is never received.
      onPanResponderTerminate: (_, gestureState) => {
        if (gestureState.dx > 50) {
          panReleaseToRight(gestureState);
        } else if (gestureState.dx < -50) {
          panReleaseToLeft(gestureState);
        } else {
          Animated.spring(getPanResponderAnim(), {
            toValue: { x: 0, y: 0 },
            useNativeDriver: Platform.OS !== "web",
          }).start();
        }
      }

landabaso avatar Jan 15 '24 15:01 landabaso

This is the same problem as #181 I think? @landabaso

andandrej avatar Feb 06 '24 14:02 andandrej