Simplify the RootNavigator structure

src/ROUTES.ts

@@ -2,7 +2,7 @@ import type {ValueOf} from 'type-fest';
 import type CONST from './CONST';
 import type {IOUAction, IOUType} from './CONST';
 import type {IOURequestType} from './libs/actions/IOU';
-import type {CentralPaneNavigatorParamList} from './libs/Navigation/types';
+import type {AuthScreensParamList} from './libs/Navigation/types';
 import type {SearchQuery} from './types/onyx/SearchResults';
 import type AssertTypesNotEqual from './types/utils/AssertTypesNotEqual';
 
@@ -37,7 +37,7 @@ const ROUTES = {
 
     SEARCH: {
         route: '/search/:query',
-        getRoute: (searchQuery: SearchQuery, queryParams?: CentralPaneNavigatorParamList['Search_Central_Pane']) => {
+        getRoute: (searchQuery: SearchQuery, queryParams?: AuthScreensParamList['Search_Central_Pane']) => {
             const {sortBy, sortOrder} = queryParams ?? {};
 
             if (!sortBy && !sortOrder) {

src/components/ScreenWrapper.tsx

@@ -15,7 +15,7 @@ import useTackInputFocus from '@hooks/useTackInputFocus';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
-import type {CentralPaneNavigatorParamList, RootStackParamList} from '@libs/Navigation/types';
+import type {AuthScreensParamList, RootStackParamList} from '@libs/Navigation/types';
 import toggleTestToolsModal from '@userActions/TestTool';
 import CONST from '@src/CONST';
 import CustomDevMenu from './CustomDevMenu';
@@ -94,7 +94,7 @@ type ScreenWrapperProps = {
      *
      * This is required because transitionEnd event doesn't trigger in the testing environment.
      */
-    navigation?: StackNavigationProp<RootStackParamList> | StackNavigationProp<CentralPaneNavigatorParamList>;
+    navigation?: StackNavigationProp<RootStackParamList> | StackNavigationProp<AuthScreensParamList>;
 
     /** Whether to show offline indicator on wide screens */
     shouldShowOfflineIndicatorInWideScreen?: boolean;

src/components/Search.tsx

@@ -11,7 +11,7 @@ import Log from '@libs/Log';
 import * as SearchUtils from '@libs/SearchUtils';
 import type {SearchColumnType, SortOrder} from '@libs/SearchUtils';
 import Navigation from '@navigation/Navigation';
-import type {CentralPaneNavigatorParamList} from '@navigation/types';
+import type {AuthScreensParamList} from '@navigation/types';
 import EmptySearchView from '@pages/Search/EmptySearchView';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -40,7 +40,7 @@ function isReportListItemType(item: TransactionListItemType | ReportListItemType
 function Search({query, policyIDs, sortBy, sortOrder}: SearchProps) {
     const {isOffline} = useNetwork();
     const styles = useThemeStyles();
-    const navigation = useNavigation<StackNavigationProp<CentralPaneNavigatorParamList>>();
+    const navigation = useNavigation<StackNavigationProp<AuthScreensParamList>>();
     const lastSearchResultsRef = useRef<OnyxEntry<SearchResults>>();
 
     const hash = SearchUtils.getQueryHash(query, policyIDs, sortBy, sortOrder);

src/components/withPrepareCentralPaneScreen/index.native.tsx

@@ -0,0 +1,23 @@
+import type {ComponentType, ForwardedRef, RefAttributes} from 'react';
+import React from 'react';
+import getComponentDisplayName from '@libs/getComponentDisplayName';
+import FreezeWrapper from '@libs/Navigation/FreezeWrapper';
+
+export default function withPrepareCentralPaneScreen<TProps, TRef>(
+    WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>,
+): (props: TProps & React.RefAttributes<TRef>) => React.ReactElement | null {
+    function WithPrepareCentralPaneScreen(props: TProps, ref: ForwardedRef<TRef>) {
+        return (
+            <FreezeWrapper>
+                <WrappedComponent
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...props}
+                    ref={ref}
+                />
+            </FreezeWrapper>
+        );
+    }
+
+    WithPrepareCentralPaneScreen.displayName = `WithPrepareCentralPaneScreen(${getComponentDisplayName(WrappedComponent)})`;
+    return React.forwardRef(WithPrepareCentralPaneScreen);
+}

src/components/withPrepareCentralPaneScreen/index.tsx

@@ -0,0 +1,5 @@
+import type {ComponentType} from 'react';
+
+export default function withPrepareCentralPaneScreen(WrappedComponent: ComponentType) {
+    return WrappedComponent;
+}

src/hooks/useActiveRoute.ts

@@ -1,8 +1,8 @@
 import {useContext} from 'react';
 import ActiveRouteContext from '@libs/Navigation/AppNavigator/Navigators/ActiveRouteContext';
-import type {CentralPaneNavigatorParamList, NavigationPartialRoute} from '@libs/Navigation/types';
+import type {AuthScreensParamList, NavigationPartialRoute} from '@libs/Navigation/types';
 
-function useActiveRoute(): NavigationPartialRoute<keyof CentralPaneNavigatorParamList> | undefined {
+function useActiveRoute(): NavigationPartialRoute<keyof AuthScreensParamList> | undefined {
     return useContext(ActiveRouteContext);
 }
 

src/libs/Navigation/AppNavigator/AuthScreens.tsx

@@ -3,6 +3,7 @@ import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import Onyx, {withOnyx} from 'react-native-onyx';
 import OptionsListContextProvider from '@components/OptionListContextProvider';
+import withPrepareCentralPaneScreen from '@components/withPrepareCentralPaneScreen';
 import useOnboardingLayout from '@hooks/useOnboardingLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -40,11 +41,12 @@ import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
 import type * as OnyxTypes from '@src/types/onyx';
 import type {SelectedTimezone, Timezone} from '@src/types/onyx/PersonalDetails';
+import type {CentralPaneName} from './CENTRAL_PANE_SCREENS';
+import {CENTRAL_PANE_SCREENS, getCentralPaneScreenInitialParams} from './CENTRAL_PANE_SCREENS';
 import createCustomStackNavigator from './createCustomStackNavigator';
 import defaultScreenOptions from './defaultScreenOptions';
 import getRootNavigatorScreenOptions from './getRootNavigatorScreenOptions';
 import BottomTabNavigator from './Navigators/BottomTabNavigator';
-import CentralPaneNavigator from './Navigators/CentralPaneNavigator';
 import FeatureTrainingModalNavigator from './Navigators/FeatureTrainingModalNavigator';
 import FullScreenNavigator from './Navigators/FullScreenNavigator';
 import LeftModalNavigator from './Navigators/LeftModalNavigator';
@@ -284,20 +286,26 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    const CentralPaneNameOptions = {
+        headerShown: false,
+        title: 'New Expensify',
+
+        // Prevent unnecessary scrolling
+        cardStyle: styles.cardStyleNavigator,
+    };
+
     return (
         <OptionsListContextProvider>
             <View style={styles.rootNavigatorContainerStyles(isSmallScreenWidth)}>
-                <RootStack.Navigator isSmallScreenWidth={isSmallScreenWidth}>
+                <RootStack.Navigator
+                    screenOptions={screenOptions.centralPaneNavigator}
+                    isSmallScreenWidth={isSmallScreenWidth}
+                >
                     <RootStack.Screen
                         name={NAVIGATORS.BOTTOM_TAB_NAVIGATOR}
                         options={screenOptions.bottomTab}
                         component={BottomTabNavigator}
                     />
-                    <RootStack.Screen
-                        name={NAVIGATORS.CENTRAL_PANE_NAVIGATOR}
-                        options={screenOptions.centralPaneNavigator}
-                        component={CentralPaneNavigator}
-                    />
                     <RootStack.Screen
                         name={SCREENS.VALIDATE_LOGIN}
                         options={{
@@ -419,6 +427,18 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
                         options={defaultScreenOptions}
                         component={ConnectionCompletePage}
                     />
+                    {Object.entries(CENTRAL_PANE_SCREENS).map(([screenName, componentGetter]) => {
+                        const centralPaneName = screenName as CentralPaneName;
+                        return (
+                            <RootStack.Screen
+                                key={centralPaneName}
+                                name={centralPaneName}
+                                initialParams={getCentralPaneScreenInitialParams(centralPaneName)}
+                                getComponent={() => withPrepareCentralPaneScreen(componentGetter())}
+                                options={CentralPaneNameOptions}
+                            />
+                        );
+                    })}
                 </RootStack.Navigator>
             </View>
         </OptionsListContextProvider>

src/libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS.ts

@@ -0,0 +1,44 @@
+import type {ValueOf} from 'type-fest';
+import getCurrentUrl from '@libs/Navigation/currentUrl';
+import type {CentralPaneScreensParamList} from '@libs/Navigation/types';
+import CONST from '@src/CONST';
+import SCREENS from '@src/SCREENS';
+
+type CentralPaneName = keyof CentralPaneScreensParamList;
+
+type Screens = Partial<Record<CentralPaneName, () => React.ComponentType>>;
+
+const CENTRAL_PANE_SCREENS = {
+    [SCREENS.SETTINGS.WORKSPACES]: () => require('../../../pages/workspace/WorkspacesListPage').default as React.ComponentType,
+    [SCREENS.SETTINGS.PREFERENCES.ROOT]: () => require('../../../pages/settings/Preferences/PreferencesPage').default as React.ComponentType,
+    [SCREENS.SETTINGS.SECURITY]: () => require('../../../pages/settings/Security/SecuritySettingsPage').default as React.ComponentType,
+    [SCREENS.SETTINGS.PROFILE.ROOT]: () => require('../../../pages/settings/Profile/ProfilePage').default as React.ComponentType,
+    [SCREENS.SETTINGS.WALLET.ROOT]: () => require('../../../pages/settings/Wallet/WalletPage').default as React.ComponentType,
+    [SCREENS.SETTINGS.ABOUT]: () => require('../../../pages/settings/AboutPage/AboutPage').default as React.ComponentType,
+    [SCREENS.SETTINGS.TROUBLESHOOT]: () => require('../../../pages/settings/Troubleshoot/TroubleshootPage').default as React.ComponentType,
+    [SCREENS.SETTINGS.SAVE_THE_WORLD]: () => require('../../../pages/TeachersUnite/SaveTheWorldPage').default as React.ComponentType,
+    [SCREENS.SETTINGS.SUBSCRIPTION.ROOT]: () => require('../../../pages/settings/Subscription/SubscriptionSettingsPage').default as React.ComponentType,
+    [SCREENS.SEARCH.CENTRAL_PANE]: () => require('../../../pages/Search/SearchPage').default as React.ComponentType,
+    [SCREENS.REPORT]: () => require('./ReportScreenWrapper').default as React.ComponentType,
+} satisfies Screens;
+
+const CENTRAL_PANE_SCREEN_NAMES = Object.keys(CENTRAL_PANE_SCREENS);
+
+function getCentralPaneScreenInitialParams(screenName: CentralPaneName): Partial<ValueOf<CentralPaneScreensParamList>> {
+    const url = getCurrentUrl();
+    const openOnAdminRoom = url ? new URL(url).searchParams.get('openOnAdminRoom') : undefined;
+
+    if (screenName === SCREENS.SEARCH.CENTRAL_PANE) {
+        return {sortBy: CONST.SEARCH_TABLE_COLUMNS.DATE, sortOrder: CONST.SORT_ORDER.DESC};
+    }
+
+    if (screenName === SCREENS.REPORT && openOnAdminRoom === 'true') {
+        return {openOnAdminRoom: true};
+    }
+
+    return undefined;
+}
+
+export type {CentralPaneName};
+
+export {CENTRAL_PANE_SCREENS, CENTRAL_PANE_SCREEN_NAMES, getCentralPaneScreenInitialParams};

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

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

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

@@ -1,9 +1,10 @@
 import {useNavigationState} from '@react-navigation/native';
 import type {StackNavigationOptions} from '@react-navigation/stack';
 import React from 'react';
+import type {CentralPaneName} from '@libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS';
 import createCustomBottomTabNavigator from '@libs/Navigation/AppNavigator/createCustomBottomTabNavigator';
 import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute';
-import type {BottomTabNavigatorParamList, CentralPaneName, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types';
+import type {BottomTabNavigatorParamList, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types';
 import SidebarScreen from '@pages/home/sidebar/SidebarScreen';
 import SearchPageBottomTab from '@pages/Search/SearchPageBottomTab';
 import SCREENS from '@src/SCREENS';

src/libs/Navigation/AppNavigator/ReportScreenWrapper.tsx

@@ -1,11 +1,11 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import React from 'react';
-import type {CentralPaneNavigatorParamList} from '@navigation/types';
+import type {AuthScreensParamList} from '@navigation/types';
 import ReportScreen from '@pages/home/ReportScreen';
 import type SCREENS from '@src/SCREENS';
 import ReportScreenIDSetter from './ReportScreenIDSetter';
 
-type ReportScreenWrapperProps = StackScreenProps<CentralPaneNavigatorParamList, typeof SCREENS.REPORT>;
+type ReportScreenWrapperProps = StackScreenProps<AuthScreensParamList, typeof SCREENS.REPORT>;
 
 function ReportScreenWrapper({route, navigation}: ReportScreenWrapperProps) {
     // The ReportScreen without the reportID set will display a skeleton

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

@@ -16,6 +16,7 @@ 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';
 import {getChatTabBrickRoad} from '@libs/WorkspacesSettingsUtils';
 import BottomTabAvatar from '@pages/home/sidebar/BottomTabAvatar';
 import BottomTabBarFloatingActionButton from '@pages/home/sidebar/BottomTabBarFloatingActionButton';
@@ -46,7 +47,7 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
         const currentRoute = routes?.[navigationState?.index ?? 0];
         // When we are redirected to the Settings tab from the OldDot, we don't want to call the Welcome.show() method.
         // To prevent this, the value of the bottomTabRoute?.name is checked here
-        if (Boolean(currentRoute && currentRoute.name !== NAVIGATORS.BOTTOM_TAB_NAVIGATOR && currentRoute.name !== NAVIGATORS.CENTRAL_PANE_NAVIGATOR) || Session.isAnonymousUser()) {
+        if (Boolean(currentRoute && currentRoute.name !== NAVIGATORS.BOTTOM_TAB_NAVIGATOR && !isCentralPaneName(currentRoute.name)) || Session.isAnonymousUser()) {
             return;
         }
 

src/libs/Navigation/AppNavigator/createCustomStackNavigator/CustomRouter.ts

@@ -7,6 +7,7 @@ import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRo
 import linkingConfig from '@libs/Navigation/linkingConfig';
 import getAdaptedStateFromPath from '@libs/Navigation/linkingConfig/getAdaptedStateFromPath';
 import type {NavigationPartialRoute, RootStackParamList, State} from '@libs/Navigation/types';
+import isCentralPaneName from '@libs/NavigationUtils';
 import NAVIGATORS from '@src/NAVIGATORS';
 import SCREENS from '@src/SCREENS';
 import type {ResponsiveStackNavigatorRouterOptions} from './types';
@@ -66,8 +67,8 @@ function compareAndAdaptState(state: StackNavigationState<RootStackParamList>) {
             return;
         }
 
-        const topmostCentralPaneRoute = state.routes.filter((route) => route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR).at(-1);
-        const templateCentralPaneRoute = templateState.routes.find((route) => route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR);
+        const topmostCentralPaneRoute = state.routes.filter((route) => isCentralPaneName(route.name)).at(-1);
+        const templateCentralPaneRoute = templateState.routes.find((route) => isCentralPaneName(route.name));
 
         const topmostCentralPaneRouteExtracted = getTopmostCentralPaneRoute(state);
         const templateCentralPaneRouteExtracted = getTopmostCentralPaneRoute(templateState as State<RootStackParamList>);