Migrate useSingleExecution off InteractionManager

jest/setupAfterEnv.ts

@@ -6,13 +6,24 @@ import type {KeyboardEventName} from 'react-native';
 import {Keyboard} from 'react-native';
 import Onyx from 'react-native-onyx';
 
+import mockUseSingleExecution from '../tests/utils/mockUseSingleExecution';
+
 jest.useRealTimers();
 
 jest.mock('@hooks/useAIFeaturesPromoModal', () => ({
     __esModule: true,
     default: jest.fn(),
 }));
 
+// The real hook relies on real navigation transitions to settle `isExecuting` (see
+// `runAfterPredictedTransition`/`TransitionTracker`), which don't happen in unit tests and would
+// otherwise leave buttons stuck disabled. Mocked globally so no test needs to import the navigation
+// listener machinery just because it renders a Pressable-based component (Button, MenuItem, etc.).
+jest.mock('@hooks/useSingleExecution', () => ({
+    __esModule: true,
+    default: mockUseSingleExecution,
+}));
+
 // Patch Keyboard.addListener to return a subscription object with .remove() so that
 // @react-navigation/bottom-tabs useIsKeyboardShown hook doesn't crash on cleanup.
 if (Keyboard && typeof Keyboard.addListener === 'function') {

src/CONST/index.ts

@@ -260,6 +260,7 @@ const CONST = {
     COMPOSER_FOCUS_DELAY: 150,
     MAX_TRANSITION_DURATION_MS: 1000,
     MAX_TRANSITION_START_WAIT_MS: 1000,
+    NAVIGATION_PREDICTION_WINDOW_MS: 150,
     EXPENSE_REPORT_DELETE_DELAY_MS: 300,
     ELEMENT_NAME: {
         INPUT: 'INPUT',

src/hooks/useSingleExecution/index.native.ts

@@ -1,6 +1,7 @@
-import {useCallback, useRef, useState} from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {InteractionManager} from 'react-native';
+import runAfterPredictedTransition from '@libs/Navigation/runAfterPredictedTransition';
+import type {CancelHandle} from '@libs/Navigation/TransitionTracker';
+
+import {useCallback, useEffect, useRef, useState} from 'react';
 
 type Action<T extends unknown[]> = (...params: T) => void | Promise<void>;
 
@@ -10,9 +11,17 @@ type Action<T extends unknown[]> = (...params: T) => void | Promise<void>;
 export default function useSingleExecution() {
     const [isExecuting, setIsExecuting] = useState(false);
     const isExecutingRef = useRef<boolean | undefined>(undefined);
+    const transitionHandleRef = useRef<CancelHandle | null>(null);
 
     isExecutingRef.current = isExecuting;
 
+    useEffect(
+        () => () => {
+            transitionHandleRef.current?.cancel();
+        },
+        [],
+    );
+
     const singleExecution = useCallback(
         <T extends unknown[]>(action: Action<T>) =>
             (...params: T) => {
@@ -24,7 +33,9 @@ export default function useSingleExecution() {
                 isExecutingRef.current = true;
 
                 const execution = action(...params);
-                InteractionManager.runAfterInteractions(() => {
+                // Re-enables the button once the predicted (or actual) transition triggered by this press
+                // ends - or immediately, if the press wasn't predicted to cause one.
+                transitionHandleRef.current = runAfterPredictedTransition(() => {
                     if (!(execution instanceof Promise)) {
                         setIsExecuting(false);
                         return;

src/libs/Navigation/AppNavigator/Navigators/TabNavigator.native.tsx

@@ -2,6 +2,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 
 import {getPreservedNavigatorState, setPreservedNavigatorState} from '@libs/Navigation/AppNavigator/createSplitNavigator/usePreserveNavigatorState';
+import {bottomTabScreenLayoutWrapper} from '@libs/Navigation/PlatformStackNavigation/ScreenLayout';
 import type {TabNavigatorParamList} from '@libs/Navigation/types';
 
 import HomePage from '@pages/home/HomePage';
@@ -95,6 +96,7 @@ function TabNavigator() {
             backBehavior="fullHistory"
             tabBar={renderTabBar}
             screenOptions={screenOptions}
+            screenLayout={bottomTabScreenLayoutWrapper}
             UNSTABLE_router={tabRouterOverride}
         >
             <Tab.Screen

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

@@ -4,6 +4,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 
+import {bottomTabScreenLayoutWrapper} from '@libs/Navigation/PlatformStackNavigation/ScreenLayout';
 import type {TabNavigatorParamList} from '@libs/Navigation/types';
 import {getSpan} from '@libs/telemetry/activeSpans';
 
@@ -115,6 +116,7 @@ function TabNavigator() {
             backBehavior="fullHistory"
             tabBar={renderTabBar}
             screenOptions={screenOptions}
+            screenLayout={bottomTabScreenLayoutWrapper}
         >
             <Tab.Screen
                 name={SCREENS.HOME}

src/libs/Navigation/PlatformStackNavigation/ScreenLayout.tsx

@@ -1,27 +1,45 @@
 import TransitionTracker from '@libs/Navigation/TransitionTracker';
 import type {TransitionHandle} from '@libs/Navigation/TransitionTracker';
 
+import type {BottomTabNavigationOptions, BottomTabNavigationProp} from '@react-navigation/bottom-tabs';
 import type {ParamListBase, ScreenLayoutArgs} from '@react-navigation/native';
 
 import React, {useLayoutEffect, useRef} from 'react';
 
-import type {PlatformSpecificNavigationOptions, PlatformStackNavigationOptions, PlatformStackNavigationProp} from './types';
+import type {PlatformSpecificNavigationOptions, PlatformStackNavigationOptions} from './types';
+
+// The only navigation capability ScreenLayout actually needs, regardless of which navigator (stack, bottom-tabs, ...)
+// it's used with. Keeping this minimal means passing a real (properly-typed) navigation prop into it - e.g. from
+// bottomTabScreenLayoutWrapper below - needs no unsafe cast, since every navigator's `addListener` structurally satisfies it.
+type TransitionAwareNavigation = {
+    addListener(type: 'transitionStart' | 'transitionEnd', callback: () => void): () => void;
+};
 
 // 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<ParamListBase, string, PlatformSpecificNavigationOptions | PlatformStackNavigationOptions, string>) {
     return (
         <ScreenLayout
             {...rest}
             // The type cast is needed because useNavigationBuilder hardcodes the Navigation generic to `string`.
-            navigation={navigation as unknown as PlatformStackNavigationProp<ParamListBase>}
+            navigation={navigation as unknown as TransitionAwareNavigation}
         />
     );
 }
 
-function ScreenLayout({
-    children,
-    navigation,
-}: ScreenLayoutArgs<ParamListBase, string, PlatformSpecificNavigationOptions | PlatformStackNavigationOptions, PlatformStackNavigationProp<ParamListBase>>) {
+// Same as screenLayoutWrapper above, but for bottom-tab navigators. No cast needed here - `navigation` is already
+// properly typed as BottomTabNavigationProp, and its `addListener` structurally satisfies TransitionAwareNavigation.
+function bottomTabScreenLayoutWrapper({navigation, ...rest}: ScreenLayoutArgs<ParamListBase, string, BottomTabNavigationOptions, BottomTabNavigationProp<ParamListBase>>) {
+    return (
+        <ScreenLayout
+            {...rest}
+            navigation={navigation}
+        />
+    );
+}
+
+type ScreenLayoutProps = ScreenLayoutArgs<ParamListBase, string, PlatformSpecificNavigationOptions | PlatformStackNavigationOptions | BottomTabNavigationOptions, TransitionAwareNavigation>;
+
+function ScreenLayout({children, navigation}: ScreenLayoutProps) {
     const transitionHandleRef = useRef<TransitionHandle | null>(null);
 
     useLayoutEffect(() => {
@@ -39,10 +57,19 @@ function ScreenLayout({
         return () => {
             transitionStartListener();
             transitionEndListener();
+
+            // If this screen unmounts before its own transitionEnd fires (e.g. it was popped/reset
+            // away mid-transition), the handle would otherwise sit in TransitionTracker until its
+            // safety timeout, needlessly delaying anything waiting via runAfterTransitions.
+            if (transitionHandleRef.current) {
+                TransitionTracker.endTransition(transitionHandleRef.current);
+                transitionHandleRef.current = null;
+            }
         };
     }, [navigation]);
 
     return children;
 }
 
 export default screenLayoutWrapper;
+export {bottomTabScreenLayoutWrapper};

src/libs/Navigation/TransitionTracker.ts

@@ -24,23 +24,25 @@ type RunAfterTransitionsOptions = {
 
 const activeTransitions = new Map<TransitionHandle, ReturnType<typeof setTimeout>>();
 
+const transitionStartListeners = new Set<() => void>();
+
 let pendingCallbacks: Array<() => void | Promise<void>> = [];
 
 let nextTransitionStartResolve: (() => void) | null = null;
 let promiseForNextTransitionStart = new Promise<void>((resolve) => {
     nextTransitionStartResolve = resolve;
 });
 
-function runCallback(callback: () => void | Promise<void>): void {
+function invokeSafely(fn: () => void | Promise<void>): void {
     try {
-        const result = callback();
+        const result = fn();
         if (result instanceof Promise) {
             result.catch((error) => {
-                Log.warn('[TransitionTracker] A pending async callback threw an error', {error});
+                Log.warn(`[TransitionTracker] An async callback/listener threw an error`, {error});
             });
         }
     } catch (error) {
-        Log.warn('[TransitionTracker] A pending callback threw an error', {error});
+        Log.warn(`[TransitionTracker] A callback/listener threw an error`, {error});
     }
 }
 
@@ -52,7 +54,7 @@ function flushCallbacks(): void {
     const callbacks = pendingCallbacks;
     pendingCallbacks = [];
     for (const callback of callbacks) {
-        runCallback(callback);
+        invokeSafely(callback);
     }
 }
 
@@ -91,6 +93,10 @@ function startTransition(): TransitionHandle {
 
     activeTransitions.set(handle, timeout);
 
+    for (const listener of transitionStartListeners) {
+        invokeSafely(listener);
+    }
+
     return handle;
 }
 
@@ -168,7 +174,7 @@ function runAfterTransitions({
     }
 
     if (activeTransitions.size === 0 || runImmediately) {
-        runCallback(callback);
+        invokeSafely(callback);
         return {cancel: () => {}};
     }
 
@@ -184,10 +190,22 @@ function runAfterTransitions({
     };
 }
 
+/**
+ * Subscribes to be notified synchronously whenever a new transition starts (via {@link startTransition}).
+ * Returns an unsubscribe function.
+ */
+function onTransitionStart(listener: () => void): () => void {
+    transitionStartListeners.add(listener);
+    return () => {
+        transitionStartListeners.delete(listener);
+    };
+}
+
 const TransitionTracker = {
     startTransition,
     endTransition,
     runAfterTransitions,
+    onTransitionStart,
 };
 
 export default TransitionTracker;