Hide mobile Search nav button + status tabs on scrollDown, but reveal on scrollUp

src/CONST.ts

@@ -5315,6 +5315,8 @@ const CONST = {
             REPORT_ID: 'reportID',
             KEYWORD: 'keyword',
         },
+        TYPE_AND_STATUS_BAR_HEIGHT: 106,
+        SEARCH_HEADER_HEIGHT: 80,
     },
 
     REFERRER: {

src/components/Search/SearchStatusBar.tsx

@@ -129,7 +129,7 @@ function SearchStatusBar({type, status}: SearchStatusBarProps) {
 
     return (
         <ScrollView
-            style={[styles.flexRow, styles.mb5, styles.overflowScroll, styles.flexGrow0]}
+            style={[styles.flexRow, styles.mb2, styles.overflowScroll, styles.flexGrow0]}
             horizontal
             showsHorizontalScrollIndicator={false}
         >

src/components/Search/index.tsx

@@ -1,6 +1,7 @@
 import {useNavigation} from '@react-navigation/native';
 import type {StackNavigationProp} from '@react-navigation/stack';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
+import type {NativeScrollEvent, NativeSyntheticEvent} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
 import ConfirmModal from '@components/ConfirmModal';
@@ -37,6 +38,7 @@ import type {SearchColumnType, SearchQueryJSON, SearchStatus, SelectedTransactio
 type SearchProps = {
     queryJSON: SearchQueryJSON;
     isCustomQuery: boolean;
+    onSearchListScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
 };
 
 const transactionItemMobileHeight = 100;
@@ -73,7 +75,7 @@ function prepareTransactionsList(item: TransactionListItemType, selectedTransact
     return {...selectedTransactions, [item.keyForList]: {isSelected: true, canDelete: item.canDelete, canHold: item.canHold, canUnhold: item.canUnhold, action: item.action}};
 }
 
-function Search({queryJSON, isCustomQuery}: SearchProps) {
+function Search({queryJSON, isCustomQuery, onSearchListScroll}: SearchProps) {
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
     const styles = useThemeStyles();
@@ -199,6 +201,12 @@ function Search({queryJSON, isCustomQuery}: SearchProps) {
                     queryJSON={queryJSON}
                     hash={hash}
                 />
+                {!isSmallScreenWidth && (
+                    <SearchStatusBar
+                        type={type}
+                        status={status}
+                    />
+                )}
                 <SearchRowSkeleton shouldAnimate />
             </>
         );
@@ -224,10 +232,12 @@ function Search({queryJSON, isCustomQuery}: SearchProps) {
                     queryJSON={queryJSON}
                     hash={hash}
                 />
-                <SearchStatusBar
-                    type={type}
-                    status={status}
-                />
+                {!isSmallScreenWidth && (
+                    <SearchStatusBar
+                        type={type}
+                        status={status}
+                    />
+                )}
                 <EmptySearchView type={type} />
             </>
         );
@@ -321,10 +331,12 @@ function Search({queryJSON, isCustomQuery}: SearchProps) {
                 setOfflineModalOpen={() => setOfflineModalVisible(true)}
                 setDownloadErrorModalOpen={() => setDownloadErrorModalVisible(true)}
             />
-            <SearchStatusBar
-                type={type}
-                status={status}
-            />
+            {!isSmallScreenWidth && (
+                <SearchStatusBar
+                    type={type}
+                    status={status}
+                />
+            )}
             <SelectionListWithModal<ReportListItemType | TransactionListItemType>
                 sections={[{data: sortedSelectedData, isDisabled: false}]}
                 turnOnSelectionModeOnLongPress
@@ -344,6 +356,7 @@ function Search({queryJSON, isCustomQuery}: SearchProps) {
                         />
                     )
                 }
+                onScroll={onSearchListScroll}
                 canSelectMultiple={canSelectMultiple}
                 customListHeaderHeight={searchHeaderHeight}
                 // To enhance the smoothness of scrolling and minimize the risk of encountering blank spaces during scrolling,
@@ -375,6 +388,7 @@ function Search({queryJSON, isCustomQuery}: SearchProps) {
                         />
                     ) : undefined
                 }
+                scrollEventThrottle={16}
             />
             <ConfirmModal
                 isVisible={deleteExpensesConfirmModalVisible}

src/components/SelectionList/BaseSelectionList.tsx

@@ -98,6 +98,7 @@ function BaseSelectionList<TItem extends ListItem>(
         shouldUpdateFocusedIndex = false,
         onLongPressRow,
         shouldShowListEmptyContent = true,
+        scrollEventThrottle,
     }: BaseSelectionListProps<TItem>,
     ref: ForwardedRef<SelectionListHandle>,
 ) {
@@ -732,6 +733,7 @@ function BaseSelectionList<TItem extends ListItem>(
                                 ListFooterComponent={listFooterContent ?? ShowMoreButtonInstance}
                                 onEndReached={onEndReached}
                                 onEndReachedThreshold={onEndReachedThreshold}
+                                scrollEventThrottle={scrollEventThrottle}
                             />
                             {children}
                         </>

src/components/SelectionList/index.tsx

@@ -32,7 +32,10 @@ function SelectionList<TItem extends ListItem>(props: BaseSelectionListProps<TIt
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             ref={ref}
-            onScroll={() => {
+            onScroll={(event) => {
+                if (props.onScroll) {
+                    props.onScroll(event);
+                }
                 // Only dismiss the keyboard whenever the user scrolls the screen
                 if (!isScreenTouched) {
                     return;

src/components/SelectionList/types.ts

@@ -1,5 +1,16 @@
 import type {MutableRefObject, ReactElement, ReactNode} from 'react';
-import type {GestureResponderEvent, InputModeOptions, LayoutChangeEvent, SectionListData, StyleProp, TextInput, TextStyle, ViewStyle} from 'react-native';
+import type {
+    GestureResponderEvent,
+    InputModeOptions,
+    LayoutChangeEvent,
+    NativeScrollEvent,
+    NativeSyntheticEvent,
+    SectionListData,
+    StyleProp,
+    TextInput,
+    TextStyle,
+    ViewStyle,
+} from 'react-native';
 import type {BrickRoad} from '@libs/WorkspacesSettingsUtils';
 // eslint-disable-next-line no-restricted-imports
 import type CursorStyles from '@styles/utils/cursor/types';
@@ -363,7 +374,7 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     initiallyFocusedOptionKey?: string | null;
 
     /** Callback to fire when the list is scrolled */
-    onScroll?: () => void;
+    onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
 
     /** Callback to fire when the list is scrolled and the user begins dragging */
     onScrollBeginDrag?: () => void;
@@ -492,6 +503,9 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
 
     /** Whether to show the empty list content */
     shouldShowListEmptyContent?: boolean;
+
+    /** Scroll event throttle for preventing onScroll callbacks to be fired too often */
+    scrollEventThrottle?: number;
 } & TRightHandSideComponent<TItem>;
 
 type SelectionListHandle = {

src/pages/Search/SearchPageBottomTab.tsx

@@ -1,19 +1,25 @@
 import React, {useMemo} from 'react';
+import {View} from 'react-native';
+import type {NativeScrollEvent, NativeSyntheticEvent} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
+import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Search from '@components/Search';
 import {useSearchContext} from '@components/Search/SearchContext';
+import SearchStatusBar from '@components/Search/SearchStatusBar';
 import useActiveCentralPaneRoute from '@hooks/useActiveCentralPaneRoute';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode';
 import Navigation from '@libs/Navigation/Navigation';
 import type {AuthScreensParamList} from '@libs/Navigation/types';
 import * as SearchUtils from '@libs/SearchUtils';
 import TopBar from '@navigation/AppNavigator/createCustomBottomTabNavigator/TopBar';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
@@ -22,11 +28,44 @@ import SearchTypeMenu from './SearchTypeMenu';
 function SearchPageBottomTab() {
     const {translate} = useLocalize();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const {windowHeight} = useWindowDimensions();
     const activeCentralPaneRoute = useActiveCentralPaneRoute();
     const styles = useThemeStyles();
     const {clearSelectedTransactions} = useSearchContext();
     const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE);
 
+    const scrollOffset = useSharedValue(0);
+    const topBarOffset = useSharedValue(0);
+    const headerHeight = useSharedValue(CONST.SEARCH.SEARCH_HEADER_HEIGHT + CONST.SEARCH.TYPE_AND_STATUS_BAR_HEIGHT);
+    const animatedTopBarStyle = useAnimatedStyle(() => ({
+        transform: [{translateY: topBarOffset.value}],
+        zIndex: -1,
+    }));
+    const animatedHeaderStyle = useAnimatedStyle(() => ({
+        height: headerHeight.value,
+    }));
+
+    const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+        const {contentOffset, layoutMeasurement, contentSize} = event.nativeEvent;
+        if (windowHeight + CONST.SEARCH.TYPE_AND_STATUS_BAR_HEIGHT > contentSize.height) {
+            return;
+        }
+
+        const currentOffset = contentOffset.y;
+        const isScrollingDown = currentOffset > scrollOffset.value;
+        if (isScrollingDown && contentOffset.y > 20) {
+            const distanceScrolled = currentOffset - scrollOffset.value;
+            // eslint-disable-next-line react-compiler/react-compiler
+            topBarOffset.value = Math.max(-CONST.SEARCH.TYPE_AND_STATUS_BAR_HEIGHT, topBarOffset.value - distanceScrolled);
+            headerHeight.value = Math.max(CONST.SEARCH.SEARCH_HEADER_HEIGHT, headerHeight.value - distanceScrolled);
+        } else if (!isScrollingDown && contentOffset.y + layoutMeasurement.height < contentSize.height - 10) {
+            topBarOffset.value = withTiming(0, {duration: 300});
+            headerHeight.value = withTiming(CONST.SEARCH.SEARCH_HEADER_HEIGHT + CONST.SEARCH.TYPE_AND_STATUS_BAR_HEIGHT, {duration: 300});
+        }
+
+        scrollOffset.value = currentOffset;
+    };
+
     const {queryJSON, policyID, isCustomQuery} = useMemo(() => {
         if (activeCentralPaneRoute?.name !== SCREENS.SEARCH.CENTRAL_PANE) {
             return {queryJSON: undefined, policyID: undefined, isCustomQuery: undefined};
@@ -56,17 +95,27 @@ function SearchPageBottomTab() {
                 shouldShowLink={false}
             >
                 {!selectionMode?.isEnabled && queryJSON ? (
-                    <>
-                        <TopBar
-                            activeWorkspaceID={policyID}
-                            breadcrumbLabel={translate('common.search')}
-                            shouldDisplaySearch={false}
-                        />
-                        <SearchTypeMenu
-                            isCustomQuery={isCustomQuery}
-                            queryJSON={queryJSON}
-                        />
-                    </>
+                    <Animated.View style={animatedHeaderStyle}>
+                        <View style={styles.appBG}>
+                            <TopBar
+                                activeWorkspaceID={policyID}
+                                breadcrumbLabel={translate('common.search')}
+                                shouldDisplaySearch={false}
+                            />
+                        </View>
+                        <Animated.View style={animatedTopBarStyle}>
+                            <SearchTypeMenu
+                                isCustomQuery={isCustomQuery}
+                                queryJSON={queryJSON}
+                            />
+                            {shouldUseNarrowLayout && (
+                                <SearchStatusBar
+                                    type={queryJSON.type}
+                                    status={queryJSON.status}
+                                />
+                            )}
+                        </Animated.View>
+                    </Animated.View>
                 ) : (
                     <HeaderWithBackButton
                         title={translate('common.selectMultiple')}
@@ -80,6 +129,7 @@ function SearchPageBottomTab() {
                     <Search
                         queryJSON={queryJSON}
                         isCustomQuery={isCustomQuery}
+                        onSearchListScroll={handleScroll}
                     />
                 )}
             </FullPageNotFoundView>