diff --git a/contributingGuides/INTERACTION_MANAGER.md b/contributingGuides/INTERACTION_MANAGER.md deleted file mode 100644 index 08008b0b42ada..0000000000000 --- a/contributingGuides/INTERACTION_MANAGER.md +++ /dev/null @@ -1,67 +0,0 @@ -# InteractionManager Migration - -## Why - -`InteractionManager` is being removed from React Native. We currently maintain a patch to keep it working, but that's a temporary measure and upstream libraries will also drop support over time. - -Rather than keep patching, we're replacing `InteractionManager.runAfterInteractions` with purpose-built alternatives that are more precise. - -## Current state - -`runAfterInteractions` is used across the codebase for a wide range of reasons: waiting for navigation transitions, deferring work after modals close, managing input focus, delaying scroll operations, and many other cases that are hard to classify. - -## The problem - -`runAfterInteractions` is a global queue with no granularity. This made it a convenient catch-all, but the intent behind each call is often unclear. Many usages exist simply because it "just worked" as a timing workaround, not because it was the right tool for the job. - -This makes the migration non-trivial: you have to understand *what each call is actually waiting for* before you can pick the right replacement. - -## The approach - -**TransitionTracker** is the backbone. It tracks navigation transitions explicitly, so other APIs can hook into transition lifecycle without relying on a global queue. - -On top of TransitionTracker, existing APIs gain transition-aware callbacks: - -- Navigation methods accept `afterTransition` — a callback that runs after the triggered navigation transition completes -- Navigation methods accept `waitForTransition` — the call waits for all ongoing transitions to finish before navigating -- Keyboard methods accept `afterTransition` — a callback that runs after the keyboard transition completes -- `useConfirmModal` hook's `showConfirmModal` returns a Promise that resolves **after the modal close transition completes**, so any work awaited after it naturally runs post-transition — no explicit `afterTransition` callback needed - -This makes the code self-descriptive: instead of a generic `runAfterInteractions`, each call site says exactly what it's waiting for and why. - -> **Note:** `TransitionTracker.runAfterTransitions` is an internal primitive. Application code should use the higher-level APIs (`Navigation`, `useConfirmModal`, etc.) rather than importing TransitionTracker directly. - -## How -The migration is split into 9 issues. Current status of the migration can be found in the parent Github issue [here](https://github.com/Expensify/App/issues/71913). - -## Primitives comparison - -For reference, here's how the available timing primitives compare: - -### `requestAnimationFrame` (rAF) - -- Fires **before the next paint** (~16ms at 60fps) -- Guaranteed to run every frame if the thread isn't blocked -- Use for: UI updates that need to happen on the next frame (scroll, layout measurement, enabling a button after a state flush) - -### `requestIdleCallback` - -- Fires when the runtime has **idle time** — no pending frames, no urgent work -- May be delayed indefinitely if the main thread stays busy -- Accepts a `timeout` option to force execution after a deadline -- Use for: Non-urgent background work (Pusher subscriptions, search API calls, contact imports) - -### `InteractionManager.runAfterInteractions` (legacy — do not use) - -- React Native-specific. Fires after all **ongoing interactions** (animations, touches) complete -- Tracks interactions via `createInteractionHandle()` — anything that calls `handle.done()` unblocks the queue -- In practice, this means "run after the current navigation transition finishes" -- Problem: it's a global queue with no granularity — you can't say "after _this specific_ transition" - -### Summary - -| | Timing | Granularity | Platform | -| ---------------------- | ------------------------- | ------------------------- | --------------------- | -| `rAF` | Next frame (~16ms) | None — just "next paint" | Web + RN | -| `requestIdleCallback` | When idle (unpredictable) | None — "whenever free" | Web + RN (polyfilled) | -| `runAfterInteractions` | After animations finish | Global — all interactions | RN only | diff --git a/src/CONST/index.ts b/src/CONST/index.ts index 92fd2c5f9c40b..aa4b86c00de74 100644 --- a/src/CONST/index.ts +++ b/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', diff --git a/src/components/EmojiPicker/EmojiPicker.tsx b/src/components/EmojiPicker/EmojiPicker.tsx index 4a147f34c4d44..1fec2354705b4 100644 --- a/src/components/EmojiPicker/EmojiPicker.tsx +++ b/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?.(); diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx index 9bd6fec116aeb..2cfe2ab955c55 100644 --- a/src/components/Modal/BaseModal.tsx +++ b/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); diff --git a/src/components/Modal/ReanimatedModal/index.tsx b/src/components/Modal/ReanimatedModal/index.tsx index 8458f38c316b2..4ab09749bd9d4 100644 --- a/src/components/Modal/ReanimatedModal/index.tsx +++ b/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,7 +115,6 @@ function ReanimatedModal({ if (isVisible && !isContainerOpen && !isTransitioning) { // eslint-disable-next-line @typescript-eslint/no-deprecated handleRef.current = InteractionManager.createInteractionHandle(); - TransitionTracker.startTransition(); onModalWillShow(); setIsVisibleState(true); @@ -125,7 +122,6 @@ function ReanimatedModal({ } 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 diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx index ed493451d7b59..e38adcd58e4ca 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx +++ b/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 ( diff --git a/src/libs/Navigation/Navigation.ts b/src/libs/Navigation/Navigation.ts index 41db04f1d9e08..714e3e7ed7335 100644 --- a/src/libs/Navigation/Navigation.ts +++ b/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> = { +const defaultGoBackOptions: Required = { 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, options: {afterTransition?: () => void} = {}) { +function dismissToModalStack(modalStackNames: Set) { const rootState = navigationRef.getRootState(); if (!rootState) { return; @@ -919,36 +897,32 @@ function dismissToModalStack(modalStackNames: Set, 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(); } /** diff --git a/src/libs/Navigation/PlatformStackNavigation/ScreenLayout.tsx b/src/libs/Navigation/PlatformStackNavigation/ScreenLayout.tsx deleted file mode 100644 index 4fd130261efbe..0000000000000 --- a/src/libs/Navigation/PlatformStackNavigation/ScreenLayout.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import type {ParamListBase, ScreenLayoutArgs} from '@react-navigation/native'; -import React, {useLayoutEffect} from 'react'; -import TransitionTracker from '@libs/Navigation/TransitionTracker'; -import type {PlatformSpecificNavigationOptions, PlatformStackNavigationOptions, PlatformStackNavigationProp} from './types'; - -// screenLayout is invoked as a render function (not JSX), so we need this wrapper to create a proper React component boundary for hooks. -function screenLayoutWrapper({navigation, ...rest}: ScreenLayoutArgs) { - return ( - } - /> - ); -} - -function ScreenLayout({ - children, - navigation, -}: ScreenLayoutArgs>) { - useLayoutEffect(() => { - const transitionStartListener = navigation.addListener('transitionStart', () => { - TransitionTracker.startTransition(); - }); - const transitionEndListener = navigation.addListener('transitionEnd', () => { - TransitionTracker.endTransition(); - }); - - return () => { - transitionStartListener(); - transitionEndListener(); - }; - }, [navigation]); - - return children; -} - -export default screenLayoutWrapper; diff --git a/src/libs/Navigation/PlatformStackNavigation/createPlatformStackNavigatorComponent/index.native.tsx b/src/libs/Navigation/PlatformStackNavigation/createPlatformStackNavigatorComponent/index.native.tsx index ac05214c63023..ce41090ab3494 100644 --- a/src/libs/Navigation/PlatformStackNavigation/createPlatformStackNavigatorComponent/index.native.tsx +++ b/src/libs/Navigation/PlatformStackNavigation/createPlatformStackNavigatorComponent/index.native.tsx @@ -5,7 +5,6 @@ import type {NativeStackNavigationEventMap, NativeStackNavigationOptions} from ' import React, {useMemo} from 'react'; import {addCustomHistoryRouterExtension} from '@libs/Navigation/AppNavigator/customHistory'; import convertToNativeNavigationOptions from '@libs/Navigation/PlatformStackNavigation/navigationOptions/convertToNativeNavigationOptions'; -import screenLayout from '@libs/Navigation/PlatformStackNavigation/ScreenLayout'; import type { CreatePlatformStackNavigatorComponentOptions, CustomCodeProps, @@ -61,7 +60,6 @@ function createPlatformStackNavigatorComponent void}; - -type RunAfterTransitionsOptions = { - /** The function to invoke once all active transitions have completed. */ - callback: () => void; - - /** If true, the callback fires synchronously regardless of any active transitions. Defaults to false. */ - runImmediately?: boolean; - - /** If true, waits for the next transition to start before queuing the callback, so it runs after that transition ends. - * Useful when a navigation action has just been dispatched but the transition has not yet been registered. - * Defaults to false. */ - waitForUpcomingTransition?: boolean; -}; - -let activeCount = 0; - -const activeTimeouts: Array> = []; - -let pendingCallbacks: Array<() => void> = []; - -let nextTransitionStartResolve: (() => void) | null = null; -let promiseForNextTransitionStart = new Promise((resolve) => { - nextTransitionStartResolve = resolve; -}); - -/** - * Invokes and removes all pending callbacks. - */ -function flushCallbacks(): void { - const callbacks = pendingCallbacks; - pendingCallbacks = []; - for (const callback of callbacks) { - callback(); - } -} - -/** - * Decrements the active count and flushes callbacks when all transitions are idle. - * Shared by {@link endTransition} (manual) and the auto-timeout. - */ -function decrementAndFlush(): void { - activeCount = Math.max(0, activeCount - 1); - - if (activeCount === 0) { - flushCallbacks(); - } -} - -/** - * Increments the active transition count. - * Multiple overlapping transitions are counted. - * Each transition automatically ends after {@link MAX_TRANSITION_DURATION_MS} as a safety net. - */ -function startTransition(): void { - activeCount += 1; - - const resolve = nextTransitionStartResolve; - if (resolve) { - nextTransitionStartResolve = null; - promiseForNextTransitionStart = new Promise((r) => { - nextTransitionStartResolve = r; - }); - resolve(); - } - - const timeout = setTimeout(() => { - const idx = activeTimeouts.indexOf(timeout); - if (idx !== -1) { - activeTimeouts.splice(idx, 1); - } - decrementAndFlush(); - }, CONST.MAX_TRANSITION_DURATION_MS); - - activeTimeouts.push(timeout); -} - -/** - * Decrements the active transition count. - * Clears the corresponding auto-timeout since the transition ended normally. - * When the count reaches zero, flushes all pending callbacks. - */ -function endTransition(): void { - const timeout = activeTimeouts.shift(); - if (timeout !== undefined) { - clearTimeout(timeout); - } - - decrementAndFlush(); -} - -/** - * Schedules a callback to run after all transitions complete. If no transitions are active - * or `runImmediately` is true, the callback fires synchronously. - * - * @param options - Options object. - * @param options.callback - The function to invoke once transitions finish. - * @param options.runImmediately - If true, the callback fires synchronously regardless of active transitions. Defaults to false. - * @param options.waitForUpcomingTransition - If true, waits for the next transition to start before queuing the callback, so it runs after that transition ends. Use when navigation happens just before this call and the transition is not yet registered. Defaults to false. - * @returns A handle with a `cancel` method to prevent the callback from firing. - */ -function runAfterTransitions({callback, runImmediately = false, waitForUpcomingTransition = false}: RunAfterTransitionsOptions): CancelHandle { - if (waitForUpcomingTransition) { - let cancelled = false; - let innerHandle: CancelHandle | null = null; - - (async () => { - await promiseForNextTransitionStart; - if (!cancelled) { - innerHandle = runAfterTransitions({callback}); - } - })(); - - return { - cancel: () => { - cancelled = true; - innerHandle?.cancel(); - }, - }; - } - - if (activeCount === 0 || runImmediately) { - callback(); - return {cancel: () => {}}; - } - - pendingCallbacks.push(callback); - - return { - cancel: () => { - const idx = pendingCallbacks.indexOf(callback); - if (idx !== -1) { - pendingCallbacks.splice(idx, 1); - } - }, - }; -} - -const TransitionTracker = { - startTransition, - endTransition, - runAfterTransitions, -}; - -export default TransitionTracker; -export type {CancelHandle}; diff --git a/src/libs/Navigation/helpers/linkTo/types.ts b/src/libs/Navigation/helpers/linkTo/types.ts index 0cb3945405052..26217f561b9e9 100644 --- a/src/libs/Navigation/helpers/linkTo/types.ts +++ b/src/libs/Navigation/helpers/linkTo/types.ts @@ -10,11 +10,7 @@ type ActionPayload = { type LinkToOptions = { // To explicitly set the action type to replace. - forceReplace?: boolean; - // Callback to execute after the navigation transition animation completes. - afterTransition?: () => void; - // If true, waits for ongoing transitions to finish before navigating. Defaults to false (navigates immediately). - waitForTransition?: boolean; + forceReplace: boolean; }; export type {ActionPayload, LinkToOptions}; diff --git a/src/libs/actions/Report/index.ts b/src/libs/actions/Report/index.ts index aaa3f7d833034..f520810ed5fc8 100644 --- a/src/libs/actions/Report/index.ts +++ b/src/libs/actions/Report/index.ts @@ -1988,7 +1988,7 @@ function createTransactionThreadReport( function navigateToReport(reportID: string | undefined, shouldDismissModal = true) { if (shouldDismissModal) { Navigation.dismissModal({ - afterTransition: () => { + callback: () => { if (!reportID) { return; } diff --git a/src/pages/NewChatPage.tsx b/src/pages/NewChatPage.tsx index e33d1e031bd74..ddaf2206f10ea 100755 --- a/src/pages/NewChatPage.tsx +++ b/src/pages/NewChatPage.tsx @@ -385,7 +385,7 @@ function NewChatPage({ref}: NewChatPageProps) { if (option?.reportID) { Navigation.dismissModal({ - afterTransition: () => { + callback: () => { Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(option?.reportID)); }, }); diff --git a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx index bc47966ac66b8..3606d17c6eb8e 100644 --- a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx +++ b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx @@ -521,9 +521,16 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre Navigation.getActiveRoute(), ); }; + if (isNative) { + Navigation.goBack(); + Navigation.setNavigationActionToMicrotaskQueue(() => { + Navigation.navigate(getDestinationRoute()); + }); + return; + } Navigation.dismissModal({ - afterTransition: () => Navigation.navigate(getDestinationRoute()), + callback: () => Navigation.navigate(getDestinationRoute()), }); }} text={translate('common.replace')} diff --git a/src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx index a88bb89c670f9..21ba475f877f9 100644 --- a/src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx +++ b/src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx @@ -1,5 +1,5 @@ import React, {useCallback, useMemo, useState} from 'react'; -import {View} from 'react-native'; +import {InteractionManager, Keyboard, View} from 'react-native'; import CategorySelectorModal from '@components/CategorySelector/CategorySelectorModal'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -26,7 +26,6 @@ import {clearPolicyErrorField, setWorkspaceDefaultSpendCategory} from '@userActi import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import SCREENS from '@src/SCREENS'; -import KeyboardUtils from '@src/utils/keyboard'; type WorkspaceCategoriesSettingsPageProps = WithPolicyConnectionsProps & ( @@ -81,8 +80,10 @@ function WorkspaceCategoriesSettingsPage({policy, route}: WorkspaceCategoriesSet setWorkspaceDefaultSpendCategory(policyID, currentGroupID, selectedCategory.keyForList); } - KeyboardUtils.dismiss({ - afterTransition: () => setIsSelectorModalVisible(false), + Keyboard.dismiss(); + // eslint-disable-next-line @typescript-eslint/no-deprecated + InteractionManager.runAfterInteractions(() => { + setIsSelectorModalVisible(false); }); }; diff --git a/src/pages/workspace/members/WorkspaceInviteMessageComponent.tsx b/src/pages/workspace/members/WorkspaceInviteMessageComponent.tsx index 36269d9570abd..4e95f50ca45d6 100644 --- a/src/pages/workspace/members/WorkspaceInviteMessageComponent.tsx +++ b/src/pages/workspace/members/WorkspaceInviteMessageComponent.tsx @@ -142,7 +142,7 @@ function WorkspaceInviteMessageComponent({ } if ((backTo as string)?.endsWith('members')) { - Navigation.dismissModal(); + Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.dismissModal()); return; } @@ -151,8 +151,8 @@ function WorkspaceInviteMessageComponent({ return; } - Navigation.dismissModal({ - afterTransition: () => Navigation.navigate(ROUTES.WORKSPACE_MEMBERS.getRoute(policyID)), + Navigation.setNavigationActionToMicrotaskQueue(() => { + Navigation.dismissModal({callback: () => Navigation.navigate(ROUTES.WORKSPACE_MEMBERS.getRoute(policyID))}); }); }; diff --git a/src/pages/workspace/tags/WorkspaceCreateTagPage.tsx b/src/pages/workspace/tags/WorkspaceCreateTagPage.tsx index 0fbadcd27021b..ffe1bb6efba10 100644 --- a/src/pages/workspace/tags/WorkspaceCreateTagPage.tsx +++ b/src/pages/workspace/tags/WorkspaceCreateTagPage.tsx @@ -1,4 +1,5 @@ import React, {useCallback} from 'react'; +import {Keyboard} from 'react-native'; import FormProvider from '@components/Form/FormProvider'; import InputWrapper from '@components/Form/InputWrapper'; import type {FormInputErrors, FormOnyxValues} from '@components/Form/types'; @@ -24,7 +25,6 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import SCREENS from '@src/SCREENS'; import INPUT_IDS from '@src/types/form/WorkspaceTagForm'; -import KeyboardUtils from '@src/utils/keyboard'; type WorkspaceCreateTagPageProps = | PlatformStackScreenProps @@ -71,9 +71,8 @@ function WorkspaceCreateTagPage({route}: WorkspaceCreateTagPageProps) { const createTag = useCallback( (values: FormOnyxValues) => { createPolicyTag(policyData, values.tagName.trim(), setupTagsTaskReport, setupCategoriesAndTagsTaskReport, policyHasCustomCategories); - KeyboardUtils.dismiss({ - afterTransition: () => Navigation.goBack(isQuickSettingsFlow ? ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo) : undefined), - }); + Keyboard.dismiss(); + Navigation.goBack(isQuickSettingsFlow ? ROUTES.SETTINGS_TAGS_ROOT.getRoute(policyID, backTo) : undefined); }, [policyID, policyData, isQuickSettingsFlow, backTo, setupTagsTaskReport, setupCategoriesAndTagsTaskReport, policyHasCustomCategories], ); diff --git a/src/utils/keyboard/index.android.ts b/src/utils/keyboard/index.android.ts index 9dd0dbfbf6625..b15d81367e302 100644 --- a/src/utils/keyboard/index.android.ts +++ b/src/utils/keyboard/index.android.ts @@ -1,7 +1,5 @@ import {Keyboard} from 'react-native'; import {KeyboardEvents} from 'react-native-keyboard-controller'; -import TransitionTracker from '@libs/Navigation/TransitionTracker'; -import type {DismissKeyboardOptions} from './types'; type SimplifiedKeyboardEvent = { height?: number; @@ -23,10 +21,9 @@ const subscribeKeyboardVisibilityChange = (cb: (isVisible: boolean) => void) => }; // eslint-disable-next-line @typescript-eslint/no-unused-vars -const dismiss = (options?: DismissKeyboardOptions): Promise => { +const dismiss = (shouldSkipSafari?: boolean): Promise => { return new Promise((resolve) => { if (!isVisible) { - options?.afterTransition?.(); resolve(); return; @@ -34,16 +31,10 @@ const dismiss = (options?: DismissKeyboardOptions): Promise => { const subscription = Keyboard.addListener('keyboardDidHide', () => { resolve(); - TransitionTracker.endTransition(); subscription.remove(); }); - TransitionTracker.startTransition(); Keyboard.dismiss(); - - if (options?.afterTransition) { - TransitionTracker.runAfterTransitions({callback: options.afterTransition}); - } }); }; diff --git a/src/utils/keyboard/index.ts b/src/utils/keyboard/index.ts index f8d35ab4a99ef..3ff8096680c62 100644 --- a/src/utils/keyboard/index.ts +++ b/src/utils/keyboard/index.ts @@ -1,6 +1,4 @@ import {Keyboard} from 'react-native'; -import TransitionTracker from '@libs/Navigation/TransitionTracker'; -import type {DismissKeyboardOptions} from './types'; type SimplifiedKeyboardEvent = { height?: number; @@ -22,10 +20,9 @@ const subscribeKeyboardVisibilityChange = (cb: (isVisible: boolean) => void) => }; // eslint-disable-next-line @typescript-eslint/no-unused-vars -const dismiss = (options?: DismissKeyboardOptions): Promise => { +const dismiss = (shouldSkipSafari?: boolean): Promise => { return new Promise((resolve) => { if (!isVisible) { - options?.afterTransition?.(); resolve(); return; @@ -33,16 +30,10 @@ const dismiss = (options?: DismissKeyboardOptions): Promise => { const subscription = Keyboard.addListener('keyboardDidHide', () => { resolve(); - TransitionTracker.endTransition(); subscription.remove(); }); - TransitionTracker.startTransition(); Keyboard.dismiss(); - - if (options?.afterTransition) { - TransitionTracker.runAfterTransitions({callback: options.afterTransition}); - } }); }; diff --git a/src/utils/keyboard/index.website.ts b/src/utils/keyboard/index.website.ts index 50242b71b36d5..3c40a2eced2ea 100644 --- a/src/utils/keyboard/index.website.ts +++ b/src/utils/keyboard/index.website.ts @@ -1,8 +1,6 @@ import {Keyboard} from 'react-native'; import {isMobile, isMobileSafari} from '@libs/Browser'; -import TransitionTracker from '@libs/Navigation/TransitionTracker'; import CONST from '@src/CONST'; -import type {DismissKeyboardOptions} from './types'; let isVisible = false; const initialViewportHeight = window?.visualViewport?.height; @@ -36,13 +34,13 @@ const handleResize = () => { window.visualViewport?.addEventListener('resize', handleResize); -const dismiss = (options?: DismissKeyboardOptions): Promise => { +const dismiss = (shouldSkipSafari = false): Promise => { return new Promise((resolve) => { - const shouldSkipSafari = options?.shouldSkipSafari && isMobileSafari(); - const shouldDismiss = !isVisible || !isMobile(); - - if (shouldDismiss || shouldSkipSafari) { - options?.afterTransition?.(); + if (shouldSkipSafari && isMobileSafari()) { + resolve(); + return; + } + if (!isVisible || !isMobile()) { resolve(); return; } @@ -60,18 +58,11 @@ const dismiss = (options?: DismissKeyboardOptions): Promise => { } window.visualViewport?.removeEventListener('resize', handleDismissResize); - TransitionTracker.endTransition(); return resolve(); }; window.visualViewport?.addEventListener('resize', handleDismissResize); - - TransitionTracker.startTransition(); Keyboard.dismiss(); - - if (options?.afterTransition) { - TransitionTracker.runAfterTransitions({callback: options.afterTransition}); - } }); }; diff --git a/src/utils/keyboard/types.ts b/src/utils/keyboard/types.ts deleted file mode 100644 index 374054755852c..0000000000000 --- a/src/utils/keyboard/types.ts +++ /dev/null @@ -1,7 +0,0 @@ -type DismissKeyboardOptions = { - shouldSkipSafari?: boolean; - afterTransition?: () => void; -}; - -// eslint-disable-next-line import/prefer-default-export -export type {DismissKeyboardOptions}; diff --git a/tests/unit/Navigation/TransitionTrackerTest.ts b/tests/unit/Navigation/TransitionTrackerTest.ts deleted file mode 100644 index 3173b6f8803e2..0000000000000 --- a/tests/unit/Navigation/TransitionTrackerTest.ts +++ /dev/null @@ -1,108 +0,0 @@ -import TransitionTracker from '@libs/Navigation/TransitionTracker'; -import CONST from '@src/CONST'; - -describe('TransitionTracker', () => { - beforeEach(() => { - jest.useFakeTimers(); - }); - - afterEach(() => { - jest.useRealTimers(); - }); - - function drainTransitions(): void { - jest.runAllTimers(); - } - - describe('runAfterTransitions', () => { - it('runs callback immediately when no transition is active', () => { - const callback = jest.fn(); - TransitionTracker.runAfterTransitions({callback}); - expect(callback).toHaveBeenCalledTimes(1); - drainTransitions(); - }); - - it('runs callback immediately when runImmediately is true even with active transition', () => { - TransitionTracker.startTransition(); - const callback = jest.fn(); - TransitionTracker.runAfterTransitions({callback, runImmediately: true}); - expect(callback).toHaveBeenCalledTimes(1); - TransitionTracker.endTransition(); - drainTransitions(); - }); - - it('queues callback when transition is active and runs it after endTransition', () => { - const callback = jest.fn(); - TransitionTracker.startTransition(); - TransitionTracker.runAfterTransitions({callback}); - expect(callback).not.toHaveBeenCalled(); - TransitionTracker.endTransition(); - expect(callback).toHaveBeenCalledTimes(1); - drainTransitions(); - }); - - it('runs queued callbacks only when all overlapping transitions end', () => { - const callback = jest.fn(); - TransitionTracker.startTransition(); - TransitionTracker.startTransition(); - TransitionTracker.runAfterTransitions({callback}); - TransitionTracker.endTransition(); - expect(callback).not.toHaveBeenCalled(); - TransitionTracker.endTransition(); - expect(callback).toHaveBeenCalledTimes(1); - drainTransitions(); - }); - - it('cancel prevents queued callback from running', () => { - const callback = jest.fn(); - TransitionTracker.startTransition(); - const handle = TransitionTracker.runAfterTransitions({callback}); - handle.cancel(); - TransitionTracker.endTransition(); - expect(callback).not.toHaveBeenCalled(); - drainTransitions(); - }); - - it('safety timeout flushes callbacks when endTransition is never called', () => { - const callback = jest.fn(); - TransitionTracker.startTransition(); - TransitionTracker.runAfterTransitions({callback}); - expect(callback).not.toHaveBeenCalled(); - jest.advanceTimersByTime(CONST.MAX_TRANSITION_DURATION_MS); - expect(callback).toHaveBeenCalledTimes(1); - jest.useRealTimers(); - }); - - it('waitForUpcomingTransition queues callback after next transition starts and runs it after transition ends', async () => { - const callback = jest.fn(); - TransitionTracker.runAfterTransitions({callback, waitForUpcomingTransition: true}); - expect(callback).not.toHaveBeenCalled(); - TransitionTracker.startTransition(); - await Promise.resolve(); - expect(callback).not.toHaveBeenCalled(); - TransitionTracker.endTransition(); - expect(callback).toHaveBeenCalledTimes(1); - drainTransitions(); - }); - - it('cancel prevents waitForUpcomingTransition callback from running after transition starts', () => { - const callback = jest.fn(); - const handle = TransitionTracker.runAfterTransitions({callback, waitForUpcomingTransition: true}); - TransitionTracker.startTransition(); - handle.cancel(); - TransitionTracker.endTransition(); - expect(callback).not.toHaveBeenCalled(); - drainTransitions(); - }); - - it('cancel before transition starts prevents waitForUpcomingTransition callback from running', () => { - const callback = jest.fn(); - const handle = TransitionTracker.runAfterTransitions({callback, waitForUpcomingTransition: true}); - handle.cancel(); - TransitionTracker.startTransition(); - TransitionTracker.endTransition(); - expect(callback).not.toHaveBeenCalled(); - drainTransitions(); - }); - }); -}); diff --git a/tests/unit/keyboard/AndroidKeyboardUtilsTest.ts b/tests/unit/keyboard/AndroidKeyboardUtilsTest.ts index 07e199298c27e..0b4a8f0452907 100644 --- a/tests/unit/keyboard/AndroidKeyboardUtilsTest.ts +++ b/tests/unit/keyboard/AndroidKeyboardUtilsTest.ts @@ -20,7 +20,6 @@ jest.mock('react-native', () => ({ Platform: { Version: 35, }, - PixelRatio: {getFontScale: () => 1}, })); // Mock react-native-keyboard-controller diff --git a/tests/unit/keyboard/KeyboardUtilsTest.ts b/tests/unit/keyboard/KeyboardUtilsTest.ts index fc9af0ca0f455..9482f047b6b19 100644 --- a/tests/unit/keyboard/KeyboardUtilsTest.ts +++ b/tests/unit/keyboard/KeyboardUtilsTest.ts @@ -1,5 +1,4 @@ import type {SimplifiedKeyboardEvent} from '@src/utils/keyboard'; -import type {DismissKeyboardOptions} from '@src/utils/keyboard/types'; const mockKeyboardListeners: Record void>> = {}; const mockKeyboardControllerListeners: Record void>> = {}; @@ -18,7 +17,6 @@ jest.mock('react-native', () => ({ }; }), }, - PixelRatio: {getFontScale: () => 1}, })); // Mock react-native-keyboard-controller @@ -53,7 +51,7 @@ const clearListeners = () => { describe('Keyboard utils: general native', () => { // eslint-disable-next-line @typescript-eslint/no-explicit-any - let utils: {dismiss: (options?: DismissKeyboardOptions) => Promise; dismissKeyboardAndExecute: (cb: () => void) => Promise}; + let utils: {dismiss: () => Promise; dismissKeyboardAndExecute: (cb: () => void) => Promise}; beforeEach(() => { // Clear all mocks @@ -63,10 +61,7 @@ describe('Keyboard utils: general native', () => { jest.resetModules(); // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access - utils = require('@src/utils/keyboard').default as { - dismiss: (options?: DismissKeyboardOptions) => Promise; - dismissKeyboardAndExecute: (cb: () => void) => Promise; - }; + utils = require('@src/utils/keyboard').default as {dismiss: () => Promise; dismissKeyboardAndExecute: (cb: () => void) => Promise}; }); describe('dismiss', () => { @@ -119,20 +114,6 @@ describe('Keyboard utils: general native', () => { await expect(Promise.all([promise1, promise2])).resolves.toEqual([undefined, undefined]); }); - - it('schedules afterTransition with TransitionTracker when keyboard is visible and runs it after keyboardDidHide', async () => { - triggerKeyboardEvent('keyboardDidShow'); - - const afterTransition = jest.fn(); - const dismissPromise = utils.dismiss({afterTransition}); - - expect(afterTransition).not.toHaveBeenCalled(); - - triggerKeyboardEvent('keyboardDidHide'); - await dismissPromise; - - expect(afterTransition).toHaveBeenCalledTimes(1); - }); }); describe('dismissKeyboardAndExecute', () => {