Merge pull request #197 from software-mansion-labs/poc/fixes-after-re…

…view-8

Fix issue: Android - Workspace - No animation when opening workspace chat from workspace settings

src/libs/Navigation/AppNavigator/AuthScreens.tsx

@@ -59,7 +59,7 @@ import type {SelectedTimezone, Timezone} from '@src/types/onyx/PersonalDetails';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type ReactComponentModule from '@src/types/utils/ReactComponentModule';
 import createRootStackNavigator from './createRootStackNavigator';
-import {workspaceSplitsWithoutEnteringAnimation} from './createRootStackNavigator/GetStateForActionHandlers';
+import {reportsSplitsWithEnteringAnimation, workspaceSplitsWithoutEnteringAnimation} from './createRootStackNavigator/GetStateForActionHandlers';
 import defaultScreenOptions from './defaultScreenOptions';
 import ExplanationModalNavigator from './Navigators/ExplanationModalNavigator';
 import FeatureTrainingModalNavigator from './Navigators/FeatureTrainingModalNavigator';
@@ -408,6 +408,22 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
         };
     };
 
+    // Animation is enabled when navigating to the report screen
+    const getReportsSplitNavigatorOptions = ({route}: {route: RouteProp<AuthScreensParamList>}) => {
+        // We don't need to do anything special for the wide screen.
+        if (!shouldUseNarrowLayout) {
+            return rootNavigatorScreenOptions.splitNavigator;
+        }
+
+        // On the narrow screen, we want to animate this navigator if pushed ReportsSplitNavigator includes ReportScreen
+        const animationEnabled = reportsSplitsWithEnteringAnimation.has(route.key);
+
+        return {
+            ...rootNavigatorScreenOptions.splitNavigator,
+            animation: animationEnabled ? Animations.SLIDE_FROM_RIGHT : Animations.NONE,
+        };
+    };
+
     const clearStatus = () => {
         User.clearCustomStatus();
         User.clearDraftCustomStatus();
@@ -441,7 +457,7 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
                 {/* This has to be the first navigator in auth screens. */}
                 <RootStack.Screen
                     name={NAVIGATORS.REPORTS_SPLIT_NAVIGATOR}
-                    options={rootNavigatorScreenOptions.splitNavigator}
+                    options={getReportsSplitNavigatorOptions}
                     getComponent={loadReportSplitNavigator}
                 />
                 <RootStack.Screen

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

@@ -1,4 +1,3 @@
-import {useRoute} from '@react-navigation/native';
 import React, {useState} from 'react';
 import useActiveWorkspace from '@hooks/useActiveWorkspace';
 import usePermissions from '@hooks/usePermissions';
@@ -7,9 +6,11 @@ import FreezeWrapper from '@libs/Navigation/AppNavigator/FreezeWrapper';
 import useSplitNavigatorScreenOptions from '@libs/Navigation/AppNavigator/useSplitNavigatorScreenOptions';
 import getCurrentUrl from '@libs/Navigation/currentUrl';
 import shouldOpenOnAdminRoom from '@libs/Navigation/helpers/shouldOpenOnAdminRoom';
-import type {ReportsSplitNavigatorParamList} from '@libs/Navigation/types';
+import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
+import type {AuthScreensParamList, ReportsSplitNavigatorParamList} from '@libs/Navigation/types';
 import * as ReportUtils from '@libs/ReportUtils';
 import CONST from '@src/CONST';
+import type NAVIGATORS from '@src/NAVIGATORS';
 import SCREENS from '@src/SCREENS';
 import type ReactComponentModule from '@src/types/utils/ReactComponentModule';
 
@@ -18,10 +19,9 @@ const loadSidebarScreen = () => require<ReactComponentModule>('@pages/home/sideb
 
 const Split = createSplitNavigator<ReportsSplitNavigatorParamList>();
 
-function ReportsSplitNavigator() {
+function ReportsSplitNavigator({route}: PlatformStackScreenProps<AuthScreensParamList, typeof NAVIGATORS.REPORTS_SPLIT_NAVIGATOR>) {
     const {canUseDefaultRooms} = usePermissions();
     const {activeWorkspaceID} = useActiveWorkspace();
-    const route = useRoute();
     const splitNavigatorScreenOptions = useSplitNavigatorScreenOptions();
 
     const [initialReportID] = useState(() => {

src/libs/Navigation/AppNavigator/createRootStackNavigator/GetStateForActionHandlers.ts

@@ -25,6 +25,7 @@ const MODAL_ROUTES_TO_DISMISS: string[] = [
 ];
 
 const workspaceSplitsWithoutEnteringAnimation = new Set();
+const reportsSplitsWithEnteringAnimation = new Set();
 
 /**
  * Handles the OPEN_WORKSPACE_SPLIT action.
@@ -152,7 +153,22 @@ function handlePushReportAction(
         },
     };
 
-    return stackRouter.getStateForAction(state, modifiedAction, configOptions);
+    const stateWithReportsSplitNavigator = stackRouter.getStateForAction(state, modifiedAction, configOptions);
+
+    if (!stateWithReportsSplitNavigator) {
+        Log.hmmm('[handlePushReportAction] ReportsSplitNavigator has not been found in the navigation state.');
+        return null;
+    }
+
+    const lastFullScreenRoute = stateWithReportsSplitNavigator.routes.at(-1);
+    const actionPayloadScreen = action.payload?.params && 'screen' in action.payload.params ? action.payload?.params?.screen : undefined;
+
+    // ReportScreen should always be opened with an animation
+    if (actionPayloadScreen === SCREENS.REPORT && lastFullScreenRoute?.key) {
+        reportsSplitsWithEnteringAnimation.add(lastFullScreenRoute.key);
+    }
+
+    return stateWithReportsSplitNavigator;
 }
 
 /**
@@ -240,4 +256,5 @@ export {
     handleSwitchPolicyID,
     handleNavigatingToModalFromModal,
     workspaceSplitsWithoutEnteringAnimation,
+    reportsSplitsWithEnteringAnimation,
 };

src/pages/workspace/WorkspaceInitialPage.tsx

@@ -493,7 +493,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac
                                     title={getReportName(currentUserPolicyExpenseChat)}
                                     description={translate('workspace.common.workspace')}
                                     icon={getIcons(currentUserPolicyExpenseChat, personalDetails)}
-                                    onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(currentUserPolicyExpenseChat?.reportID), {forceReplace: true})}
+                                    onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(currentUserPolicyExpenseChat?.reportID))}
                                     shouldShowRightIcon
                                     wrapperStyle={[styles.br2, styles.pl2, styles.pr0, styles.pv3, styles.mt1, styles.alignItemsCenter]}
                                     shouldShowSubscriptAvatar