fix: eliminate destination flash on native RHP swipe-dismiss

Author: JakubKorytko

src/SCREENS.ts

@@ -315,6 +315,8 @@ const SCREENS = {
         CHRONOS_SCHEDULE_OOO: 'Chronos_Schedule_OOO',
         AVATAR_CROP: 'AvatarCrop',
     },
+    // Neutral placeholder screen shown under the RHP while a destination is pre-mounted.
+    PRE_MOUNT_BUFFER: 'PreMountBuffer',
     REPORT_CARD_ACTIVATE: 'Report_Card_Activate_Root',
     SAML_SIGN_IN: 'SAMLSignIn',
     WORKSPACE_JOIN_USER: 'WorkspaceJoinUser',

src/libs/Navigation/AppNavigator/AuthScreens.tsx

@@ -84,6 +84,7 @@ const loadLogOutPreviousUserPage = () => require<ReactComponentModule>('../../..
 const loadConciergePage = () => require<ReactComponentModule>('../../../pages/ConciergePage').default;
 const loadTrackExpensePage = () => require<ReactComponentModule>('../../../pages/TrackExpensePage').default;
 const loadSubmitExpensePage = () => require<ReactComponentModule>('../../../pages/SubmitExpensePage').default;
+const loadPreMountBufferPage = () => require<ReactComponentModule>('../../../pages/PreMountBufferPage').default;
 const loadWorkspaceJoinUser = () => require<ReactComponentModule>('@pages/workspace/WorkspaceJoinUserPage').default;
 
 const loadSearchRouterPage = () => require<ReactComponentModule>('../../../components/Search/SearchRouter/SearchRouterPage').default;
@@ -227,6 +228,13 @@ function AuthScreens() {
                             options={defaultScreenOptions}
                             getComponent={loadSubmitExpensePage}
                         />
+                        {/* No linking path, not deep-linkable. animation: none - it's a fake screen,
+                            insert/remove must be instant, not slide. */}
+                        <RootStack.Screen
+                            name={SCREENS.PRE_MOUNT_BUFFER}
+                            options={{...defaultScreenOptions, animation: 'none'}}
+                            getComponent={loadPreMountBufferPage}
+                        />
                         <RootStack.Screen
                             name={SCREENS.REPORT_ATTACHMENTS}
                             options={attachmentModalScreenOptions}

src/libs/Navigation/AppNavigator/createRootStackNavigator/GetStateForActionHandlers.ts

@@ -14,6 +14,7 @@ import type {CommonActions, NavigationState, PartialState, RouterConfigOptions,
 import type {ParamListBase, Router} from '@react-navigation/routers';
 
 import {StackActions} from '@react-navigation/native';
+import {Platform} from 'react-native';
 
 import type {
     PushActionType,
@@ -458,7 +459,18 @@ function handleReplaceFullscreenUnderRHP(
         preInsertedOriginalTabRoute = existingTabState?.routes?.length
             ? existingTabRoute
             : ({...existingTabRoute, state: buildTabNavigatorNestedState({name: TAB_SCREENS[0]})} as StackNavigationState<ParamListBase>['routes'][number]);
-        const newRoutes = [...routesWithoutRHP.slice(0, tabNavIndex), updatedTabRoute, ...routesWithoutRHP.slice(tabNavIndex + 1), rhpRoute];
+        // Build Buffer into this same dispatch. A separate follow-up dispatch races the stale-state
+        // rehydration this action just computed and can freeze a pre-rehydration snapshot, so
+        // Buffer must land atomically.
+        const bufferRouteForTab =
+            Platform.OS !== 'web' ? ({name: SCREENS.PRE_MOUNT_BUFFER, key: `pre-mount-buffer-${rhpRoute.key}`} as StackNavigationState<ParamListBase>['routes'][number]) : undefined;
+        const newRoutes = [
+            ...routesWithoutRHP.slice(0, tabNavIndex),
+            updatedTabRoute,
+            ...routesWithoutRHP.slice(tabNavIndex + 1),
+            ...(bufferRouteForTab ? [bufferRouteForTab] : []),
+            rhpRoute,
+        ];
         return stackRouter.getRehydratedState({...state, routes: newRoutes, index: newRoutes.length - 1}, configOptions);
     }
 
@@ -485,10 +497,13 @@ function handleReplaceFullscreenUnderRHP(
     }
 
     const rehydratedStateAfterPush = stackRouter.getRehydratedState(stateAfterPush, configOptions);
+    // Build Buffer into this same dispatch (same reasoning as the tab branch above).
+    const bufferRouteForPush =
+        Platform.OS !== 'web' ? ({name: SCREENS.PRE_MOUNT_BUFFER, key: `pre-mount-buffer-${rhpRoute.key}`} as StackNavigationState<ParamListBase>['routes'][number]) : undefined;
     return {
         ...rehydratedStateAfterPush,
-        routes: [...rehydratedStateAfterPush.routes, rhpRoute],
-        index: rehydratedStateAfterPush.routes.length,
+        routes: [...rehydratedStateAfterPush.routes, ...(bufferRouteForPush ? [bufferRouteForPush] : []), rhpRoute],
+        index: rehydratedStateAfterPush.routes.length + (bufferRouteForPush ? 1 : 0),
     };
 }
 
@@ -561,7 +576,8 @@ function handleDismissModalAction(
         return null;
     }
 
-    return stackRouter.getStateForAction(state, newAction, configOptions);
+    const result = stackRouter.getStateForAction(state, newAction, configOptions);
+    return result;
 }
 
 /**

src/libs/Navigation/Navigation.ts

@@ -29,7 +29,7 @@ import {CommonActions, StackActions, TabActions} from '@react-navigation/native'
 import {Str} from 'expensify-common';
 // eslint-disable-next-line you-dont-need-lodash-underscore/omit
 import omit from 'lodash/omit';
-import {DeviceEventEmitter, Dimensions} from 'react-native';
+import {DeviceEventEmitter, Dimensions, Platform} from 'react-native';
 import Onyx from 'react-native-onyx';
 
 import type {LinkToOptions} from './helpers/linkTo/types';
@@ -1103,6 +1103,134 @@ function revealRouteBeforeDismissingModal(route: Route, options?: {afterTransiti
 let isFullscreenPreInsertedUnderRHP = false;
 let preInsertedFullscreenRouteName: string | undefined;
 
+// Keyed native-stack buffer transaction. Covers push-path (destination pushed as its own route)
+// and tab-switch (destination is the focused tab in TAB_NAVIGATOR) pre-inserts. When set, a
+// neutral SCREENS.PRE_MOUNT_BUFFER route sits directly under the RHP so a native swipe-dismiss
+// paints Buffer instead of the destination. Cleaned up by commitBufferReveal (confirm),
+// cancelBufferTransactionWhileRHPPresent (back out while RHP still open), or
+// handleRHPClosedForBuffer (RHP removed some other way, e.g. native swipe/predictive-back).
+//
+// Gated on the root 'state' event, not transitionEnd: transitionEnd(closing:true) never fires on
+// Android while animation is NONE (active for the whole pre-insert window), for any dismiss path.
+// 'state' fires reliably on both platforms regardless. It used to leak a destination frame on
+// iOS, but that was a race, not a timing problem: removePreInsertedFullscreenIfNeeded's
+// already-dismissed branch ran a separate, rAF-deferred tab restore that could land after an
+// early buffer-strip. Fixed by making that branch back off when a buffer transaction is live (see
+// removePreInsertedFullscreenIfNeeded), so handleRHPClosedForBuffer's single atomic reset is the
+// only thing that runs.
+let bufferTransaction: {rhpRouteKey: string; bufferRouteKey: string; mode: 'push' | 'tab'; destinationRouteKey?: string} | undefined;
+let bufferStateListenerUnsubscribe: (() => void) | undefined;
+
+function clearBufferStateListener() {
+    bufferStateListenerUnsubscribe?.();
+    bufferStateListenerUnsubscribe = undefined;
+}
+
+function handleRHPClosedForBuffer() {
+    if (!bufferTransaction) {
+        return;
+    }
+    const {rhpRouteKey, bufferRouteKey, mode, destinationRouteKey} = bufferTransaction;
+    const rootState = navigationRef.getRootState();
+    if (!rootState) {
+        return;
+    }
+    const stillHasRHP = rootState.routes.some((r) => r.key === rhpRouteKey);
+    if (stillHasRHP) {
+        return;
+    }
+
+    // RHP is gone but our transaction wasn't cleared by commit/cancel - something else removed it
+    // (native swipe, external dismissal). End state must be the origin, same as a normal cancel.
+    bufferTransaction = undefined;
+    clearBufferStateListener();
+    isFullscreenPreInsertedUnderRHP = false;
+    preInsertedFullscreenRouteName = undefined;
+
+    if (mode === 'tab') {
+        const originalTabRoute = getPreInsertedOriginalTabRoute();
+        clearPreInsertedOriginalTabRoute();
+        const tabNavIndex = rootState.routes.findLastIndex((r) => r.name === NAVIGATORS.TAB_NAVIGATOR);
+        if (!originalTabRoute || tabNavIndex < 0) {
+            const fallbackRoutes = rootState.routes.filter((r) => r.key !== bufferRouteKey);
+            navigationRef.current?.dispatch(CommonActions.reset({...rootState, routes: fallbackRoutes, index: fallbackRoutes.length - 1}));
+            return;
+        }
+        const newRoutes = rootState.routes
+            .filter((r) => r.key !== bufferRouteKey)
+            .map((r, i, arr) => (i === arr.findLastIndex((rr) => rr.name === NAVIGATORS.TAB_NAVIGATOR) ? originalTabRoute : r));
+        navigationRef.current?.dispatch(CommonActions.reset({...rootState, routes: newRoutes, index: newRoutes.length - 1}));
+        return;
+    }
+
+    // Push mode: strip both the speculative destination and Buffer atomically.
+    const newRoutes = rootState.routes.filter((r) => r.key !== bufferRouteKey && r.key !== destinationRouteKey);
+    navigationRef.current?.dispatch(
+        CommonActions.reset({
+            ...rootState,
+            routes: newRoutes,
+            index: newRoutes.length - 1,
+        }),
+    );
+}
+
+/**
+ * Buffer is built directly into REPLACE_FULLSCREEN_UNDER_RHP's own dispatch
+ * (GetStateForActionHandlers.ts), not a separate follow-up dispatch - a second dispatch was
+ * racing the stale-state rehydration that action performs and could freeze a pre-rehydration
+ * snapshot (tab index computed correctly, then clobbered back to the wrong value by the second
+ * reset). This function only reads the already-landed state to
+ * capture the transaction; it never dispatches.
+ */
+function captureBufferTransaction(stateAfter: ReturnType<typeof navigationRef.getRootState>, wasTabSwitched: boolean) {
+    if (Platform.OS === 'web' || !stateAfter) {
+        return;
+    }
+    const rhpRoute = stateAfter.routes.at(-1);
+    const bufferRoute = stateAfter.routes.at(-2);
+    if (rhpRoute?.name !== NAVIGATORS.RIGHT_MODAL_NAVIGATOR || bufferRoute?.name !== SCREENS.PRE_MOUNT_BUFFER) {
+        return;
+    }
+
+    if (wasTabSwitched) {
+        bufferTransaction = {rhpRouteKey: rhpRoute.key, bufferRouteKey: bufferRoute.key, mode: 'tab'};
+    } else {
+        const destinationRoute = stateAfter.routes.at(-3);
+        if (!destinationRoute) {
+            return;
+        }
+        bufferTransaction = {rhpRouteKey: rhpRoute.key, bufferRouteKey: bufferRoute.key, mode: 'push', destinationRouteKey: destinationRoute.key};
+    }
+
+    clearBufferStateListener();
+    bufferStateListenerUnsubscribe = navigationRef.current?.addListener('state', handleRHPClosedForBuffer);
+}
+
+function removeBufferRouteOnly() {
+    if (!bufferTransaction) {
+        return;
+    }
+    const {bufferRouteKey} = bufferTransaction;
+    bufferTransaction = undefined;
+    clearBufferStateListener();
+
+    const rootState = navigationRef.getRootState();
+    if (!rootState) {
+        return;
+    }
+    const newRoutes = rootState.routes.filter((r) => r.key !== bufferRouteKey);
+    if (newRoutes.length === rootState.routes.length) {
+        return;
+    }
+    navigationRef.current?.dispatch(
+        CommonActions.reset({
+            ...rootState,
+            routes: newRoutes,
+            index: newRoutes.length - 1,
+        }),
+    );
+}
+
 /**
  * Pre-inserts a fullscreen route (e.g. Search) underneath the currently open RHP on narrow layout.
  * The route renders behind the fullscreen RHP so that when the user later submits,
@@ -1155,6 +1283,8 @@ function preInsertFullscreenUnderRHP(route: Route) {
     preInsertedFullscreenRouteName = targetRouteName;
 
     DeviceEventEmitter.emit(CONST.MODAL_EVENTS.DISABLE_RHP_ANIMATION);
+
+    captureBufferTransaction(stateAfter, wasTabSwitched);
 }
 
 function getIsFullscreenPreInsertedUnderRHP() {
@@ -1166,6 +1296,8 @@ function getPreInsertedFullscreenRouteName() {
 }
 
 function clearFullscreenPreInsertedFlag() {
+    // Confirm path: keep the destination, only remove Buffer.
+    removeBufferRouteOnly();
     isFullscreenPreInsertedUnderRHP = false;
     preInsertedFullscreenRouteName = undefined;
     clearPreInsertedOriginalTabRoute();
@@ -1198,13 +1330,25 @@ function removePreInsertedFullscreenIfNeeded() {
     const isRHPStillOnTop = topRoute?.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR;
 
     if (isRHPStillOnTop && routeNameToRemove) {
+        // Cancel-before-dismissal: strip Buffer first so the destination is directly under RHP again,
+        // matching what REMOVE_FULLSCREEN_UNDER_RHP expects.
+        removeBufferRouteOnly();
         navigationRef.current?.dispatch({
             type: CONST.NAVIGATION.ACTION_TYPE.REMOVE_FULLSCREEN_UNDER_RHP,
             payload: {expectedRouteName: routeNameToRemove},
         });
         return;
     }
 
+    // RHP already dismissed elsewhere (native gesture, hardware back, predictive-back). If a buffer
+    // transaction is live, hand off entirely to handleRHPClosedForBuffer's atomic reset (restores
+    // the tab + strips Buffer in ONE dispatch) instead of doing the separate, rAF-deferred restore
+    // below - two independent dispatches here raced each other and leaked a destination frame
+    // (confirmed via manual testing), the same shape as the earlier tab-index-clobbering bug.
+    if (bufferTransaction) {
+        return;
+    }
+
     // RHP already dismissed. For the tab-switch path, jump back to the original tab.
     // For the push path, pop the pre-inserted route directly.
     const originalTabRoute = getPreInsertedOriginalTabRoute();

src/libs/Navigation/types.ts

@@ -3283,6 +3283,7 @@ type AuthScreensParamList = SharedScreensParamList &
         [NAVIGATORS.SHARE_MODAL_NAVIGATOR]: NavigatorScreenParams<ShareNavigatorParamList>;
         [SCREENS.BANK_CONNECTION_COMPLETE]: undefined;
         [NAVIGATORS.TEST_TOOLS_MODAL_NAVIGATOR]: NavigatorScreenParams<TestToolsModalModalNavigatorParamList>;
+        [SCREENS.PRE_MOUNT_BUFFER]: undefined;
     };
 
 type SearchReportActionsParamList = {

src/pages/PreMountBufferPage.tsx

@@ -0,0 +1,24 @@
+import ActivityIndicator from '@components/ActivityIndicator';
+
+import useThemeStyles from '@hooks/useThemeStyles';
+
+import React from 'react';
+import {View} from 'react-native';
+
+// Neutral placeholder shown under the RHP while a destination is pre-mounted. A native
+// swipe-dismiss reveals this instead of the pre-inserted destination. Never linked/deep-linkable.
+function PreMountBufferPage() {
+    const styles = useThemeStyles();
+    return (
+        <View style={[styles.flex1, styles.appBG, styles.alignItemsCenter, styles.justifyContentCenter]}>
+            <ActivityIndicator
+                size="large"
+                reasonAttributes={{context: 'PreMountBufferPage'}}
+            />
+        </View>
+    );
+}
+
+PreMountBufferPage.displayName = 'PreMountBufferPage';
+
+export default PreMountBufferPage;