From f8b21f6a985846c709a46ebd872382ffec00521b Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Tue, 17 Mar 2026 11:08:23 -0400
Subject: [PATCH 1/9] add a memoized component

---
 .../MoneyRequestReportPreviewContent.tsx      | 220 +++++++++---------
 1 file changed, 115 insertions(+), 105 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index c6ca35b4f9150..d947e30b01d93 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -743,111 +743,121 @@ function MoneyRequestReportPreviewContent({
     const isReportDeleted = action?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
     const formattedAmount = getTotalAmountForIOUReportPreviewButton(iouReport, policy, reportPreviewAction);
 
-    const reportPreviewActions = {
-        [CONST.REPORT.REPORT_PREVIEW_ACTIONS.SUBMIT]: (
-            <AnimatedSubmitButton
-                success={isWaitingForSubmissionFromCurrentUser}
-                text={translate('common.submit')}
-                onPress={() => {
-                    if (hasDynamicExternalWorkflow(policy) && !isDEWBetaEnabled) {
-                        showDEWModal();
-                        return;
-                    }
-                    startSubmittingAnimation();
-                    submitReport(
-                        iouReport,
-                        policy,
-                        currentUserAccountID,
-                        currentUserEmail,
-                        hasViolations,
-                        isASAPSubmitBetaEnabled,
-                        iouReportNextStep,
-                        userBillingGraceEndPeriods,
-                        amountOwed,
-                    );
-                }}
-                isSubmittingAnimationRunning={isSubmittingAnimationRunning}
-                onAnimationFinish={stopAnimation}
-                sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.SUBMIT_BUTTON}
-            />
-        ),
-        [CONST.REPORT.REPORT_PREVIEW_ACTIONS.APPROVE]: (
-            <Button
-                text={translate('iou.approve')}
-                success
-                onPress={() => confirmApproval()}
-                sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.APPROVE_BUTTON}
-            />
-        ),
-        [CONST.REPORT.REPORT_PREVIEW_ACTIONS.PAY]: (
-            <AnimatedSettlementButton
-                onlyShowPayElsewhere={shouldShowOnlyPayElsewhere}
-                isPaidAnimationRunning={isPaidAnimationRunning}
-                isApprovedAnimationRunning={isApprovedAnimationRunning}
-                canIOUBePaid={canIOUBePaidAndApproved || isPaidAnimationRunning}
-                onAnimationFinish={stopAnimation}
-                chatReportID={chatReportID}
-                policyID={policy?.id}
-                iouReport={iouReport}
-                currency={iouReport?.currency}
-                wrapperStyle={buttonMaxWidth}
-                onPress={confirmPayment}
-                onPaymentOptionsShow={onPaymentOptionsShow}
-                onPaymentOptionsHide={onPaymentOptionsHide}
-                formattedAmount={formattedAmount}
-                confirmApproval={confirmApproval}
-                enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
-                shouldHidePaymentOptions={!shouldShowPayButton}
-                kycWallAnchorAlignment={{
-                    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
-                    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
-                }}
-                paymentMethodDropdownAnchorAlignment={{
-                    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
-                    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
-                }}
-                isDisabled={isOffline && !canAllowSettlement}
-                isLoading={!isOffline && !canAllowSettlement}
-                sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.PAY_BUTTON}
-            />
-        ),
-        [CONST.REPORT.REPORT_PREVIEW_ACTIONS.EXPORT_TO_ACCOUNTING]: connectedIntegration ? (
-            <ExportWithDropdownMenu
-                report={iouReport}
-                reportActions={reportActions}
-                connectionName={connectedIntegration}
-                wrapperStyle={styles.flexReset}
-                dropdownAnchorAlignment={{
-                    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
-                    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
-                }}
-                sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.EXPORT_BUTTON}
-            />
-        ) : null,
-        [CONST.REPORT.REPORT_PREVIEW_ACTIONS.VIEW]: (
-            <Button
-                text={translate('common.view')}
-                onPress={() => {
-                    openReportFromPreview();
-                }}
-                sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.VIEW_BUTTON}
-            />
-        ),
-        [CONST.REPORT.REPORT_PREVIEW_ACTIONS.ADD_EXPENSE]: (
-            <ButtonWithDropdownMenu
-                onPress={() => {}}
-                shouldAlwaysShowDropdownMenu
-                customText={translate('iou.addExpense')}
-                options={addExpenseDropdownOptions}
-                isSplitButton={false}
-                anchorAlignment={{
-                    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
-                    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
-                }}
-                sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.ADD_EXPENSE_BUTTON}
-            />
-        ),
-    };
+    const activeReportPreviewAction = useMemo(() => {
+        switch (reportPreviewAction) {
+            case CONST.REPORT.REPORT_PREVIEW_ACTIONS.SUBMIT:
+                return (
+                    <AnimatedSubmitButton
+                        success={isWaitingForSubmissionFromCurrentUser}
+                        text={translate('common.submit')}
+                        onPress={() => {
+                            if (hasDynamicExternalWorkflow(policy) && !isDEWBetaEnabled) {
+                                showDEWModal();
+                                return;
+                            }
+                            startSubmittingAnimation();
+                            submitReport(
+                                iouReport,
+                                policy,
+                                currentUserAccountID,
+                                currentUserEmail,
+                                hasViolations,
+                                isASAPSubmitBetaEnabled,
+                                iouReportNextStep,
+                                userBillingGraceEndPeriods,
+                                amountOwed,
+                            );
+                        }}
+                        isSubmittingAnimationRunning={isSubmittingAnimationRunning}
+                        onAnimationFinish={stopAnimation}
+                        sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.SUBMIT_BUTTON}
+                    />
+                );
+            case CONST.REPORT.REPORT_PREVIEW_ACTIONS.APPROVE:
+                return (
+                    <Button
+                        text={translate('iou.approve')}
+                        success
+                        onPress={() => confirmApproval()}
+                        sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.APPROVE_BUTTON}
+                    />
+                );
+            case CONST.REPORT.REPORT_PREVIEW_ACTIONS.PAY:
+                return (
+                    <AnimatedSettlementButton
+                        onlyShowPayElsewhere={shouldShowOnlyPayElsewhere}
+                        isPaidAnimationRunning={isPaidAnimationRunning}
+                        isApprovedAnimationRunning={isApprovedAnimationRunning}
+                        canIOUBePaid={canIOUBePaidAndApproved || isPaidAnimationRunning}
+                        onAnimationFinish={stopAnimation}
+                        chatReportID={chatReportID}
+                        policyID={policy?.id}
+                        iouReport={iouReport}
+                        currency={iouReport?.currency}
+                        wrapperStyle={buttonMaxWidth}
+                        onPress={confirmPayment}
+                        onPaymentOptionsShow={onPaymentOptionsShow}
+                        onPaymentOptionsHide={onPaymentOptionsHide}
+                        formattedAmount={formattedAmount}
+                        confirmApproval={confirmApproval}
+                        enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
+                        shouldHidePaymentOptions={!shouldShowPayButton}
+                        kycWallAnchorAlignment={{
+                            horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
+                            vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+                        }}
+                        paymentMethodDropdownAnchorAlignment={{
+                            horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+                            vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+                        }}
+                        isDisabled={isOffline && !canAllowSettlement}
+                        isLoading={!isOffline && !canAllowSettlement}
+                        sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.PAY_BUTTON}
+                    />
+                );
+            case CONST.REPORT.REPORT_PREVIEW_ACTIONS.EXPORT_TO_ACCOUNTING:
+                return connectedIntegration ? (
+                    <ExportWithDropdownMenu
+                        report={iouReport}
+                        reportActions={reportActions}
+                        connectionName={connectedIntegration}
+                        wrapperStyle={styles.flexReset}
+                        dropdownAnchorAlignment={{
+                            horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+                            vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+                        }}
+                        sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.EXPORT_BUTTON}
+                    />
+                ) : null;
+            case CONST.REPORT.REPORT_PREVIEW_ACTIONS.VIEW:
+                return (
+                    <Button
+                        text={translate('common.view')}
+                        onPress={() => {
+                            openReportFromPreview();
+                        }}
+                        sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.VIEW_BUTTON}
+                    />
+                );
+            case CONST.REPORT.REPORT_PREVIEW_ACTIONS.ADD_EXPENSE:
+                return (
+                    <ButtonWithDropdownMenu
+                        onPress={() => {}}
+                        shouldAlwaysShowDropdownMenu
+                        customText={translate('iou.addExpense')}
+                        options={addExpenseDropdownOptions}
+                        isSplitButton={false}
+                        anchorAlignment={{
+                            horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+                            vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+                        }}
+                        sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.ADD_EXPENSE_BUTTON}
+                    />
+                );
+            default:
+                return null;
+        }
+    }, []);
 
     const adjustScroll = useCallback(() => {
         // Workaround for a known React Native bug on Android (https://github.com/facebook/react-native/issues/27504):

From 09b348620a5b76d6c2fa100c7c7812b0503cb365 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Tue, 17 Mar 2026 11:08:52 -0400
Subject: [PATCH 2/9] add deps and render the changes

---
 .../MoneyRequestReportPreviewContent.tsx      | 41 ++++++++++++++++++-
 1 file changed, 39 insertions(+), 2 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index d947e30b01d93..0e8dc0b6081ff 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -857,7 +857,44 @@ function MoneyRequestReportPreviewContent({
             default:
                 return null;
         }
-    }, []);
+    }, [
+        addExpenseDropdownOptions,
+        amountOwed,
+        buttonMaxWidth,
+        canAllowSettlement,
+        canIOUBePaidAndApproved,
+        chatReportID,
+        confirmApproval,
+        confirmPayment,
+        connectedIntegration,
+        currentUserAccountID,
+        currentUserEmail,
+        formattedAmount,
+        hasViolations,
+        iouReport,
+        iouReportNextStep,
+        isASAPSubmitBetaEnabled,
+        isApprovedAnimationRunning,
+        isDEWBetaEnabled,
+        isOffline,
+        isPaidAnimationRunning,
+        isSubmittingAnimationRunning,
+        isWaitingForSubmissionFromCurrentUser,
+        onPaymentOptionsHide,
+        onPaymentOptionsShow,
+        openReportFromPreview,
+        policy,
+        reportActions,
+        reportPreviewAction,
+        shouldShowOnlyPayElsewhere,
+        shouldShowPayButton,
+        showDEWModal,
+        startSubmittingAnimation,
+        stopAnimation,
+        styles.flexReset,
+        translate,
+        userBillingGraceEndPeriods,
+    ]);
 
     const adjustScroll = useCallback(() => {
         // Workaround for a known React Native bug on Android (https://github.com/facebook/react-native/issues/27504):
@@ -1056,7 +1093,7 @@ function MoneyRequestReportPreviewContent({
                                     <View style={[styles.expenseAndReportPreviewTextContainer]}>
                                         <View style={[totalAmountStyle, styles.justifyContentBetween, styles.gap4, StyleUtils.getMinimumHeight(variables.h28)]}>
                                             {/* height is needed to avoid flickering on animation */}
-                                            <View style={[buttonMaxWidth, styles.flex1, {height: variables.h40}]}>{reportPreviewActions[reportPreviewAction]}</View>
+                                            <View style={[buttonMaxWidth, styles.flex1, {height: variables.h40}]}>{activeReportPreviewAction}</View>
                                             {transactions.length > 1 && !shouldShowAccessPlaceHolder && (
                                                 <View style={[styles.flexRow, shouldUseNarrowLayout ? styles.justifyContentBetween : styles.gap2, styles.alignItemsCenter]}>
                                                     <Text

From c6aa475d815f80cf55453dbe41331cbb7eca7f40 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Tue, 17 Mar 2026 11:09:52 -0400
Subject: [PATCH 3/9] memoize dep functions

---
 .../MoneyRequestReportPreviewContent.tsx      | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 0e8dc0b6081ff..928eaada05543 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -349,7 +349,7 @@ function MoneyRequestReportPreviewContent({
         });
     }, [showConfirmModal, translate]);
 
-    const confirmApproval = () => {
+    const confirmApproval = useCallback(() => {
         if (hasDynamicExternalWorkflow(policy) && !isDEWBetaEnabled) {
             showDEWModal();
             return;
@@ -375,7 +375,24 @@ function MoneyRequestReportPreviewContent({
                 full: true,
             });
         }
-    };
+    }, [
+        activePolicy,
+        amountOwed,
+        betas,
+        currentUserAccountID,
+        currentUserEmail,
+        hasViolations,
+        iouReport,
+        iouReportNextStep,
+        isASAPSubmitBetaEnabled,
+        isDEWBetaEnabled,
+        isDelegateAccessRestricted,
+        policy,
+        showDEWModal,
+        showDelegateNoAccessModal,
+        startApprovedAnimation,
+        userBillingGraceEndPeriods,
+    ]);
 
     const previewMessage = useMemo(() => {
         if (isScanning) {
@@ -632,10 +649,11 @@ function MoneyRequestReportPreviewContent({
     };
 
     // The button should expand up to transaction width
-    const buttonMaxWidth =
-        !shouldUseNarrowLayout && reportPreviewStyles.transactionPreviewCarouselStyle.width >= CONST.REPORT.TRANSACTION_PREVIEW.CAROUSEL.MIN_WIDE_WIDTH
+    const buttonMaxWidth = useMemo(() => {
+        return !shouldUseNarrowLayout && reportPreviewStyles.transactionPreviewCarouselStyle.width >= CONST.REPORT.TRANSACTION_PREVIEW.CAROUSEL.MIN_WIDE_WIDTH
             ? {maxWidth: reportPreviewStyles.transactionPreviewCarouselStyle.width}
             : {};
+    }, [reportPreviewStyles.transactionPreviewCarouselStyle.width, shouldUseNarrowLayout]);
 
     useEffect(() => {
         if (

From 040460bd143eebffbba6d950bb265b4716df7817 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Tue, 17 Mar 2026 11:10:30 -0400
Subject: [PATCH 4/9] memoize renderItem

---
 .../MoneyRequestReportPreviewContent.tsx      | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 928eaada05543..cf9e46d4a3619 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -632,21 +632,24 @@ function MoneyRequestReportPreviewContent({
         });
     };
 
-    const renderItem = (itemInfo: ListRenderItemInfo<Transaction>) => {
-        if (itemInfo.index > MAX_PREVIEWS_NUMBER - 1) {
-            return (
-                <View
-                    style={[styles.p5, styles.justifyContentCenter]}
-                    onLayout={(e) => setFooterWidth(e.nativeEvent.layout.width)}
-                >
-                    <Text style={{color: colors.blue600}}>
-                        +{transactions.length - MAX_PREVIEWS_NUMBER} {translate('common.more').toLowerCase()}
-                    </Text>
-                </View>
-            );
-        }
-        return renderTransactionItem(itemInfo);
-    };
+    const renderItem = useCallback(
+        (itemInfo: ListRenderItemInfo<Transaction>) => {
+            if (itemInfo.index > MAX_PREVIEWS_NUMBER - 1) {
+                return (
+                    <View
+                        style={[styles.p5, styles.justifyContentCenter]}
+                        onLayout={(e) => setFooterWidth(e.nativeEvent.layout.width)}
+                    >
+                        <Text style={{color: colors.blue600}}>
+                            +{transactions.length - MAX_PREVIEWS_NUMBER} {translate('common.more').toLowerCase()}
+                        </Text>
+                    </View>
+                );
+            }
+            return renderTransactionItem(itemInfo);
+        },
+        [renderTransactionItem, styles.justifyContentCenter, styles.p5, transactions.length, translate],
+    );
 
     // The button should expand up to transaction width
     const buttonMaxWidth = useMemo(() => {

From 13c0fbf4f90f6ebe055b78598a1cb4f393a5a74c Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Tue, 17 Mar 2026 11:10:56 -0400
Subject: [PATCH 5/9] memoize the separator

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

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index cf9e46d4a3619..f4430374c7b6e 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -929,7 +929,7 @@ function MoneyRequestReportPreviewContent({
         carouselRef.current?.scrollToEnd();
     }, [carouselTransactions.length]);
 
-    const renderSeparator = () => <View style={styles.transactionsCarouselGap} />;
+    const renderSeparator = useCallback(() => <View style={styles.transactionsCarouselGap} />, [styles.transactionsCarouselGap]);
 
     const getItemType = (_item: Transaction, index: number) => {
         return index === MAX_PREVIEWS_NUMBER ? ITEM_LAYOUT_TYPE.SHOW_MORE : ITEM_LAYOUT_TYPE.PREVIEW;

From 2413563a2337ec093c2021390be5e8068f455499 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Tue, 17 Mar 2026 11:16:37 -0400
Subject: [PATCH 6/9] create individual components

---
 .../MoneyRequestReportPreviewContent.tsx      | 273 +++++++++---------
 1 file changed, 140 insertions(+), 133 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index f4430374c7b6e..1519b93ba7a57 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -764,159 +764,166 @@ function MoneyRequestReportPreviewContent({
     const isReportDeleted = action?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
     const formattedAmount = getTotalAmountForIOUReportPreviewButton(iouReport, policy, reportPreviewAction);
 
-    const activeReportPreviewAction = useMemo(() => {
-        switch (reportPreviewAction) {
-            case CONST.REPORT.REPORT_PREVIEW_ACTIONS.SUBMIT:
-                return (
-                    <AnimatedSubmitButton
-                        success={isWaitingForSubmissionFromCurrentUser}
-                        text={translate('common.submit')}
-                        onPress={() => {
-                            if (hasDynamicExternalWorkflow(policy) && !isDEWBetaEnabled) {
-                                showDEWModal();
-                                return;
-                            }
-                            startSubmittingAnimation();
-                            submitReport(
-                                iouReport,
-                                policy,
-                                currentUserAccountID,
-                                currentUserEmail,
-                                hasViolations,
-                                isASAPSubmitBetaEnabled,
-                                iouReportNextStep,
-                                userBillingGraceEndPeriods,
-                                amountOwed,
-                            );
-                        }}
-                        isSubmittingAnimationRunning={isSubmittingAnimationRunning}
-                        onAnimationFinish={stopAnimation}
-                        sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.SUBMIT_BUTTON}
-                    />
-                );
-            case CONST.REPORT.REPORT_PREVIEW_ACTIONS.APPROVE:
-                return (
-                    <Button
-                        text={translate('iou.approve')}
-                        success
-                        onPress={() => confirmApproval()}
-                        sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.APPROVE_BUTTON}
-                    />
-                );
-            case CONST.REPORT.REPORT_PREVIEW_ACTIONS.PAY:
-                return (
-                    <AnimatedSettlementButton
-                        onlyShowPayElsewhere={shouldShowOnlyPayElsewhere}
-                        isPaidAnimationRunning={isPaidAnimationRunning}
-                        isApprovedAnimationRunning={isApprovedAnimationRunning}
-                        canIOUBePaid={canIOUBePaidAndApproved || isPaidAnimationRunning}
-                        onAnimationFinish={stopAnimation}
-                        chatReportID={chatReportID}
-                        policyID={policy?.id}
-                        iouReport={iouReport}
-                        currency={iouReport?.currency}
-                        wrapperStyle={buttonMaxWidth}
-                        onPress={confirmPayment}
-                        onPaymentOptionsShow={onPaymentOptionsShow}
-                        onPaymentOptionsHide={onPaymentOptionsHide}
-                        formattedAmount={formattedAmount}
-                        confirmApproval={confirmApproval}
-                        enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
-                        shouldHidePaymentOptions={!shouldShowPayButton}
-                        kycWallAnchorAlignment={{
-                            horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
-                            vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
-                        }}
-                        paymentMethodDropdownAnchorAlignment={{
-                            horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
-                            vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
-                        }}
-                        isDisabled={isOffline && !canAllowSettlement}
-                        isLoading={!isOffline && !canAllowSettlement}
-                        sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.PAY_BUTTON}
-                    />
-                );
-            case CONST.REPORT.REPORT_PREVIEW_ACTIONS.EXPORT_TO_ACCOUNTING:
-                return connectedIntegration ? (
-                    <ExportWithDropdownMenu
-                        report={iouReport}
-                        reportActions={reportActions}
-                        connectionName={connectedIntegration}
-                        wrapperStyle={styles.flexReset}
-                        dropdownAnchorAlignment={{
-                            horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
-                            vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
-                        }}
-                        sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.EXPORT_BUTTON}
-                    />
-                ) : null;
-            case CONST.REPORT.REPORT_PREVIEW_ACTIONS.VIEW:
-                return (
-                    <Button
-                        text={translate('common.view')}
-                        onPress={() => {
-                            openReportFromPreview();
-                        }}
-                        sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.VIEW_BUTTON}
-                    />
-                );
-            case CONST.REPORT.REPORT_PREVIEW_ACTIONS.ADD_EXPENSE:
-                return (
-                    <ButtonWithDropdownMenu
-                        onPress={() => {}}
-                        shouldAlwaysShowDropdownMenu
-                        customText={translate('iou.addExpense')}
-                        options={addExpenseDropdownOptions}
-                        isSplitButton={false}
-                        anchorAlignment={{
-                            horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
-                            vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
-                        }}
-                        sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.ADD_EXPENSE_BUTTON}
-                    />
-                );
-            default:
-                return null;
-        }
+    const approveAction = useMemo(() => {
+        return (
+            <Button
+                text={translate('iou.approve')}
+                success
+                onPress={() => confirmApproval()}
+                sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.APPROVE_BUTTON}
+            />
+        );
+    }, [confirmApproval, translate]);
+
+    const submitAction = useMemo(() => {
+        return (
+            <AnimatedSubmitButton
+                success={isWaitingForSubmissionFromCurrentUser}
+                text={translate('common.submit')}
+                onPress={() => {
+                    if (hasDynamicExternalWorkflow(policy) && !isDEWBetaEnabled) {
+                        showDEWModal();
+                        return;
+                    }
+                    startSubmittingAnimation();
+                    submitReport(
+                        iouReport,
+                        policy,
+                        currentUserAccountID,
+                        currentUserEmail,
+                        hasViolations,
+                        isASAPSubmitBetaEnabled,
+                        iouReportNextStep,
+                        userBillingGraceEndPeriods,
+                        amountOwed,
+                    );
+                }}
+                isSubmittingAnimationRunning={isSubmittingAnimationRunning}
+                onAnimationFinish={stopAnimation}
+                sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.SUBMIT_BUTTON}
+            />
+        );
     }, [
-        addExpenseDropdownOptions,
         amountOwed,
+        currentUserAccountID,
+        currentUserEmail,
+        hasViolations,
+        iouReport,
+        iouReportNextStep,
+        isASAPSubmitBetaEnabled,
+        isDEWBetaEnabled,
+        isSubmittingAnimationRunning,
+        isWaitingForSubmissionFromCurrentUser,
+        policy,
+        showDEWModal,
+        startSubmittingAnimation,
+        stopAnimation,
+        translate,
+        userBillingGraceEndPeriods,
+    ]);
+
+    const payAction = useMemo(() => {
+        return (
+            <AnimatedSettlementButton
+                onlyShowPayElsewhere={shouldShowOnlyPayElsewhere}
+                isPaidAnimationRunning={isPaidAnimationRunning}
+                isApprovedAnimationRunning={isApprovedAnimationRunning}
+                canIOUBePaid={canIOUBePaidAndApproved || isPaidAnimationRunning}
+                onAnimationFinish={stopAnimation}
+                chatReportID={chatReportID}
+                policyID={policy?.id}
+                iouReport={iouReport}
+                currency={iouReport?.currency}
+                wrapperStyle={buttonMaxWidth}
+                onPress={confirmPayment}
+                onPaymentOptionsShow={onPaymentOptionsShow}
+                onPaymentOptionsHide={onPaymentOptionsHide}
+                formattedAmount={formattedAmount}
+                confirmApproval={confirmApproval}
+                enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
+                shouldHidePaymentOptions={!shouldShowPayButton}
+                kycWallAnchorAlignment={{
+                    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
+                    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+                }}
+                paymentMethodDropdownAnchorAlignment={{
+                    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+                    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+                }}
+                isDisabled={isOffline && !canAllowSettlement}
+                isLoading={!isOffline && !canAllowSettlement}
+                sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.PAY_BUTTON}
+            />
+        );
+    }, [
         buttonMaxWidth,
         canAllowSettlement,
         canIOUBePaidAndApproved,
         chatReportID,
         confirmApproval,
         confirmPayment,
-        connectedIntegration,
-        currentUserAccountID,
-        currentUserEmail,
         formattedAmount,
-        hasViolations,
         iouReport,
-        iouReportNextStep,
-        isASAPSubmitBetaEnabled,
         isApprovedAnimationRunning,
-        isDEWBetaEnabled,
         isOffline,
         isPaidAnimationRunning,
-        isSubmittingAnimationRunning,
-        isWaitingForSubmissionFromCurrentUser,
         onPaymentOptionsHide,
         onPaymentOptionsShow,
-        openReportFromPreview,
-        policy,
-        reportActions,
-        reportPreviewAction,
+        policy?.id,
         shouldShowOnlyPayElsewhere,
         shouldShowPayButton,
-        showDEWModal,
-        startSubmittingAnimation,
         stopAnimation,
-        styles.flexReset,
-        translate,
-        userBillingGraceEndPeriods,
     ]);
 
+    const exportAction = useMemo(() => {
+        if (!connectedIntegration) {
+            return null;
+        }
+
+        return (
+            <ExportWithDropdownMenu
+                report={iouReport}
+                reportActions={reportActions}
+                connectionName={connectedIntegration}
+                wrapperStyle={styles.flexReset}
+                dropdownAnchorAlignment={{
+                    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+                    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+                }}
+                sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.EXPORT_BUTTON}
+            />
+        );
+    }, [connectedIntegration, iouReport, reportActions, styles.flexReset]);
+
+    const viewAction = useMemo(() => {
+        return (
+            <Button
+                text={translate('common.view')}
+                onPress={() => {
+                    openReportFromPreview();
+                }}
+                sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.VIEW_BUTTON}
+            />
+        );
+    }, [openReportFromPreview, translate]);
+
+    const addExpenseAction = useMemo(() => {
+        return (
+            <ButtonWithDropdownMenu
+                onPress={() => {}}
+                shouldAlwaysShowDropdownMenu
+                customText={translate('iou.addExpense')}
+                options={addExpenseDropdownOptions}
+                isSplitButton={false}
+                anchorAlignment={{
+                    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+                    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+                }}
+                sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.ADD_EXPENSE_BUTTON}
+            />
+        );
+    }, [addExpenseDropdownOptions, translate]);
+
     const adjustScroll = useCallback(() => {
         // Workaround for a known React Native bug on Android (https://github.com/facebook/react-native/issues/27504):
         // When the FlatList is scrolled to the end and the last item is deleted, a blank space is left behind.

From d13e8aa7587cba1a40a8f2d34078db349582caf2 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Tue, 17 Mar 2026 11:17:56 -0400
Subject: [PATCH 7/9] add back a mapping

---
 .../MoneyRequestReportPreviewContent.tsx              | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 1519b93ba7a57..1355bc160cb13 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -936,6 +936,15 @@ function MoneyRequestReportPreviewContent({
         carouselRef.current?.scrollToEnd();
     }, [carouselTransactions.length]);
 
+    const reportPreviewActionView = {
+        [CONST.REPORT.REPORT_PREVIEW_ACTIONS.SUBMIT]: submitAction,
+        [CONST.REPORT.REPORT_PREVIEW_ACTIONS.APPROVE]: approveAction,
+        [CONST.REPORT.REPORT_PREVIEW_ACTIONS.PAY]: payAction,
+        [CONST.REPORT.REPORT_PREVIEW_ACTIONS.EXPORT_TO_ACCOUNTING]: exportAction,
+        [CONST.REPORT.REPORT_PREVIEW_ACTIONS.VIEW]: viewAction,
+        [CONST.REPORT.REPORT_PREVIEW_ACTIONS.ADD_EXPENSE]: addExpenseAction,
+    }[reportPreviewAction];
+
     const renderSeparator = useCallback(() => <View style={styles.transactionsCarouselGap} />, [styles.transactionsCarouselGap]);
 
     const getItemType = (_item: Transaction, index: number) => {
@@ -1121,7 +1130,7 @@ function MoneyRequestReportPreviewContent({
                                     <View style={[styles.expenseAndReportPreviewTextContainer]}>
                                         <View style={[totalAmountStyle, styles.justifyContentBetween, styles.gap4, StyleUtils.getMinimumHeight(variables.h28)]}>
                                             {/* height is needed to avoid flickering on animation */}
-                                            <View style={[buttonMaxWidth, styles.flex1, {height: variables.h40}]}>{activeReportPreviewAction}</View>
+                                            <View style={[buttonMaxWidth, styles.flex1, {height: variables.h40}]}>{reportPreviewActionView}</View>
                                             {transactions.length > 1 && !shouldShowAccessPlaceHolder && (
                                                 <View style={[styles.flexRow, shouldUseNarrowLayout ? styles.justifyContentBetween : styles.gap2, styles.alignItemsCenter]}>
                                                     <Text

From d4741751aebf9220a07a32b4b2437acce5a727f6 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Wed, 18 Mar 2026 11:23:02 -0400
Subject: [PATCH 8/9] remove manual memo

---
 .../MoneyRequestReportPreviewContent.tsx      | 321 +++++++-----------
 1 file changed, 124 insertions(+), 197 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 256e6bad0e2c5..91c9e0b45904d 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -350,7 +350,7 @@ function MoneyRequestReportPreviewContent({
         });
     }, [showConfirmModal, translate]);
 
-    const confirmApproval = useCallback(() => {
+    const confirmApproval = () => {
         if (hasDynamicExternalWorkflow(policy) && !isDEWBetaEnabled) {
             showDEWModal();
             return;
@@ -376,24 +376,7 @@ function MoneyRequestReportPreviewContent({
                 onApproved: startApprovedAnimation,
             });
         }
-    }, [
-        activePolicy,
-        amountOwed,
-        betas,
-        currentUserAccountID,
-        currentUserEmail,
-        hasViolations,
-        iouReport,
-        iouReportNextStep,
-        isASAPSubmitBetaEnabled,
-        isDEWBetaEnabled,
-        isDelegateAccessRestricted,
-        policy,
-        showDEWModal,
-        showDelegateNoAccessModal,
-        startApprovedAnimation,
-        userBillingGraceEndPeriods,
-    ]);
+    };
 
     const previewMessage = useMemo(() => {
         if (isScanning) {
@@ -642,31 +625,27 @@ function MoneyRequestReportPreviewContent({
         });
     };
 
-    const renderItem = useCallback(
-        (itemInfo: ListRenderItemInfo<Transaction>) => {
-            if (itemInfo.index > MAX_PREVIEWS_NUMBER - 1) {
-                return (
-                    <View
-                        style={[styles.p5, styles.justifyContentCenter]}
-                        onLayout={(e) => setFooterWidth(e.nativeEvent.layout.width)}
-                    >
-                        <Text style={{color: colors.blue600}}>
-                            +{transactions.length - MAX_PREVIEWS_NUMBER} {translate('common.more').toLowerCase()}
-                        </Text>
-                    </View>
-                );
-            }
-            return renderTransactionItem(itemInfo);
-        },
-        [renderTransactionItem, styles.justifyContentCenter, styles.p5, transactions.length, translate],
-    );
+    const renderItem = (itemInfo: ListRenderItemInfo<Transaction>) => {
+        if (itemInfo.index > MAX_PREVIEWS_NUMBER - 1) {
+            return (
+                <View
+                    style={[styles.p5, styles.justifyContentCenter]}
+                    onLayout={(e) => setFooterWidth(e.nativeEvent.layout.width)}
+                >
+                    <Text style={{color: colors.blue600}}>
+                        +{transactions.length - MAX_PREVIEWS_NUMBER} {translate('common.more').toLowerCase()}
+                    </Text>
+                </View>
+            );
+        }
+        return renderTransactionItem(itemInfo);
+    };
 
     // The button should expand up to transaction width
-    const buttonMaxWidth = useMemo(() => {
-        return !shouldUseNarrowLayout && reportPreviewStyles.transactionPreviewCarouselStyle.width >= CONST.REPORT.TRANSACTION_PREVIEW.CAROUSEL.MIN_WIDE_WIDTH
+    const buttonMaxWidth =
+        !shouldUseNarrowLayout && reportPreviewStyles.transactionPreviewCarouselStyle.width >= CONST.REPORT.TRANSACTION_PREVIEW.CAROUSEL.MIN_WIDE_WIDTH
             ? {maxWidth: reportPreviewStyles.transactionPreviewCarouselStyle.width}
             : {};
-    }, [reportPreviewStyles.transactionPreviewCarouselStyle.width, shouldUseNarrowLayout]);
 
     useEffect(() => {
         if (
@@ -774,165 +753,113 @@ function MoneyRequestReportPreviewContent({
     const isReportDeleted = action?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
     const formattedAmount = getTotalAmountForIOUReportPreviewButton(iouReport, policy, reportPreviewAction);
 
-    const approveAction = useMemo(() => {
-        return (
-            <Button
-                text={translate('iou.approve')}
-                success
-                onPress={() => confirmApproval()}
-                sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.APPROVE_BUTTON}
-            />
-        );
-    }, [confirmApproval, translate]);
-
-    const submitAction = useMemo(() => {
-        return (
-            <AnimatedSubmitButton
-                success={isWaitingForSubmissionFromCurrentUser}
-                text={translate('common.submit')}
-                onPress={() => {
-                    if (hasDynamicExternalWorkflow(policy) && !isDEWBetaEnabled) {
-                        showDEWModal();
-                        return;
-                    }
-                    submitReport({
-                        expenseReport: iouReport,
-                        policy,
-                        currentUserAccountIDParam: currentUserAccountID,
-                        currentUserEmailParam: currentUserEmail,
-                        hasViolations,
-                        isASAPSubmitBetaEnabled,
-                        expenseReportCurrentNextStepDeprecated: iouReportNextStep,
-                        userBillingGraceEndPeriods,
-                        amountOwed,
-                        onSubmitted: startSubmittingAnimation,
-                    });
-                }}
-                isSubmittingAnimationRunning={isSubmittingAnimationRunning}
-                onAnimationFinish={stopAnimation}
-                sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.SUBMIT_BUTTON}
-            />
-        );
-    }, [
-        amountOwed,
-        currentUserAccountID,
-        currentUserEmail,
-        hasViolations,
-        iouReport,
-        iouReportNextStep,
-        isASAPSubmitBetaEnabled,
-        isDEWBetaEnabled,
-        isSubmittingAnimationRunning,
-        isWaitingForSubmissionFromCurrentUser,
-        policy,
-        showDEWModal,
-        startSubmittingAnimation,
-        stopAnimation,
-        translate,
-        userBillingGraceEndPeriods,
-    ]);
+    const approveAction = (
+        <Button
+            text={translate('iou.approve')}
+            success
+            onPress={() => confirmApproval()}
+            sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.APPROVE_BUTTON}
+        />
+    );
 
-    const payAction = useMemo(() => {
-        return (
-            <AnimatedSettlementButton
-                onlyShowPayElsewhere={shouldShowOnlyPayElsewhere}
-                isPaidAnimationRunning={isPaidAnimationRunning}
-                isApprovedAnimationRunning={isApprovedAnimationRunning}
-                canIOUBePaid={canIOUBePaidAndApproved || isPaidAnimationRunning}
-                onAnimationFinish={stopAnimation}
-                chatReportID={chatReportID}
-                policyID={policy?.id}
-                iouReport={iouReport}
-                currency={iouReport?.currency}
-                wrapperStyle={buttonMaxWidth}
-                onPress={confirmPayment}
-                onPaymentOptionsShow={onPaymentOptionsShow}
-                onPaymentOptionsHide={onPaymentOptionsHide}
-                formattedAmount={formattedAmount}
-                confirmApproval={confirmApproval}
-                enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
-                shouldHidePaymentOptions={!shouldShowPayButton}
-                kycWallAnchorAlignment={{
-                    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
-                    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
-                }}
-                paymentMethodDropdownAnchorAlignment={{
-                    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
-                    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
-                }}
-                isDisabled={isOffline && !canAllowSettlement}
-                isLoading={!isOffline && !canAllowSettlement}
-                sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.PAY_BUTTON}
-            />
-        );
-    }, [
-        buttonMaxWidth,
-        canAllowSettlement,
-        canIOUBePaidAndApproved,
-        chatReportID,
-        confirmApproval,
-        confirmPayment,
-        formattedAmount,
-        iouReport,
-        isApprovedAnimationRunning,
-        isOffline,
-        isPaidAnimationRunning,
-        onPaymentOptionsHide,
-        onPaymentOptionsShow,
-        policy?.id,
-        shouldShowOnlyPayElsewhere,
-        shouldShowPayButton,
-        stopAnimation,
-    ]);
+    const submitAction = (
+        <AnimatedSubmitButton
+            success={isWaitingForSubmissionFromCurrentUser}
+            text={translate('common.submit')}
+            onPress={() => {
+                if (hasDynamicExternalWorkflow(policy) && !isDEWBetaEnabled) {
+                    showDEWModal();
+                    return;
+                }
+                submitReport({
+                    expenseReport: iouReport,
+                    policy,
+                    currentUserAccountIDParam: currentUserAccountID,
+                    currentUserEmailParam: currentUserEmail,
+                    hasViolations,
+                    isASAPSubmitBetaEnabled,
+                    expenseReportCurrentNextStepDeprecated: iouReportNextStep,
+                    userBillingGraceEndPeriods,
+                    amountOwed,
+                    onSubmitted: startSubmittingAnimation,
+                });
+            }}
+            isSubmittingAnimationRunning={isSubmittingAnimationRunning}
+            onAnimationFinish={stopAnimation}
+            sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.SUBMIT_BUTTON}
+        />
+    );
+    const payAction = (
+        <AnimatedSettlementButton
+            onlyShowPayElsewhere={shouldShowOnlyPayElsewhere}
+            isPaidAnimationRunning={isPaidAnimationRunning}
+            isApprovedAnimationRunning={isApprovedAnimationRunning}
+            canIOUBePaid={canIOUBePaidAndApproved || isPaidAnimationRunning}
+            onAnimationFinish={stopAnimation}
+            chatReportID={chatReportID}
+            policyID={policy?.id}
+            iouReport={iouReport}
+            currency={iouReport?.currency}
+            wrapperStyle={buttonMaxWidth}
+            onPress={confirmPayment}
+            onPaymentOptionsShow={onPaymentOptionsShow}
+            onPaymentOptionsHide={onPaymentOptionsHide}
+            formattedAmount={formattedAmount}
+            confirmApproval={confirmApproval}
+            enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
+            shouldHidePaymentOptions={!shouldShowPayButton}
+            kycWallAnchorAlignment={{
+                horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
+                vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+            }}
+            paymentMethodDropdownAnchorAlignment={{
+                horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+                vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+            }}
+            isDisabled={isOffline && !canAllowSettlement}
+            isLoading={!isOffline && !canAllowSettlement}
+            sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.PAY_BUTTON}
+        />
+    );
 
-    const exportAction = useMemo(() => {
-        if (!connectedIntegration) {
-            return null;
-        }
+    const exportAction = connectedIntegration ? (
+        <ExportWithDropdownMenu
+            report={iouReport}
+            reportActions={reportActions}
+            connectionName={connectedIntegration}
+            wrapperStyle={styles.flexReset}
+            dropdownAnchorAlignment={{
+                horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+                vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+            }}
+            sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.EXPORT_BUTTON}
+        />
+    ) : null;
+
+    const viewAction = (
+        <Button
+            text={translate('common.view')}
+            onPress={() => {
+                openReportFromPreview();
+            }}
+            sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.VIEW_BUTTON}
+        />
+    );
 
-        return (
-            <ExportWithDropdownMenu
-                report={iouReport}
-                reportActions={reportActions}
-                connectionName={connectedIntegration}
-                wrapperStyle={styles.flexReset}
-                dropdownAnchorAlignment={{
-                    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
-                    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
-                }}
-                sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.EXPORT_BUTTON}
-            />
-        );
-    }, [connectedIntegration, iouReport, reportActions, styles.flexReset]);
-
-    const viewAction = useMemo(() => {
-        return (
-            <Button
-                text={translate('common.view')}
-                onPress={() => {
-                    openReportFromPreview();
-                }}
-                sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.VIEW_BUTTON}
-            />
-        );
-    }, [openReportFromPreview, translate]);
-
-    const addExpenseAction = useMemo(() => {
-        return (
-            <ButtonWithDropdownMenu
-                onPress={() => {}}
-                shouldAlwaysShowDropdownMenu
-                customText={translate('iou.addExpense')}
-                options={addExpenseDropdownOptions}
-                isSplitButton={false}
-                anchorAlignment={{
-                    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
-                    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
-                }}
-                sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.ADD_EXPENSE_BUTTON}
-            />
-        );
-    }, [addExpenseDropdownOptions, translate]);
+    const addExpenseAction = (
+        <ButtonWithDropdownMenu
+            onPress={() => {}}
+            shouldAlwaysShowDropdownMenu
+            customText={translate('iou.addExpense')}
+            options={addExpenseDropdownOptions}
+            isSplitButton={false}
+            anchorAlignment={{
+                horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+                vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+            }}
+            sentryLabel={CONST.SENTRY_LABEL.REPORT_PREVIEW.ADD_EXPENSE_BUTTON}
+        />
+    );
 
     const adjustScroll = useCallback(() => {
         // Workaround for a known React Native bug on Android (https://github.com/facebook/react-native/issues/27504):
@@ -955,7 +882,7 @@ function MoneyRequestReportPreviewContent({
         [CONST.REPORT.REPORT_PREVIEW_ACTIONS.ADD_EXPENSE]: addExpenseAction,
     }[reportPreviewAction];
 
-    const renderSeparator = useCallback(() => <View style={styles.transactionsCarouselGap} />, [styles.transactionsCarouselGap]);
+    const renderSeparator = () => <View style={styles.transactionsCarouselGap} />;
 
     const getItemType = (_item: Transaction, index: number) => {
         return index === MAX_PREVIEWS_NUMBER ? ITEM_LAYOUT_TYPE.SHOW_MORE : ITEM_LAYOUT_TYPE.PREVIEW;

From 161c682eddd3a2f3b68deec084207874ebace7c3 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Fri, 20 Mar 2026 07:50:32 -0400
Subject: [PATCH 9/9] use a switch instead

---
 .../MoneyRequestReportPreviewContent.tsx      | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index 91c9e0b45904d..b8fbd993074a7 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -873,14 +873,24 @@ function MoneyRequestReportPreviewContent({
         carouselRef.current?.scrollToEnd();
     }, [carouselTransactions.length]);
 
-    const reportPreviewActionView = {
-        [CONST.REPORT.REPORT_PREVIEW_ACTIONS.SUBMIT]: submitAction,
-        [CONST.REPORT.REPORT_PREVIEW_ACTIONS.APPROVE]: approveAction,
-        [CONST.REPORT.REPORT_PREVIEW_ACTIONS.PAY]: payAction,
-        [CONST.REPORT.REPORT_PREVIEW_ACTIONS.EXPORT_TO_ACCOUNTING]: exportAction,
-        [CONST.REPORT.REPORT_PREVIEW_ACTIONS.VIEW]: viewAction,
-        [CONST.REPORT.REPORT_PREVIEW_ACTIONS.ADD_EXPENSE]: addExpenseAction,
-    }[reportPreviewAction];
+    const reportPreviewActionView = (() => {
+        switch (reportPreviewAction) {
+            case CONST.REPORT.REPORT_PREVIEW_ACTIONS.SUBMIT:
+                return submitAction;
+            case CONST.REPORT.REPORT_PREVIEW_ACTIONS.APPROVE:
+                return approveAction;
+            case CONST.REPORT.REPORT_PREVIEW_ACTIONS.PAY:
+                return payAction;
+            case CONST.REPORT.REPORT_PREVIEW_ACTIONS.EXPORT_TO_ACCOUNTING:
+                return exportAction;
+            case CONST.REPORT.REPORT_PREVIEW_ACTIONS.VIEW:
+                return viewAction;
+            case CONST.REPORT.REPORT_PREVIEW_ACTIONS.ADD_EXPENSE:
+                return addExpenseAction;
+            default:
+                return null;
+        }
+    })();
 
     const renderSeparator = () => <View style={styles.transactionsCarouselGap} />;