From 866d0b6814113c47f4993e3de2dc413ff7fe43ee Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Tue, 19 May 2026 15:18:28 +0700
Subject: [PATCH 01/23] Navigate to clicked expense in multi-expense report
 preview and always show grey View button

---
 .../ReportPreviewActionButton.tsx             |  31 +++--
 .../MoneyRequestReportPreview/index.tsx       | 112 ++++++++++++++----
 2 files changed, 111 insertions(+), 32 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/ReportPreviewActionButton.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/ReportPreviewActionButton.tsx
index d95b5b8a7269..8c911925f899 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/ReportPreviewActionButton.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/ReportPreviewActionButton.tsx
@@ -141,7 +141,15 @@ function ReportPreviewActionButton({
         reportMetadata: iouReportMetadata,
     });
 
-    const renderButton = () => {
+    const viewButton = (
+        <Button
+            text={translate('common.view')}
+            onPress={openReportFromPreview}
+            sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.VIEW_BUTTON}
+        />
+    );
+
+    const renderPrimaryButton = () => {
         if (reportPreviewAction === CONST.REPORT.REPORT_PREVIEW_ACTIONS.SUBMIT) {
             return (
                 <SubmitActionButton
@@ -228,16 +236,21 @@ function ReportPreviewActionButton({
             );
         }
 
-        return (
-            <Button
-                text={translate('common.view')}
-                onPress={openReportFromPreview}
-                sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.VIEW_BUTTON}
-            />
-        );
+        return null;
     };
 
-    return <View style={[buttonMaxWidth, styles.flex1, {height: variables.h40}]}>{renderButton()}</View>;
+    const primaryButton = renderPrimaryButton();
+
+    if (!primaryButton) {
+        return <View style={[buttonMaxWidth, styles.flex1, {height: variables.h40}]}>{viewButton}</View>;
+    }
+
+    return (
+        <View style={[buttonMaxWidth, styles.flex1, styles.flexRow, styles.gap2, {height: variables.h40}]}>
+            <View style={[styles.flex1]}>{viewButton}</View>
+            <View style={[styles.flex1]}>{primaryButton}</View>
+        </View>
+    );
 }
 
 export default ReportPreviewActionButton;
diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
index a65e40fbac85..cb734bec0a25 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
@@ -3,6 +3,7 @@ import React, {useCallback, useMemo, useRef, useState} from 'react';
 import type {LayoutChangeEvent} from 'react-native';
 import {usePersonalDetails} from '@components/OnyxListItemProvider';
 import TransactionPreview from '@components/ReportActionItem/TransactionPreview';
+import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useNewTransactions from '@hooks/useNewTransactions';
 import useOnyx from '@hooks/useOnyx';
 import usePolicy from '@hooks/usePolicy';
@@ -11,8 +12,15 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useTransactionViolations from '@hooks/useTransactionViolations';
+import {createTransactionThreadReport} from '@libs/actions/Report';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
-import {getIOUActionForReportID, isSplitBillAction as isSplitBillActionReportActionsUtils, isTrackExpenseAction as isTrackExpenseActionReportActionsUtils} from '@libs/ReportActionsUtils';
+import {
+    getIOUActionForReportID,
+    getOriginalMessage,
+    isMoneyRequestAction,
+    isSplitBillAction as isSplitBillActionReportActionsUtils,
+    isTrackExpenseAction as isTrackExpenseActionReportActionsUtils,
+} from '@libs/ReportActionsUtils';
 import {isIOUReport} from '@libs/ReportUtils';
 import {startSpan} from '@libs/telemetry/activeSpans';
 import Navigation from '@navigation/Navigation';
@@ -45,6 +53,9 @@ function MoneyRequestReportPreview({
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout();
     const personalDetailsList = usePersonalDetails();
+    const {email: currentUserEmail, accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
+    const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
+    const [betas] = useOnyx(ONYXKEYS.BETAS);
     const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`);
     const invoiceReceiverPolicyID = chatReport?.invoiceReceiver && 'policyID' in chatReport.invoiceReceiver ? chatReport.invoiceReceiver.policyID : undefined;
     const [invoiceReceiverPolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${getNonEmptyStringOnyxID(invoiceReceiverPolicyID)}`);
@@ -125,30 +136,85 @@ function MoneyRequestReportPreview({
 
     const transactionPreviewContainerStyles = [styles.h100, reportPreviewStyles.transactionPreviewCarouselStyle];
 
-    const renderItem: ListRenderItem<Transaction> = ({item}) => (
-        <TransactionPreview
-            chatReportID={chatReportID}
-            action={getIOUActionForReportID(item.reportID, item.transactionID)}
-            contextAction={action}
-            reportID={item.reportID}
-            isBillSplit={isSplitBillAction}
-            isTrackExpense={isTrackExpenseAction}
-            contextMenuAnchor={contextMenuAnchor}
-            isWhisper={isWhisper}
-            isHovered={isHovered}
-            iouReportID={iouReportID}
-            containerStyles={transactionPreviewContainerStyles}
-            shouldDisplayContextMenu={shouldDisplayContextMenu}
-            transactionPreviewWidth={reportPreviewStyles.transactionPreviewCarouselStyle.width}
-            transactionID={item.transactionID}
-            reportPreviewAction={action}
-            onPreviewPressed={openReportFromPreview}
-            shouldShowPayerAndReceiver={shouldShowPayerAndReceiver}
-            shouldHighlight={!!newTransactionIDs?.has(item.transactionID)}
-            originalReportID={originalReportID}
-        />
+    const openTransactionFromPreview = useCallback(
+        (transactionIOUAction: ReturnType<typeof getIOUActionForReportID>) => {
+            if (contextMenuRef.current?.isContextMenuOpening) {
+                return;
+            }
+
+            // Resolve the target transaction thread report. If the thread has not been materialized yet,
+            // create it inline so the click never lands on a dead route.
+            let childReportID = transactionIOUAction?.childReportID;
+            if (!childReportID && transactionIOUAction?.reportActionID) {
+                const transactionID = isMoneyRequestAction(transactionIOUAction) ? getOriginalMessage(transactionIOUAction)?.IOUTransactionID : undefined;
+                if (transactionID) {
+                    const transactionThreadReport = createTransactionThreadReport({
+                        introSelected,
+                        currentUserLogin: currentUserEmail ?? '',
+                        currentUserAccountID,
+                        betas,
+                        iouReport,
+                        iouReportAction: transactionIOUAction,
+                    });
+                    childReportID = transactionThreadReport?.reportID;
+                }
+            }
+
+            if (!childReportID) {
+                // Fall back to opening the parent report rather than swallowing the click.
+                openReportFromPreview();
+                return;
+            }
+
+            startSpan(`${CONST.TELEMETRY.SPAN_OPEN_REPORT}_${childReportID}`, {
+                name: 'MoneyRequestReportPreview.Transaction',
+                op: CONST.TELEMETRY.SPAN_OPEN_REPORT,
+            });
+
+            // On narrow layouts (mobile), push the report on top of the chat first and then the
+            // transaction thread on top of the report, so the back button returns the user to the report.
+            // On wide layouts the transaction thread opens in the RHP next to the report, so a single
+            // navigation is enough.
+            if (isSmallScreenWidth) {
+                if (iouReportID) {
+                    Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(iouReportID, undefined, undefined, Navigation.getActiveRoute()));
+                }
+                Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(childReportID, undefined, undefined, Navigation.getActiveRoute()));
+                return;
+            }
+
+            Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: childReportID, backTo: Navigation.getActiveRoute()}));
+        },
+        [betas, currentUserAccountID, currentUserEmail, introSelected, iouReport, iouReportID, isSmallScreenWidth, openReportFromPreview],
     );
 
