Fix scrolling to bottom list on MoneyRequestReportView

src/CONST.ts

@@ -1342,7 +1342,7 @@ const CONST = {
                 },
             },
             THREAD_DISABLED: ['CREATED'],
-            // Used when displaying reportActions list to handle of unread messages icon/button
+            // Used when displaying reportActions list to handle unread messages icon/button
             SCROLL_VERTICAL_OFFSET_THRESHOLD: 200,
             ACTION_VISIBLE_THRESHOLD: 250,
         },

src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

@@ -180,6 +180,7 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions,
                             id={transaction.transactionID}
                             style={[pressableStyle]}
                             onMouseLeave={handleMouseLeave}
+                            key={transaction.transactionID}
                         >
                             <TransactionItemRow
                                 transactionItem={transaction}

src/components/Navigation/TopBar.tsx

@@ -22,16 +22,16 @@
     activeWorkspaceID?: string;
     shouldDisplaySearch?: boolean;
     shouldDisplayHelpButton?: boolean;
-    cancelSearch?: () => void;
     shouldShowLoadingBar?: boolean;
+    cancelSearch?: () => void;
 };
 
 function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true, shouldDisplayHelpButton = true, cancelSearch, shouldShowLoadingBar = false}: TopBarProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const policy = usePolicy(activeWorkspaceID);
     const [session] = useOnyx(ONYXKEYS.SESSION, {selector: (sessionValue) => sessionValue && {authTokenType: sessionValue.authTokenType}});
     const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA);
     const isAnonymousUser = isAnonymousUserUtil(session);
     const {canUseLeftHandBar} = usePermissions();
 

src/hooks/useReportScrollManager/index.native.ts

@@ -1,4 +1,6 @@
 import {useCallback, useContext} from 'react';
+// eslint-disable-next-line no-restricted-imports
+import type {ScrollView} from 'react-native';
 import {ActionListContext} from '@pages/home/ReportScreenContext';
 import type ReportScrollManagerData from './types';
 
@@ -41,6 +43,13 @@ function useReportScrollManager(): ReportScrollManagerData {
             return;
         }
 
+        const scrollViewRef = flatListRef.current.getNativeScrollRef();
+        // Try to scroll on underlying scrollView if available, fallback to usual listRef
+        if (scrollViewRef && 'scrollToEnd' in scrollViewRef) {
+            (scrollViewRef as ScrollView).scrollToEnd({animated: false});
+            return;
+        }
+
         flatListRef.current.scrollToEnd({animated: false});
     }, [flatListRef]);
 

src/pages/Search/SearchMoneyRequestReportPage.tsx

