diff --git a/src/pages/Search/SearchTypeMenu.tsx b/src/pages/Search/SearchTypeMenu.tsx index ce30c0a8d782..0e59aa969b66 100644 --- a/src/pages/Search/SearchTypeMenu.tsx +++ b/src/pages/Search/SearchTypeMenu.tsx @@ -1,12 +1,15 @@ -import React, {useCallback} from 'react'; +import {useRoute} from '@react-navigation/native'; +import React, {useCallback, useContext, useLayoutEffect, useRef} from 'react'; import {View} from 'react-native'; -import type {TextStyle, ViewStyle} from 'react-native'; +// eslint-disable-next-line no-restricted-imports +import type {ScrollView as RNScrollView, ScrollViewProps, TextStyle, ViewStyle} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import type {MenuItemBaseProps} from '@components/MenuItem'; import MenuItem from '@components/MenuItem'; import MenuItemList from '@components/MenuItemList'; import type {MenuItemWithLink} from '@components/MenuItemList'; import {usePersonalDetails} from '@components/OnyxProvider'; +import {ScrollOffsetContext} from '@components/ScrollOffsetContextProvider'; import ScrollView from '@components/ScrollView'; import type {SearchQueryJSON} from '@components/Search/types'; import Text from '@components/Text'; @@ -156,6 +159,29 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) { return baseMenuItem; }; + const route = useRoute(); + const scrollViewRef = useRef(null); + const {saveScrollOffset, getScrollOffset} = useContext(ScrollOffsetContext); + const onScroll = useCallback>( + (e) => { + // If the layout measurement is 0, it means the flashlist is not displayed but the onScroll may be triggered with offset value 0. + // We should ignore this case. + if (e.nativeEvent.layoutMeasurement.height === 0) { + return; + } + saveScrollOffset(route, e.nativeEvent.contentOffset.y); + }, + [route, saveScrollOffset], + ); + + useLayoutEffect(() => { + const scrollOffset = getScrollOffset(route); + if (!scrollOffset || !scrollViewRef.current) { + return; + } + scrollViewRef.current.scrollTo({y: scrollOffset, animated: false}); + }, [getScrollOffset, route]); + const savedSearchesMenuItems = () => { if (!savedSearches) { return []; @@ -165,8 +191,7 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) { const renderSavedSearchesSection = useCallback( (menuItems: MenuItemWithLink[]) => ( - - {translate('search.savedSearchesMenuItemTitle')} + ), - [styles, translate], + [styles], ); const isCannedQuery = SearchUtils.isCannedSearchQuery(queryJSON); @@ -227,7 +252,13 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) { {savedSearches && Object.keys(savedSearches).length > 0 && ( <> - {renderSavedSearchesSection(savedSearchesMenuItems())} + {translate('search.savedSearchesMenuItemTitle')} + + {renderSavedSearchesSection(savedSearchesMenuItems())} + )}