Merge pull request #68498 from huult/66751-fix-back-button-scroll-reset

Fix back button on report detail page resetting scroll position on re…

Author: JS00001

src/components/ScrollOffsetContextProvider.tsx

@@ -1,4 +1,5 @@
 import type {ParamListBase} from '@react-navigation/native';
+import {findFocusedRoute} from '@react-navigation/native';
 import React, {createContext, useCallback, useEffect, useMemo, useRef} from 'react';
 import useOnyx from '@hooks/useOnyx';
 import usePrevious from '@hooks/usePrevious';
@@ -40,11 +41,21 @@ const defaultValue: ScrollOffsetContextValue = {
 
 const ScrollOffsetContext = createContext<ScrollOffsetContextValue>(defaultValue);
 
-/** This function is prepared to work with HOME screens. May need modification if we want to handle other types of screens. */
+/** This function is prepared to work with HOME and SEARCH screens. */
 function getKey(route: PlatformStackRouteProp<ParamListBase> | NavigationPartialRoute): string {
+    // Handle routes with direct policyID parameter (HOME screens)
     if (route.params && 'policyID' in route.params && typeof route.params.policyID === 'string') {
         return `${route.name}-${route.params.policyID}`;
     }
+
+    // Handle SEARCH screens with query parameters
+    if (route.name === SCREENS.SEARCH.ROOT && route.params && 'q' in route.params && typeof route.params.q === 'string') {
+        // Encode the query to handle spaces and special characters
+        const encodedQuery = encodeURIComponent(route.params.q);
+        return `${route.name}-${encodedQuery}`;
+    }
+
+    // For other routes, just use route name
     return `${route.name}-global`;
 }
 
@@ -58,9 +69,9 @@ function ScrollOffsetContextProvider({children}: ScrollOffsetContextProviderProp
             return;
         }
 
-        // If the priority mode changes, we need to clear the scroll offsets for the home screens because it affects the size of the elements and scroll positions wouldn't be correct.
+        // If the priority mode changes, we need to clear the scroll offsets for the home and search screens because it affects the size of the elements and scroll positions wouldn't be correct.
         for (const key of Object.keys(scrollOffsetsRef.current)) {
-            if (key.includes(SCREENS.HOME)) {
+            if (key.includes(SCREENS.HOME) || key.includes(SCREENS.SEARCH.ROOT)) {
                 delete scrollOffsetsRef.current[key];
             }
         }
@@ -77,16 +88,39 @@ function ScrollOffsetContextProvider({children}: ScrollOffsetContextProviderProp
         return scrollOffsetsRef.current[getKey(route)];
     }, []);
 
-    const cleanStaleScrollOffsets: ScrollOffsetContextValue['cleanStaleScrollOffsets'] = useCallback((state) => {
-        const sidebarRoutes = state.routes.filter((route) => isSidebarScreenName(route.name));
-        const scrollOffsetKeysOfExistingScreens = sidebarRoutes.map((route) => getKey(route));
-        for (const key of Object.keys(scrollOffsetsRef.current)) {
-            if (!scrollOffsetKeysOfExistingScreens.includes(key)) {
-                delete scrollOffsetsRef.current[key];
+    const cleanScrollOffsets = useCallback((keys: string[], shouldDelete: (key: string) => boolean) => {
+        keys.forEach((key) => {
+            if (!shouldDelete(key)) {
+                return;
             }
-        }
+
+            delete scrollOffsetsRef.current[key];
+        });
     }, []);
 
+    const cleanStaleScrollOffsets: ScrollOffsetContextValue['cleanStaleScrollOffsets'] = useCallback(
+        (state) => {
+            const sidebarRoutes = state.routes.filter((route) => isSidebarScreenName(route.name));
+            const existingScreenKeys = sidebarRoutes.map(getKey);
+
+            const focusedRoute = findFocusedRoute(state);
+            const routeName = focusedRoute?.name;
+
+            const isSearchScreen = routeName === SCREENS.SEARCH.ROOT;
+            const isSearchMoneyRequestReport = routeName === SCREENS.SEARCH.MONEY_REQUEST_REPORT || routeName === SCREENS.SEARCH.REPORT_RHP;
+
+            const scrollOffsetKeys = Object.keys(scrollOffsetsRef.current);
+
+            if (isSearchScreen || isSearchMoneyRequestReport) {
+                const currentKey = focusedRoute ? getKey(focusedRoute) : null;
+                cleanScrollOffsets(scrollOffsetKeys, (key) => key.startsWith(SCREENS.SEARCH.ROOT) && key !== currentKey && !isSearchMoneyRequestReport);
+                return;
+            }
+            cleanScrollOffsets(scrollOffsetKeys, (key) => !existingScreenKeys.includes(key));
+        },
+        [cleanScrollOffsets],
+    );
+
     const saveScrollIndex: ScrollOffsetContextValue['saveScrollIndex'] = useCallback((route, scrollIndex) => {
         scrollOffsetsRef.current[getKey(route)] = scrollIndex;
     }, []);
@@ -95,6 +129,7 @@ function ScrollOffsetContextProvider({children}: ScrollOffsetContextProviderProp
         if (!scrollOffsetsRef.current) {
             return;
         }
+
         return scrollOffsetsRef.current[getKey(route)];
     }, []);
 

src/components/Search/SearchList.tsx

@@ -1,7 +1,7 @@
-import {useIsFocused} from '@react-navigation/native';
+import {useIsFocused, useRoute} from '@react-navigation/native';
 import {FlashList} from '@shopify/flash-list';
 import type {FlashListProps, ViewToken} from '@shopify/flash-list';
-import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
+import React, {forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import type {ForwardedRef} from 'react';
 import {View} from 'react-native';
 import type {NativeSyntheticEvent, StyleProp, ViewStyle} from 'react-native';
@@ -12,6 +12,7 @@ import MenuItem from '@components/MenuItem';
 import Modal from '@components/Modal';
 import {usePersonalDetails} from '@components/OnyxListItemProvider';
 import {PressableWithFeedback} from '@components/Pressable';
+import {ScrollOffsetContext} from '@components/ScrollOffsetContextProvider';
 import type ChatListItem from '@components/SelectionList/ChatListItem';
 import type TaskListItem from '@components/SelectionList/Search/TaskListItem';
 import type TransactionGroupListItem from '@components/SelectionList/Search/TransactionGroupListItem';
@@ -182,6 +183,9 @@ function SearchList(
     const [isUserValidated] = useOnyx(ONYXKEYS.ACCOUNT, {selector: (account) => account?.validated, canBeMissing: true});
     const [userBillingFundID] = useOnyx(ONYXKEYS.NVP_BILLING_FUND_ID, {canBeMissing: true});
 
+    const route = useRoute();
+    const {saveScrollOffset, getScrollOffset} = useContext(ScrollOffsetContext);
+
     const handleLongPressRow = useCallback(
         (item: SearchListItem) => {
             // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
@@ -420,6 +424,39 @@ function SearchList(
         };
     }, [calculatedListHeight, calculatedListWidth]);
 
+    const handleScroll = useCallback<NonNullable<FlashListProps<SearchListItem>['onScroll']>>(
+        (e) => {
+            if (onScroll && typeof onScroll === 'function') {
+                onScroll(e);
+            }
+
+            if (e.nativeEvent.layoutMeasurement.height > 0) {
+                saveScrollOffset(route, e.nativeEvent.contentOffset.y);
+            }
+        },
+        [onScroll, route, saveScrollOffset],
+    );
+
+    const handleLayout = useCallback(() => {
+        if (onLayout && typeof onLayout === 'function') {
+            onLayout();
+        }
+
+        const offset = getScrollOffset(route);
+        if (!offset || !listRef.current) {
+            return;
+        }
+
+        // Use requestAnimationFrame to ensure proper scrolling on iOS
+        requestAnimationFrame(() => {
+            if (!offset || !listRef.current) {
+                return;
+            }
+
+            listRef.current.scrollToOffset({offset});
+        });
+    }, [onLayout, getScrollOffset, route]);
+
     return (
         <View style={[styles.flex1, !isKeyboardShown && safeAreaPaddingBottomStyle, containerStyle]}>
             {tableHeaderVisible && (
@@ -457,15 +494,15 @@ function SearchList(
                 data={data}
                 renderItem={renderItem}
                 keyExtractor={keyExtractor}
-                onScroll={onScroll}
+                onScroll={handleScroll}
                 showsVerticalScrollIndicator={false}
                 ref={listRef}
                 extraData={[focusedIndex, isFocused]}
                 onEndReached={onEndReached}
                 onEndReachedThreshold={onEndReachedThreshold}
                 ListFooterComponent={ListFooterComponent}
                 onViewableItemsChanged={onViewableItemsChanged}
-                onLayout={onLayout}
+                onLayout={handleLayout}
                 removeClippedSubviews
                 drawDistance={1000}
                 estimatedItemSize={estimatedItemSize}