diff --git a/src/hooks/useBottomTabIsFocused.ts b/src/hooks/useBottomTabIsFocused.ts index f996d535a651..90b74097ecd8 100644 --- a/src/hooks/useBottomTabIsFocused.ts +++ b/src/hooks/useBottomTabIsFocused.ts @@ -1,12 +1,29 @@ +import type {EventArg, NavigationContainerEventMap} from '@react-navigation/native'; import {useIsFocused, useNavigationState} from '@react-navigation/native'; +import {useEffect, useState} from 'react'; import CENTRAL_PANE_SCREENS from '@libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute'; import getTopmostFullScreenRoute from '@libs/Navigation/getTopmostFullScreenRoute'; +import Navigation, {navigationRef} from '@libs/Navigation/Navigation'; import type {CentralPaneName, FullScreenName, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types'; import SCREENS from '@src/SCREENS'; import useResponsiveLayout from './useResponsiveLayout'; const useBottomTabIsFocused = () => { + const [isScreenFocused, setIsScreenFocused] = useState(false); + useEffect(() => { + const listener = (event: EventArg<'state', false, NavigationContainerEventMap['state']['data']>) => { + const routName = Navigation.getRouteNameFromStateEvent(event); + if (routName === SCREENS.SEARCH.CENTRAL_PANE || routName === SCREENS.SETTINGS_CENTRAL_PANE || routName === SCREENS.HOME) { + setIsScreenFocused(true); + return; + } + setIsScreenFocused(false); + }; + navigationRef.addListener('state', listener); + return () => navigationRef.removeListener('state', listener); + }, []); + const {shouldUseNarrowLayout} = useResponsiveLayout(); const isFocused = useIsFocused(); const topmostFullScreenName = useNavigationState | undefined>(getTopmostFullScreenRoute); @@ -18,7 +35,7 @@ const useBottomTabIsFocused = () => { } // On the Search screen, isFocused returns false, but it is actually focused if (shouldUseNarrowLayout) { - return isFocused || topmostCentralPane?.name === SCREENS.SEARCH.CENTRAL_PANE; + return isFocused || isScreenFocused; } // On desktop screen sizes, isFocused always returns false, so we cannot rely on it alone to determine if the bottom tab is focused return isFocused || Object.keys(CENTRAL_PANE_SCREENS).includes(topmostCentralPane?.name ?? ''); diff --git a/src/pages/Search/SearchTypeMenuNarrow.tsx b/src/pages/Search/SearchTypeMenuNarrow.tsx index 25725486d7c9..091120a98aae 100644 --- a/src/pages/Search/SearchTypeMenuNarrow.tsx +++ b/src/pages/Search/SearchTypeMenuNarrow.tsx @@ -1,4 +1,5 @@ -import React, {useCallback, useMemo, useRef, useState} from 'react'; +import type {EventArg, NavigationContainerEventMap} from '@react-navigation/native'; +import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {Animated, View} from 'react-native'; import type {TextStyle, ViewStyle} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -24,7 +25,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as SearchActions from '@libs/actions/Search'; import getPlatform from '@libs/getPlatform'; -import Navigation from '@libs/Navigation/Navigation'; +import Navigation, {navigationRef} from '@libs/Navigation/Navigation'; import {getAllTaxRates} from '@libs/PolicyUtils'; import * as SearchQueryUtils from '@libs/SearchQueryUtils'; import * as SearchUIUtils from '@libs/SearchUIUtils'; @@ -33,6 +34,7 @@ import * as Expensicons from '@src/components/Icon/Expensicons'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; +import SCREENS from '@src/SCREENS'; import type {SearchTypeMenuItem} from './SearchTypeMenu'; type SavedSearchMenuItem = MenuItemWithLink & { @@ -77,8 +79,23 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title, const openMenu = useCallback(() => setIsPopoverVisible(true), []); const closeMenu = useCallback(() => setIsPopoverVisible(false), []); + const [isScreenFocused, setIsScreenFocused] = useState(false); + + useEffect(() => { + const listener = (event: EventArg<'state', false, NavigationContainerEventMap['state']['data']>) => { + if (Navigation.getRouteNameFromStateEvent(event) === SCREENS.SEARCH.CENTRAL_PANE) { + setIsScreenFocused(true); + return; + } + setIsScreenFocused(false); + }; + navigationRef.addListener('state', listener); + return () => navigationRef.removeListener('state', listener); + }, []); + const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext( CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SEARCH_FILTER_BUTTON_TOOLTIP, + isScreenFocused, ); const onPress = () => {