@@ -47,11 +47,11 @@
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportIDFromRoute}`, {allowStaleData: true});
     const [reportMetadata = defaultReportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportIDFromRoute}`);
     const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {allowStaleData: true, initialValue: {}});
     const policy = policies?.[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`];
     const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP);
 
     const {isEditingDisabled, isCurrentReportLoadedFromOnyx} = useIsReportReadyToDisplay(report, reportIDFromRoute);
 
     const [scrollPosition, setScrollPosition] = useState<ScrollPosition>({});
     const flatListRef = useRef<FlatList>(null);
     const reactionListRef = useRef<ReactionListRef>(null);
@@ -84,30 +84,34 @@
 
     if (shouldUseNarrowLayout) {
         return (
-            <ScreenWrapper
-                testID={SearchMoneyRequestReportPage.displayName}
-                shouldEnableMaxHeight
-                offlineIndicatorStyle={styles.mtAuto}
-                headerGapStyles={styles.searchHeaderGap}
-            >
-                <FullPageNotFoundView
-                    shouldShow={shouldShowNotFoundPage}
-                    subtitleKey="notFound.noAccess"
-                    subtitleStyle={[styles.textSupporting]}
-                    shouldDisplaySearchRouter
-                    shouldShowBackButton={shouldUseNarrowLayout}
-                    onBackButtonPress={Navigation.goBack}
-                    linkKey="notFound.noAccess"
-                >
-                    <MoneyRequestReportView
-                        report={report}
-                        reportMetadata={reportMetadata}
-                        policy={policy}
-                        shouldDisplayReportFooter={isCurrentReportLoadedFromOnyx}
-                        backToRoute={route.params.backTo}
-                    />
-                </FullPageNotFoundView>
-            </ScreenWrapper>
+            <ActionListContext.Provider value={actionListValue}>
+                <ReactionListContext.Provider value={reactionListRef}>
+                    <ScreenWrapper
+                        testID={SearchMoneyRequestReportPage.displayName}
+                        shouldEnableMaxHeight
+                        offlineIndicatorStyle={styles.mtAuto}
+                        headerGapStyles={styles.searchHeaderGap}
+                    >
+                        <FullPageNotFoundView
+                            shouldShow={shouldShowNotFoundPage}
+                            subtitleKey="notFound.noAccess"
+                            subtitleStyle={[styles.textSupporting]}
+                            shouldDisplaySearchRouter
+                            shouldShowBackButton={shouldUseNarrowLayout}
+                            onBackButtonPress={Navigation.goBack}
+                            linkKey="notFound.noAccess"
+                        >
+                            <MoneyRequestReportView
+                                report={report}
+                                reportMetadata={reportMetadata}
+                                policy={policy}
+                                shouldDisplayReportFooter={isCurrentReportLoadedFromOnyx}
+                                backToRoute={route.params.backTo}
+                            />
+                        </FullPageNotFoundView>
+                    </ScreenWrapper>
+                </ReactionListContext.Provider>
+            </ActionListContext.Provider>
         );
     }
 
@@ -127,6 +131,7 @@
                                 <TopBar
                                     breadcrumbLabel={translate('common.reports')}
                                     shouldDisplaySearch={false}
+                                    shouldShowLoadingBar={false}
                                 />
                                 <SearchTypeMenu queryJSON={undefined} />
                             </View>

src/pages/home/report/ReportActionsList.tsx

@@ -1,7 +1,5 @@
 import type {ListRenderItemInfo} from '@react-native/virtualized-lists/Lists/VirtualizedList';
 import {useIsFocused, useRoute} from '@react-navigation/native';
-// eslint-disable-next-line lodash/import-scope
-import type {DebouncedFunc} from 'lodash';
 import React, {memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
 import type {LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent} from 'react-native';
 import {DeviceEventEmitter, InteractionManager, View} from 'react-native';
@@ -31,11 +29,9 @@ import {
     isConsecutiveActionMadeByPreviousActor,
     isConsecutiveChronosAutomaticTimerAction,
     isDeletedParentAction,
-    isReportActionUnread,
     isReportPreviewAction,
     isReversedTransaction,
     isTransactionThread,
-    shouldHideNewMarker,
     wasMessageReceivedWhileOffline,
 } from '@libs/ReportActionsUtils';
 import {
@@ -65,8 +61,7 @@ import FloatingMessageCounter from './FloatingMessageCounter';
 import getInitialNumToRender from './getInitialNumReportActionsToRender';
 import ListBoundaryLoader from './ListBoundaryLoader';
 import ReportActionsListItemRenderer from './ReportActionsListItemRenderer';
-
-type LoadNewerChats = DebouncedFunc<(params: {distanceFromStart: number}) => void>;
+import shouldDisplayNewMarkerOnReportAction from './shouldDisplayNewMarkerOnReportAction';
 
 type ReportActionsListProps = {
     /** The report currently being looked at */
@@ -237,62 +232,30 @@ function ReportActionsList({
      * The reportActionID the unread marker should display above
      */
     const unreadMarkerReportActionID = useMemo(() => {
-        const shouldDisplayNewMarker = (message: OnyxTypes.ReportAction, index: number): boolean => {
-            const nextMessage = sortedVisibleReportActions.at(index + 1);
-            const isNextMessageUnread = !!nextMessage && isReportActionUnread(nextMessage, unreadMarkerTime);
-
-            // If the current message is the earliest message received while offline, we want to display the unread marker above this message.
-            const isEarliestReceivedOfflineMessage = index === earliestReceivedOfflineMessageIndex;
-            if (isEarliestReceivedOfflineMessage && !isNextMessageUnread) {
-                return true;
-            }
-
-            // If the unread marker should be hidden or is not within the visible area, don't show the unread marker.
-            if (shouldHideNewMarker(message)) {
-                return false;
-            }
-
-            const isCurrentMessageUnread = isReportActionUnread(message, unreadMarkerTime);
-
-            // If the current message is read or the next message is unread, don't show the unread marker.
-            if (!isCurrentMessageUnread || isNextMessageUnread) {
-                return false;
-            }
-
-            const isPendingAdd = (action: OnyxTypes.ReportAction) => {
-                return action?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD;
-            };
-
-            // If no unread marker exists, don't set an unread marker for newly added messages from the current user.
-            const isFromCurrentUser = accountID === (isReportPreviewAction(message) ? message.childLastActorAccountID : message.actorAccountID);
-            const isNewMessage = !prevSortedVisibleReportActionsObjects[message.reportActionID];
-
-            // The unread marker will show if the action's `created` time is later than `unreadMarkerTime`.
-            // The `unreadMarkerTime` has already been updated to match the optimistic action created time,
-            // but once the new action is saved on the backend, the actual created time will be later than the optimistic one.
-            // Therefore, we also need to prevent the unread marker from appearing for previously optimistic actions.
-            const isPreviouslyOptimistic =
-                (isPendingAdd(prevSortedVisibleReportActionsObjects[message.reportActionID]) && !isPendingAdd(message)) ||
-                (!!prevSortedVisibleReportActionsObjects[message.reportActionID]?.isOptimisticAction && !message.isOptimisticAction);
-            const shouldIgnoreUnreadForCurrentUserMessage = !prevUnreadMarkerReportActionID.current && isFromCurrentUser && (isNewMessage || isPreviouslyOptimistic);
-
-            if (isFromCurrentUser) {
-                return !shouldIgnoreUnreadForCurrentUserMessage;
-            }
-
-            return !isNewMessage || scrollingVerticalOffset.current >= CONST.REPORT.ACTIONS.ACTION_VISIBLE_THRESHOLD;
-        };
-
-        // If there are message that were recevied while offline,
-        // we can skip checking all messages later than the earliest recevied offline message.
+        // If there are message that were received while offline,
+        // we can skip checking all messages later than the earliest received offline message.
         const startIndex = earliestReceivedOfflineMessageIndex ?? 0;
 
         // Scan through each visible report action until we find the appropriate action to show the unread marker
         for (let index = startIndex; index < sortedVisibleReportActions.length; index++) {
             const reportAction = sortedVisibleReportActions.at(index);
+            const nextAction = sortedVisibleReportActions.at(index + 1);
+            const isEarliestReceivedOfflineMessage = index === earliestReceivedOfflineMessageIndex;
 
             // eslint-disable-next-line react-compiler/react-compiler
-            if (reportAction && shouldDisplayNewMarker(reportAction, index)) {
+            const shouldDisplayNewMarker =
+                reportAction &&
+                shouldDisplayNewMarkerOnReportAction({
+                    message: reportAction,
+                    nextMessage: nextAction,
+                    isEarliestReceivedOfflineMessage,
+                    accountID,
+                    prevSortedVisibleReportActionsObjects,
+                    unreadMarkerTime,
+                    scrollingVerticalOffset: scrollingVerticalOffset.current,
+                    prevUnreadMarkerReportActionID: prevUnreadMarkerReportActionID.current,
+                });
+            if (shouldDisplayNewMarker) {
                 return reportAction.reportActionID;
             }
         }
@@ -774,4 +737,4 @@ ReportActionsList.displayName = 'ReportActionsList';
 
 export default memo(ReportActionsList);
 
-export type {LoadNewerChats, ReportActionsListProps};
+export type {ReportActionsListProps};

src/pages/home/report/shouldDisplayNewMarkerOnReportAction.ts

@@ -0,0 +1,88 @@
+import {isReportActionUnread, isReportPreviewAction, shouldHideNewMarker} from '@libs/ReportActionsUtils';
+import CONST from '@src/CONST';
+import type * as OnyxTypes from '@src/types/onyx';
+
+type ShouldDisplayNewMarkerOnReportActionParams = {
+    /** The reportAction for which the check is done */
+    message: OnyxTypes.ReportAction;
+
+    /** The reportAction adjacent to `message` (either previous or next one) */
+    nextMessage: OnyxTypes.ReportAction | undefined;
+
+    /** Is it the earliestReceivedOfflineMessage */
+    isEarliestReceivedOfflineMessage: boolean;
+
+    /** Time for unreadMarker */
+    unreadMarkerTime: string | undefined;
+
+    /** User accountID */
+    accountID: number | undefined;
+
+    /** Map of reportActions saved via usePrev */
+    prevSortedVisibleReportActionsObjects: Record<string, OnyxTypes.ReportAction>;
+
+    /** Current value for vertical offset */
+    scrollingVerticalOffset: number;
+
+    /** The id of reportAction that was last marked as read */
+    prevUnreadMarkerReportActionID: string | null;
+};
+
+/**
+ * This function decides whether the given report action (message) should have the new marker indicator displayed
+ * It's used for the standard "chat" Report and for `MoneyRequestReport` actions lists.
+ */
+const shouldDisplayNewMarkerOnReportAction = ({
+    message,
+    nextMessage,
+    isEarliestReceivedOfflineMessage,
+    unreadMarkerTime,
+    accountID,
+    prevSortedVisibleReportActionsObjects,
+    prevUnreadMarkerReportActionID,
+    scrollingVerticalOffset,
+}: ShouldDisplayNewMarkerOnReportActionParams): boolean => {
+    const isNextMessageUnread = !!nextMessage && isReportActionUnread(nextMessage, unreadMarkerTime);
+
+    // If the current message is the earliest message received while offline, we want to display the unread marker above this message.
+    if (isEarliestReceivedOfflineMessage && !isNextMessageUnread) {
+        return true;
+    }
+
+    // If the unread marker should be hidden or is not within the visible area, don't show the unread marker.
+    if (shouldHideNewMarker(message)) {
+        return false;
+    }
+
+    const isCurrentMessageUnread = isReportActionUnread(message, unreadMarkerTime);
+
+    // If the current message is read or the next message is unread, don't show the unread marker.
+    if (!isCurrentMessageUnread || isNextMessageUnread) {
+        return false;
+    }
+
+    const isPendingAdd = (action: OnyxTypes.ReportAction) => {
+        return action?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD;
+    };
+
+    // If no unread marker exists, don't set an unread marker for newly added messages from the current user.
+    const isFromCurrentUser = accountID === (isReportPreviewAction(message) ? message.childLastActorAccountID : message.actorAccountID);
+    const isNewMessage = !prevSortedVisibleReportActionsObjects[message.reportActionID];
+
+    // The unread marker will show if the action's `created` time is later than `unreadMarkerTime`.
+    // The `unreadMarkerTime` has already been updated to match the optimistic action created time,
+    // but once the new action is saved on the backend, the actual created time will be later than the optimistic one.
+    // Therefore, we also need to prevent the unread marker from appearing for previously optimistic actions.
+    const isPreviouslyOptimistic =
+        (isPendingAdd(prevSortedVisibleReportActionsObjects[message.reportActionID]) && !isPendingAdd(message)) ||
+        (!!prevSortedVisibleReportActionsObjects[message.reportActionID]?.isOptimisticAction && !message.isOptimisticAction);
+    const shouldIgnoreUnreadForCurrentUserMessage = !prevUnreadMarkerReportActionID && isFromCurrentUser && (isNewMessage || isPreviouslyOptimistic);
+
+    if (isFromCurrentUser) {
+        return !shouldIgnoreUnreadForCurrentUserMessage;
+    }
+
+    return !isNewMessage || scrollingVerticalOffset >= CONST.REPORT.ACTIONS.ACTION_VISIBLE_THRESHOLD;
+};
+
+export default shouldDisplayNewMarkerOnReportAction;