diff --git a/contributingGuides/INTERACTION_MANAGER.md b/contributingGuides/INTERACTION_MANAGER.md new file mode 100644 index 000000000000..08008b0b42ad --- /dev/null +++ b/contributingGuides/INTERACTION_MANAGER.md @@ -0,0 +1,67 @@ +# 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/patches/react-native-screens/details.md b/patches/react-native-screens/details.md new file mode 100644 index 000000000000..e9986d919fec --- /dev/null +++ b/patches/react-native-screens/details.md @@ -0,0 +1,8 @@ +# `react-native-screens` patches + +### [react-native-screens+4.15.4+001+fix-lifecycle-events-in-fragment-host.patch](react-native-screens+4.15.4+001+fix-lifecycle-events-in-fragment-host.patch) + +- Reason: In HybridApp, React Native is hosted inside a `ReactNativeFragment`, which causes `ScreenFragment.dispatchViewAnimationEvent()` to silently dismiss lifecycle events for root screen fragments. This prevents `transitionStart`/`transitionEnd` from being emitted, which breaks `TransitionTracker` (`src/libs/Navigation/TransitionTracker.ts`). The fix allows event dispatch when the parent fragment is not a `ScreenFragment`. +- Upstream PR/issue: https://github.com/software-mansion/react-native-screens/pull/3854 — once merged and released, bump the version and remove this patch. +- E/App issue: 🛑 +- PR Introducing Patch: https://github.com/Expensify/App/pull/85759 diff --git a/patches/react-native-screens/react-native-screens+4.15.4+001+fix-lifecycle-events-in-fragment-host.patch b/patches/react-native-screens/react-native-screens+4.15.4+001+fix-lifecycle-events-in-fragment-host.patch new file mode 100644 index 000000000000..7060a0baaa35 --- /dev/null +++ b/patches/react-native-screens/react-native-screens+4.15.4+001+fix-lifecycle-events-in-fragment-host.patch @@ -0,0 +1,13 @@ +diff --git a/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/ScreenFragment.kt b/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/ScreenFragment.kt +index 65c6e30..3b9f2e2 100644 +--- a/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/ScreenFragment.kt ++++ b/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/ScreenFragment.kt +@@ -293,7 +293,7 @@ open class ScreenFragment : + // check for `isTransitioning` should be enough since the child's animation should take only + // 20ms due to always being `StackAnimation.NONE` when nested stack being pushed + val parent = parentFragment +- if (parent == null || (parent is ScreenFragment && !parent.isTransitioning)) { ++ if (parent == null || parent !is ScreenFragment || (parent is ScreenFragment && !parent.isTransitioning)) { + // onViewAnimationStart/End is triggered from View#onAnimationStart/End method of the fragment's root + // view. We override an appropriate method of the StackFragment's + // root view in order to achieve this. diff --git a/src/CONST/index.ts b/src/CONST/index.ts index a7a2e1326cde..daa7ba8cf0de 100644 --- a/src/CONST/index.ts +++ b/src/CONST/index.ts @@ -234,6 +234,8 @@ const CONST = { }, ANIMATION_IN_TIMING: 100, COMPOSER_FOCUS_DELAY: 150, + MAX_TRANSITION_DURATION_MS: 1000, + MAX_TRANSITION_START_WAIT_MS: 1000, ANIMATION_DIRECTION: { IN: 'in', OUT: 'out', @@ -8709,7 +8711,6 @@ const CONST = { }, MODAL_EVENTS: { - CLOSED: 'modalClosed', DISABLE_RHP_ANIMATION: 'disableRHPAnimation', RESTORE_RHP_ANIMATION: 'restoreRHPAnimation', }, diff --git a/src/components/EmojiPicker/EmojiPicker.tsx b/src/components/EmojiPicker/EmojiPicker.tsx index 642bbba7c635..9a91fe63411b 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(true).then(() => + KeyboardUtils.dismiss({shouldSkipSafari: 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 6fe975ece052..967e5ab7f791 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, DeviceEventEmitter, View} from 'react-native'; +import {Animated, View} from 'react-native'; import ColorSchemeWrapper from '@components/ColorSchemeWrapper'; import NavigationBar from '@components/NavigationBar'; import ScreenWrapperOfflineIndicatorContext from '@components/ScreenWrapper/ScreenWrapperOfflineIndicatorContext'; @@ -170,8 +170,6 @@ 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 4ab09749bd9d..cbd701225e90 100644 --- a/src/components/Modal/ReanimatedModal/index.tsx +++ b/src/components/Modal/ReanimatedModal/index.tsx @@ -9,6 +9,8 @@ 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 type {TransitionHandle} from '@libs/Navigation/TransitionTracker'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import Backdrop from './Backdrop'; @@ -57,6 +59,7 @@ function ReanimatedModal({ const backHandlerListener = useRef(null); const handleRef = useRef(undefined); + const transitionHandleRef = useRef(null); const styles = useThemeStyles(); @@ -103,6 +106,10 @@ function ReanimatedModal({ // eslint-disable-next-line @typescript-eslint/no-deprecated InteractionManager.clearInteractionHandle(handleRef.current); } + if (transitionHandleRef.current) { + TransitionTracker.endTransition(transitionHandleRef.current); + transitionHandleRef.current = null; + } setIsVisibleState(false); setIsContainerOpen(false); @@ -115,6 +122,7 @@ function ReanimatedModal({ if (isVisible && !isContainerOpen && !isTransitioning) { // eslint-disable-next-line @typescript-eslint/no-deprecated handleRef.current = InteractionManager.createInteractionHandle(); + transitionHandleRef.current = TransitionTracker.startTransition(); onModalWillShow(); setIsVisibleState(true); @@ -122,6 +130,7 @@ function ReanimatedModal({ } else if (!isVisible && isContainerOpen && !isTransitioning) { // eslint-disable-next-line @typescript-eslint/no-deprecated handleRef.current = InteractionManager.createInteractionHandle(); + transitionHandleRef.current = TransitionTracker.startTransition(); onModalWillHide(); blurActiveElement(); @@ -142,6 +151,10 @@ function ReanimatedModal({ // eslint-disable-next-line @typescript-eslint/no-deprecated InteractionManager.clearInteractionHandle(handleRef.current); } + if (transitionHandleRef.current) { + TransitionTracker.endTransition(transitionHandleRef.current); + transitionHandleRef.current = null; + } onModalShow(); }, [onModalShow]); @@ -152,6 +165,10 @@ function ReanimatedModal({ // eslint-disable-next-line @typescript-eslint/no-deprecated InteractionManager.clearInteractionHandle(handleRef.current); } + if (transitionHandleRef.current) { + TransitionTracker.endTransition(transitionHandleRef.current); + transitionHandleRef.current = null; + } // 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 9a519b59e881..492d1b5ebaca 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx @@ -208,8 +208,6 @@ 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 1c9146830343..764ef5c14875 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 {DeviceEventEmitter, Dimensions, InteractionManager} from 'react-native'; +import {DeviceEventEmitter, Dimensions} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import Onyx from 'react-native-onyx'; import type {Writable} from 'type-fest'; @@ -42,6 +42,7 @@ 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, @@ -331,9 +332,18 @@ function navigate(route: Route, options?: LinkToOptions) { } } - const targetRoute = route.startsWith(CONST.SAML_REDIRECT_URL) ? ROUTES.HOME : route; - linkTo(navigationRef.current, targetRoute, options); - closeSidePanelOnNarrowScreen(route); + 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, + }); } /** * When routes are compared to determine whether the fallback route passed to the goUp function is in the state, @@ -398,10 +408,15 @@ 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, }; /** @@ -490,22 +505,26 @@ function goBack(backToRoute?: Route, options?: GoBackOptions) { return; } - if (backToRoute) { - goUp(backToRoute, options); - return; - } - - if (shouldPopToSidebar) { - popToSidebar(); - return; - } - - if (!navigationRef.current?.canGoBack()) { - Log.hmmm('[Navigation] Unable to go back'); - 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(); + } - navigationRef.current?.goBack(); + if (options?.afterTransition) { + TransitionTracker.runAfterTransitions({callback: options.afterTransition, waitForUpcomingTransition: true}); + } + }, + runImmediately, + }); } /** @@ -743,25 +762,27 @@ function getTopmostSuperWideRHPReportID(state: NavigationState = navigationRef.g * * @param options - Configuration object * @param options.ref - Navigation ref to use (defaults to navigationRef) - * @param options.callback - Optional callback to execute after the modal has finished closing. - * The callback fires when RightModalNavigator unmounts. + * @param options.afterTransition - Optional callback to execute after the navigation transition animation completes. * * For detailed information about dismissing modals, * see the NAVIGATION.md documentation. */ -const dismissModal = ({ref = navigationRef, callback}: {ref?: NavigationRef; callback?: () => void} = {}) => { +function dismissModal({ref = navigationRef, afterTransition, waitForTransition}: {ref?: NavigationRef; afterTransition?: () => void; waitForTransition?: boolean} = {}) { clearSelectedTextIfComposerBlurred(); + const runImmediately = !waitForTransition; isNavigationReady().then(() => { - if (callback) { - const subscription = DeviceEventEmitter.addListener(CONST.MODAL_EVENTS.CLOSED, () => { - subscription.remove(); - callback(); - }); - } + TransitionTracker.runAfterTransitions({ + callback: () => { + ref.dispatch({type: CONST.NAVIGATION.ACTION_TYPE.DISMISS_MODAL}); - ref.dispatch({type: CONST.NAVIGATION.ACTION_TYPE.DISMISS_MODAL}); + if (afterTransition) { + TransitionTracker.runAfterTransitions({callback: afterTransition, waitForUpcomingTransition: true}); + } + }, + runImmediately, + }); }); -}; +} /** * Dismisses the modal and opens the given report. @@ -798,10 +819,11 @@ const dismissModalWithReport = ( navigate(reportRoute, {forceReplace: true}); return; } - dismissModal(); - // eslint-disable-next-line @typescript-eslint/no-deprecated - InteractionManager.runAfterInteractions(() => { - navigate(reportRoute); + + dismissModal({ + afterTransition: () => { + navigate(reportRoute); + }, }); }); }; @@ -886,7 +908,7 @@ function clearPreloadedRoutes() { * * @param modalStackNames - names of the modal stacks we want to dismiss to */ -function dismissToModalStack(modalStackNames: Set) { +function dismissToModalStack(modalStackNames: Set, options: {afterTransition?: () => void} = {}) { const rootState = navigationRef.getRootState(); if (!rootState) { return; @@ -902,32 +924,36 @@ function dismissToModalStack(modalStackNames: Set) { const routesToPop = rhpState.routes.length - lastFoundModalStackIndex - 1; if (routesToPop <= 0 || lastFoundModalStackIndex === -1) { - dismissModal(); + dismissModal(options); 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() { - return dismissToModalStack(ALL_WIDE_RIGHT_MODALS); +function dismissToPreviousRHP(options: {afterTransition?: () => void} = {}) { + return dismissToModalStack(ALL_WIDE_RIGHT_MODALS, options); } -function navigateBackToLastSuperWideRHPScreen() { - return dismissToModalStack(SUPER_WIDE_RIGHT_MODALS); +function navigateBackToLastSuperWideRHPScreen(options: {afterTransition?: () => void} = {}) { + return dismissToModalStack(SUPER_WIDE_RIGHT_MODALS, options); } -function dismissToSuperWideRHP() { +function dismissToSuperWideRHP(options: {afterTransition?: () => void} = {}) { // On narrow layouts (mobile), Super Wide RHP doesn't exist, so just dismiss the modal completely if (getIsNarrowLayout()) { - dismissModal(); + dismissModal(options); return; } // On wide layouts, dismiss back to the Super Wide RHP modal stack - navigateBackToLastSuperWideRHPScreen(); + navigateBackToLastSuperWideRHPScreen(options); } /** diff --git a/src/libs/Navigation/PlatformStackNavigation/ScreenLayout.tsx b/src/libs/Navigation/PlatformStackNavigation/ScreenLayout.tsx new file mode 100644 index 000000000000..5ee2e3abe344 --- /dev/null +++ b/src/libs/Navigation/PlatformStackNavigation/ScreenLayout.tsx @@ -0,0 +1,46 @@ +import type {ParamListBase, ScreenLayoutArgs} from '@react-navigation/native'; +import React, {useLayoutEffect, useRef} from 'react'; +import TransitionTracker from '@libs/Navigation/TransitionTracker'; +import type {TransitionHandle} 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>) { + const transitionHandleRef = useRef(null); + + useLayoutEffect(() => { + const transitionStartListener = navigation.addListener('transitionStart', () => { + transitionHandleRef.current = TransitionTracker.startTransition(); + }); + const transitionEndListener = navigation.addListener('transitionEnd', () => { + if (!transitionHandleRef.current) { + return; + } + TransitionTracker.endTransition(transitionHandleRef.current); + transitionHandleRef.current = null; + }); + + 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 8f085af82f1e..5ecdc7ad47d1 100644 --- a/src/libs/Navigation/PlatformStackNavigation/createPlatformStackNavigatorComponent/index.native.tsx +++ b/src/libs/Navigation/PlatformStackNavigation/createPlatformStackNavigatorComponent/index.native.tsx @@ -4,6 +4,7 @@ import {NativeStackView} from '@react-navigation/native-stack'; import type {NativeStackNavigationEventMap, NativeStackNavigationOptions} from '@react-navigation/native-stack'; import React, {useMemo} from 'react'; import convertToNativeNavigationOptions from '@libs/Navigation/PlatformStackNavigation/navigationOptions/convertToNativeNavigationOptions'; +import screenLayout from '@libs/Navigation/PlatformStackNavigation/ScreenLayout'; import type { CreatePlatformStackNavigatorComponentOptions, CustomCodeProps, @@ -61,6 +62,7 @@ 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; +}; + +const activeTransitions = new Map>(); + +let pendingCallbacks: Array<() => void> = []; + +let nextTransitionStartResolve: (() => void) | null = null; +let promiseForNextTransitionStart = new Promise((resolve) => { + nextTransitionStartResolve = resolve; +}); + +/** + * Invokes and removes all pending callbacks. + * Each callback is isolated so that one exception does not prevent the rest from running. + */ +function flushCallbacks(): void { + const callbacks = pendingCallbacks; + pendingCallbacks = []; + for (const callback of callbacks) { + try { + callback(); + } catch (error) { + Log.warn('[TransitionTracker] A pending callback threw an error', {error}); + } + } +} + +/** + * Flushes callbacks when all transitions are idle. + * Shared by {@link endTransition} (manual) and the auto-timeout. + */ +function decrementAndFlush(): void { + if (activeTransitions.size !== 0) { + return; + } + flushCallbacks(); +} + +/** + * Increments the active transition count and returns a handle that must be passed to {@link endTransition}. + * Multiple overlapping transitions are tracked independently. + * Each transition automatically ends after {@link CONST.MAX_TRANSITION_DURATION_MS} as a safety net. + */ +function startTransition(): TransitionHandle { + const handle: TransitionHandle = Symbol('transition'); + + const resolve = nextTransitionStartResolve; + if (resolve) { + nextTransitionStartResolve = null; + promiseForNextTransitionStart = new Promise((r) => { + nextTransitionStartResolve = r; + }); + resolve(); + } + + const timeout = setTimeout(() => { + activeTransitions.delete(handle); + decrementAndFlush(); + }, CONST.MAX_TRANSITION_DURATION_MS); + + activeTransitions.set(handle, timeout); + + return handle; +} + +/** + * Ends the transition identified by {@link handle}. + * Clears the corresponding safety timeout since the transition ended normally. + * When no active transitions remain, flushes all pending callbacks. + * If the handle is unknown (already ended or already expired via safety timeout), this is a no-op. + */ +function endTransition(handle: TransitionHandle): void { + const timeout = activeTransitions.get(handle); + if (timeout === undefined) { + return; + } + + clearTimeout(timeout); + activeTransitions.delete(handle); + 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; + + // Guard against transitionStart never arriving. + // We race promiseForNextTransitionStart against a fallback timeout. + // Whichever resolves first wins. + // Afterwards we clearTimeout so the fallback doesn't keep the timer alive unnecessarily. + let transitionStartTimeoutId!: ReturnType; + const transitionStartTimeout = new Promise((resolve) => { + transitionStartTimeoutId = setTimeout(resolve, CONST.MAX_TRANSITION_START_WAIT_MS); + }); + + (async () => { + await Promise.race([promiseForNextTransitionStart, transitionStartTimeout]); + clearTimeout(transitionStartTimeoutId); + + if (!cancelled) { + innerHandle = runAfterTransitions({callback}); + } + })(); + + return { + cancel: () => { + cancelled = true; + clearTimeout(transitionStartTimeoutId); + innerHandle?.cancel(); + }, + }; + } + + if (activeTransitions.size === 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, TransitionHandle}; diff --git a/src/libs/Navigation/helpers/linkTo/types.ts b/src/libs/Navigation/helpers/linkTo/types.ts index 26217f561b9e..0cb394540505 100644 --- a/src/libs/Navigation/helpers/linkTo/types.ts +++ b/src/libs/Navigation/helpers/linkTo/types.ts @@ -10,7 +10,11 @@ type ActionPayload = { type LinkToOptions = { // To explicitly set the action type to replace. - forceReplace: boolean; + 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; }; export type {ActionPayload, LinkToOptions}; diff --git a/src/libs/actions/Report/index.ts b/src/libs/actions/Report/index.ts index b68b962875db..f4b55c936808 100644 --- a/src/libs/actions/Report/index.ts +++ b/src/libs/actions/Report/index.ts @@ -1955,7 +1955,7 @@ function createTransactionThreadReport( function navigateToReport(reportID: string | undefined, shouldDismissModal = true) { if (shouldDismissModal) { Navigation.dismissModal({ - callback: () => { + afterTransition: () => { if (!reportID) { return; } diff --git a/src/pages/NewChatPage.tsx b/src/pages/NewChatPage.tsx index 9e1691052017..6472e21dfb06 100755 --- a/src/pages/NewChatPage.tsx +++ b/src/pages/NewChatPage.tsx @@ -379,7 +379,7 @@ function NewChatPage({ref}: NewChatPageProps) { if (option?.reportID) { Navigation.dismissModal({ - callback: () => { + afterTransition: () => { 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 4037fb10f5c8..81845df4b530 100644 --- a/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx +++ b/src/pages/media/AttachmentModalScreen/routes/TransactionReceiptModalContent.tsx @@ -546,16 +546,9 @@ function TransactionReceiptModalContent({navigation, route}: AttachmentModalScre Navigation.getActiveRoute(), ); }; - if (isNative) { - Navigation.goBack(); - Navigation.setNavigationActionToMicrotaskQueue(() => { - Navigation.navigate(getDestinationRoute()); - }); - return; - } Navigation.dismissModal({ - callback: () => Navigation.navigate(getDestinationRoute()), + afterTransition: () => Navigation.navigate(getDestinationRoute()), }); }} text={translate('common.replace')} diff --git a/src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx index e428fbe3da86..4fb3728c3503 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 {InteractionManager, Keyboard, View} from 'react-native'; +import {View} from 'react-native'; import CategorySelectorModal from '@components/CategorySelector/CategorySelectorModal'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -25,6 +25,7 @@ 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 & ( @@ -79,10 +80,8 @@ function WorkspaceCategoriesSettingsPage({policy, route}: WorkspaceCategoriesSet setWorkspaceDefaultSpendCategory(policyID, currentGroupID, selectedCategory.keyForList, policy?.mccGroup); } - Keyboard.dismiss(); - // eslint-disable-next-line @typescript-eslint/no-deprecated - InteractionManager.runAfterInteractions(() => { - setIsSelectorModalVisible(false); + KeyboardUtils.dismiss({ + afterTransition: () => setIsSelectorModalVisible(false), }); }; diff --git a/src/pages/workspace/members/WorkspaceInviteMessageComponent.tsx b/src/pages/workspace/members/WorkspaceInviteMessageComponent.tsx index f3c77be1c73b..bca2c89f3f2f 100644 --- a/src/pages/workspace/members/WorkspaceInviteMessageComponent.tsx +++ b/src/pages/workspace/members/WorkspaceInviteMessageComponent.tsx @@ -167,7 +167,7 @@ function WorkspaceInviteMessageComponent({ } if ((backTo as string)?.endsWith('members')) { - Navigation.setNavigationActionToMicrotaskQueue(() => Navigation.dismissModal()); + Navigation.dismissModal(); return; } @@ -176,8 +176,8 @@ function WorkspaceInviteMessageComponent({ return; } - Navigation.setNavigationActionToMicrotaskQueue(() => { - Navigation.dismissModal({callback: () => Navigation.navigate(ROUTES.WORKSPACE_MEMBERS.getRoute(policyID))}); + Navigation.dismissModal({ + afterTransition: () => Navigation.navigate(ROUTES.WORKSPACE_MEMBERS.getRoute(policyID)), }); }; diff --git a/src/utils/keyboard/index.android.ts b/src/utils/keyboard/index.android.ts index b15d81367e30..c0e470b4f2ce 100644 --- a/src/utils/keyboard/index.android.ts +++ b/src/utils/keyboard/index.android.ts @@ -1,5 +1,7 @@ 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; @@ -21,20 +23,26 @@ const subscribeKeyboardVisibilityChange = (cb: (isVisible: boolean) => void) => }; // eslint-disable-next-line @typescript-eslint/no-unused-vars -const dismiss = (shouldSkipSafari?: boolean): Promise => { +const dismiss = (options?: DismissKeyboardOptions): Promise => { return new Promise((resolve) => { if (!isVisible) { + options?.afterTransition?.(); resolve(); return; } + const transitionHandle = TransitionTracker.startTransition(); const subscription = Keyboard.addListener('keyboardDidHide', () => { resolve(); + TransitionTracker.endTransition(transitionHandle); subscription.remove(); }); - 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 3ff8096680c6..83243968af9c 100644 --- a/src/utils/keyboard/index.ts +++ b/src/utils/keyboard/index.ts @@ -1,4 +1,6 @@ import {Keyboard} from 'react-native'; +import TransitionTracker from '@libs/Navigation/TransitionTracker'; +import type {DismissKeyboardOptions} from './types'; type SimplifiedKeyboardEvent = { height?: number; @@ -20,20 +22,26 @@ const subscribeKeyboardVisibilityChange = (cb: (isVisible: boolean) => void) => }; // eslint-disable-next-line @typescript-eslint/no-unused-vars -const dismiss = (shouldSkipSafari?: boolean): Promise => { +const dismiss = (options?: DismissKeyboardOptions): Promise => { return new Promise((resolve) => { if (!isVisible) { + options?.afterTransition?.(); resolve(); return; } + const transitionHandle = TransitionTracker.startTransition(); const subscription = Keyboard.addListener('keyboardDidHide', () => { resolve(); + TransitionTracker.endTransition(transitionHandle); subscription.remove(); }); - 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 d55f69ee70af..ecf12f7f2610 100644 --- a/src/utils/keyboard/index.website.ts +++ b/src/utils/keyboard/index.website.ts @@ -1,6 +1,8 @@ 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; @@ -34,17 +36,19 @@ const handleResize = () => { window.visualViewport?.addEventListener('resize', handleResize); -const dismiss = (shouldSkipSafari = false): Promise => { +const dismiss = (options?: DismissKeyboardOptions): Promise => { return new Promise((resolve) => { - if (shouldSkipSafari && isMobileSafari()) { - resolve(); - return; - } - if (!isVisible || !isMobile()) { + const shouldSkipSafari = options?.shouldSkipSafari && isMobileSafari(); + const shouldDismiss = !isVisible || !isMobile(); + + if (shouldDismiss || shouldSkipSafari) { + options?.afterTransition?.(); resolve(); return; } + const transitionHandle = TransitionTracker.startTransition(); + const handleDismissResize = () => { const viewportHeight = window?.visualViewport?.height; @@ -58,11 +62,16 @@ const dismiss = (shouldSkipSafari = false): Promise => { } window.visualViewport?.removeEventListener('resize', handleDismissResize); + TransitionTracker.endTransition(transitionHandle); return resolve(); }; window.visualViewport?.addEventListener('resize', handleDismissResize); Keyboard.dismiss(); + + if (options?.afterTransition) { + TransitionTracker.runAfterTransitions({callback: options.afterTransition}); + } }); }; diff --git a/src/utils/keyboard/types.ts b/src/utils/keyboard/types.ts new file mode 100644 index 000000000000..374054755852 --- /dev/null +++ b/src/utils/keyboard/types.ts @@ -0,0 +1,7 @@ +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 new file mode 100644 index 000000000000..d7a7ae9cfbc2 --- /dev/null +++ b/tests/unit/Navigation/TransitionTrackerTest.ts @@ -0,0 +1,185 @@ +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', () => { + const handle = TransitionTracker.startTransition(); + const callback = jest.fn(); + TransitionTracker.runAfterTransitions({callback, runImmediately: true}); + expect(callback).toHaveBeenCalledTimes(1); + TransitionTracker.endTransition(handle); + drainTransitions(); + }); + + it('queues callback when transition is active and runs it after endTransition', () => { + const callback = jest.fn(); + const handle = TransitionTracker.startTransition(); + TransitionTracker.runAfterTransitions({callback}); + expect(callback).not.toHaveBeenCalled(); + TransitionTracker.endTransition(handle); + expect(callback).toHaveBeenCalledTimes(1); + drainTransitions(); + }); + + it('runs queued callbacks only when all overlapping transitions end', () => { + const callback = jest.fn(); + const handleA = TransitionTracker.startTransition(); + const handleB = TransitionTracker.startTransition(); + TransitionTracker.runAfterTransitions({callback}); + TransitionTracker.endTransition(handleA); + expect(callback).not.toHaveBeenCalled(); + TransitionTracker.endTransition(handleB); + expect(callback).toHaveBeenCalledTimes(1); + drainTransitions(); + }); + + it('cancel prevents queued callback from running', () => { + const callback = jest.fn(); + const transitionHandle = TransitionTracker.startTransition(); + const cancelHandle = TransitionTracker.runAfterTransitions({callback}); + cancelHandle.cancel(); + TransitionTracker.endTransition(transitionHandle); + 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(); + const handle = TransitionTracker.startTransition(); + // Two ticks: one for promiseForNextTransitionStart, one for Promise.race wrapper + await Promise.resolve(); + await Promise.resolve(); + expect(callback).not.toHaveBeenCalled(); + TransitionTracker.endTransition(handle); + expect(callback).toHaveBeenCalledTimes(1); + drainTransitions(); + }); + + it('waitForUpcomingTransition fires callback after timeout if transitionStart never arrives', async () => { + const callback = jest.fn(); + TransitionTracker.runAfterTransitions({callback, waitForUpcomingTransition: true}); + expect(callback).not.toHaveBeenCalled(); + jest.advanceTimersByTime(CONST.MAX_TRANSITION_START_WAIT_MS); + await Promise.resolve(); + await Promise.resolve(); + expect(callback).toHaveBeenCalledTimes(1); + drainTransitions(); + }); + + it('cancel prevents waitForUpcomingTransition callback from running after transition starts', () => { + const callback = jest.fn(); + const cancelHandle = TransitionTracker.runAfterTransitions({callback, waitForUpcomingTransition: true}); + const transitionHandle = TransitionTracker.startTransition(); + cancelHandle.cancel(); + TransitionTracker.endTransition(transitionHandle); + expect(callback).not.toHaveBeenCalled(); + drainTransitions(); + }); + + it('cancel before transition starts prevents waitForUpcomingTransition callback from running', () => { + const callback = jest.fn(); + const cancelHandle = TransitionTracker.runAfterTransitions({callback, waitForUpcomingTransition: true}); + cancelHandle.cancel(); + const transitionHandle = TransitionTracker.startTransition(); + TransitionTracker.endTransition(transitionHandle); + expect(callback).not.toHaveBeenCalled(); + drainTransitions(); + }); + }); + + describe('handle-based pairing', () => { + it('out-of-order end: transitions ended in reverse order still flush correctly', () => { + const callback = jest.fn(); + const handleA = TransitionTracker.startTransition(); + const handleB = TransitionTracker.startTransition(); + TransitionTracker.runAfterTransitions({callback}); + TransitionTracker.endTransition(handleB); + expect(callback).not.toHaveBeenCalled(); + TransitionTracker.endTransition(handleA); + expect(callback).toHaveBeenCalledTimes(1); + drainTransitions(); + }); + + it('double-end with same handle is a no-op and does not corrupt the count', () => { + const callback = jest.fn(); + const handleA = TransitionTracker.startTransition(); + const handleB = TransitionTracker.startTransition(); + TransitionTracker.runAfterTransitions({callback}); + + TransitionTracker.endTransition(handleA); + TransitionTracker.endTransition(handleA); + expect(callback).not.toHaveBeenCalled(); + + TransitionTracker.endTransition(handleB); + expect(callback).toHaveBeenCalledTimes(1); + drainTransitions(); + }); + + it('safety timeout fires then manual endTransition is a no-op — no double-decrement', () => { + const callback = jest.fn(); + const handle = TransitionTracker.startTransition(); + TransitionTracker.runAfterTransitions({callback}); + + jest.advanceTimersByTime(CONST.MAX_TRANSITION_DURATION_MS); + expect(callback).toHaveBeenCalledTimes(1); + + TransitionTracker.endTransition(handle); + expect(callback).toHaveBeenCalledTimes(1); + + const laterCallback = jest.fn(); + const laterHandle = TransitionTracker.startTransition(); + TransitionTracker.runAfterTransitions({callback: laterCallback}); + expect(laterCallback).not.toHaveBeenCalled(); + TransitionTracker.endTransition(laterHandle); + expect(laterCallback).toHaveBeenCalledTimes(1); + drainTransitions(); + }); + + it('exception in one callback does not prevent subsequent callbacks from running', () => { + const handle = TransitionTracker.startTransition(); + const callbackA = jest.fn(() => { + throw new Error('boom'); + }); + const callbackB = jest.fn(); + TransitionTracker.runAfterTransitions({callback: callbackA}); + TransitionTracker.runAfterTransitions({callback: callbackB}); + + TransitionTracker.endTransition(handle); + expect(callbackA).toHaveBeenCalledTimes(1); + expect(callbackB).toHaveBeenCalledTimes(1); + drainTransitions(); + }); + }); +}); diff --git a/tests/unit/keyboard/AndroidKeyboardUtilsTest.ts b/tests/unit/keyboard/AndroidKeyboardUtilsTest.ts index 0b4a8f045290..78c6d492c543 100644 --- a/tests/unit/keyboard/AndroidKeyboardUtilsTest.ts +++ b/tests/unit/keyboard/AndroidKeyboardUtilsTest.ts @@ -4,6 +4,10 @@ const mockKeyboardListeners: Record void>> = {}; const mockDismissKeyboard = jest.fn(); +jest.mock('@libs/Log', () => ({ + warn: jest.fn(), +})); + jest.mock('react-native', () => ({ Keyboard: { dismiss: mockDismissKeyboard, @@ -20,6 +24,7 @@ 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 9482f047b6b1..f6b7f0126b34 100644 --- a/tests/unit/keyboard/KeyboardUtilsTest.ts +++ b/tests/unit/keyboard/KeyboardUtilsTest.ts @@ -1,9 +1,14 @@ import type {SimplifiedKeyboardEvent} from '@src/utils/keyboard'; +import type {DismissKeyboardOptions} from '@src/utils/keyboard/types'; const mockKeyboardListeners: Record void>> = {}; const mockKeyboardControllerListeners: Record void>> = {}; const mockDismissKeyboard = jest.fn(); +jest.mock('@libs/Log', () => ({ + warn: jest.fn(), +})); + jest.mock('react-native', () => ({ Keyboard: { dismiss: mockDismissKeyboard, @@ -17,6 +22,7 @@ jest.mock('react-native', () => ({ }; }), }, + PixelRatio: {getFontScale: () => 1}, })); // Mock react-native-keyboard-controller @@ -51,7 +57,7 @@ const clearListeners = () => { describe('Keyboard utils: general native', () => { // eslint-disable-next-line @typescript-eslint/no-explicit-any - let utils: {dismiss: () => Promise; dismissKeyboardAndExecute: (cb: () => void) => Promise}; + let utils: {dismiss: (options?: DismissKeyboardOptions) => Promise; dismissKeyboardAndExecute: (cb: () => void) => Promise}; beforeEach(() => { // Clear all mocks @@ -61,7 +67,10 @@ 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: () => Promise; dismissKeyboardAndExecute: (cb: () => void) => Promise}; + utils = require('@src/utils/keyboard').default as { + dismiss: (options?: DismissKeyboardOptions) => Promise; + dismissKeyboardAndExecute: (cb: () => void) => Promise; + }; }); describe('dismiss', () => { @@ -114,6 +123,20 @@ 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', () => {