Migrate E/App to use PlatformStackNavigation

src/components/WorkspaceSwitcherButton.tsx

@@ -18,9 +18,14 @@ type WorkspaceSwitcherButtonOnyxProps = {
     policy: OnyxEntry<Policy>;
 };
 
-type WorkspaceSwitcherButtonProps = WorkspaceSwitcherButtonOnyxProps;
+type WorkspaceSwitcherButtonProps = WorkspaceSwitcherButtonOnyxProps & {
+    /**
+     * Callback used to keep track of the workspace switching process in the BaseSidebarScreen.
+     */
+    onSwitchWorkspace?: () => void;
+};
 
-function WorkspaceSwitcherButton({policy}: WorkspaceSwitcherButtonProps) {
+function WorkspaceSwitcherButton({policy, onSwitchWorkspace}: WorkspaceSwitcherButtonProps) {
     const {translate} = useLocalize();
     const theme = useTheme();
 
@@ -48,6 +53,7 @@ function WorkspaceSwitcherButton({policy}: WorkspaceSwitcherButtonProps) {
                 accessibilityLabel={translate('common.workspaces')}
                 accessible
                 onPress={() => {
+                    onSwitchWorkspace?.();
                     pressableRef?.current?.blur();
                     interceptAnonymousUser(() => {
                         Navigation.navigate(ROUTES.WORKSPACE_SWITCHER);

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

@@ -17,9 +17,20 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
-type TopBarProps = {breadcrumbLabel: string; activeWorkspaceID?: string; shouldDisplaySearch?: boolean; shouldDisplayCancelSearch?: boolean};
+type TopBarProps = {
+    breadcrumbLabel: string;
+    activeWorkspaceID?: string;
+    shouldDisplaySearch?: boolean;
+    shouldDisplayCancelSearch?: boolean;
 
-function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true, shouldDisplayCancelSearch = false}: TopBarProps) {
+    /**
+     * Callback used to keep track of the workspace switching process in the BaseSidebarScreen.
+     * Passed to the WorkspaceSwitcherButton component.
+     */
+    onSwitchWorkspace?: () => void;
+};
+
+function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true, shouldDisplayCancelSearch = false, onSwitchWorkspace}: TopBarProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const policy = usePolicy(activeWorkspaceID);
@@ -42,7 +53,10 @@ function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true,
                 dataSet={{dragArea: true}}
             >
                 <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.ml2]}>
-                    <WorkspaceSwitcherButton policy={policy} />
+                    <WorkspaceSwitcherButton
+                        policy={policy}
+                        onSwitchWorkspace={onSwitchWorkspace}
+                    />
 
                     <View style={[styles.ml3, styles.flex1]}>
                         <Breadcrumbs

src/libs/Navigation/switchPolicyID.ts

@@ -1,4 +1,4 @@
-import {getActionFromState} from '@react-navigation/core';
+import {CommonActions, getActionFromState} from '@react-navigation/core';
 import type {NavigationAction, NavigationContainerRef, NavigationState, PartialState} from '@react-navigation/native';
 import {getPathFromState} from '@react-navigation/native';
 import type {Writable} from 'type-fest';
@@ -52,6 +52,17 @@ function getActionForBottomTabNavigator(action: StackNavigationAction, state: Na
         params.policyID = policyID;
     }
 
+    // If there already is a 'Home' route, we want to change the params rather than pushing a new 'Home' route,
+    // so that the screen does not get re-mounted. This would cause an empty screen/white flash when navigating back from the workspace switcher.
+    const homeRoute = bottomTabNavigatorRoute.state.routes.at(-1);
+    if (homeRoute && homeRoute.name === SCREENS.HOME) {
+        return {
+            ...CommonActions.setParams(params),
+            source: homeRoute?.key,
+        };
+    }
+
+    // If there is no 'Home' route, we want to push a new route.
     return {
         type: CONST.NAVIGATION.ACTION_TYPE.PUSH,
         payload: {

src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -36,11 +36,25 @@ function BaseSidebarScreen() {
         Timing.start(CONST.TIMING.SIDEBAR_LOADED);
     }, []);
 
+    const isSwitchingWorkspace = useRef(false);
     useEffect(() => {
-        if (!!activeWorkspace || activeWorkspaceID === undefined) {
+        // Whether the active workspace or the "Everything" page is loaded
+        const isWorkspaceOrEverythingLoaded = !!activeWorkspace || activeWorkspaceID === undefined;
+
+        // If we are currently switching workspaces, we don't want to do anything until the target workspace is loaded
+        if (isSwitchingWorkspace.current) {
+            if (isWorkspaceOrEverythingLoaded) {
+                isSwitchingWorkspace.current = false;
+            }
+            return;
+        }
+
+        // Otherwise, if the workspace is already loaded, we don't need to do anything
+        if (isWorkspaceOrEverythingLoaded) {
             return;
         }
 
+        isSwitchingWorkspace.current = true;
         Navigation.navigateWithSwitchPolicyID({policyID: undefined});
         updateLastAccessedWorkspace(undefined);
     }, [activeWorkspace, activeWorkspaceID]);
@@ -61,6 +75,7 @@ function BaseSidebarScreen() {
                         breadcrumbLabel={translate('common.inbox')}
                         activeWorkspaceID={activeWorkspaceID}
                         shouldDisplaySearch={shouldDisplaySearch}
+                        onSwitchWorkspace={() => (isSwitchingWorkspace.current = true)}
                     />
                     <View style={[styles.flex1]}>
                         <SidebarLinksData