[CP Staging] Revert "Merge pull request #83899 from software-mansion-labs/collecti…

src/CONST/index.ts

@@ -231,7 +231,6 @@ const CONST = {
     ANIMATED_PROGRESS_BAR_DURATION: 750,
     ANIMATION_IN_TIMING: 100,
     COMPOSER_FOCUS_DELAY: 150,
-    MAX_TRANSITION_DURATION_MS: 1000,
     ANIMATION_DIRECTION: {
         IN: 'in',
         OUT: 'out',
@@ -8467,6 +8466,10 @@ const CONST = {
         ADD_EXPENSE_APPROVALS: 'addExpenseApprovals',
     },
 
+    MODAL_EVENTS: {
+        CLOSED: 'modalClosed',
+    },
+
     LIST_BEHAVIOR: {
         REGULAR: 'regular',
         INVERTED: 'inverted',

src/components/EmojiPicker/EmojiPicker.tsx

@@ -116,7 +116,7 @@ function EmojiPicker({viewportOffsetTop, ref}: EmojiPickerProps) {
 
         // It's possible that the anchor is inside an active modal (e.g., add emoji reaction in report context menu).
         // So, we need to get the anchor position first before closing the active modal which will also destroy the anchor.
-        KeyboardUtils.dismiss({shouldSkipSafari: true}).then(() =>
+        KeyboardUtils.dismiss(true).then(() =>
             calculateAnchorPosition(emojiPopoverAnchor?.current, anchorOriginValue).then((value) => {
                 close(() => {
                     onWillShow?.();

src/components/Modal/BaseModal.tsx

@@ -2,7 +2,7 @@ import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} fr
 import type {LayoutChangeEvent} from 'react-native';
 // Animated required for side panel navigation
 // eslint-disable-next-line no-restricted-imports
-import {Animated, View} from 'react-native';
+import {Animated, DeviceEventEmitter, View} from 'react-native';
 import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
 import NavigationBar from '@components/NavigationBar';
 import ScreenWrapperOfflineIndicatorContext from '@components/ScreenWrapper/ScreenWrapperOfflineIndicatorContext';
@@ -168,6 +168,8 @@ function BaseModal({
         [],
     );
 
+    useEffect(() => () => DeviceEventEmitter.emit(CONST.MODAL_EVENTS.CLOSED), []);
+
     const handleShowModal = useCallback(() => {
         if (shouldSetModalVisibility) {
             setModalVisibility(true, type);

src/components/Modal/ReanimatedModal/index.tsx

@@ -9,7 +9,6 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import blurActiveElement from '@libs/Accessibility/blurActiveElement';
 import getPlatform from '@libs/getPlatform';
-import TransitionTracker from '@libs/Navigation/TransitionTracker';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import Backdrop from './Backdrop';
@@ -104,7 +103,6 @@ function ReanimatedModal({
                 // eslint-disable-next-line @typescript-eslint/no-deprecated
                 InteractionManager.clearInteractionHandle(handleRef.current);
             }
-            TransitionTracker.endTransition();
 
             setIsVisibleState(false);
             setIsContainerOpen(false);
@@ -117,15 +115,13 @@ function ReanimatedModal({
         if (isVisible && !isContainerOpen && !isTransitioning) {
             // eslint-disable-next-line @typescript-eslint/no-deprecated
             handleRef.current = InteractionManager.createInteractionHandle();
-            TransitionTracker.startTransition();
             onModalWillShow();
 
             setIsVisibleState(true);
             setIsTransitioning(true);
         } else if (!isVisible && isContainerOpen && !isTransitioning) {
             // eslint-disable-next-line @typescript-eslint/no-deprecated
             handleRef.current = InteractionManager.createInteractionHandle();
-            TransitionTracker.startTransition();
             onModalWillHide();
 
             blurActiveElement();
@@ -146,7 +142,6 @@ function ReanimatedModal({
             // eslint-disable-next-line @typescript-eslint/no-deprecated
             InteractionManager.clearInteractionHandle(handleRef.current);
         }
-        TransitionTracker.endTransition();
         onModalShow();
     }, [onModalShow]);
 
@@ -157,7 +152,6 @@ function ReanimatedModal({
             // eslint-disable-next-line @typescript-eslint/no-deprecated
             InteractionManager.clearInteractionHandle(handleRef.current);
         }
-        TransitionTracker.endTransition();
 
         // Because on Android, the Modal's onDismiss callback does not work reliably. There's a reported issue at:
         // https://stackoverflow.com/questions/58937956/react-native-modal-ondismiss-not-invoked

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

@@ -1,8 +1,8 @@
 import type {NavigatorScreenParams} from '@react-navigation/native';
 import {useFocusEffect} from '@react-navigation/native';
-import React, {useCallback, useMemo, useRef} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 // eslint-disable-next-line no-restricted-imports
-import {Animated, InteractionManager} from 'react-native';
+import {Animated, DeviceEventEmitter, InteractionManager} from 'react-native';
 import NoDropZone from '@components/DragAndDrop/NoDropZone';
 import {MultifactorAuthenticationContextProviders} from '@components/MultifactorAuthentication/Context';
 import {
@@ -181,6 +181,8 @@ function RightModalNavigator({navigation, route}: RightModalNavigatorProps) {
         }, [syncRHPKeys, clearWideRHPKeysAfterTabChanged]),
     );
 
+    useEffect(() => () => DeviceEventEmitter.emit(CONST.MODAL_EVENTS.CLOSED), []);
+
     return (
         <NarrowPaneContextProvider>
             <MultifactorAuthenticationContextProviders>

src/libs/Navigation/Navigation.ts

@@ -5,7 +5,7 @@ import {Str} from 'expensify-common';
 // eslint-disable-next-line you-dont-need-lodash-underscore/omit
 import omit from 'lodash/omit';
 import {nanoid} from 'nanoid/non-secure';
-import {Dimensions} from 'react-native';
+import {DeviceEventEmitter, Dimensions, InteractionManager} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
 import type {Writable} from 'type-fest';
@@ -42,7 +42,6 @@ import setNavigationActionToMicrotaskQueue from './helpers/setNavigationActionTo
 import {linkingConfig} from './linkingConfig';
 import {SPLIT_TO_SIDEBAR} from './linkingConfig/RELATIONS';
 import navigationRef from './navigationRef';
-import TransitionTracker from './TransitionTracker';
 import type {
     NavigationPartialRoute,
     NavigationRef,
@@ -332,18 +331,9 @@ function navigate(route: Route, options?: LinkToOptions) {
         }
     }
 
-    const runImmediately = !options?.waitForTransition;
-    TransitionTracker.runAfterTransitions({
-        callback: () => {
-            const targetRoute = route.startsWith(CONST.SAML_REDIRECT_URL) ? ROUTES.HOME : route;
-            linkTo(navigationRef.current, targetRoute, options);
-            closeSidePanelOnNarrowScreen(route);
-            if (options?.afterTransition) {
-                TransitionTracker.runAfterTransitions({callback: options.afterTransition, waitForUpcomingTransition: true});
-            }
-        },
-        runImmediately,
-    });
+    const targetRoute = route.startsWith(CONST.SAML_REDIRECT_URL) ? ROUTES.HOME : route;
+    linkTo(navigationRef.current, targetRoute, options);
+    closeSidePanelOnNarrowScreen(route);
 }
 /**
  * When routes are compared to determine whether the fallback route passed to the goUp function is in the state,
@@ -408,15 +398,10 @@ type GoBackOptions = {
      * In that case we want to goUp to a country picker with any params so we don't compare them.
      */
     compareParams?: boolean;
-    // Callback to execute after the navigation transition animation completes.
-    afterTransition?: () => void | undefined;
-    // If true, waits for ongoing transitions to finish before going back. Defaults to false (goes back immediately).
-    waitForTransition?: boolean;
 };
 
-const defaultGoBackOptions: Required<Pick<GoBackOptions, 'compareParams' | 'waitForTransition'>> = {
+const defaultGoBackOptions: Required<GoBackOptions> = {
     compareParams: true,
-    waitForTransition: false,
 };
 
 /**
@@ -505,26 +490,22 @@ function goBack(backToRoute?: Route, options?: GoBackOptions) {
         return;
     }
 
-    const runImmediately = !options?.waitForTransition;
-    TransitionTracker.runAfterTransitions({
-        callback: () => {
-            if (backToRoute) {
-                goUp(backToRoute, options);
-            } else if (shouldPopToSidebar) {
-                popToSidebar();
-            } else if (!navigationRef.current?.canGoBack()) {
-                Log.hmmm('[Navigation] Unable to go back');
-                return;
-            } else {
-                navigationRef.current?.goBack();
-            }
+    if (backToRoute) {
+        goUp(backToRoute, options);
+        return;
+    }
 
-            if (options?.afterTransition) {
-                TransitionTracker.runAfterTransitions({callback: options.afterTransition, waitForUpcomingTransition: true});
-            }
-        },
-        runImmediately,
-    });
+    if (shouldPopToSidebar) {
+        popToSidebar();
+        return;
+    }
+
+    if (!navigationRef.current?.canGoBack()) {
+        Log.hmmm('[Navigation] Unable to go back');
+        return;
+    }
+
+    navigationRef.current?.goBack();
 }
 
 /**
@@ -757,27 +738,25 @@ function getTopmostSuperWideRHPReportID(state: NavigationState = navigationRef.g
  *
  * @param options - Configuration object
  * @param options.ref - Navigation ref to use (defaults to navigationRef)
- * @param options.afterTransition - Optional callback to execute after the navigation transition animation completes.
+ * @param options.callback - Optional callback to execute after the modal has finished closing.
+ *                           The callback fires when RightModalNavigator unmounts.
  *
  * For detailed information about dismissing modals,
  * see the NAVIGATION.md documentation.
  */
-function dismissModal({ref = navigationRef, afterTransition, waitForTransition}: {ref?: NavigationRef; afterTransition?: () => void; waitForTransition?: boolean} = {}) {
+const dismissModal = ({ref = navigationRef, callback}: {ref?: NavigationRef; callback?: () => void} = {}) => {
     clearSelectedTextIfComposerBlurred();
-    const runImmediately = !waitForTransition;
     isNavigationReady().then(() => {
-        TransitionTracker.runAfterTransitions({
-            callback: () => {
-                ref.dispatch({type: CONST.NAVIGATION.ACTION_TYPE.DISMISS_MODAL});
+        if (callback) {
+            const subscription = DeviceEventEmitter.addListener(CONST.MODAL_EVENTS.CLOSED, () => {
+                subscription.remove();
+                callback();
+            });
+        }
 
-                if (afterTransition) {
-                    TransitionTracker.runAfterTransitions({callback: afterTransition, waitForUpcomingTransition: true});
-                }
-            },
-            runImmediately,
-        });
+        ref.dispatch({type: CONST.NAVIGATION.ACTION_TYPE.DISMISS_MODAL});
     });
-}
+};
 
 /**
  * Dismisses the modal and opens the given report.
@@ -814,11 +793,10 @@ const dismissModalWithReport = (
             navigate(reportRoute, {forceReplace: true});
             return;
         }
-
-        dismissModal({
-            afterTransition: () => {
-                navigate(reportRoute);
-            },
+        dismissModal();
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        InteractionManager.runAfterInteractions(() => {
+            navigate(reportRoute);
         });
     });
 };
@@ -903,7 +881,7 @@ function clearPreloadedRoutes() {
  *
  * @param modalStackNames - names of the modal stacks we want to dismiss to
  */
-function dismissToModalStack(modalStackNames: Set<string>, options: {afterTransition?: () => void} = {}) {
+function dismissToModalStack(modalStackNames: Set<string>) {
     const rootState = navigationRef.getRootState();
     if (!rootState) {
         return;
@@ -919,36 +897,32 @@ function dismissToModalStack(modalStackNames: Set<string>, options: {afterTransi
     const routesToPop = rhpState.routes.length - lastFoundModalStackIndex - 1;
 
     if (routesToPop <= 0 || lastFoundModalStackIndex === -1) {
-        dismissModal(options);
+        dismissModal();
         return;
     }
 
     navigationRef.dispatch({...StackActions.pop(routesToPop), target: rhpState.key});
-
-    if (options?.afterTransition) {
-        TransitionTracker.runAfterTransitions({callback: options.afterTransition, waitForUpcomingTransition: true});
-    }
 }
 
 /**
  * Dismiss top layer modal and go back to the Wide/Super Wide RHP.
  */
-function dismissToPreviousRHP(options: {afterTransition?: () => void} = {}) {
-    return dismissToModalStack(ALL_WIDE_RIGHT_MODALS, options);
+function dismissToPreviousRHP() {
+    return dismissToModalStack(ALL_WIDE_RIGHT_MODALS);
 }
 
-function navigateBackToLastSuperWideRHPScreen(options: {afterTransition?: () => void} = {}) {
-    return dismissToModalStack(SUPER_WIDE_RIGHT_MODALS, options);
+function navigateBackToLastSuperWideRHPScreen() {
+    return dismissToModalStack(SUPER_WIDE_RIGHT_MODALS);
 }
 
-function dismissToSuperWideRHP(options: {afterTransition?: () => void} = {}) {
+function dismissToSuperWideRHP() {
     // On narrow layouts (mobile), Super Wide RHP doesn't exist, so just dismiss the modal completely
     if (getIsNarrowLayout()) {
-        dismissModal(options);
+        dismissModal();
         return;
     }
     // On wide layouts, dismiss back to the Super Wide RHP modal stack
-    navigateBackToLastSuperWideRHPScreen(options);
+    navigateBackToLastSuperWideRHPScreen();
 }
 
 /**