Simplify navigation types

src/components/Search/index.tsx

@@ -101,10 +101,11 @@ function Search({query, policyIDs, sortBy, sortOrder, isMobileSelectionModeActiv
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, [hash, isOffline]);
 
-    const isLoadingItems = !isOffline && searchResults?.data === undefined;
-    const isLoadingMoreItems = !isLoadingItems && searchResults?.search?.isLoading && searchResults?.search?.offset > 0;
+    const isDataLoaded = searchResults?.data !== undefined;
+    const shouldShowLoadingState = !isOffline && !isDataLoaded;
+    const shouldShowLoadingMoreItems = !shouldShowLoadingState && searchResults?.search?.isLoading && searchResults?.search?.offset > 0;
 
-    if (isLoadingItems) {
+    if (shouldShowLoadingState) {
         return (
             <>
                 <SearchPageHeader
@@ -116,9 +117,9 @@ function Search({query, policyIDs, sortBy, sortOrder, isMobileSelectionModeActiv
         );
     }
 
-    const shouldShowEmptyState = searchResults && SearchUtils.isSearchResultsEmpty(searchResults);
+    const shouldShowEmptyState = !isDataLoaded || SearchUtils.isSearchResultsEmpty(searchResults);
 
-    if (shouldShowEmptyState ?? !searchResults) {
+    if (shouldShowEmptyState) {
         return (
             <>
                 <SearchPageHeader
@@ -147,7 +148,7 @@ function Search({query, policyIDs, sortBy, sortOrder, isMobileSelectionModeActiv
     };
 
     const fetchMoreResults = () => {
-        if (!searchResults?.search?.hasMoreResults || isLoadingItems || isLoadingMoreItems) {
+        if (!searchResults?.search?.hasMoreResults || shouldShowLoadingState || shouldShowLoadingMoreItems) {
             return;
         }
         const currentOffset = searchResults?.search?.offset ?? 0;
@@ -224,7 +225,7 @@ function Search({query, policyIDs, sortBy, sortOrder, isMobileSelectionModeActiv
             setIsMobileSelectionModeActive={setIsMobileSelectionModeActive}
             isMobileSelectionModeActive={isMobileSelectionModeActive}
             listFooterContent={
-                isLoadingMoreItems ? (
+                shouldShowLoadingMoreItems ? (
                     <SearchRowSkeleton
                         shouldAnimate
                         fixedNumItems={5}

src/hooks/useActiveCentralPaneRoute.ts

@@ -0,0 +1,9 @@
+import {useContext} from 'react';
+import ActiveCentralPaneRouteContext from '@libs/Navigation/AppNavigator/Navigators/ActiveCentralPaneRouteContext';
+import type {AuthScreensParamList, NavigationPartialRoute} from '@libs/Navigation/types';
+
+function useActiveCentralPaneRoute(): NavigationPartialRoute<keyof AuthScreensParamList> | undefined {
+    return useContext(ActiveCentralPaneRouteContext);
+}
+
+export default useActiveCentralPaneRoute;

src/libs/Navigation/AppNavigator/Navigators/ActiveCentralPaneRouteContext.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type {AuthScreensParamList, NavigationPartialRoute} from '@libs/Navigation/types';
+
+const ActiveCentralPaneRouteContext = React.createContext<NavigationPartialRoute<keyof AuthScreensParamList> | undefined>(undefined);
+
+export default ActiveCentralPaneRouteContext;

src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx

@@ -2,15 +2,13 @@ import {useNavigationState} from '@react-navigation/native';
 import type {StackNavigationOptions} from '@react-navigation/stack';
 import React from 'react';
 import createCustomBottomTabNavigator from '@libs/Navigation/AppNavigator/createCustomBottomTabNavigator';
-import getTopmostBottomTabRoute from '@libs/Navigation/getTopmostBottomTabRoute';
 import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute';
-import type {BottomTabNavigatorParamList, BottomTabScreensParamList, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types';
-import {isBottomTabName} from '@libs/NavigationUtils';
+import type {BottomTabNavigatorParamList, CentralPaneName, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types';
 import SidebarScreen from '@pages/home/sidebar/SidebarScreen';
 import SearchPageBottomTab from '@pages/Search/SearchPageBottomTab';
 import SCREENS from '@src/SCREENS';
 import type ReactComponentModule from '@src/types/utils/ReactComponentModule';
-import ActiveBottomTabRouteContext from './ActiveBottomTabRouteContext';
+import ActiveCentralPaneRouteContext from './ActiveCentralPaneRouteContext';
 
 const loadInitialSettingsPage = () => require<ReactComponentModule>('../../../../pages/settings/InitialSettingsPage').default;
 const Tab = createCustomBottomTabNavigator<BottomTabNavigatorParamList>();
@@ -21,22 +19,9 @@ const screenOptions: StackNavigationOptions = {
 };
 
 function BottomTabNavigator() {
-    const activeRoute = useNavigationState<RootStackParamList, NavigationPartialRoute<keyof BottomTabScreensParamList> | undefined>((state) => {
-        if (!state) {
-            return undefined;
-        }
-        let route: NavigationPartialRoute<keyof BottomTabScreensParamList> | undefined;
-        for (const selector of [getTopmostBottomTabRoute, getTopmostCentralPaneRoute]) {
-            const selectedRoute = selector(state);
-            if (isBottomTabName(selectedRoute?.name)) {
-                route = selectedRoute as NavigationPartialRoute<keyof BottomTabScreensParamList>;
-            }
-        }
-
-        return route;
-    });
+    const activeRoute = useNavigationState<RootStackParamList, NavigationPartialRoute<CentralPaneName> | undefined>(getTopmostCentralPaneRoute);
     return (
-        <ActiveBottomTabRouteContext.Provider value={activeRoute}>
+        <ActiveCentralPaneRouteContext.Provider value={activeRoute}>
             <Tab.Navigator screenOptions={screenOptions}>
                 <Tab.Screen
                     name={SCREENS.HOME}
@@ -51,7 +36,7 @@ function BottomTabNavigator() {
                     getComponent={loadInitialSettingsPage}
                 />
             </Tab.Navigator>
-        </ActiveBottomTabRouteContext.Provider>
+        </ActiveCentralPaneRouteContext.Provider>
     );
 }
 

src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.tsx → src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx

@@ -1,8 +1,7 @@
-import {useNavigation, useNavigationState} from '@react-navigation/native';
+import {useNavigation} from '@react-navigation/native';
 import React, {memo, useCallback, useEffect} from 'react';
 import {NativeModules, View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import {PressableWithFeedback} from '@components/Pressable';
@@ -13,8 +12,6 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Session from '@libs/actions/Session';
 import interceptAnonymousUser from '@libs/interceptAnonymousUser';
-import getTopmostBottomTabRoute from '@libs/Navigation/getTopmostBottomTabRoute';
-import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute';
 import Navigation from '@libs/Navigation/Navigation';
 import type {RootStackParamList, State} from '@libs/Navigation/types';
 import {isCentralPaneName} from '@libs/NavigationUtils';
@@ -30,17 +27,17 @@ import type {Route} from '@src/ROUTES';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
 
-type PurposeForUsingExpensifyModalOnyxProps = {
-    isLoadingApp: OnyxEntry<boolean>;
+type BottomTabBarProps = {
+    selectedTab: string | undefined;
 };
-type PurposeForUsingExpensifyModalProps = PurposeForUsingExpensifyModalOnyxProps;
 
-function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps) {
+function BottomTabBar({selectedTab}: BottomTabBarProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const navigation = useNavigation();
     const {activeWorkspaceID} = useActiveWorkspace();
+    const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP);
 
     useEffect(() => {
         const navigationState = navigation.getState() as State<RootStackParamList> | undefined;
@@ -61,27 +58,14 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, [isLoadingApp]);
 
-    // Parent navigator of the bottom tab bar is the root navigator.
-    const currentTabName = useNavigationState<RootStackParamList, string | undefined>((state) => {
-        const topmostCentralPaneRoute = getTopmostCentralPaneRoute(state);
-
-        if (topmostCentralPaneRoute && topmostCentralPaneRoute.name === SCREENS.SEARCH.CENTRAL_PANE) {
-            return SCREENS.SEARCH.CENTRAL_PANE;
-        }
-
-        const topmostBottomTabRoute = getTopmostBottomTabRoute(state);
-        return topmostBottomTabRoute?.name ?? SCREENS.HOME;
-    });
-
     const chatTabBrickRoad = getChatTabBrickRoad(activeWorkspaceID);
-
     const navigateToChats = useCallback(() => {
-        if (currentTabName === SCREENS.HOME) {
+        if (selectedTab === SCREENS.HOME) {
             return;
         }
-        const route = activeWorkspaceID ? (`/w/${activeWorkspaceID}/home` as Route) : ROUTES.HOME;
+        const route = activeWorkspaceID ? (`/w/${activeWorkspaceID}/${ROUTES.HOME}` as Route) : ROUTES.HOME;
         Navigation.navigate(route);
-    }, [activeWorkspaceID, currentTabName]);
+    }, [activeWorkspaceID, selectedTab]);
 
     return (
         <View style={styles.bottomTabBarContainer}>
@@ -96,7 +80,7 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
                     <View>
                         <Icon
                             src={Expensicons.Inbox}
-                            fill={currentTabName === SCREENS.HOME ? theme.iconMenu : theme.icon}
+                            fill={selectedTab === SCREENS.HOME ? theme.iconMenu : theme.icon}
                             width={variables.iconBottomBar}
                             height={variables.iconBottomBar}
                         />
@@ -109,7 +93,7 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
             <Tooltip text={translate('common.search')}>
                 <PressableWithFeedback
                     onPress={() => {
-                        if (currentTabName === SCREENS.SEARCH.BOTTOM_TAB || currentTabName === SCREENS.SEARCH.CENTRAL_PANE) {
+                        if (selectedTab === SCREENS.SEARCH.BOTTOM_TAB) {
                             return;
                         }
                         interceptAnonymousUser(() => Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.SEARCH.TAB.ALL)));
@@ -122,14 +106,14 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
                     <View>
                         <Icon
                             src={Expensicons.MoneySearch}
-                            fill={currentTabName === SCREENS.SEARCH.BOTTOM_TAB || currentTabName === SCREENS.SEARCH.CENTRAL_PANE ? theme.iconMenu : theme.icon}
+                            fill={selectedTab === SCREENS.SEARCH.BOTTOM_TAB ? theme.iconMenu : theme.icon}
                             width={variables.iconBottomBar}
                             height={variables.iconBottomBar}
                         />
                     </View>
                 </PressableWithFeedback>
             </Tooltip>
-            <BottomTabAvatar isSelected={currentTabName === SCREENS.SETTINGS.ROOT} />
+            <BottomTabAvatar isSelected={selectedTab === SCREENS.SETTINGS.ROOT} />
             <View style={[styles.flex1, styles.bottomTabBarItem]}>
                 <BottomTabBarFloatingActionButton />
             </View>
@@ -139,8 +123,4 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
 
 BottomTabBar.displayName = 'BottomTabBar';
 
-export default withOnyx<PurposeForUsingExpensifyModalProps, PurposeForUsingExpensifyModalOnyxProps>({
-    isLoadingApp: {
-        key: ONYXKEYS.IS_LOADING_APP,
-    },
-})(memo(BottomTabBar));
+export default memo(BottomTabBar);