address ai comments pt 6

Author: JakubKorytko

src/hooks/useSearchOverlay.tsx

@@ -1,7 +1,6 @@
 import {useFocusEffect} from '@react-navigation/native';
 import React, {useCallback, useEffect, useState} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
-import {View} from 'react-native';
 import {useSession} from '@components/OnyxListItemProvider';
 import SearchStaticList from '@components/Search/SearchStaticList';
 import type {SearchQueryJSON} from '@components/Search/types';
@@ -30,6 +29,8 @@ type UseSearchOverlayParams = {
 type UseSearchOverlayResult = {
     searchOverlayContent: React.ReactNode;
     onSearchContentReady: () => void;
+    /** Whether the overlay lifecycle is active (armed but not yet ready). */
+    isOverlayActive: boolean;
 };
 
 /**
@@ -80,7 +81,7 @@ function useSearchOverlay({
     // The hook subscriptions (useSession, useOnyx) must remain unconditional per
     // rules-of-hooks, but the derived work below is the expensive part.
     if (isSearchReady) {
-        return {searchOverlayContent: null, onSearchContentReady};
+        return {searchOverlayContent: null, onSearchContentReady, isOverlayActive: false};
     }
 
     const isTransaction = isTransactionSearchType(queryJSON?.type);
@@ -116,11 +117,9 @@ function useSearchOverlay({
                 columns={overlayColumns}
                 contentContainerStyle={shouldUseNarrowLayout ? contentContainerStyle : undefined}
             />
-        ) : (
-            <View />
-        );
+        ) : null;
 
-    return {searchOverlayContent, onSearchContentReady};
+    return {searchOverlayContent, onSearchContentReady, isOverlayActive: true};
 }
 
 export default useSearchOverlay;

src/pages/Search/SearchPage.tsx

@@ -137,7 +137,7 @@ function SearchPage({route}: SearchPageProps) {
     }, []);
 
     const overlayContentContainerStyle = !isMobileSelectionModeEnabled ? styles.searchListContentContainerStyles(!!hasFilterBars) : undefined;
-    const {searchOverlayContent, onSearchContentReady} = useSearchOverlay({
+    const {searchOverlayContent, onSearchContentReady, isOverlayActive} = useSearchOverlay({
         searchResults,
         queryJSON: currentSearchQueryJSON,
         shouldUseNarrowLayout,
@@ -160,6 +160,7 @@ function SearchPage({route}: SearchPageProps) {
                     searchOverlayContent={searchOverlayContent}
                     onSearchContentReady={onSearchContentReady}
                     hasFilterBars={hasFilterBars}
+                    isOverlayActive={isOverlayActive}
                 />
             ) : (
                 <SearchPageWide

src/pages/Search/SearchPageNarrow/index.tsx

@@ -63,6 +63,8 @@ type SearchPageNarrowProps = {
     searchOverlayContent: React.ReactNode;
     onSearchContentReady: () => void;
     hasFilterBars: boolean;
+    /** Whether the overlay lifecycle is active (used to trigger onSearchLayout independently of overlay content). */
+    isOverlayActive: boolean;
 };
 
 const tabBarContent = <TabBarBottomContent selectedTab={NAVIGATION_TABS.SEARCH} />;
@@ -78,6 +80,7 @@ function SearchPageNarrow({
     searchOverlayContent,
     onSearchContentReady,
     hasFilterBars,
+    isOverlayActive,
 }: SearchPageNarrowProps) {
     const shouldShowLoadingSkeleton = useSearchLoadingState(queryJSON, searchResults);
     const {translate} = useLocalize();
@@ -359,6 +362,7 @@ function SearchPageNarrow({
                                             hasFilterBars={hasFilterBars}
                                         />
                                     )}
+                                    {isOverlayActive && !searchOverlayContent && <View onLayout={onSearchLayout} />}
                                     {!!searchOverlayContent && (
                                         <View
                                             style={[StyleSheet.absoluteFill, styles.appBG]}
@@ -400,6 +404,7 @@ function SearchPageNarrow({
                                             hasFilterBars={hasFilterBars}
                                         />
                                     )}
+                                    {isOverlayActive && !searchOverlayContent && <View onLayout={onSearchLayout} />}
                                     {!!searchOverlayContent && (
                                         <View
                                             style={[StyleSheet.absoluteFill, styles.appBG]}