fix: prevent overlay dismiss during in-flight RHP transitions

Clicking the RHP overlay while an inner Stack push is animating
interrupts the transition and leaves stale animation state behind. The
next RHP then opens with a visibly sluggish slide-in.

Gate the primary, secondary, and tertiary overlay dismiss paths on the
RightModalNavigator inner Stack's transitionStart/End events. A ref
mirrors a useState so the BaseOverlay Pressable receives a `disabled`
prop that no-ops clicks during opens. transitionEnd always re-enables
the gate so a cancelled open (forward nav immediately followed by back)
cannot leave the overlay permanently unresponsive.

Fixes Expensify#87174

Author: KJ21-ENG

src/libs/Navigation/AppNavigator/Navigators/Overlay/BaseOverlay.tsx

@@ -1,5 +1,5 @@
 import {useCardAnimation} from '@react-navigation/stack';
-import React from 'react';
+import React, {useCallback} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {Animated, View} from 'react-native';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
@@ -21,14 +21,25 @@ type BaseOverlayProps = {
 
     /* Overlay position from the right edge of the container */
     positionRightValue?: number | Animated.Value | Animated.AnimatedAddition<number>;
+
+    /* When true, the overlay stays visible but swallows clicks without invoking onPress.
+       Used to block dismiss while an RHP stack transition is in flight (see issue #87174). */
+    disabled?: boolean;
 };
 
 // The default value of positionLeftValue is equal to -2 * variables.sideBarWidth, because we need to stretch the overlay to cover the sidebar and the translate animation distance.
