From 6aa95faa47493d65d8015b0197b3161a06ce548b Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Wed, 14 May 2025 23:02:18 +0800
Subject: [PATCH 1/2] fix scroll is not adjusted when the last item is removed

---
 .../MoneyRequestReportPreviewContent.tsx       | 18 ++++++++++++++++++
 src/libs/shouldAdjustScroll/index.android.ts   |  1 +
 src/libs/shouldAdjustScroll/index.ts           |  1 +
 3 files changed, 20 insertions(+)
 create mode 100644 src/libs/shouldAdjustScroll/index.android.ts
 create mode 100644 src/libs/shouldAdjustScroll/index.ts

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index de454178547a..8361f0c68d1f 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -59,6 +59,7 @@ import {
     isTripRoom as isTripRoomReportUtils,
     isWaitingForSubmissionFromCurrentUser as isWaitingForSubmissionFromCurrentUserReportUtils,
 } from '@libs/ReportUtils';
+import shouldAdjustScroll from '@libs/shouldAdjustScroll';
 import {getMerchant, hasPendingUI, isCardTransaction, isPartialMerchant, isPending, shouldShowBrokenConnectionViolationForMultipleTransactions} from '@libs/TransactionUtils';
 import colors from '@styles/theme/colors';
 import variables from '@styles/variables';
@@ -343,6 +344,14 @@ function MoneyRequestReportPreviewContent({
     }, [isApproved, isApprovedAnimationRunning, thumbsUpScale]);
 
     const carouselTransactions = transactions.slice(0, 11);
+    const prevCarouselTransactionLength = useRef(0);
+
+    useEffect(() => {
+        return () => {
+            prevCarouselTransactionLength.current = carouselTransactions.length;
+        };
+    }, [carouselTransactions.length]);
+
     const [currentIndex, setCurrentIndex] = useState(0);
     const [currentVisibleItems, setCurrentVisibleItems] = useState([0]);
     const [footerWidth, setFooterWidth] = useState(0);
@@ -580,6 +589,14 @@ function MoneyRequestReportPreviewContent({
         ),
     };
 
+    const adjustScroll = useCallback(() => {
+        if (carouselTransactions.length >= prevCarouselTransactionLength.current || !shouldAdjustScroll) {
+            return;
+        }
+        prevCarouselTransactionLength.current = carouselTransactions.length;
+        carouselRef.current?.scrollToEnd();
+    }, [carouselTransactions.length]);
+
     return (
         <View onLayout={onLayout}>
             <OfflineWithFeedback
@@ -705,6 +722,7 @@ function MoneyRequestReportPreviewContent({
                                             showsHorizontalScrollIndicator={false}
                                             renderItem={renderFlatlistItem}
                                             onViewableItemsChanged={onViewableItemsChanged}
+                                            onEndReached={adjustScroll}
                                             viewabilityConfig={viewabilityConfig}
                                             ListFooterComponent={<View style={styles.pl2} />}
                                             ListHeaderComponent={<View style={styles.pr2} />}
diff --git a/src/libs/shouldAdjustScroll/index.android.ts b/src/libs/shouldAdjustScroll/index.android.ts
new file mode 100644
index 000000000000..ff3177babdde
--- /dev/null
+++ b/src/libs/shouldAdjustScroll/index.android.ts
@@ -0,0 +1 @@
+export default true;
diff --git a/src/libs/shouldAdjustScroll/index.ts b/src/libs/shouldAdjustScroll/index.ts
new file mode 100644
index 000000000000..33136544dba2
--- /dev/null
+++ b/src/libs/shouldAdjustScroll/index.ts
@@ -0,0 +1 @@
+export default false;

From d7212d858ca7b5a04da1b13a17c3a1161d1a6b15 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Mon, 19 May 2025 23:39:53 +0800
Subject: [PATCH 2/2] add comment

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

diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
index d01ebad89a45..956c195ec08b 100644
--- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
+++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
@@ -580,6 +580,10 @@ function MoneyRequestReportPreviewContent({
     };
 
     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.
+        // To fix this, we detect when onEndReached is triggered due to an item deletion,
+        // and programmatically scroll to the end to fill the space.
         if (carouselTransactions.length >= prevCarouselTransactionLength.current || !shouldAdjustScroll) {
             return;
         }