Simplify the RootNavigator structure

src/components/ScreenWrapper.tsx

@@ -14,7 +14,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';
@@ -93,7 +93,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/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

@@ -38,11 +38,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 {CENTRAL_PANE_SCREENS} from './CENTRAL_PANE_SCREENS';
+import type {CentralPaneName} 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';
@@ -157,6 +158,9 @@ const modalScreenListeners = {
     },
 };
 
+const url = getCurrentUrl();
+const openOnAdminRoom = url ? new URL(url).searchParams.get('openOnAdminRoom') : undefined;
+
 function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDAppliedToClient}: AuthScreensProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -273,20 +277,28 @@ 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,
+    };
+
+    // @TODO: Check whether CENTRAL_PANE_SCREENS should be wrapped by FreezeWrapper on native platforms
+
     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={{
@@ -408,6 +420,15 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
                         options={defaultScreenOptions}
                         component={ConnectionCompletePage}
                     />
+                    {Object.entries(CENTRAL_PANE_SCREENS).map(([screenName, componentGetter]) => (
+                        <RootStack.Screen
+                            key={screenName}
+                            name={screenName as CentralPaneName}
+                            initialParams={{openOnAdminRoom: (screenName === SCREENS.REPORT && openOnAdminRoom === 'true') || undefined}}
+                            getComponent={componentGetter}
+                            options={CentralPaneNameOptions}
+                        />
+                    ))}
                 </RootStack.Navigator>
             </View>
         </OptionsListContextProvider>

src/libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS.ts

@@ -0,0 +1,25 @@
+import type {AuthScreensParamList} from '@libs/Navigation/types';
+import SCREENS from '@src/SCREENS';
+
+type Screens = Partial<Record<keyof AuthScreensParamList, () => 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.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);
+
+type CentralPaneName = keyof typeof CENTRAL_PANE_SCREENS;
+
+export type {CentralPaneName};
+
+export {CENTRAL_PANE_SCREENS, CENTRAL_PANE_SCREEN_NAMES};

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>);

src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx

@@ -9,7 +9,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute';
 import navigationRef from '@libs/Navigation/navigationRef';
 import type {RootStackParamList, State} from '@libs/Navigation/types';
-import NAVIGATORS from '@src/NAVIGATORS';
+import isCentralPaneName from '@libs/NavigationUtils';
 import SCREENS from '@src/SCREENS';
 import CustomRouter from './CustomRouter';
 import type {ResponsiveStackNavigatorProps, ResponsiveStackNavigatorRouterOptions} from './types';
@@ -21,7 +21,7 @@ function reduceCentralPaneRoutes(routes: Routes): Routes {
     const reverseRoutes = [...routes].reverse();
 
     reverseRoutes.forEach((route) => {
-        if (route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR) {
+        if (isCentralPaneName(route.name)) {
             // Remove all central pane routes except the last 3. This will improve performance.
             if (count < 3) {
                 result.push(route);

src/libs/Navigation/AppNavigator/getActionsFromPartialDiff.ts

@@ -22,12 +22,7 @@ function getActionsFromPartialDiff(diff: GetPartialStateDiffReturnType): Navigat
 
     if (centralPaneDiff) {
         // In this case we have to wrap the inner central pane route with central pane navigator.
-        actions.push(
-            StackActions.push(NAVIGATORS.CENTRAL_PANE_NAVIGATOR, {
-                screen: centralPaneDiff.name,
-                params: centralPaneDiff.params,
-            }),
-        );
+        actions.push(StackActions.push(centralPaneDiff.name, centralPaneDiff.params));
     }
 
     if (fullScreenDiff) {

src/libs/Navigation/Navigation.ts

@@ -2,6 +2,7 @@ import {findFocusedRoute} from '@react-navigation/core';
 import type {EventArg, NavigationContainerEventMap} from '@react-navigation/native';
 import {CommonActions, getPathFromState, StackActions} from '@react-navigation/native';
 import Log from '@libs/Log';
+import isCentralPaneName from '@libs/NavigationUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import {getReport} from '@libs/ReportUtils';
 import CONST from '@src/CONST';
@@ -220,7 +221,7 @@ function goBack(fallbackRoute?: Route, shouldEnforceFallback = false, shouldPopT
         return;
     }
 
-    const isCentralPaneFocused = findFocusedRoute(navigationRef.current.getState())?.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR;
+    const isCentralPaneFocused = isCentralPaneName(findFocusedRoute(navigationRef.current.getState())?.name);
     const distanceFromPathInRootNavigator = getDistanceFromPathInRootNavigator(fallbackRoute ?? '');
 
     // Allow CentralPane to use UP with fallback route if the path is not found in root navigator.

src/libs/Navigation/dismissModalWithReport.ts

@@ -3,6 +3,7 @@ import type {NavigationContainerRef} from '@react-navigation/native';
 import {StackActions} from '@react-navigation/native';
 import {findLastIndex} from 'lodash';
 import Log from '@libs/Log';
+import isCentralPaneName from '@libs/NavigationUtils';
 import getPolicyEmployeeAccountIDs from '@libs/PolicyEmployeeListUtils';
 import {doesReportBelongToWorkspace} from '@libs/ReportUtils';
 import NAVIGATORS from '@src/NAVIGATORS';
@@ -64,7 +65,7 @@ function dismissModalWithReport(targetReport: Report | EmptyObject, navigationRe
                 // If not-found page is in the route stack, we need to close it
             } else if (state.routes.some((route) => route.name === SCREENS.NOT_FOUND)) {
                 const lastRouteIndex = state.routes.length - 1;
-                const centralRouteIndex = findLastIndex(state.routes, (route) => route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR);
+                const centralRouteIndex = findLastIndex(state.routes, (route) => isCentralPaneName(route.name));
                 navigationRef.dispatch({...StackActions.pop(lastRouteIndex - centralRouteIndex), target: state.key});
             } else {
                 navigationRef.dispatch({...StackActions.pop(), target: state.key});