diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx index 142e592bbf49..956c195ec08b 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 {hasPendingUI, isCardTransaction, isPending} from '@libs/TransactionUtils'; import colors from '@styles/theme/colors'; import variables from '@styles/variables'; @@ -330,6 +331,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); @@ -570,6 +579,18 @@ 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; + } + prevCarouselTransactionLength.current = carouselTransactions.length; + carouselRef.current?.scrollToEnd(); + }, [carouselTransactions.length]); + return ( } ListHeaderComponent={} 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;