diff --git a/src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx b/src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx index cd8eeb187a08..3753453aa4b2 100644 --- a/src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx +++ b/src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx @@ -1,5 +1,5 @@ import type {ForwardedRef} from 'react'; -import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; +import React, {forwardRef, useCallback, useEffect, useMemo, useState} from 'react'; import type {FlatListProps, ListRenderItem, ListRenderItemInfo, FlatList as RNFlatList, ScrollViewProps} from 'react-native'; import FlatList from '@components/FlatList'; import usePrevious from '@hooks/usePrevious'; @@ -98,37 +98,11 @@ function BaseInvertedFlatList(props: BaseInvertedFlatListProps, ref: Forwa return config; }, [shouldEnableAutoScrollToTopThreshold, isLoadingData, wasLoadingData]); - const listRef = useRef(null); - useImperativeHandle(ref, () => { - // If we're trying to scroll at the start of the list we need to make sure to - // render all items. - const scrollToOffsetFn: RNFlatList['scrollToOffset'] = (params) => { - if (params.offset === 0) { - setCurrentDataId(null); - } - requestAnimationFrame(() => { - listRef.current?.scrollToOffset(params); - }); - }; - - return new Proxy( - {}, - { - get: (_target, prop) => { - if (prop === 'scrollToOffset') { - return scrollToOffsetFn; - } - return listRef.current?.[prop as keyof RNFlatList]; - }, - }, - ) as RNFlatList; - }); - return ( action.reportActionID === reportActionID) : -1; - const isLinkedActionCloseToNewest = indexOfLinkedAction < IS_CLOSE_TO_NEWEST_THRESHOLD; - const [isFloatingMessageCounterVisible, setIsFloatingMessageCounterVisible] = useState(!isLinkedActionCloseToNewest); + const isLastPendingActionIsDelete = sortedReportActions?.at(0)?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE; - useEffect(() => { - if (isLinkedActionCloseToNewest) { - return; - } - setIsFloatingMessageCounterVisible(true); - }, [isLinkedActionCloseToNewest, route]); + const [isFloatingMessageCounterVisible, setIsFloatingMessageCounterVisible] = useState(false); useEffect(() => { if ( @@ -411,7 +401,6 @@ function ReportActionsList({ reportActionSize.current > sortedVisibleReportActions.length && hasNewestReportAction ) { - setIsFloatingMessageCounterVisible(false); reportScrollManager.scrollToBottom(); } previousLastIndex.current = lastActionIndex; @@ -450,7 +439,6 @@ function ReportActionsList({ return; } InteractionManager.runAfterInteractions(() => { - setIsFloatingMessageCounterVisible(false); reportScrollManager.scrollToBottom(); }); // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps @@ -491,7 +479,6 @@ function ReportActionsList({ if (isNewMessageDisplayed) { InteractionManager.runAfterInteractions(() => { - setIsFloatingMessageCounterVisible(false); reportScrollManager.scrollToBottom(); setPendingBottomScroll(false); }); @@ -553,8 +540,6 @@ function ReportActionsList({ }; const scrollToBottomAndMarkReportAsRead = useCallback(() => { - setIsFloatingMessageCounterVisible(false); - if (!hasNewestReportAction) { Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(report.reportID)); openReport(report.reportID); @@ -782,12 +767,15 @@ function ReportActionsList({ loadOlderChats(false); }, [loadOlderChats]); + // When performing comment linking, initially 25 items are added to the list. Subsequent fetches add 15 items from the cache or 50 items from the server. + // This is to ensure that the user is able to see the 'scroll to newer comments' button when they do comment linking and have not reached the end of the list yet. + const canScrollToNewerComments = !isLoadingInitialReportActions && !hasNewestReportAction && sortedReportActions.length > 25 && !isLastPendingActionIsDelete; const [reportActionsListTestID, reportActionsListFSClass] = getChatFSAttributes(participantsContext, 'ReportActionsList', report); return ( <>