-function BaseOverlay({onPress, progress, positionLeftValue = -2 * variables.sideBarWidth, positionRightValue = 0}: BaseOverlayProps) {
+function BaseOverlay({onPress, progress, positionLeftValue = -2 * variables.sideBarWidth, positionRightValue = 0, disabled = false}: BaseOverlayProps) {
     const styles = useThemeStyles();
     const {current} = useCardAnimation();
     const {translate} = useLocalize();
 
+    const guardedPress = useCallback(() => {
+        if (disabled) {
+            return;
+        }
+        onPress?.();
+    }, [disabled, onPress]);
+
     return (
         <Animated.View
             id="BaseOverlay"
@@ -42,20 +53,22 @@ function BaseOverlay({onPress, progress, positionLeftValue = -2 * variables.side
              everything behaves normally like one big pressable */}
                 <PressableWithoutFeedback
                     style={[styles.draggableTopBar, styles.boxShadowNone, styles.cursorAuto]}
-                    onPress={onPress}
+                    onPress={guardedPress}
                     accessibilityLabel={translate('common.close')}
                     role={CONST.ROLE.BUTTON}
                     id={CONST.OVERLAY.TOP_BUTTON_NATIVE_ID}
                     tabIndex={-1}
+                    disabled={disabled}
                 />
                 <PressableWithoutFeedback
                     style={[styles.flex1, styles.boxShadowNone, styles.cursorAuto]}
-                    onPress={onPress}
+                    onPress={guardedPress}
                     accessibilityLabel={translate('common.close')}
                     role={CONST.ROLE.BUTTON}
                     noDragArea
                     id={CONST.OVERLAY.BOTTOM_BUTTON_NATIVE_ID}
                     tabIndex={-1}
+                    disabled={disabled}
                 />
             </View>
         </Animated.View>

src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx

@@ -1,6 +1,6 @@
 import type {NavigatorScreenParams} from '@react-navigation/native';
 import {useFocusEffect} from '@react-navigation/native';
-import React, {useCallback, useEffect, useMemo, useRef} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {Animated, DeviceEventEmitter, InteractionManager} from 'react-native';
 import {DialogLabelProvider} from '@components/DialogLabelContext';
@@ -61,13 +61,18 @@ function MissingPersonalDetailsWithPINContext(props: Record<string, unknown>) {
     );
 }
 
-function SecondaryOverlay() {
+type SecondaryOverlayProps = {
+    disabled: boolean;
+};
+
+function SecondaryOverlay({disabled}: SecondaryOverlayProps) {
     const {shouldRenderSecondaryOverlayForWideRHP, shouldRenderSecondaryOverlayForRHPOnWideRHP, shouldRenderSecondaryOverlayForRHPOnSuperWideRHP} = useWideRHPState();
     const {sidePanelOffset} = useSidePanelState();
 
     if (shouldRenderSecondaryOverlayForWideRHP) {
         return (
             <Overlay
+                disabled={disabled}
                 progress={secondOverlayWideRHPProgress}
                 positionRightValue={Animated.add(sidePanelOffset.current, animatedWideRHPWidth)}
                 onPress={() => Navigation.closeRHPFlow()}
@@ -78,6 +83,7 @@ function SecondaryOverlay() {
     if (shouldRenderSecondaryOverlayForRHPOnWideRHP) {
         return (
             <Overlay
+                disabled={disabled}
                 progress={secondOverlayRHPOnWideRHPProgress}
                 positionRightValue={Animated.add(sidePanelOffset.current, variables.sideBarWidth)}
                 onPress={Navigation.dismissToPreviousRHP}
@@ -88,6 +94,7 @@ function SecondaryOverlay() {
     if (shouldRenderSecondaryOverlayForRHPOnSuperWideRHP) {
         return (
             <Overlay
+                disabled={disabled}
                 progress={secondOverlayRHPOnSuperWideRHPProgress}
                 positionRightValue={Animated.add(sidePanelOffset.current, variables.sideBarWidth)}
                 onPress={Navigation.dismissToSuperWideRHP}
@@ -107,6 +114,14 @@ function RightModalNavigator({navigation, route}: RightModalNavigatorProps) {
     const {isSmallScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
     const containerRef = useRef(null);
     const isExecutingRef = useRef<boolean>(false);
+    // Tracks whether the inner RHP stack is currently running a non-closing push/pop animation.
+    // Clicking the overlay mid-push leaves stale animation state (see issue #87174), so we
+    // ignore the dismiss press until the in-flight transition finishes. The ref gates the
+    // synchronous dispatchers; the state mirror drives the `disabled` prop on the overlays so
+    // the Pressable itself no-ops (defense in depth against cases where the dispatcher path
+    // bypasses the ref guard, e.g. inline Navigation.dismissToPreviousRHP).
+    const isOverlayDismissEnabledRef = useRef<boolean>(true);
+    const [isOverlayDismissEnabled, setIsOverlayDismissEnabled] = useState<boolean>(true);
     const screenOptions = useRHPScreenOptions();
     const {superWideRHPRouteKeys, shouldRenderTertiaryOverlay} = useWideRHPState();
     const {clearWideRHPKeys, syncRHPKeys} = useWideRHPActions();
@@ -165,12 +180,31 @@ function RightModalNavigator({navigation, route}: RightModalNavigatorProps) {
                     abandonReviewDuplicateTransactions();
                 });
             },
+            transitionStart: (event: {data?: {closing?: boolean}}) => {
+                // Only disable dismiss when a screen is starting to open. A starting close is
+                // either the user's own dismiss (benign) or a cancellation of an in-flight open
+                // (handled by transitionEnd below).
+                if (event.data?.closing) {
+                    return;
+                }
+                isOverlayDismissEnabledRef.current = false;
+                setIsOverlayDismissEnabled(false);
+            },
+            transitionEnd: () => {
+                // Re-enable on ANY transitionEnd (opening or closing). If an opening transition
+                // is interrupted by a pop, React Navigation cancels the open and only emits
+                // transitionEnd with closing: true for the popped route — the opening's own
+                // closing: false end never fires. Ignoring closing: true here would leave the
+                // gate stuck false forever and swallow subsequent overlay dismiss clicks.
+                isOverlayDismissEnabledRef.current = true;
+                setIsOverlayDismissEnabled(true);
+            },
         }),
         [navigation, route.params?.screen],
     );
 
     const handleOverlayPress = useCallback(() => {
-        if (isExecutingRef.current) {
+        if (isExecutingRef.current || !isOverlayDismissEnabledRef.current) {
             return;
         }
         isExecutingRef.current = true;
@@ -215,6 +249,7 @@ function RightModalNavigator({navigation, route}: RightModalNavigatorProps) {
                 <NoDropZone>
                     {!shouldUseNarrowLayout && (
                         <Overlay
+                            disabled={!isOverlayDismissEnabled}
                             positionLeftValue={overlayPositionLeft}
                             onPress={handleOverlayPress}
                         />
@@ -466,9 +501,10 @@ function RightModalNavigator({navigation, route}: RightModalNavigatorProps) {
                     {/* The third and second overlays are displayed here to cover RHP screens wider than the currently focused screen. */}
                     {/* Clicking on these overlays redirects you to the RHP screen below them. */}
                     {/* The width of these overlays is equal to the width of the screen minus the width of the currently focused RHP screen (positionRightValue) */}
-                    {!shouldUseNarrowLayout && <SecondaryOverlay />}
+                    {!shouldUseNarrowLayout && <SecondaryOverlay disabled={!isOverlayDismissEnabled} />}
                     {!shouldUseNarrowLayout && shouldRenderTertiaryOverlay && (
                         <Overlay
+                            disabled={!isOverlayDismissEnabled}
                             progress={thirdOverlayProgress}
                             positionRightValue={Animated.add(sidePanelOffset.current, variables.sideBarWidth)}
                             onPress={Navigation.dismissToPreviousRHP}