+    const renderItem: ListRenderItem<Transaction> = ({item}) => {
+        const transactionIOUAction = getIOUActionForReportID(item.reportID, item.transactionID);
+        return (
+            <TransactionPreview
+                chatReportID={chatReportID}
+                action={transactionIOUAction}
+                contextAction={action}
+                reportID={item.reportID}
+                isBillSplit={isSplitBillAction}
+                isTrackExpense={isTrackExpenseAction}
+                contextMenuAnchor={contextMenuAnchor}
+                isWhisper={isWhisper}
+                isHovered={isHovered}
+                iouReportID={iouReportID}
+                containerStyles={transactionPreviewContainerStyles}
+                shouldDisplayContextMenu={shouldDisplayContextMenu}
+                transactionPreviewWidth={reportPreviewStyles.transactionPreviewCarouselStyle.width}
+                transactionID={item.transactionID}
+                reportPreviewAction={action}
+                onPreviewPressed={() => openTransactionFromPreview(transactionIOUAction)}
+                shouldShowPayerAndReceiver={shouldShowPayerAndReceiver}
+                shouldHighlight={!!newTransactionIDs?.has(item.transactionID)}
+                originalReportID={originalReportID}
+            />
+        );
+    };
+
     return (
         <MoneyRequestReportPreviewContent
             newTransactionIDs={newTransactionIDs}

From d3d086e9e5208ec2389f097570061ab9129362f5 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Wed, 3 Jun 2026 22:25:03 +0700
Subject: [PATCH 02/23] Add unit tests for multi-expense preview transaction
 navigation

---
 tests/ui/MoneyRequestReportPreview.test.tsx | 121 ++++++++++++++++++++
 1 file changed, 121 insertions(+)

diff --git a/tests/ui/MoneyRequestReportPreview.test.tsx b/tests/ui/MoneyRequestReportPreview.test.tsx
index bca0917f62e9..e2ff437298b1 100644
--- a/tests/ui/MoneyRequestReportPreview.test.tsx
+++ b/tests/ui/MoneyRequestReportPreview.test.tsx
@@ -13,14 +13,18 @@ import MoneyRequestReportPreview from '@components/ReportActionItem/MoneyRequest
 import type {MoneyRequestReportPreviewProps} from '@components/ReportActionItem/MoneyRequestReportPreview/types';
 import ScreenWrapper from '@components/ScreenWrapper';
 import {ShowContextMenuActionsContext, ShowContextMenuStateContext} from '@components/ShowContextMenuContext';
+import type ResponsiveLayoutResult from '@hooks/useResponsiveLayout/types';
+import * as ReportActions from '@libs/actions/Report';
 import {convertToDisplayString} from '@libs/CurrencyUtils';
 import DateUtils from '@libs/DateUtils';
+import Navigation from '@libs/Navigation/Navigation';
 import {getFormattedCreated, isManagedCardTransaction} from '@libs/TransactionUtils';
 import CONST from '@src/CONST';
 import * as ReportActionUtils from '@src/libs/ReportActionsUtils';
 import {getReportName} from '@src/libs/ReportNameUtils';
 import * as ReportUtils from '@src/libs/ReportUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
 import type {Report, Transaction, TransactionViolation, TransactionViolations} from '@src/types/onyx';
 import {actionR14932 as mockAction} from '../../__mocks__/reportData/actions';
 import {chatReportR14932 as mockChatReport, iouReportR14932 as mockIOUReport} from '../../__mocks__/reportData/reports';
@@ -66,6 +70,45 @@ jest.mock('@src/hooks/useReportWithTransactionsAndViolations', () => ({
     default: (...args: Parameters<typeof mockUseReportWithTransactionsAndViolations>) => mockUseReportWithTransactionsAndViolations(...args),
 }));
 
+// Lets a single test force the narrow (mobile) layout. When left undefined every other test
+// runs the real hook unchanged, so the existing wide-layout tests keep their behavior.
+let mockResponsiveLayoutOverride: ResponsiveLayoutResult | undefined;
+jest.mock('@hooks/useResponsiveLayout', () => {
+    const actual = jest.requireActual<{default: () => ResponsiveLayoutResult}>('@hooks/useResponsiveLayout');
+    return {
+        __esModule: true,
+        default: () => mockResponsiveLayoutOverride ?? actual.default(),
+    };
+});
+
+const narrowResponsiveLayout: ResponsiveLayoutResult = {
+    shouldUseNarrowLayout: true,
+    isSmallScreenWidth: true,
+    isInNarrowPaneModal: false,
+    isExtraSmallScreenHeight: false,
+    isMediumScreenWidth: false,
+    isLargeScreenWidth: false,
+    isExtraLargeScreenWidth: false,
+    isExtraSmallScreenWidth: false,
+    isSmallScreen: true,
+    onboardingIsMediumOrLargerScreenWidth: false,
+    isInLandscapeMode: false,
+};
+
+const wideResponsiveLayout: ResponsiveLayoutResult = {
+    shouldUseNarrowLayout: false,
+    isSmallScreenWidth: false,
+    isInNarrowPaneModal: false,
+    isExtraSmallScreenHeight: false,
+    isMediumScreenWidth: false,
+    isLargeScreenWidth: true,
+    isExtraLargeScreenWidth: false,
+    isExtraSmallScreenWidth: false,
+    isSmallScreen: false,
+    onboardingIsMediumOrLargerScreenWidth: true,
+    isInLandscapeMode: false,
+};
+
 const getIOUActionForReportID = (reportID: string | undefined, transactionID: string | undefined) => {
     if (!reportID || !transactionID) {
         return undefined;
@@ -290,4 +333,82 @@ describe('MoneyRequestReportPreview', () => {
 
         expect(screen.queryByText(TestHelper.translateLocal('search.moneyRequestReport.emptyStateTitle'))).not.toBeOnTheScreen();
     });
+
+    describe('pressing a transaction in the carousel', () => {
+        const navigateSpy = jest.spyOn(Navigation, 'navigate');
+
+        // Give every transaction its own thread report so the assertion proves the *pressed* card
+        // drives navigation, instead of every card sharing one parent-report handler.
+        const buildActionWithThread = (reportID: string | undefined, transactionID: string | undefined) => {
+            if (!reportID || !transactionID) {
+                return undefined;
+            }
+            return {...mockAction, childReportID: `thread_${transactionID}`, originalMessage: {...mockAction, IOUTransactionID: transactionID}};
+        };
+
+        const renderAndPopulateCarousel = async () => {
+            renderPage({});
+            await waitForBatchedUpdatesWithAct();
+            setCurrentWidth();
+            await act(async () => {
+                await Onyx.mergeCollection(ONYXKEYS.COLLECTION.TRANSACTION, mockOnyxTransactions);
+                await waitForBatchedUpdatesWithAct();
+            });
+            await waitForBatchedUpdatesWithAct();
+        };
+
+        const pressSecondTransaction = async () => {
+            const {transactionDisplayAmount} = getTransactionDisplayAmountAndHeaderText(mockSecondTransaction);
+            fireEvent.press(screen.getByText(transactionDisplayAmount));
+            await waitForBatchedUpdatesWithAct();
+        };
+
+        beforeEach(() => {
+            navigateSpy.mockImplementation(() => {});
+            jest.spyOn(Navigation, 'getActiveRoute').mockReturnValue('');
+        });
+
+        afterEach(() => {
+            mockResponsiveLayoutOverride = undefined;
+        });
+
+        it('opens the pressed expense in the RHP on wide layouts', async () => {
+            mockResponsiveLayoutOverride = wideResponsiveLayout;
+            jest.spyOn(ReportActionUtils, 'getIOUActionForReportID').mockImplementation(buildActionWithThread);
+
+            await renderAndPopulateCarousel();
+            await pressSecondTransaction();
+
+            expect(navigateSpy).toHaveBeenCalledTimes(1);
+            expect(navigateSpy).toHaveBeenCalledWith(ROUTES.SEARCH_REPORT.getRoute({reportID: `thread_${mockSecondTransactionID}`, backTo: ''}));
+        });
+
+        it('pushes the report then the expense on narrow layouts so back returns to the report', async () => {
+            mockResponsiveLayoutOverride = narrowResponsiveLayout;
+            jest.spyOn(ReportActionUtils, 'getIOUActionForReportID').mockImplementation(buildActionWithThread);
+
+            await renderAndPopulateCarousel();
+            await pressSecondTransaction();
+
+            expect(navigateSpy).toHaveBeenCalledTimes(2);
+            expect(navigateSpy).toHaveBeenNthCalledWith(1, ROUTES.REPORT_WITH_ID.getRoute(mockIOUReport.reportID, undefined, undefined, ''));
+            expect(navigateSpy).toHaveBeenNthCalledWith(2, ROUTES.REPORT_WITH_ID.getRoute(`thread_${mockSecondTransactionID}`, undefined, undefined, ''));
+        });
+
+        it('falls back to opening the parent report when the pressed expense has no thread', async () => {
+            mockResponsiveLayoutOverride = wideResponsiveLayout;
+            jest.spyOn(ReportActions, 'createTransactionThreadReport').mockReturnValue(undefined);
+            jest.spyOn(ReportActionUtils, 'getIOUActionForReportID').mockImplementation((reportID, transactionID) => {
+                if (!reportID || !transactionID) {
+                    return undefined;
+                }
+                return {...mockAction, childReportID: undefined, originalMessage: {...mockAction, IOUTransactionID: transactionID}};
+            });
+
+            await renderAndPopulateCarousel();
+            await pressSecondTransaction();
+
+            expect(navigateSpy).toHaveBeenCalledWith(ROUTES.EXPENSE_REPORT_RHP.getRoute({reportID: mockIOUReport.reportID, backTo: ''}));
+        });
+    });
 });

From 5eaa24efddf16455745604df263e61abafd0c84f Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Sat, 6 Jun 2026 10:57:05 +0700
Subject: [PATCH 03/23] Show the primary action before the View button in the
 report preview

---
 .../MoneyRequestReportPreview/ReportPreviewActionButton.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/ReportPreviewActionButton.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/ReportPreviewActionButton.tsx
index 6b90b9665b3b..6b59c7d24c9b 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/ReportPreviewActionButton.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/ReportPreviewActionButton.tsx
@@ -248,8 +248,8 @@ function ReportPreviewActionButton({
 
     return (
         <View style={[buttonMaxWidth, styles.flex1, styles.flexRow, styles.gap2, {height: variables.h40}]}>
-            <View style={[styles.flex1]}>{viewButton}</View>
             <View style={[styles.flex1]}>{primaryButton}</View>
+            <View style={[styles.flex1]}>{viewButton}</View>
         </View>
     );
 }

From e46b7690a39cdc51ba3198c047aa17fc9d14b207 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Tue, 9 Jun 2026 09:11:07 +0700
Subject: [PATCH 04/23] Open the report below the pressed expense;
 single-expense reports open just the report

---
 .../MoneyRequestReportPreview/index.tsx       | 24 +++++++++++---
 tests/ui/MoneyRequestReportPreview.test.tsx   | 31 +++++++++++++++++--
 2 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
index 51b908ca13bd..8ad8e2d5049c 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
@@ -4,6 +4,7 @@ import React, {useCallback, useMemo, useRef, useState} from 'react';
 import type {LayoutChangeEvent} from 'react-native';
 import {usePersonalDetails} from '@components/OnyxListItemProvider';
 import TransactionPreview from '@components/ReportActionItem/TransactionPreview';
+import {useWideRHPActions} from '@components/WideRHPContextProvider';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useNewTransactions from '@hooks/useNewTransactions';
 import useOnyx from '@hooks/useOnyx';
@@ -14,6 +15,7 @@ import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useTransactionViolations from '@hooks/useTransactionViolations';
 import {createTransactionThreadReport} from '@libs/actions/Report';
+import {setActiveTransactionIDs} from '@libs/actions/TransactionThreadNavigation';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import {
     getIOUActionForReportID,
@@ -49,6 +51,7 @@ function MoneyRequestReportPreview({
     const StyleUtils = useStyleUtils();
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout();
+    const {markReportIDAsExpense} = useWideRHPActions();
     const personalDetailsList = usePersonalDetails();
     const {email: currentUserEmail, accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
     const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
@@ -143,6 +146,13 @@ function MoneyRequestReportPreview({
                 return;
             }
 
+            // A report with a single expense opens the report itself, not the lone expense — opening the
+            // expense directly would skip the report the user expects to land on.
+            if (transactions.length <= 1) {
+                openReportFromPreview();
+                return;
+            }
+
             // Resolve the target transaction thread report. If the thread has not been materialized yet,
             // create it inline so the click never lands on a dead route.
             let childReportID = transactionIOUAction?.childReportID;
@@ -172,10 +182,9 @@ function MoneyRequestReportPreview({
                 op: CONST.TELEMETRY.SPAN_OPEN_REPORT,
             });
 
-            // On narrow layouts (mobile), push the report on top of the chat first and then the
-            // transaction thread on top of the report, so the back button returns the user to the report.
-            // On wide layouts the transaction thread opens in the RHP next to the report, so a single
-            // navigation is enough.
+            // On narrow layouts push the report onto the stack first and then the expense on top, so the
+            // back button returns to the report. On wide layouts mark the expense report so it opens in the
+            // wide RHP with the report shown alongside it, matching how an expense opens from the report view.
             if (isSmallScreenWidth) {
                 if (iouReportID) {
                     Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(iouReportID, undefined, undefined, Navigation.getActiveRoute()));
@@ -184,9 +193,14 @@ function MoneyRequestReportPreview({
                 return;
             }
 
+            if (iouReportID) {
+                Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(iouReportID, undefined, undefined, Navigation.getActiveRoute()));
+            }
+            markReportIDAsExpense(childReportID);
+            setActiveTransactionIDs(transactions.map((transaction) => transaction.transactionID));
             Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: childReportID, backTo: Navigation.getActiveRoute()}));
         },
-        [betas, currentUserAccountID, currentUserEmail, introSelected, iouReport, iouReportID, isSmallScreenWidth, openReportFromPreview],
+        [betas, currentUserAccountID, currentUserEmail, introSelected, iouReport, iouReportID, isSmallScreenWidth, markReportIDAsExpense, openReportFromPreview, transactions],
     );
 
     const renderItem: ListRenderItem<Transaction> = ({item}) => {
diff --git a/tests/ui/MoneyRequestReportPreview.test.tsx b/tests/ui/MoneyRequestReportPreview.test.tsx
index e2ff437298b1..e228122f9d74 100644
--- a/tests/ui/MoneyRequestReportPreview.test.tsx
+++ b/tests/ui/MoneyRequestReportPreview.test.tsx
@@ -372,15 +372,17 @@ describe('MoneyRequestReportPreview', () => {
             mockResponsiveLayoutOverride = undefined;
         });
 
-        it('opens the pressed expense in the RHP on wide layouts', async () => {
+        it('opens the report and then the pressed expense on top on wide layouts', async () => {
             mockResponsiveLayoutOverride = wideResponsiveLayout;
             jest.spyOn(ReportActionUtils, 'getIOUActionForReportID').mockImplementation(buildActionWithThread);
 
             await renderAndPopulateCarousel();
             await pressSecondTransaction();
 
-            expect(navigateSpy).toHaveBeenCalledTimes(1);
-            expect(navigateSpy).toHaveBeenCalledWith(ROUTES.SEARCH_REPORT.getRoute({reportID: `thread_${mockSecondTransactionID}`, backTo: ''}));
+            // The report opens first so it sits below the expense, then the pressed expense opens on top.
+            expect(navigateSpy).toHaveBeenCalledTimes(2);
+            expect(navigateSpy).toHaveBeenNthCalledWith(1, ROUTES.REPORT_WITH_ID.getRoute(mockIOUReport.reportID, undefined, undefined, ''));
+            expect(navigateSpy).toHaveBeenNthCalledWith(2, ROUTES.SEARCH_REPORT.getRoute({reportID: `thread_${mockSecondTransactionID}`, backTo: ''}));
         });
 
         it('pushes the report then the expense on narrow layouts so back returns to the report', async () => {
@@ -410,5 +412,28 @@ describe('MoneyRequestReportPreview', () => {
 
             expect(navigateSpy).toHaveBeenCalledWith(ROUTES.EXPENSE_REPORT_RHP.getRoute({reportID: mockIOUReport.reportID, backTo: ''}));
         });
+
+        it('opens the report instead of the lone expense for a single-expense report', async () => {
+            mockResponsiveLayoutOverride = wideResponsiveLayout;
+            setReportPreviewData({transactions: [mockTransaction]});
+            jest.spyOn(ReportActionUtils, 'getIOUActionForReportID').mockImplementation(buildActionWithThread);
+
+            renderPage({});
+            await waitForBatchedUpdatesWithAct();
+            setCurrentWidth();
+            await act(async () => {
+                await Onyx.mergeCollection(ONYXKEYS.COLLECTION.TRANSACTION, mockOnyxTransactions);
+                await waitForBatchedUpdatesWithAct();
+            });
+            await waitForBatchedUpdatesWithAct();
+
+            const {transactionDisplayAmount} = getTransactionDisplayAmountAndHeaderText(mockTransaction);
+            fireEvent.press(screen.getByText(transactionDisplayAmount));
+            await waitForBatchedUpdatesWithAct();
+
+            // A single-expense report opens the report itself, never the lone expense thread.
+            expect(navigateSpy).toHaveBeenCalledWith(ROUTES.EXPENSE_REPORT_RHP.getRoute({reportID: mockIOUReport.reportID, backTo: ''}));
+            expect(navigateSpy).not.toHaveBeenCalledWith(ROUTES.SEARCH_REPORT.getRoute({reportID: `thread_${mockTransaction.transactionID}`, backTo: ''}));
+        });
     });
 });

From f04f96aa043bcb06579e114a89b1f348bee490fb Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Wed, 10 Jun 2026 04:54:29 +0700
Subject: [PATCH 05/23] Open the pressed expense over the report in the wide
 RHP, not via the Inbox

Per design feedback: clicking an expense in a multi-expense report preview now
opens the expense report itself in the wide RHP (super wide) with the pressed
expense shown on top of it, instead of navigating to the report in the Inbox and
then opening the expense. Back returns to the report, then to the chat.
---
 .../MoneyRequestReportPreview/index.tsx       | 41 +++++++++++++++----
 tests/ui/MoneyRequestReportPreview.test.tsx   | 10 +++--
 2 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
index 8ad8e2d5049c..5f8b7fd77366 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
@@ -51,7 +51,7 @@ function MoneyRequestReportPreview({
     const StyleUtils = useStyleUtils();
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout();
-    const {markReportIDAsExpense} = useWideRHPActions();
+    const {markReportIDAsExpense, markReportIDAsMultiTransactionExpense} = useWideRHPActions();
     const personalDetailsList = usePersonalDetails();
     const {email: currentUserEmail, accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
     const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
@@ -183,8 +183,7 @@ function MoneyRequestReportPreview({
             });
 
             // On narrow layouts push the report onto the stack first and then the expense on top, so the
-            // back button returns to the report. On wide layouts mark the expense report so it opens in the
-            // wide RHP with the report shown alongside it, matching how an expense opens from the report view.
+            // back button returns to the report (the wide RHP is not available on narrow layouts).
             if (isSmallScreenWidth) {
                 if (iouReportID) {
                     Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(iouReportID, undefined, undefined, Navigation.getActiveRoute()));
@@ -193,14 +192,40 @@ function MoneyRequestReportPreview({
                 return;
             }
 
+            // On wide layouts open the expense report itself in the wide RHP (super wide for multi-expense
+            // reports) and show the pressed expense on top of it — mirroring how an expense opens from the
+            // report view — rather than navigating to the report in the Inbox. Back returns to the report,
+            // and back again to the chat.
             if (iouReportID) {
-                Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(iouReportID, undefined, undefined, Navigation.getActiveRoute()));
+                const reportRoute = ROUTES.EXPENSE_REPORT_RHP.getRoute({reportID: iouReportID, backTo: Navigation.getActiveRoute()});
+                markReportIDAsMultiTransactionExpense(iouReportID);
+                Navigation.navigate(reportRoute);
+                setActiveTransactionIDs(transactions.map((transaction) => transaction.transactionID)).then(() => {
+                    markReportIDAsExpense(childReportID);
+                    Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: childReportID, backTo: reportRoute}));
+                });
+                return;
             }
-            markReportIDAsExpense(childReportID);
-            setActiveTransactionIDs(transactions.map((transaction) => transaction.transactionID));
-            Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: childReportID, backTo: Navigation.getActiveRoute()}));
+
+            // Fallback when the parent report is unknown: open the pressed expense alone in the wide RHP.
+            setActiveTransactionIDs(transactions.map((transaction) => transaction.transactionID)).then(() => {
+                markReportIDAsExpense(childReportID);
+                Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: childReportID, backTo: Navigation.getActiveRoute()}));
+            });
         },
-        [betas, currentUserAccountID, currentUserEmail, introSelected, iouReport, iouReportID, isSmallScreenWidth, markReportIDAsExpense, openReportFromPreview, transactions],
+        [
+            betas,
+            currentUserAccountID,
+            currentUserEmail,
+            introSelected,
+            iouReport,
+            iouReportID,
+            isSmallScreenWidth,
+            markReportIDAsExpense,
+            markReportIDAsMultiTransactionExpense,
+            openReportFromPreview,
+            transactions,
+        ],
     );
 
     const renderItem: ListRenderItem<Transaction> = ({item}) => {
diff --git a/tests/ui/MoneyRequestReportPreview.test.tsx b/tests/ui/MoneyRequestReportPreview.test.tsx
index e228122f9d74..73fa90bf6fcc 100644
--- a/tests/ui/MoneyRequestReportPreview.test.tsx
+++ b/tests/ui/MoneyRequestReportPreview.test.tsx
@@ -372,17 +372,19 @@ describe('MoneyRequestReportPreview', () => {
             mockResponsiveLayoutOverride = undefined;
         });
 
-        it('opens the report and then the pressed expense on top on wide layouts', async () => {
+        it('opens the report in the wide RHP and then the pressed expense on top on wide layouts', async () => {
             mockResponsiveLayoutOverride = wideResponsiveLayout;
             jest.spyOn(ReportActionUtils, 'getIOUActionForReportID').mockImplementation(buildActionWithThread);
 
             await renderAndPopulateCarousel();
             await pressSecondTransaction();
 
-            // The report opens first so it sits below the expense, then the pressed expense opens on top.
+            // The report opens in the wide RHP first so it sits below, then the pressed expense opens on top
+            // of it (back returns to the report, not the Inbox).
+            const reportRoute = ROUTES.EXPENSE_REPORT_RHP.getRoute({reportID: mockIOUReport.reportID, backTo: ''});
             expect(navigateSpy).toHaveBeenCalledTimes(2);
-            expect(navigateSpy).toHaveBeenNthCalledWith(1, ROUTES.REPORT_WITH_ID.getRoute(mockIOUReport.reportID, undefined, undefined, ''));
-            expect(navigateSpy).toHaveBeenNthCalledWith(2, ROUTES.SEARCH_REPORT.getRoute({reportID: `thread_${mockSecondTransactionID}`, backTo: ''}));
+            expect(navigateSpy).toHaveBeenNthCalledWith(1, reportRoute);
+            expect(navigateSpy).toHaveBeenNthCalledWith(2, ROUTES.SEARCH_REPORT.getRoute({reportID: `thread_${mockSecondTransactionID}`, backTo: reportRoute}));
         });
 
         it('pushes the report then the expense on narrow layouts so back returns to the report', async () => {

From cfff64bb2c5741944ab6141581f78ef222c64576 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Tue, 16 Jun 2026 04:39:45 +0700
Subject: [PATCH 06/23] Open the pressed expense over the report's wide RHP
 after a short delay

Per design feedback (180ms approved), the pressed expense now opens on a brief
delay so the report's wide RHP settles first and the two panels open as a cascade
rather than appearing at once.
---
 .../MoneyRequestReportPreview/index.tsx              | 10 +++++++++-
 tests/ui/MoneyRequestReportPreview.test.tsx          | 12 +++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
index 5f8b7fd77366..03580615b175 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
@@ -36,6 +36,10 @@ import type {Transaction} from '@src/types/onyx';
 import MoneyRequestReportPreviewContent from './MoneyRequestReportPreviewContent';
 import type {MoneyRequestReportPreviewProps} from './types';
 
+// Delay (ms) before the pressed expense opens on top of the report's wide RHP. Letting the report settle
+// into the wide RHP first makes the two panels open as a cascade rather than appearing at once.
+const PRESSED_EXPENSE_CASCADE_DELAY = 180;
+
 function MoneyRequestReportPreview({
     iouReportID,
     policyID,
@@ -202,7 +206,11 @@ function MoneyRequestReportPreview({
                 Navigation.navigate(reportRoute);
                 setActiveTransactionIDs(transactions.map((transaction) => transaction.transactionID)).then(() => {
                     markReportIDAsExpense(childReportID);
-                    Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: childReportID, backTo: reportRoute}));
+                    // Let the report's wide RHP settle before opening the pressed expense on top, so the two
+                    // panels open as a cascade rather than at once.
+                    setTimeout(() => {
+                        Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: childReportID, backTo: reportRoute}));
+                    }, PRESSED_EXPENSE_CASCADE_DELAY);
                 });
                 return;
             }
diff --git a/tests/ui/MoneyRequestReportPreview.test.tsx b/tests/ui/MoneyRequestReportPreview.test.tsx
index 73fa90bf6fcc..d6f12c813f90 100644
--- a/tests/ui/MoneyRequestReportPreview.test.tsx
+++ b/tests/ui/MoneyRequestReportPreview.test.tsx
@@ -370,14 +370,24 @@ describe('MoneyRequestReportPreview', () => {
 
         afterEach(() => {
             mockResponsiveLayoutOverride = undefined;
+            // Restore the globally-enabled fake timers in case a test opted into real timers.
+            jest.useFakeTimers();
         });
 
-        it('opens the report in the wide RHP and then the pressed expense on top on wide layouts', async () => {
+        it('opens the report in the wide RHP and then the pressed expense on top (after a short delay) on wide layouts', async () => {
+            // The pressed expense opens on a short setTimeout so the report's wide RHP settles first. Use real
+            // timers so that delayed navigation actually fires (afterEach restores the global fake timers).
+            jest.useRealTimers();
             mockResponsiveLayoutOverride = wideResponsiveLayout;
             jest.spyOn(ReportActionUtils, 'getIOUActionForReportID').mockImplementation(buildActionWithThread);
 
             await renderAndPopulateCarousel();
             await pressSecondTransaction();
+            await act(async () => {
+                await new Promise((resolve) => {
+                    setTimeout(resolve, 350);
+                });
+            });
 
             // The report opens in the wide RHP first so it sits below, then the pressed expense opens on top
             // of it (back returns to the report, not the Inbox).

From e383b44ce9c70f742a91dcf66bf8a6bcaaee1d7f Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Tue, 23 Jun 2026 14:47:07 +0700
Subject: [PATCH 07/23] Open the pressed expense with a single forward push on
 narrow layouts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On narrow/native the carousel card press pushed the report and then the expense
as two navigations (both with backTo=chat), which collapsed the report out of the
stack and produced a backward animation on iOS. Navigate once to the expense with
the report chained via backTo instead — a forward push, with back still returning
to the report and then the chat.
---
 .../MoneyRequestReportPreview/index.tsx             | 13 +++++++------
 tests/ui/MoneyRequestReportPreview.test.tsx         | 11 +++++++----
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
index 03580615b175..b72cbf5f421c 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
@@ -186,13 +186,14 @@ function MoneyRequestReportPreview({
                 op: CONST.TELEMETRY.SPAN_OPEN_REPORT,
             });
 
-            // On narrow layouts push the report onto the stack first and then the expense on top, so the
-            // back button returns to the report (the wide RHP is not available on narrow layouts).
+            // On narrow layouts the wide RHP is unavailable, so navigate straight to the pressed expense with the
+            // report chained underneath it via backTo. Using a single navigation (rather than pushing the report
+            // and then the expense) keeps the transition a forward push and avoids the backward animation seen on
+            // iOS, while back still returns to the report and then the chat.
             if (isSmallScreenWidth) {
-                if (iouReportID) {
-                    Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(iouReportID, undefined, undefined, Navigation.getActiveRoute()));
-                }
-                Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(childReportID, undefined, undefined, Navigation.getActiveRoute()));
+                const backTo = Navigation.getActiveRoute();
+                const reportRoute = iouReportID ? ROUTES.REPORT_WITH_ID.getRoute(iouReportID, undefined, undefined, backTo) : backTo;
+                Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(childReportID, undefined, undefined, reportRoute));
                 return;
             }
 
diff --git a/tests/ui/MoneyRequestReportPreview.test.tsx b/tests/ui/MoneyRequestReportPreview.test.tsx
index d6f12c813f90..d0bef5caf11f 100644
--- a/tests/ui/MoneyRequestReportPreview.test.tsx
+++ b/tests/ui/MoneyRequestReportPreview.test.tsx
@@ -397,16 +397,19 @@ describe('MoneyRequestReportPreview', () => {
             expect(navigateSpy).toHaveBeenNthCalledWith(2, ROUTES.SEARCH_REPORT.getRoute({reportID: `thread_${mockSecondTransactionID}`, backTo: reportRoute}));
         });
 
-        it('pushes the report then the expense on narrow layouts so back returns to the report', async () => {
+        it('navigates to the pressed expense with the report chained underneath on narrow layouts', async () => {
             mockResponsiveLayoutOverride = narrowResponsiveLayout;
             jest.spyOn(ReportActionUtils, 'getIOUActionForReportID').mockImplementation(buildActionWithThread);
 
             await renderAndPopulateCarousel();
             await pressSecondTransaction();
 
-            expect(navigateSpy).toHaveBeenCalledTimes(2);
-            expect(navigateSpy).toHaveBeenNthCalledWith(1, ROUTES.REPORT_WITH_ID.getRoute(mockIOUReport.reportID, undefined, undefined, ''));
-            expect(navigateSpy).toHaveBeenNthCalledWith(2, ROUTES.REPORT_WITH_ID.getRoute(`thread_${mockSecondTransactionID}`, undefined, undefined, ''));
+            // A single forward navigation to the expense, with the report chained via backTo so back returns to the
+            // report and then the chat. A single push (rather than report-then-expense) avoids the backward
+            // animation that the double push caused on iOS.
+            const reportRoute = ROUTES.REPORT_WITH_ID.getRoute(mockIOUReport.reportID, undefined, undefined, '');
+            expect(navigateSpy).toHaveBeenCalledTimes(1);
+            expect(navigateSpy).toHaveBeenCalledWith(ROUTES.REPORT_WITH_ID.getRoute(`thread_${mockSecondTransactionID}`, undefined, undefined, reportRoute));
         });
 
         it('falls back to opening the parent report when the pressed expense has no thread', async () => {

From 30f3b95d6094a818dafeada5fca7fb8ccca35dad Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Tue, 23 Jun 2026 14:47:08 +0700
Subject: [PATCH 08/23] Let the View button hug its content so a long primary
 label is not truncated

Render the View button at its content width and let the primary (green) button
fill the remaining space, instead of a 50/50 split that truncated long primary
labels like "Mark as paid".
---
 .../MoneyRequestReportPreview/ReportPreviewActionButton.tsx   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/ReportPreviewActionButton.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/ReportPreviewActionButton.tsx
index 6b59c7d24c9b..0b79f5189ab2 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/ReportPreviewActionButton.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/ReportPreviewActionButton.tsx
@@ -247,9 +247,11 @@ function ReportPreviewActionButton({
     }
 
     return (
+        // The primary (green) button fills the available space while the View button hugs its content, so a long
+        // primary label (e.g. "Mark as paid") isn't truncated by a 50/50 split.
         <View style={[buttonMaxWidth, styles.flex1, styles.flexRow, styles.gap2, {height: variables.h40}]}>
             <View style={[styles.flex1]}>{primaryButton}</View>
-            <View style={[styles.flex1]}>{viewButton}</View>
+            {viewButton}
         </View>
     );
 }

From fd46c139d1b9831b98bbe19b5deabb031dae80bd Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Tue, 23 Jun 2026 15:25:27 +0700
Subject: [PATCH 09/23] Re-trigger CI (flaky TrackExpenseTest from main merge,
 unrelated to this PR)


From de1019351b86ee8efb9925dd7130707951caff75 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Fri, 26 Jun 2026 07:50:29 +0700
Subject: [PATCH 10/23] Keep the report in the stack on narrow and open the
 pressed expense after a cache clear
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Narrow layouts: push the report onto the stack and then the pressed expense on top, with the
expense's backTo pointing at the report (not the chat). This keeps the report as a real stack
entry so the OS/hardware back and the iOS swipe-back return to the report — matching the header
back button — while chaining the expense's backTo to the report keeps the transition a forward
push and avoids the backward iOS animation the previous single push caused.

Cache clear: when the IOU report's action for the pressed expense is not loaded yet, fetch the
report's actions and open the expense once they arrive instead of falling back to the parent
report. The thread id is also resolved at press time and falls back to the transaction's own
transactionThreadReportID.
---
 .../MoneyRequestReportPreview/index.tsx       | 138 ++++++++++++------
 tests/ui/MoneyRequestReportPreview.test.tsx   |  37 ++++-
 2 files changed, 123 insertions(+), 52 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
index 0cdd5ddb275d..6ef6eb37c90f 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
@@ -1,6 +1,6 @@
 import {useIsFocused} from '@react-navigation/core';
 import type {ListRenderItem} from '@shopify/flash-list';
-import React, {useCallback, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import type {LayoutChangeEvent} from 'react-native';
 import {usePersonalDetails} from '@components/OnyxListItemProvider';
 import TransactionPreview from '@components/ReportActionItem/TransactionPreview';
@@ -14,7 +14,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useTransactionViolations from '@hooks/useTransactionViolations';
-import {createTransactionThreadReport} from '@libs/actions/Report';
+import {createTransactionThreadReport, openReport} from '@libs/actions/Report';
 import {setActiveTransactionIDs} from '@libs/actions/TransactionThreadNavigation';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import {
@@ -65,6 +65,14 @@ function MoneyRequestReportPreview({
     const [invoiceReceiverPolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${getNonEmptyStringOnyxID(invoiceReceiverPolicyID)}`);
     const invoiceReceiverPersonalDetail = chatReport?.invoiceReceiver && 'accountID' in chatReport.invoiceReceiver ? personalDetailsList?.[chatReport.invoiceReceiver.accountID] : null;
     const [iouReport, transactions] = useReportWithTransactionsAndViolations(iouReportID);
+    // Tracks how many actions the IOU report has loaded so a deferred expense press can be retried once
+    // the actions arrive (they may be missing right after a cache clear).
+    const [iouReportActionCount] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getNonEmptyStringOnyxID(iouReportID)}`, {
+        selector: (reportActions) => Object.keys(reportActions ?? {}).length,
+    });
+    // Holds a pressed transaction whose thread report could not be resolved yet, so the expense can be
+    // opened once the IOU report's actions have loaded instead of falling back to the parent report.
+    const pendingExpenseTransactionRef = useRef<Transaction | null>(null);
     const policy = usePolicy(policyID);
     const lastTransaction = transactions?.at(0);
     const lastTransactionViolations = useTransactionViolations(lastTransaction?.transactionID);
@@ -144,56 +152,51 @@ function MoneyRequestReportPreview({
 
     const transactionPreviewContainerStyles = [styles.h100, reportPreviewStyles.transactionPreviewCarouselStyle];
 
-    const openTransactionFromPreview = useCallback(
-        (transactionIOUAction: ReturnType<typeof getIOUActionForReportID>) => {
-            if (contextMenuRef.current?.isContextMenuOpening) {
-                return;
-            }
-
-            // A report with a single expense opens the report itself, not the lone expense — opening the
-            // expense directly would skip the report the user expects to land on.
-            if (transactions.length <= 1) {
-                openReportFromPreview();
-                return;
-            }
-
-            // Resolve the target transaction thread report. If the thread has not been materialized yet,
-            // create it inline so the click never lands on a dead route.
-            let childReportID = transactionIOUAction?.childReportID;
+    // Resolve the target transaction thread report. Prefer the IOU action's childReportID, then the
+    // transaction's own thread id, and finally create the thread inline so the press never lands on a dead route.
+    const resolveChildReportID = useCallback(
+        (transaction: Transaction) => {
+            const transactionIOUAction = getIOUActionForReportID(transaction.reportID, transaction.transactionID);
+            let childReportID = transactionIOUAction?.childReportID ?? transaction.transactionThreadReportID;
             if (!childReportID && transactionIOUAction?.reportActionID) {
                 const transactionID = isMoneyRequestAction(transactionIOUAction) ? getOriginalMessage(transactionIOUAction)?.IOUTransactionID : undefined;
                 if (transactionID) {
-                    const transactionThreadReport = createTransactionThreadReport({
+                    childReportID = createTransactionThreadReport({
                         introSelected,
                         currentUserLogin: currentUserEmail ?? '',
                         currentUserAccountID,
                         betas,
                         iouReport,
                         iouReportAction: transactionIOUAction,
-                    });
-                    childReportID = transactionThreadReport?.reportID;
+                    })?.reportID;
                 }
             }
+            return childReportID;
+        },
+        [betas, currentUserAccountID, currentUserEmail, introSelected, iouReport],
+    );
 
-            if (!childReportID) {
-                // Fall back to opening the parent report rather than swallowing the click.
-                openReportFromPreview();
-                return;
-            }
-
+    const navigateToExpense = useCallback(
+        (childReportID: string) => {
             startSpan(`${CONST.TELEMETRY.SPAN_OPEN_REPORT}_${childReportID}`, {
                 name: 'MoneyRequestReportPreview.Transaction',
                 op: CONST.TELEMETRY.SPAN_OPEN_REPORT,
             });
 
-            // On narrow layouts the wide RHP is unavailable, so navigate straight to the pressed expense with the
-            // report chained underneath it via backTo. Using a single navigation (rather than pushing the report
-            // and then the expense) keeps the transition a forward push and avoids the backward animation seen on
-            // iOS, while back still returns to the report and then the chat.
+            // On narrow layouts the wide RHP is unavailable. Push the report onto the stack first and then the
+            // expense on top of it, pointing the expense's backTo at the report (not the chat). Keeping the report
+            // as a real stack entry makes the OS/hardware back and the iOS swipe-back return to the report — matching
+            // the header back button — while chaining the expense's backTo to the report (instead of the chat) keeps
+            // it a forward push and avoids the backward animation seen previously on iOS.
             if (isSmallScreenWidth) {
                 const backTo = Navigation.getActiveRoute();
-                const reportRoute = iouReportID ? ROUTES.REPORT_WITH_ID.getRoute(iouReportID, undefined, undefined, backTo) : backTo;
-                Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(childReportID, undefined, undefined, reportRoute));
+                if (iouReportID) {
+                    const reportRoute = ROUTES.REPORT_WITH_ID.getRoute(iouReportID, undefined, undefined, backTo);
+                    Navigation.navigate(reportRoute);
+                    Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(childReportID, undefined, undefined, reportRoute));
+                } else {
+                    Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(childReportID, undefined, undefined, backTo));
+                }
                 return;
             }
 
@@ -222,21 +225,62 @@ function MoneyRequestReportPreview({
                 Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: childReportID, backTo: Navigation.getActiveRoute()}));
             });
         },
-        [
-            betas,
-            currentUserAccountID,
-            currentUserEmail,
-            introSelected,
-            iouReport,
-            iouReportID,
-            isSmallScreenWidth,
-            markReportIDAsExpense,
-            markReportIDAsMultiTransactionExpense,
-            openReportFromPreview,
-            transactions,
-        ],
+        [isSmallScreenWidth, iouReportID, markReportIDAsExpense, markReportIDAsMultiTransactionExpense, transactions],
     );
 
+    const openTransactionFromPreview = useCallback(
+        (transaction: Transaction) => {
+            if (contextMenuRef.current?.isContextMenuOpening) {
+                return;
+            }
+
+            // A report with a single expense opens the report itself, not the lone expense — opening the
+            // expense directly would skip the report the user expects to land on.
+            if (transactions.length <= 1) {
+                openReportFromPreview();
+                return;
+            }
+
+            const childReportID = resolveChildReportID(transaction);
+            if (childReportID) {
+                navigateToExpense(childReportID);
+                return;
+            }
+
+            // The thread could not be resolved. If the IOU report's action for this expense isn't loaded yet
+            // (e.g. right after a cache clear), fetch the report's actions and open the expense once they arrive
+            // (see the effect below) instead of falling back to the parent report and losing the pressed expense.
+            const isIOUActionLoaded = !!getIOUActionForReportID(transaction.reportID, transaction.transactionID);
+            if (!isIOUActionLoaded && iouReportID) {
+                pendingExpenseTransactionRef.current = transaction;
+                openReport({reportID: iouReportID, introSelected, betas});
+                return;
+            }
+
+            openReportFromPreview();
+        },
+        [betas, introSelected, iouReportID, navigateToExpense, openReportFromPreview, resolveChildReportID, transactions.length],
+    );
+
+    // Completes a deferred expense press once the IOU report's actions have loaded.
+    useEffect(() => {
+        const pendingTransaction = pendingExpenseTransactionRef.current;
+        if (!pendingTransaction) {
+            return;
+        }
+        const childReportID = resolveChildReportID(pendingTransaction);
+        if (childReportID) {
+            pendingExpenseTransactionRef.current = null;
+            navigateToExpense(childReportID);
+            return;
+        }
+        // The actions finished loading but the expense still has no resolvable thread — open the parent report.
+        if (iouReportActionCount) {
+            pendingExpenseTransactionRef.current = null;
+            openReportFromPreview();
+        }
+    }, [iouReportActionCount, navigateToExpense, openReportFromPreview, resolveChildReportID]);
+
     const renderItem: ListRenderItem<Transaction> = ({item}) => {
         const transactionIOUAction = getIOUActionForReportID(item.reportID, item.transactionID);
         return (
@@ -254,7 +298,7 @@ function MoneyRequestReportPreview({
                 transactionPreviewWidth={reportPreviewStyles.transactionPreviewCarouselStyle.width}
                 transactionID={item.transactionID}
                 reportPreviewAction={action}
-                onPreviewPressed={() => openTransactionFromPreview(transactionIOUAction)}
+                onPreviewPressed={() => openTransactionFromPreview(item)}
                 shouldShowPayerAndReceiver={shouldShowPayerAndReceiver}
                 shouldHighlight={!!newTransactionIDs?.has(item.transactionID)}
             />
diff --git a/tests/ui/MoneyRequestReportPreview.test.tsx b/tests/ui/MoneyRequestReportPreview.test.tsx
index 859795cadd05..2905f5398326 100644
--- a/tests/ui/MoneyRequestReportPreview.test.tsx
+++ b/tests/ui/MoneyRequestReportPreview.test.tsx
@@ -454,18 +454,45 @@ describe('MoneyRequestReportPreview', () => {
             expect(navigateSpy).toHaveBeenNthCalledWith(2, ROUTES.SEARCH_REPORT.getRoute({reportID: `thread_${mockSecondTransactionID}`, backTo: reportRoute}));
         });
 
-        it('navigates to the pressed expense with the report chained underneath on narrow layouts', async () => {
+        it('pushes the report then the pressed expense so OS/swipe back returns to the report on narrow layouts', async () => {
             mockResponsiveLayoutOverride = narrowResponsiveLayout;
             jest.spyOn(ReportActionUtils, 'getIOUActionForReportID').mockImplementation(buildActionWithThread);
 
             await renderAndPopulateCarousel();
             await pressSecondTransaction();
 
-            // A single forward navigation to the expense, with the report chained via backTo so back returns to the
-            // report and then the chat. A single push (rather than report-then-expense) avoids the backward
-            // animation that the double push caused on iOS.
+            // Push the report onto the stack first, then the expense on top with its backTo pointing at the report.
+            // Keeping the report as a real stack entry makes the OS/hardware back and the iOS swipe-back return to
+            // the report (matching the header back button); chaining the expense's backTo to the report (not the
+            // chat) keeps it a forward push and avoids the backward iOS animation the previous single push caused.
+            const reportRoute = ROUTES.REPORT_WITH_ID.getRoute(mockIOUReport.reportID, undefined, undefined, '');
+            expect(navigateSpy).toHaveBeenCalledTimes(2);
+            expect(navigateSpy).toHaveBeenNthCalledWith(1, reportRoute);
+            expect(navigateSpy).toHaveBeenNthCalledWith(2, ROUTES.REPORT_WITH_ID.getRoute(`thread_${mockSecondTransactionID}`, undefined, undefined, reportRoute));
+        });
+
+        it('fetches the report actions and opens the pressed expense once they load, instead of the parent report, after a cache clear', async () => {
+            mockResponsiveLayoutOverride = narrowResponsiveLayout;
+            const openReportSpy = jest.spyOn(ReportActions, 'openReport').mockImplementation(() => {});
+            // Simulate a cache clear: the IOU report's actions are not loaded yet, so the pressed expense's
+            // thread cannot be resolved at press time.
+            const getIOUActionSpy = jest.spyOn(ReportActionUtils, 'getIOUActionForReportID').mockReturnValue(undefined);
+
+            await renderAndPopulateCarousel();
+            await pressSecondTransaction();
+
+            // The press fetches the IOU report's actions and waits, rather than falling back to the parent report.
+            expect(openReportSpy).toHaveBeenCalledWith(expect.objectContaining({reportID: mockIOUReport.reportID}));
+            expect(navigateSpy).not.toHaveBeenCalled();
+
+            // Once the actions arrive the thread resolves and the pressed expense opens (report pushed underneath).
+            getIOUActionSpy.mockImplementation(buildActionWithThread);
+            await act(async () => {
+                await Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${mockIOUReport.reportID}`, {[`${mockAction.reportActionID}_loaded`]: mockAction});
+                await waitForBatchedUpdatesWithAct();
+            });
+
             const reportRoute = ROUTES.REPORT_WITH_ID.getRoute(mockIOUReport.reportID, undefined, undefined, '');
-            expect(navigateSpy).toHaveBeenCalledTimes(1);
             expect(navigateSpy).toHaveBeenCalledWith(ROUTES.REPORT_WITH_ID.getRoute(`thread_${mockSecondTransactionID}`, undefined, undefined, reportRoute));
         });
 

From 670a3fe5bb6020a97c858fa2c286dc47e3baabfb Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Fri, 3 Jul 2026 20:44:30 +0700
Subject: [PATCH 11/23] Fix iOS backward animation, offline dead tap, and blank
 uncached expense
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- iOS backward animation: on narrow layouts the report and expense pushes fired
  synchronously, racing the shared Report navigator state so iOS animated the diff as a
  backward pop. Defer the expense push to a microtask (like the wide path already
  cascades) so it composes as a forward push; OS/swipe back still returns to the report.
- Offline dead tap: when the thread could not be resolved we deferred via openReport,
  which no-ops offline, leaving the tap dead. Skip the fetch/defer while offline and open
  the cached parent report instead, matching the View button.
- Blank uncached expense: seed the optimistic transaction thread via
  setOptimisticTransactionThread before navigating to an existing childReportID, so an
  uncached thread (offline / after a cache clear) renders the expense instead of a blank
  screen — matching the canonical transaction-thread openers.
---
 .../MoneyRequestReportPreview/index.tsx       | 32 +++++++++-----
 tests/ui/MoneyRequestReportPreview.test.tsx   | 44 +++++++++++++++++--
 2 files changed, 61 insertions(+), 15 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
index f3b22cf37733..5111ac5dab6d 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
@@ -13,7 +13,7 @@ import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useTransactionViolations from '@hooks/useTransactionViolations';
 
-import {createTransactionThreadReport, openReport} from '@libs/actions/Report';
+import {createTransactionThreadReport, openReport, setOptimisticTransactionThread} from '@libs/actions/Report';
 import {setActiveTransactionIDs} from '@libs/actions/TransactionThreadNavigation';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import {
@@ -177,7 +177,12 @@ function MoneyRequestReportPreview({
         (transaction: Transaction) => {
             const transactionIOUAction = getIOUActionForReportID(transaction.reportID, transaction.transactionID);
             let childReportID = transactionIOUAction?.childReportID ?? transaction.transactionThreadReportID;
-            if (!childReportID && transactionIOUAction?.reportActionID) {
+            if (childReportID) {
+                // The thread already exists, but it may not be cached (offline, or after a cache clear). Seed its
+                // optimistic report shell + parent linkage so navigating to it renders the expense instead of a
+                // blank/not-found screen — the same thing the canonical transaction-thread openers do.
+                setOptimisticTransactionThread(childReportID, iouReport?.reportID ?? transaction.reportID, transactionIOUAction?.reportActionID, iouReport?.policyID ?? policyID);
+            } else if (transactionIOUAction?.reportActionID) {
                 const transactionID = isMoneyRequestAction(transactionIOUAction) ? getOriginalMessage(transactionIOUAction)?.IOUTransactionID : undefined;
                 if (transactionID) {
                     childReportID = createTransactionThreadReport({
@@ -192,7 +197,7 @@ function MoneyRequestReportPreview({
             }
             return childReportID;
         },
-        [betas, currentUserAccountID, currentUserEmail, introSelected, iouReport],
+        [betas, currentUserAccountID, currentUserEmail, introSelected, iouReport, policyID],
     );
 
     const navigateToExpense = useCallback(
@@ -202,17 +207,20 @@ function MoneyRequestReportPreview({
                 op: CONST.TELEMETRY.SPAN_OPEN_REPORT,
             });
 
-            // On narrow layouts the wide RHP is unavailable. Push the report onto the stack first and then the
-            // expense on top of it, pointing the expense's backTo at the report (not the chat). Keeping the report
-            // as a real stack entry makes the OS/hardware back and the iOS swipe-back return to the report — matching
-            // the header back button — while chaining the expense's backTo to the report (instead of the chat) keeps
-            // it a forward push and avoids the backward animation seen previously on iOS.
+            // On narrow layouts the wide RHP is unavailable, so push the report onto the stack first and then the
+            // expense on top of it. Keeping the report as a real stack entry makes the OS/hardware back and the
+            // iOS swipe-back return to the report — matching the header back button.
             if (isSmallScreenWidth) {
                 const backTo = Navigation.getActiveRoute();
                 if (iouReportID) {
                     const reportRoute = ROUTES.REPORT_WITH_ID.getRoute(iouReportID, undefined, undefined, backTo);
                     Navigation.navigate(reportRoute);
-                    Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(childReportID, undefined, undefined, reportRoute));
+                    // Defer the expense push to the next microtask so the report push commits first. Firing both
+                    // navigations synchronously races the shared Report navigator state, which iOS animates as a
+                    // backward pop; sequencing them keeps it a forward push (the wide path cascades the same way).
+                    Navigation.setNavigationActionToMicrotaskQueue(() => {
+                        Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(childReportID, undefined, undefined, reportRoute));
+                    });
                 } else {
                     Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(childReportID, undefined, undefined, backTo));
                 }
@@ -269,8 +277,10 @@ function MoneyRequestReportPreview({
             // The thread could not be resolved. If the IOU report's action for this expense isn't loaded yet
             // (e.g. right after a cache clear), fetch the report's actions and open the expense once they arrive
             // (see the effect below) instead of falling back to the parent report and losing the pressed expense.
+            // Skip this while offline: openReport can't fetch, so the deferred press would never fire (dead tap) —
+            // fall through to opening the cached parent report instead, matching the "View" button.
             const isIOUActionLoaded = !!getIOUActionForReportID(transaction.reportID, transaction.transactionID);
-            if (!isIOUActionLoaded && iouReportID) {
+            if (!isIOUActionLoaded && iouReportID && !isOffline) {
                 pendingExpenseTransactionRef.current = transaction;
                 openReport({reportID: iouReportID, introSelected, betas});
                 return;
@@ -278,7 +288,7 @@ function MoneyRequestReportPreview({
 
             openReportFromPreview();
         },
-        [betas, introSelected, iouReportID, navigateToExpense, openReportFromPreview, resolveChildReportID, transactions.length],
+        [betas, introSelected, iouReportID, isOffline, navigateToExpense, openReportFromPreview, resolveChildReportID, transactions.length],
     );
 
     // Completes a deferred expense press once the IOU report's actions have loaded.
diff --git a/tests/ui/MoneyRequestReportPreview.test.tsx b/tests/ui/MoneyRequestReportPreview.test.tsx
index b10e5f82556a..df83908ddd84 100644
--- a/tests/ui/MoneyRequestReportPreview.test.tsx
+++ b/tests/ui/MoneyRequestReportPreview.test.tsx
@@ -10,6 +10,7 @@ import type {MoneyRequestReportPreviewProps} from '@components/ReportActionItem/
 import ScreenWrapper from '@components/ScreenWrapper';
 import {ShowContextMenuActionsContext, ShowContextMenuStateContext} from '@components/ShowContextMenuContext';
 
+import useNetwork from '@hooks/useNetwork';
 import type ResponsiveLayoutResult from '@hooks/useResponsiveLayout/types';
 
 import * as ReportActions from '@libs/actions/Report';
@@ -64,6 +65,9 @@ jest.mock('react', () => {
 
 jest.mock('@react-navigation/native');
 
+jest.mock('@hooks/useNetwork');
+const mockUseNetwork = jest.mocked(useNetwork);
+
 jest.mock('@rnmapbox/maps', () => {
     return {
         default: jest.fn(),
@@ -291,6 +295,7 @@ describe('MoneyRequestReportPreview', () => {
 
     beforeEach(() => {
         jest.clearAllMocks();
+        mockUseNetwork.mockReturnValue({isOffline: false});
         mockDeferredValueOverride = undefined;
         mockOnHoldMenuOpenHolder.current = undefined;
         mockHoldMenuPropsHolder.current = undefined;
@@ -438,6 +443,9 @@ describe('MoneyRequestReportPreview', () => {
         beforeEach(() => {
             navigateSpy.mockImplementation(() => {});
             jest.spyOn(Navigation, 'getActiveRoute').mockReturnValue('');
+            // The narrow path defers the expense push to a microtask (to avoid the iOS backward animation); run it
+            // synchronously here so the sequence of navigate calls can be asserted deterministically.
+            jest.spyOn(Navigation, 'setNavigationActionToMicrotaskQueue').mockImplementation((callback) => callback());
         });
 
         afterEach(() => {
@@ -476,16 +484,44 @@ describe('MoneyRequestReportPreview', () => {
             await renderAndPopulateCarousel();
             await pressSecondTransaction();
 
-            // Push the report onto the stack first, then the expense on top with its backTo pointing at the report.
-            // Keeping the report as a real stack entry makes the OS/hardware back and the iOS swipe-back return to
-            // the report (matching the header back button); chaining the expense's backTo to the report (not the
-            // chat) keeps it a forward push and avoids the backward iOS animation the previous single push caused.
+            // Push the report onto the stack first, then the expense on top (the second push is deferred to a
+            // microtask so it composes as a forward push instead of the backward iOS animation the synchronous
+            // double-push produced). Keeping the report as a real stack entry makes the OS/hardware back and the
+            // iOS swipe-back return to the report, matching the header back button.
             const reportRoute = ROUTES.REPORT_WITH_ID.getRoute(mockIOUReport.reportID, undefined, undefined, '');
             expect(navigateSpy).toHaveBeenCalledTimes(2);
             expect(navigateSpy).toHaveBeenNthCalledWith(1, reportRoute);
             expect(navigateSpy).toHaveBeenNthCalledWith(2, ROUTES.REPORT_WITH_ID.getRoute(`thread_${mockSecondTransactionID}`, undefined, undefined, reportRoute));
         });
 
+        it('seeds the optimistic transaction thread before opening an existing (possibly uncached) expense', async () => {
+            mockResponsiveLayoutOverride = wideResponsiveLayout;
+            const seedSpy = jest.spyOn(ReportActions, 'setOptimisticTransactionThread').mockImplementation(() => {});
+            jest.spyOn(ReportActionUtils, 'getIOUActionForReportID').mockImplementation(buildActionWithThread);
+
+            await renderAndPopulateCarousel();
+            await pressSecondTransaction();
+
+            // The thread already exists but may not be cached (offline / after a cache clear), so its optimistic
+            // report shell is seeded before navigating — otherwise the tap can land on a blank expense.
+            expect(seedSpy).toHaveBeenCalledWith(`thread_${mockSecondTransactionID}`, mockIOUReport.reportID, expect.anything(), expect.anything());
+        });
+
+        it('opens the parent report (like View) instead of a dead tap when offline and the thread is unresolved', async () => {
+            mockResponsiveLayoutOverride = wideResponsiveLayout;
+            mockUseNetwork.mockReturnValue({isOffline: true});
+            const openReportSpy = jest.spyOn(ReportActions, 'openReport').mockImplementation(() => {});
+            // Offline, and the IOU action isn't loaded, so the thread can't be resolved at press time.
+            jest.spyOn(ReportActionUtils, 'getIOUActionForReportID').mockReturnValue(undefined);
+
+            await renderAndPopulateCarousel();
+            await pressSecondTransaction();
+
+            // openReport can't fetch offline, so rather than leaving the tap dead we open the cached parent report.
+            expect(openReportSpy).not.toHaveBeenCalled();
+            expect(navigateSpy).toHaveBeenCalledWith(ROUTES.EXPENSE_REPORT_RHP.getRoute({reportID: mockIOUReport.reportID, backTo: ''}));
+        });
+
         it('fetches the report actions and opens the pressed expense once they load, instead of the parent report, after a cache clear', async () => {
             mockResponsiveLayoutOverride = narrowResponsiveLayout;
             const openReportSpy = jest.spyOn(ReportActions, 'openReport').mockImplementation(() => {});

From 84dfff2e743d20d2155aea8f73651e5e4ded0c29 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Sat, 4 Jul 2026 21:25:26 +0700
Subject: [PATCH 12/23] Open narrow expense as a single forward slide with the
 parent report underneath
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The reports split navigator only renders its last two routes, so committing the report
and the expense in one dispatch shifts that window by two and react-native-screens
animates it as a backward pop; sequencing the two navigations avoids the pop but shows a
visible double slide. openExpenseOverParentReport pushes the expense first (a normal
forward push, with the chat as the anchor) and then, on the next frame, splices the parent
report directly beneath the expense with a targeted reset. The expense keeps its key and
stays the native top, so the report is inserted with no animation — a single forward slide
— while OS/hardware back and the iOS swipe-back still pop expense -> report -> chat.
Verified on native iOS.
---
 .../MoneyRequestReportPreview/index.tsx       | 15 ++-----
 src/libs/Navigation/Navigation.ts             | 44 +++++++++++++++++++
 tests/ui/MoneyRequestReportPreview.test.tsx   | 27 +++++-------
 3 files changed, 60 insertions(+), 26 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
index 5111ac5dab6d..a5ae8171f975 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
@@ -207,20 +207,13 @@ function MoneyRequestReportPreview({
                 op: CONST.TELEMETRY.SPAN_OPEN_REPORT,
             });
 
-            // On narrow layouts the wide RHP is unavailable, so push the report onto the stack first and then the
-            // expense on top of it. Keeping the report as a real stack entry makes the OS/hardware back and the
-            // iOS swipe-back return to the report — matching the header back button.
+            // On narrow layouts the wide RHP is unavailable. Open the expense with the parent report as a real
+            // stack entry underneath (so OS/hardware back and the iOS swipe-back return to the report, matching the
+            // header back button) as a single forward slide — see openExpenseOverParentReport for the mechanics.
             if (isSmallScreenWidth) {
                 const backTo = Navigation.getActiveRoute();
                 if (iouReportID) {
-                    const reportRoute = ROUTES.REPORT_WITH_ID.getRoute(iouReportID, undefined, undefined, backTo);
-                    Navigation.navigate(reportRoute);
-                    // Defer the expense push to the next microtask so the report push commits first. Firing both
-                    // navigations synchronously races the shared Report navigator state, which iOS animates as a
-                    // backward pop; sequencing them keeps it a forward push (the wide path cascades the same way).
-                    Navigation.setNavigationActionToMicrotaskQueue(() => {
-                        Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(childReportID, undefined, undefined, reportRoute));
-                    });
+                    Navigation.openExpenseOverParentReport(iouReportID, childReportID, backTo);
                 } else {
                     Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(childReportID, undefined, undefined, backTo));
                 }
diff --git a/src/libs/Navigation/Navigation.ts b/src/libs/Navigation/Navigation.ts
index fb85d84cfb63..5fc4410abc8a 100644
--- a/src/libs/Navigation/Navigation.ts
+++ b/src/libs/Navigation/Navigation.ts
@@ -1222,11 +1222,55 @@ function getTopmostSearchReportID(state = navigationRef.getRootState()): string
     return params?.reportID;
 }
 
+/**
+ * Native narrow-layout: open an expense (its transaction thread) with the parent report as a REAL stack
+ * entry underneath, shown as a single forward slide.
+ *
+ * The ReportsSplitNavigator only renders its last two routes, so committing the report and the expense
+ * together shifts that window by two — react-native-screens finds no shared anchor and animates a backward
+ * pop. Instead this pushes the expense first (a normal forward push, with the chat staying in the window as
+ * the anchor), then on the next frame splices the parent report directly BENEATH the expense with a targeted
+ * reset. The expense keeps its key and stays the native top, so the report is inserted with no animation and
+ * the user sees only the single expense slide. Back pops expense -> report -> chat because the state really
+ * is [..., chat, report, expense].
+ */
+function openExpenseOverParentReport(parentReportID: string, childReportID: string, backTo: string) {
+    const reportRoute = ROUTES.REPORT_WITH_ID.getRoute(parentReportID, undefined, undefined, backTo);
+    navigate(ROUTES.REPORT_WITH_ID.getRoute(childReportID, undefined, undefined, reportRoute));
+
+    setNavigationActionToMicrotaskQueue(() => {
+        const rootState = navigationRef.getRootState();
+        const tabNavigator = rootState?.routes.findLast((route) => route.name === NAVIGATORS.TAB_NAVIGATOR);
+        const reportsSplitNavigator = tabNavigator?.state?.routes.findLast((route) => route.name === NAVIGATORS.REPORTS_SPLIT_NAVIGATOR);
+        const splitState = reportsSplitNavigator?.state;
+        const topRoute = splitState?.routes.at(-1);
+        if (!splitState?.key || !topRoute) {
+            return;
+        }
+        const topParams = topRoute.params;
+        const topReportID = topRoute.name === SCREENS.REPORT && !!topParams && 'reportID' in topParams ? topParams.reportID : undefined;
+        const belowRoute = splitState.routes.at(-2);
+        const belowParams = belowRoute?.params;
+        const belowReportID = belowRoute?.name === SCREENS.REPORT && !!belowParams && 'reportID' in belowParams ? belowParams.reportID : undefined;
+        // Only insert once the expense we pushed is actually on top, and not if the parent is already beneath it.
+        if (topReportID !== childReportID || belowReportID === parentReportID) {
+            return;
+        }
+        const routes = [...splitState.routes.slice(0, -1), {name: SCREENS.REPORT, params: {reportID: parentReportID, backTo}}, topRoute];
+        navigationRef.dispatch({
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- the inserted parent route is keyless; react-navigation mints its key on reset while every existing route (incl. the expense kept on top) retains its key, so nothing underneath remounts
+            ...CommonActions.reset({...splitState, routes, index: routes.length - 1} as Parameters<typeof CommonActions.reset>[0]),
+            target: splitState.key,
+        });
+    });
+}
+
 export default {
     setShouldPopToSidebar,
     getShouldPopToSidebar,
     popToSidebar,
     navigate,
+    openExpenseOverParentReport,
     setParams,
     dismissModal,
     dismissModalWithReport,
diff --git a/tests/ui/MoneyRequestReportPreview.test.tsx b/tests/ui/MoneyRequestReportPreview.test.tsx
index df83908ddd84..45b19d7b64ca 100644
--- a/tests/ui/MoneyRequestReportPreview.test.tsx
+++ b/tests/ui/MoneyRequestReportPreview.test.tsx
@@ -413,6 +413,7 @@ describe('MoneyRequestReportPreview', () => {
 
     describe('pressing a transaction in the carousel', () => {
         const navigateSpy = jest.spyOn(Navigation, 'navigate');
+        const openExpenseOverParentReportSpy = jest.spyOn(Navigation, 'openExpenseOverParentReport');
 
         // Give every transaction its own thread report so the assertion proves the *pressed* card
         // drives navigation, instead of every card sharing one parent-report handler.
@@ -443,9 +444,9 @@ describe('MoneyRequestReportPreview', () => {
         beforeEach(() => {
             navigateSpy.mockImplementation(() => {});
             jest.spyOn(Navigation, 'getActiveRoute').mockReturnValue('');
-            // The narrow path defers the expense push to a microtask (to avoid the iOS backward animation); run it
-            // synchronously here so the sequence of navigate calls can be asserted deterministically.
-            jest.spyOn(Navigation, 'setNavigationActionToMicrotaskQueue').mockImplementation((callback) => callback());
+            // The narrow path delegates to openExpenseOverParentReport (its native-stack mechanics are covered by
+            // on-device testing); mock it so the component's delegation can be asserted directly.
+            openExpenseOverParentReportSpy.mockImplementation(() => {});
         });
 
         afterEach(() => {
@@ -477,21 +478,17 @@ describe('MoneyRequestReportPreview', () => {
             expect(navigateSpy).toHaveBeenNthCalledWith(2, ROUTES.SEARCH_REPORT.getRoute({reportID: `thread_${mockSecondTransactionID}`, backTo: reportRoute}));
         });
 
-        it('pushes the report then the pressed expense so OS/swipe back returns to the report on narrow layouts', async () => {
+        it('opens the pressed expense with the parent report beneath it so OS/swipe back returns to the report on narrow layouts', async () => {
             mockResponsiveLayoutOverride = narrowResponsiveLayout;
             jest.spyOn(ReportActionUtils, 'getIOUActionForReportID').mockImplementation(buildActionWithThread);
 
             await renderAndPopulateCarousel();
             await pressSecondTransaction();
 
-            // Push the report onto the stack first, then the expense on top (the second push is deferred to a
-            // microtask so it composes as a forward push instead of the backward iOS animation the synchronous
-            // double-push produced). Keeping the report as a real stack entry makes the OS/hardware back and the
-            // iOS swipe-back return to the report, matching the header back button.
-            const reportRoute = ROUTES.REPORT_WITH_ID.getRoute(mockIOUReport.reportID, undefined, undefined, '');
-            expect(navigateSpy).toHaveBeenCalledTimes(2);
-            expect(navigateSpy).toHaveBeenNthCalledWith(1, reportRoute);
-            expect(navigateSpy).toHaveBeenNthCalledWith(2, ROUTES.REPORT_WITH_ID.getRoute(`thread_${mockSecondTransactionID}`, undefined, undefined, reportRoute));
+            // On narrow layouts the expense opens with the parent report placed as a real stack entry beneath it
+            // (a single forward slide), so the OS/hardware back and the iOS swipe-back return to the report,
+            // matching the header back button.
+            expect(openExpenseOverParentReportSpy).toHaveBeenCalledWith(mockIOUReport.reportID, `thread_${mockSecondTransactionID}`, '');
         });
 
         it('seeds the optimistic transaction thread before opening an existing (possibly uncached) expense', async () => {
@@ -535,16 +532,16 @@ describe('MoneyRequestReportPreview', () => {
             // The press fetches the IOU report's actions and waits, rather than falling back to the parent report.
             expect(openReportSpy).toHaveBeenCalledWith(expect.objectContaining({reportID: mockIOUReport.reportID}));
             expect(navigateSpy).not.toHaveBeenCalled();
+            expect(openExpenseOverParentReportSpy).not.toHaveBeenCalled();
 
-            // Once the actions arrive the thread resolves and the pressed expense opens (report pushed underneath).
+            // Once the actions arrive the thread resolves and the pressed expense opens (report placed underneath).
             getIOUActionSpy.mockImplementation(buildActionWithThread);
             await act(async () => {
                 await Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${mockIOUReport.reportID}`, {[`${mockAction.reportActionID}_loaded`]: mockAction});
                 await waitForBatchedUpdatesWithAct();
             });
 
-            const reportRoute = ROUTES.REPORT_WITH_ID.getRoute(mockIOUReport.reportID, undefined, undefined, '');
-            expect(navigateSpy).toHaveBeenCalledWith(ROUTES.REPORT_WITH_ID.getRoute(`thread_${mockSecondTransactionID}`, undefined, undefined, reportRoute));
+            expect(openExpenseOverParentReportSpy).toHaveBeenCalledWith(mockIOUReport.reportID, `thread_${mockSecondTransactionID}`, '');
         });
 
         it('falls back to opening the parent report when the pressed expense has no thread', async () => {

From f55f88a7a5f2435a5897c232e2995ebd2fef870b Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Mon, 6 Jul 2026 21:59:53 +0700
Subject: [PATCH 13/23] Skip the parent-report splice on web to fix the
 mobile-web double-back
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On web, react-navigation mirrors every split-stack entry into window.history and decides
push-vs-replace from the stack length, not the URL. openExpenseOverParentReport's reset
(splicing the parent report beneath the expense) grows the split stack by one route, which
the web history sync treats as a forward push — a second history entry for the same,
unchanged expense URL. That dead entry made the first browser/OS back a no-op on mobile web
(Android Chrome + iOS Safari), reaching the carousel only on the second press. Guarding the
splice with getPlatform() === WEB and returning early keeps just the expense push on web, so
one back returns to the chat while the expense's backTo still drives the header back as
expense -> report -> chat. Native (react-native-screens) is unaffected and keeps the
single-forward-slide splice. Verified on the Android emulator (mobile web).
---
 src/libs/Navigation/Navigation.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/libs/Navigation/Navigation.ts b/src/libs/Navigation/Navigation.ts
index 5fc4410abc8a..9b4254e63c48 100644
--- a/src/libs/Navigation/Navigation.ts
+++ b/src/libs/Navigation/Navigation.ts
@@ -4,6 +4,7 @@ import SidePanelActions from '@libs/actions/SidePanel';
 import clearSelectedText from '@libs/clearSelectedText/clearSelectedText';
 import clearSelectedTextIfComposerBlurred from '@libs/clearSelectedTextIfComposerBlurred/clearSelectedTextIfComposerBlurred';
 import getIsNarrowLayout from '@libs/getIsNarrowLayout';
+import getPlatform from '@libs/getPlatform';
 import {setupHadTabNavigation} from '@libs/hadTabNavigation';
 import Log from '@libs/Log';
 import {setupNavigationFocusReturn} from '@libs/NavigationFocusReturn';
@@ -1238,6 +1239,16 @@ function openExpenseOverParentReport(parentReportID: string, childReportID: stri
     const reportRoute = ROUTES.REPORT_WITH_ID.getRoute(parentReportID, undefined, undefined, backTo);
     navigate(ROUTES.REPORT_WITH_ID.getRoute(childReportID, undefined, undefined, reportRoute));
 
+    // On web, react-navigation mirrors every split-stack entry into window.history, and it decides push-vs-replace
+    // from the stack length, not the URL. The reset below grows the split stack by one route (the parent report),
+    // which the web history sync treats as a forward PUSH — a second history entry for the *unchanged* expense URL.
+    // That dead entry makes the first browser/OS back a no-op. Web needs no native single-slide trick: the expense's
+    // backTo (reportRoute) already drives the header back as expense -> report -> chat, and a browser back returns
+    // straight to the chat carousel.
+    if (getPlatform() === CONST.PLATFORM.WEB) {
+        return;
+    }
+
     setNavigationActionToMicrotaskQueue(() => {
         const rootState = navigationRef.getRootState();
         const tabNavigator = rootState?.routes.findLast((route) => route.name === NAVIGATORS.TAB_NAVIGATOR);

From d7a2cafc19bbe107a118b41616dee8485e2cf39b Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Tue, 7 Jul 2026 10:31:13 +0700
Subject: [PATCH 14/23] Push the report then the expense on web so hard back
 and header back agree
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The earlier web guard skipped the parent-report splice to fix the mobile-web double-back, but
that left the report out of window.history — so the browser/OS (hard) back skipped straight to
the chat while the header back (driven by the expense's backTo) still stepped through the
report, an inconsistency. On web, push the report and then the expense as two distinct history
entries (different URLs) instead: both the browser/OS back and the header back now step
expense -> report -> chat with no dead entry (distinct URLs, unlike the splice's duplicate).
Native keeps the single-forward-slide splice unchanged.
---
 src/libs/Navigation/Navigation.ts | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/libs/Navigation/Navigation.ts b/src/libs/Navigation/Navigation.ts
index 9b4254e63c48..814c3f37f1da 100644
--- a/src/libs/Navigation/Navigation.ts
+++ b/src/libs/Navigation/Navigation.ts
@@ -1237,18 +1237,23 @@ function getTopmostSearchReportID(state = navigationRef.getRootState()): string
  */
 function openExpenseOverParentReport(parentReportID: string, childReportID: string, backTo: string) {
     const reportRoute = ROUTES.REPORT_WITH_ID.getRoute(parentReportID, undefined, undefined, backTo);
-    navigate(ROUTES.REPORT_WITH_ID.getRoute(childReportID, undefined, undefined, reportRoute));
-
-    // On web, react-navigation mirrors every split-stack entry into window.history, and it decides push-vs-replace
-    // from the stack length, not the URL. The reset below grows the split stack by one route (the parent report),
-    // which the web history sync treats as a forward PUSH — a second history entry for the *unchanged* expense URL.
-    // That dead entry makes the first browser/OS back a no-op. Web needs no native single-slide trick: the expense's
-    // backTo (reportRoute) already drives the header back as expense -> report -> chat, and a browser back returns
-    // straight to the chat carousel.
+    const expenseRoute = ROUTES.REPORT_WITH_ID.getRoute(childReportID, undefined, undefined, reportRoute);
+
+    // On web, react-navigation mirrors the split stack into window.history and decides push-vs-replace from the stack
+    // length, not the URL. Push the report and then the expense as two distinct history entries (different URLs) so the
+    // browser/OS back and the header back both step expense -> report -> chat consistently, with no dead entry. (The
+    // native single-slide splice below keeps the expense on top; on web that would push a second, same-URL entry — a
+    // dead first back — and leave the report out of history, so a browser back would skip to the chat and disagree with
+    // the header back.)
     if (getPlatform() === CONST.PLATFORM.WEB) {
+        navigate(reportRoute);
+        setNavigationActionToMicrotaskQueue(() => navigate(expenseRoute));
         return;
     }
 
+    // Native (react-native-screens): push the expense, then splice the parent report beneath it so it opens as a single
+    // forward slide with the report as a real stack entry underneath for OS/swipe back.
+    navigate(expenseRoute);
     setNavigationActionToMicrotaskQueue(() => {
         const rootState = navigationRef.getRootState();
         const tabNavigator = rootState?.routes.findLast((route) => route.name === NAVIGATORS.TAB_NAVIGATOR);

From e4cb936df4c09faa7388c2b624754fac373c53ad Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Tue, 7 Jul 2026 11:35:09 +0700
Subject: [PATCH 15/23] Open the expense in an RHP over the report on mobile
 web
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous web path pushed the parent report then the expense as two split REPORT screens,
leaving the report a rendered-but-frozen screen under the expense (freezeNonTopScreens), frozen
~1 frame after mount (mid-load, since the expense push is deferred). Hard-backing to it thawed it
into a re-render burst, and a transaction-row tap during that burst had its pointerdown/click
straddle a row DOM swap, cancelling the click — so the first tap was dropped (needing a second).

On web, open the parent report as the top of the split (never frozen) and open the pressed
expense in the RHP over it — exactly like the report view and the wide layout. Browser/OS back
and the header back both close the RHP to the fully-loaded report, then to the chat (consistent,
no dead entry — the RHP is a distinct URL). Native keeps the single-forward-slide splice
(openExpenseOverParentReport is now native-only).
---
 .../MoneyRequestReportPreview/index.tsx       | 30 +++++++++++++++----
 src/libs/Navigation/Navigation.ts             | 19 +++---------
 2 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
index 21b090faa300..257a2e62ad3a 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
@@ -16,6 +16,7 @@ import useTransactionViolations from '@hooks/useTransactionViolations';
 import {createTransactionThreadReport, openReport, setOptimisticTransactionThread} from '@libs/actions/Report';
 import {setActiveTransactionIDs} from '@libs/actions/TransactionThreadNavigation';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
+import getPlatform from '@libs/getPlatform';
 import {
     getIOUActionForReportID,
     getOriginalMessage,
@@ -204,16 +205,33 @@ function MoneyRequestReportPreview({
                 op: CONST.TELEMETRY.SPAN_OPEN_REPORT,
             });
 
-            // On narrow layouts the wide RHP is unavailable. Open the expense with the parent report as a real
-            // stack entry underneath (so OS/hardware back and the iOS swipe-back return to the report, matching the
-            // header back button) as a single forward slide — see openExpenseOverParentReport for the mechanics.
             if (isSmallScreenWidth) {
                 const backTo = Navigation.getActiveRoute();
-                if (iouReportID) {
-                    Navigation.openExpenseOverParentReport(iouReportID, childReportID, backTo);
-                } else {
+                if (!iouReportID) {
                     Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(childReportID, undefined, undefined, backTo));
+                    return;
                 }
+
+                // On mobile web, open the parent report as the top of the split (so it stays interactive and is never
+                // frozen under the expense), then open the pressed expense in the RHP over it — the same way the report
+                // view and the wide layout open an expense. Browser/OS back and the header back both close the RHP to
+                // the fully-loaded report, then to the chat. Pushing the expense as a second split report screen
+                // instead leaves the parent report frozen beneath it (freezeNonTopScreens), so hard-backing to that
+                // just-thawed, still-loading report drops the first transaction-row tap.
+                if (getPlatform() === CONST.PLATFORM.WEB) {
+                    const reportRoute = ROUTES.REPORT_WITH_ID.getRoute(iouReportID, undefined, undefined, backTo);
+                    Navigation.navigate(reportRoute);
+                    setActiveTransactionIDs(transactions.map((transaction) => transaction.transactionID)).then(() => {
+                        markReportIDAsExpense(childReportID);
+                        Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: childReportID, backTo: reportRoute}));
+                    });
+                    return;
+                }
+
+                // On native the wide RHP is unavailable and there is a swipe-back gesture, so open the expense with the
+                // parent report as a real stack entry underneath as a single forward slide (see
+                // openExpenseOverParentReport for the mechanics).
+                Navigation.openExpenseOverParentReport(iouReportID, childReportID, backTo);
                 return;
             }
 
diff --git a/src/libs/Navigation/Navigation.ts b/src/libs/Navigation/Navigation.ts
index 814c3f37f1da..b068f17ada0e 100644
--- a/src/libs/Navigation/Navigation.ts
+++ b/src/libs/Navigation/Navigation.ts
@@ -4,7 +4,6 @@ import SidePanelActions from '@libs/actions/SidePanel';
 import clearSelectedText from '@libs/clearSelectedText/clearSelectedText';
 import clearSelectedTextIfComposerBlurred from '@libs/clearSelectedTextIfComposerBlurred/clearSelectedTextIfComposerBlurred';
 import getIsNarrowLayout from '@libs/getIsNarrowLayout';
-import getPlatform from '@libs/getPlatform';
 import {setupHadTabNavigation} from '@libs/hadTabNavigation';
 import Log from '@libs/Log';
 import {setupNavigationFocusReturn} from '@libs/NavigationFocusReturn';
@@ -1239,20 +1238,10 @@ function openExpenseOverParentReport(parentReportID: string, childReportID: stri
     const reportRoute = ROUTES.REPORT_WITH_ID.getRoute(parentReportID, undefined, undefined, backTo);
     const expenseRoute = ROUTES.REPORT_WITH_ID.getRoute(childReportID, undefined, undefined, reportRoute);
 
-    // On web, react-navigation mirrors the split stack into window.history and decides push-vs-replace from the stack
-    // length, not the URL. Push the report and then the expense as two distinct history entries (different URLs) so the
-    // browser/OS back and the header back both step expense -> report -> chat consistently, with no dead entry. (The
-    // native single-slide splice below keeps the expense on top; on web that would push a second, same-URL entry — a
-    // dead first back — and leave the report out of history, so a browser back would skip to the chat and disagree with
-    // the header back.)
-    if (getPlatform() === CONST.PLATFORM.WEB) {
-        navigate(reportRoute);
-        setNavigationActionToMicrotaskQueue(() => navigate(expenseRoute));
-        return;
-    }
-
-    // Native (react-native-screens): push the expense, then splice the parent report beneath it so it opens as a single
-    // forward slide with the report as a real stack entry underneath for OS/swipe back.
+    // Push the expense, then splice the parent report beneath it so it opens as a single forward slide with the report
+    // as a real stack entry underneath for OS/swipe back. Native only — the caller (navigateToExpense) routes web to an
+    // RHP over the report instead, because a frozen report screen under the expense drops the first tap on hard-back
+    // and web has no swipe-back gesture that needs a live report entry underneath.
     navigate(expenseRoute);
     setNavigationActionToMicrotaskQueue(() => {
         const rootState = navigationRef.getRootState();

From e3f49012dec0682ba9a8f27b56c2f39183b82b03 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Tue, 7 Jul 2026 11:52:34 +0700
Subject: [PATCH 16/23] Open the mobile-web expense RHP in the same tick as the
 report (no cascade)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The web path deferred the expense RHP behind setActiveTransactionIDs().then(), so the parent
report rendered full-screen for a tick before the expense opened over it — the same
report-then-expense cascade/delay as the wide layout. Open the report (top of the split) and the
expense RHP synchronously in one tick so the RHP covers the report immediately with no flash; the
expense mark + active transaction IDs are seeded fire-and-forget. Back still closes the RHP to the
unfrozen report, then to the chat.
---
 .../MoneyRequestReportPreview/index.tsx                | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
index 257a2e62ad3a..75d1f6f06447 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
@@ -220,11 +220,13 @@ function MoneyRequestReportPreview({
                 // just-thawed, still-loading report drops the first transaction-row tap.
                 if (getPlatform() === CONST.PLATFORM.WEB) {
                     const reportRoute = ROUTES.REPORT_WITH_ID.getRoute(iouReportID, undefined, undefined, backTo);
+                    markReportIDAsExpense(childReportID);
+                    setActiveTransactionIDs(transactions.map((transaction) => transaction.transactionID));
+                    // Open the report (top of the split) and the expense RHP in the same tick, so the RHP covers the
+                    // report immediately with no report-then-expense cascade/delay. Back closes the RHP to the
+                    // fully-loaded, unfrozen report, then to the chat.
                     Navigation.navigate(reportRoute);
-                    setActiveTransactionIDs(transactions.map((transaction) => transaction.transactionID)).then(() => {
-                        markReportIDAsExpense(childReportID);
-                        Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: childReportID, backTo: reportRoute}));
-                    });
+                    Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: childReportID, backTo: reportRoute}));
                     return;
                 }
 

From 9ad3fffef0bf8826387bb3de32dec90259ddce49 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Tue, 7 Jul 2026 15:45:12 +0700
Subject: [PATCH 17/23] Defer the mobile-web expense RHP by one frame so back
 stops on the report
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Opening the report and the expense RHP in the same tick removed the open-flash but dropped the
report from browser history (not a distinct state change), so back skipped it. Defer the RHP one
frame via setNavigationActionToMicrotaskQueue: the report lands as its own history entry (hard and
header back both stop on it, then the chat), and one frame keeps the report barely visible before
the full-screen RHP covers it — far shorter than the earlier setActiveTransactionIDs().then
cascade. Report stays top-of-split (unfrozen), so the first-tap fix holds.
---
 .../MoneyRequestReportPreview/index.tsx                | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
index 75d1f6f06447..0fa15a4a9198 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
@@ -17,6 +17,7 @@ import {createTransactionThreadReport, openReport, setOptimisticTransactionThrea
 import {setActiveTransactionIDs} from '@libs/actions/TransactionThreadNavigation';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import getPlatform from '@libs/getPlatform';
+import setNavigationActionToMicrotaskQueue from '@libs/Navigation/helpers/setNavigationActionToMicrotaskQueue';
 import {
     getIOUActionForReportID,
     getOriginalMessage,
@@ -222,11 +223,12 @@ function MoneyRequestReportPreview({
                     const reportRoute = ROUTES.REPORT_WITH_ID.getRoute(iouReportID, undefined, undefined, backTo);
                     markReportIDAsExpense(childReportID);
                     setActiveTransactionIDs(transactions.map((transaction) => transaction.transactionID));
-                    // Open the report (top of the split) and the expense RHP in the same tick, so the RHP covers the
-                    // report immediately with no report-then-expense cascade/delay. Back closes the RHP to the
-                    // fully-loaded, unfrozen report, then to the chat.
+                    // Open the report first, then defer the expense's RHP by one frame so the report lands as its own
+                    // browser-history entry — hard/browser back and the header back both stop on the report, then the
+                    // chat. One frame keeps the report barely visible before the full-screen RHP covers it. (Opening
+                    // both in the same tick removes the flash but drops the report from history, so back would skip it.)
                     Navigation.navigate(reportRoute);
-                    Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: childReportID, backTo: reportRoute}));
+                    setNavigationActionToMicrotaskQueue(() => Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: childReportID, backTo: reportRoute})));
                     return;
                 }
 

From c62bfc34052d420ba54989a44431cf6eba5a9eef Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Tue, 14 Jul 2026 05:54:51 +0700
Subject: [PATCH 18/23] Drop the inert wide RHP width hint on the mobile-web
 expense open
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On narrow the RHP is always full-screen and the expense screen never reads the width hint, so
markReportRHPWidth(_, 'wide') was inert in the narrow-web branch — it only forced a WideRHP
context-wide re-render mid-transition and left a stale 'wide' hint for a later wide visit.
Removing it trims that jank; the report-first history defer (and thus back -> report -> chat) is
unchanged.
---
 .../ReportActionItem/MoneyRequestReportPreview/index.tsx      | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
index 6d8926a1133b..b1683790c874 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
@@ -223,7 +223,9 @@ function MoneyRequestReportPreview({
                 // just-thawed, still-loading report drops the first transaction-row tap.
                 if (getPlatform() === CONST.PLATFORM.WEB) {
                     const reportRoute = ROUTES.REPORT_WITH_ID.getRoute(iouReportID, undefined, undefined, backTo);
-                    markReportRHPWidth(childReportID, 'wide');
+                    // No RHP width hint on narrow: the mobile RHP is always full-screen and the expense screen never
+                    // reads the hint, so marking it 'wide' is inert here — it only forces a WideRHP context-wide
+                    // re-render mid-transition and leaves a stale 'wide' hint for a later wide visit.
                     setActiveTransactionIDs(transactions.map((transaction) => transaction.transactionID));
                     // Open the report first, then defer the expense's RHP by one frame so the report lands as its own
                     // browser-history entry — hard/browser back and the header back both stop on the report, then the

From 764bbfe72e8909a85d6c6c22169ab1063b7c9c0b Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Wed, 15 Jul 2026 13:25:37 +0700
Subject: [PATCH 19/23] Update ReportPreviewActionButton test for the
 View-alongside layout

This PR renders the View button alongside the primary action button (Export/Submit/Approve/Pay)
instead of in place of it. Main added ReportPreviewActionButtonTest after this branch, asserting
the old primary-OR-View behavior, so the EXPORT_TO_ACCOUNTING-with-integration case expected View
not to render. Update it to expect View, matching the new layout.
---
 tests/ui/components/ReportPreviewActionButtonTest.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/tests/ui/components/ReportPreviewActionButtonTest.tsx b/tests/ui/components/ReportPreviewActionButtonTest.tsx
index 4caac48e733b..92ffbab2df05 100644
--- a/tests/ui/components/ReportPreviewActionButtonTest.tsx
+++ b/tests/ui/components/ReportPreviewActionButtonTest.tsx
@@ -100,7 +100,9 @@ describe('ReportPreviewActionButton', () => {
         mockActionState.connectedIntegration = CONST.POLICY.CONNECTIONS.NAME.QBO;
         render(<ReportPreviewActionButton />);
         expect(mockExport).toHaveBeenCalled();
-        expect(mockView).not.toHaveBeenCalled();
+        // The View button now renders alongside the primary action button (here ExportActionButton) rather than
+        // instead of it, so it is expected to render too.
+        expect(mockView).toHaveBeenCalled();
     });
 
     it('falls back to the View button for EXPORT_TO_ACCOUNTING when no integration is connected', () => {

From 13e582f466684a2c4fc981319f43c45a08701663 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Wed, 15 Jul 2026 15:00:25 +0700
Subject: [PATCH 20/23] Guard the wide-layout delayed expense navigation
 against dismissal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Codex flagged that navigateToExpense's wide branch fires the pressed-expense navigate on a 180ms
cascade timer even if the user closed the report's wide RHP or navigated away during the delay —
reopening the expense over whatever screen is now active. Guard the delayed navigate on
Navigation.isActiveRoute(reportRoute) so it only fires while the report is still active, and add a
regression test for the dismissal case.
---
 .../MoneyRequestReportPreview/index.tsx       |  5 ++++
 tests/ui/MoneyRequestReportPreview.test.tsx   | 24 +++++++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
index b1683790c874..707b5ffd379c 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
@@ -256,6 +256,11 @@ function MoneyRequestReportPreview({
                     // Let the report's wide RHP settle before opening the pressed expense on top, so the two
                     // panels open as a cascade rather than at once.
                     setTimeout(() => {
+                        // The user may have closed the report's wide RHP or navigated away during the cascade delay;
+                        // don't reopen the expense over whatever screen is now active.
+                        if (!Navigation.isActiveRoute(reportRoute)) {
+                            return;
+                        }
                         Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: childReportID, backTo: reportRoute}));
                     }, PRESSED_EXPENSE_CASCADE_DELAY);
                 });
diff --git a/tests/ui/MoneyRequestReportPreview.test.tsx b/tests/ui/MoneyRequestReportPreview.test.tsx
index cf1bc5859b9b..2643aa4de560 100644
--- a/tests/ui/MoneyRequestReportPreview.test.tsx
+++ b/tests/ui/MoneyRequestReportPreview.test.tsx
@@ -498,6 +498,9 @@ describe('MoneyRequestReportPreview', () => {
         beforeEach(() => {
             navigateSpy.mockImplementation(() => {});
             jest.spyOn(Navigation, 'getActiveRoute').mockReturnValue('');
+            // The wide-layout cascade guards its delayed expense navigation on isActiveRoute(reportRoute); default to
+            // "still on the report" so the happy-path cascade fires.
+            jest.spyOn(Navigation, 'isActiveRoute').mockReturnValue(true);
             // The narrow path delegates to openExpenseOverParentReport (its native-stack mechanics are covered by
             // on-device testing); mock it so the component's delegation can be asserted directly.
             openExpenseOverParentReportSpy.mockImplementation(() => {});
@@ -532,6 +535,27 @@ describe('MoneyRequestReportPreview', () => {
             expect(navigateSpy).toHaveBeenNthCalledWith(2, ROUTES.SEARCH_REPORT.getRoute({reportID: `thread_${mockSecondTransactionID}`, backTo: reportRoute}));
         });
 
+        it('does not reopen the pressed expense if the user leaves the report during the wide-layout cascade delay', async () => {
+            // Regression: the report opens, but if the user dismisses its wide RHP (or navigates away) before the
+            // cascade timer fires, the delayed callback must not reopen the expense over whatever screen is now active.
+            jest.useRealTimers();
+            mockResponsiveLayoutOverride = wideResponsiveLayout;
+            jest.spyOn(ReportActionUtils, 'getIOUActionForReportID').mockImplementation(buildActionWithThread);
+            jest.spyOn(Navigation, 'isActiveRoute').mockReturnValue(false);
+
+            await renderAndPopulateCarousel();
+            await pressSecondTransaction();
+            await act(async () => {
+                await new Promise((resolve) => {
+                    setTimeout(resolve, 350);
+                });
+            });
+
+            const reportRoute = ROUTES.EXPENSE_REPORT_RHP.getRoute({reportID: mockIOUReport.reportID, backTo: ''});
+            expect(navigateSpy).toHaveBeenCalledWith(reportRoute);
+            expect(navigateSpy).not.toHaveBeenCalledWith(ROUTES.SEARCH_REPORT.getRoute({reportID: `thread_${mockSecondTransactionID}`, backTo: reportRoute}));
+        });
+
         it('opens the pressed expense with the parent report beneath it so OS/swipe back returns to the report on narrow layouts', async () => {
             mockResponsiveLayoutOverride = narrowResponsiveLayout;
             jest.spyOn(ReportActionUtils, 'getIOUActionForReportID').mockImplementation(buildActionWithThread);

From c90aef25bce999ae37f1caa4a179143b20e358d4 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Wed, 15 Jul 2026 15:35:54 +0700
Subject: [PATCH 21/23] Defer the mobile-web expense RHP until the report
 settles (fix iOS Safari freeze)

On iOS Safari mobile web, tapping an expense card right after a hard reload often froze the app.
The narrow-web path pushes the report (a split screen) then opens the expense RHP one frame later;
opening the RHP suspends the whole ReportsSplitNavigator via react-freeze, and suspending the report
while it is still hydrating (cold Onyx cache after a reload) wedges React concurrent rendering on
WebKit. Defer the expense RHP an extra requestAnimationFrame so the report commits and paints before
the freeze lands, and guard on isActiveRoute so it bails if the user navigated away. Native and
desktop are unaffected (native FreezeWrapper is a no-op; the wide path already settles via a 180ms
cascade).
---
 .../MoneyRequestReportPreview/index.tsx            | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
index 707b5ffd379c..f369d083eee7 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
@@ -232,7 +232,19 @@ function MoneyRequestReportPreview({
                     // chat. One frame keeps the report barely visible before the full-screen RHP covers it. (Opening
                     // both in the same tick removes the flash but drops the report from history, so back would skip it.)
                     Navigation.navigate(reportRoute);
-                    setNavigationActionToMicrotaskQueue(() => Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: childReportID, backTo: reportRoute})));
+                    // Open the expense's RHP only after the freshly-pushed report has committed and painted, and only
+                    // while it is still the active route. Opening the RHP suspends the whole split via react-freeze, and
+                    // suspending a still-hydrating report (cold Onyx cache right after a hard reload) wedges React
+                    // concurrent rendering on iOS Safari — the app freezes. The extra requestAnimationFrame lets the
+                    // report settle before the freeze lands; the isActiveRoute guard bails if the user navigated away.
+                    setNavigationActionToMicrotaskQueue(() =>
+                        requestAnimationFrame(() => {
+                            if (!Navigation.isActiveRoute(reportRoute)) {
+                                return;
+                            }
+                            Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: childReportID, backTo: reportRoute}));
+                        }),
+                    );
                     return;
                 }
 

From ebbf494511acd52eae6d8b228bdae625a9104be3 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Wed, 15 Jul 2026 17:57:24 +0700
Subject: [PATCH 22/23] Open the mobile-web expense directly over the chat (fix
 iOS Safari freeze)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Pushing the parent report as a split screen first (so back stops on it) then opening the expense RHP
over it mounts a fresh, still-hydrating report and suspends it via react-freeze when the RHP opens,
wedging React concurrent rendering on iOS Safari (freeze on cold reload; no frame/timeout reliably
outruns the hydration). Open the expense directly in the RHP over the already-settled chat instead:
no churning report to suspend, so no freeze — and no report-first flash. Trade-off: on mobile web,
back now returns to the chat rather than stopping on the report first (native still does
report -> chat via openExpenseOverParentReport).
---
 .../MoneyRequestReportPreview/index.tsx       | 31 +++++--------------
 1 file changed, 8 insertions(+), 23 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
index f369d083eee7..b595ee151299 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
@@ -17,7 +17,6 @@ import {createTransactionThreadReport, openReport, setOptimisticTransactionThrea
 import {setActiveTransactionIDs} from '@libs/actions/TransactionThreadNavigation';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import getPlatform from '@libs/getPlatform';
-import setNavigationActionToMicrotaskQueue from '@libs/Navigation/helpers/setNavigationActionToMicrotaskQueue';
 import {
     getIOUActionForReportID,
     getOriginalMessage,
@@ -222,29 +221,15 @@ function MoneyRequestReportPreview({
                 // instead leaves the parent report frozen beneath it (freezeNonTopScreens), so hard-backing to that
                 // just-thawed, still-loading report drops the first transaction-row tap.
                 if (getPlatform() === CONST.PLATFORM.WEB) {
-                    const reportRoute = ROUTES.REPORT_WITH_ID.getRoute(iouReportID, undefined, undefined, backTo);
-                    // No RHP width hint on narrow: the mobile RHP is always full-screen and the expense screen never
-                    // reads the hint, so marking it 'wide' is inert here — it only forces a WideRHP context-wide
-                    // re-render mid-transition and leaves a stale 'wide' hint for a later wide visit.
+                    // On mobile web, open the pressed expense directly in the RHP over the chat. Pushing the parent
+                    // report as a split screen first (so back stops on it) mounts a fresh, still-hydrating report and
+                    // then suspends it via react-freeze when the RHP opens — that wedges React concurrent rendering on
+                    // iOS Safari (the app freezes on a cold reload, and no frame/timeout reliably outruns the
+                    // hydration). Opening over the already-settled chat avoids it; back returns to the chat. (Native
+                    // still splices the report underneath for back -> report -> chat via openExpenseOverParentReport;
+                    // web can't do that without reintroducing the freeze.)
                     setActiveTransactionIDs(transactions.map((transaction) => transaction.transactionID));
-                    // Open the report first, then defer the expense's RHP by one frame so the report lands as its own
-                    // browser-history entry — hard/browser back and the header back both stop on the report, then the
-                    // chat. One frame keeps the report barely visible before the full-screen RHP covers it. (Opening
-                    // both in the same tick removes the flash but drops the report from history, so back would skip it.)
-                    Navigation.navigate(reportRoute);
-                    // Open the expense's RHP only after the freshly-pushed report has committed and painted, and only
-                    // while it is still the active route. Opening the RHP suspends the whole split via react-freeze, and
-                    // suspending a still-hydrating report (cold Onyx cache right after a hard reload) wedges React
-                    // concurrent rendering on iOS Safari — the app freezes. The extra requestAnimationFrame lets the
-                    // report settle before the freeze lands; the isActiveRoute guard bails if the user navigated away.
-                    setNavigationActionToMicrotaskQueue(() =>
-                        requestAnimationFrame(() => {
-                            if (!Navigation.isActiveRoute(reportRoute)) {
-                                return;
-                            }
-                            Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: childReportID, backTo: reportRoute}));
-                        }),
-                    );
+                    Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: childReportID, backTo}));
                     return;
                 }
 

From 950904bfdbfbee3dbc4196d4db615c437c1df49d Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 16 Jul 2026 07:52:13 +0700
Subject: [PATCH 23/23] mWeb: keep report alive under the expense RHP so back
 returns to it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Open the pressed expense over the parent report (report-first) on mobile web instead of over the chat, and stop the shared FreezeWrapper from freezing a split while a full-screen RHP is open over it — detected synchronously from the navigation state, closing the async lag in the Onyx MODAL guard. This avoids suspending the report mid-hydration (which wedged React 19 concurrent rendering on iOS Safari — the freeze) and leaves it underneath as a live history entry, so back goes report -> chat, matching native.
---
 .../MoneyRequestReportPreview/index.tsx       | 25 +++++++++++++------
 .../AppNavigator/FreezeWrapper/index.tsx      | 21 +++++++++++++---
 2 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
index b595ee151299..d9318bfdd1f0 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx
@@ -17,6 +17,7 @@ import {createTransactionThreadReport, openReport, setOptimisticTransactionThrea
 import {setActiveTransactionIDs} from '@libs/actions/TransactionThreadNavigation';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import getPlatform from '@libs/getPlatform';
+import setNavigationActionToMicrotaskQueue from '@libs/Navigation/helpers/setNavigationActionToMicrotaskQueue';
 import {
     getIOUActionForReportID,
     getOriginalMessage,
@@ -221,15 +222,23 @@ function MoneyRequestReportPreview({
                 // instead leaves the parent report frozen beneath it (freezeNonTopScreens), so hard-backing to that
                 // just-thawed, still-loading report drops the first transaction-row tap.
                 if (getPlatform() === CONST.PLATFORM.WEB) {
-                    // On mobile web, open the pressed expense directly in the RHP over the chat. Pushing the parent
-                    // report as a split screen first (so back stops on it) mounts a fresh, still-hydrating report and
-                    // then suspends it via react-freeze when the RHP opens — that wedges React concurrent rendering on
-                    // iOS Safari (the app freezes on a cold reload, and no frame/timeout reliably outruns the
-                    // hydration). Opening over the already-settled chat avoids it; back returns to the chat. (Native
-                    // still splices the report underneath for back -> report -> chat via openExpenseOverParentReport;
-                    // web can't do that without reintroducing the freeze.)
+                    // On mobile web, push the parent report first so it lands as its own browser-history entry (back
+                    // stops on the report, then the chat), then open the pressed expense in the RHP over it one
+                    // microtask later so the two navigations don't batch into a single history push. The report stays
+                    // live under the full-screen RHP because FreezeWrapper no longer freezes a split that has an RHP
+                    // over it, so it's never suspended mid-hydration (which used to wedge React concurrent rendering on
+                    // iOS Safari). Mirrors native's back -> report -> chat.
+                    const reportRoute = ROUTES.REPORT_WITH_ID.getRoute(iouReportID, undefined, undefined, backTo);
                     setActiveTransactionIDs(transactions.map((transaction) => transaction.transactionID));
-                    Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: childReportID, backTo}));
+                    Navigation.navigate(reportRoute);
+                    setNavigationActionToMicrotaskQueue(() => {
+                        // The user may have left the report during the microtask defer; don't open the expense over
+                        // whatever screen is now active.
+                        if (!Navigation.isActiveRoute(reportRoute)) {
+                            return;
+                        }
+                        Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: childReportID, backTo: reportRoute}));
+                    });
                     return;
                 }
 
diff --git a/src/libs/Navigation/AppNavigator/FreezeWrapper/index.tsx b/src/libs/Navigation/AppNavigator/FreezeWrapper/index.tsx
index 72d20e23257d..6354fe98cf46 100644
--- a/src/libs/Navigation/AppNavigator/FreezeWrapper/index.tsx
+++ b/src/libs/Navigation/AppNavigator/FreezeWrapper/index.tsx
@@ -1,5 +1,7 @@
 import useOnyx from '@hooks/useOnyx';
 
+import isSideModalNavigator from '@libs/Navigation/helpers/isSideModalNavigator';
+
 import ONYXKEYS from '@src/ONYXKEYS';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 
@@ -22,21 +24,32 @@ function FreezeWrapper({children, freezeWhenInTabBackground = true}: FreezeWrapp
     });
 
     const [isScreenBlurred, setIsScreenBlurred] = useState(false);
+    // Whether the route currently blurring us is a full-screen side modal (RHP). Derived synchronously from the same
+    // navigation state that drives isScreenBlurred, so a report kept alive under an RHP isn't frozen while it's still
+    // hydrating (which wedges React 19 concurrent rendering on WebKit). The Onyx MODAL flag below lags the actual
+    // navigation, so it can't close that window on its own.
+    const [isBlurredByModal, setIsBlurredByModal] = useState(false);
     const [freezed, setFreezed] = useState(false);
 
     useEffect(() => {
-        const unsubscribe = navigation.addListener('state', (e) => setIsScreenBlurred(getIsScreenBlurred(e.data.state, currentRoute.key, {freezeWhenInTabBackground})));
+        const unsubscribe = navigation.addListener('state', (e) => {
+            const state = e.data.state;
+            setIsScreenBlurred(getIsScreenBlurred(state, currentRoute.key, {freezeWhenInTabBackground}));
+            const focusedRoute = state.routes.at(typeof state.index === 'number' ? state.index : -1);
+            setIsBlurredByModal(isSideModalNavigator(focusedRoute?.name));
+        });
         return () => unsubscribe();
     }, [currentRoute.key, freezeWhenInTabBackground, navigation]);
 
     // Decouple the Suspense render task so it won't be interrupted by React's concurrent mode
-    // and stuck in an infinite loop
+    // and stuck in an infinite loop. Also hold off while a modal or full-screen RHP is open over us: freezing a
+    // still-hydrating report under a full-screen RHP wedges concurrent rendering on WebKit.
     useLayoutEffect(() => {
-        if (isScreenBlurred && isAnyModalOpen) {
+        if (isScreenBlurred && (isAnyModalOpen || isBlurredByModal)) {
             return;
         }
         setFreezed(isScreenBlurred);
-    }, [isAnyModalOpen, isScreenBlurred]);
+    }, [isAnyModalOpen, isBlurredByModal, isScreenBlurred]);
 
     return <Freeze freeze={freezed}>{children}</Freeze>;
 }