add handle-based transitions

Author: collectioneur

src/components/Modal/ReanimatedModal/index.tsx

@@ -10,6 +10,7 @@ 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';
@@ -58,6 +59,7 @@ function ReanimatedModal({
 
     const backHandlerListener = useRef<NativeEventSubscription | null>(null);
     const handleRef = useRef<number | undefined>(undefined);
+    const transitionHandleRef = useRef<TransitionHandle | null>(null);
 
     const styles = useThemeStyles();
 
@@ -104,7 +106,10 @@ function ReanimatedModal({
                 // eslint-disable-next-line @typescript-eslint/no-deprecated
                 InteractionManager.clearInteractionHandle(handleRef.current);
             }
-            TransitionTracker.endTransition();
+            if (transitionHandleRef.current) {
+                TransitionTracker.endTransition(transitionHandleRef.current);
+                transitionHandleRef.current = null;
+            }
 
             setIsVisibleState(false);
             setIsContainerOpen(false);
@@ -117,15 +122,15 @@ function ReanimatedModal({
         if (isVisible && !isContainerOpen && !isTransitioning) {
             // eslint-disable-next-line @typescript-eslint/no-deprecated
             handleRef.current = InteractionManager.createInteractionHandle();
-            TransitionTracker.startTransition();
+            transitionHandleRef.current = TransitionTracker.startTransition();
             onModalWillShow();
 
             setIsVisibleState(true);
             setIsTransitioning(true);
         } else if (!isVisible && isContainerOpen && !isTransitioning) {
             // eslint-disable-next-line @typescript-eslint/no-deprecated
             handleRef.current = InteractionManager.createInteractionHandle();
-            TransitionTracker.startTransition();
+            transitionHandleRef.current = TransitionTracker.startTransition();
             onModalWillHide();
 
             blurActiveElement();
@@ -146,7 +151,10 @@ function ReanimatedModal({
             // eslint-disable-next-line @typescript-eslint/no-deprecated
             InteractionManager.clearInteractionHandle(handleRef.current);
         }
-        TransitionTracker.endTransition();
+        if (transitionHandleRef.current) {
+            TransitionTracker.endTransition(transitionHandleRef.current);
+            transitionHandleRef.current = null;
+        }
         onModalShow();
     }, [onModalShow]);
 
@@ -157,7 +165,10 @@ function ReanimatedModal({
             // eslint-disable-next-line @typescript-eslint/no-deprecated
             InteractionManager.clearInteractionHandle(handleRef.current);
         }
-        TransitionTracker.endTransition();
+        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

src/libs/Navigation/PlatformStackNavigation/ScreenLayout.tsx

@@ -1,6 +1,7 @@
 import type {ParamListBase, ScreenLayoutArgs} from '@react-navigation/native';
-import React, {useLayoutEffect} from 'react';
+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.
@@ -19,12 +20,18 @@ function ScreenLayout({
     children,
     navigation,
 }: ScreenLayoutArgs<ParamListBase, string, PlatformSpecificNavigationOptions | PlatformStackNavigationOptions, PlatformStackNavigationProp<ParamListBase>>) {
+    const transitionHandleRef = useRef<TransitionHandle | null>(null);
+
     useLayoutEffect(() => {
         const transitionStartListener = navigation.addListener('transitionStart', () => {
-            TransitionTracker.startTransition();
+            transitionHandleRef.current = TransitionTracker.startTransition();
         });
         const transitionEndListener = navigation.addListener('transitionEnd', () => {
-            TransitionTracker.endTransition();
+            if (!transitionHandleRef.current) {
+                return;
+            }
+            TransitionTracker.endTransition(transitionHandleRef.current);
+            transitionHandleRef.current = null;
         });
 
         return () => {

src/libs/Navigation/TransitionTracker.ts

@@ -1,6 +1,8 @@
 import Log from '@libs/Log';
 import CONST from '@src/CONST';
 
+type TransitionHandle = symbol;
+
 type CancelHandle = {cancel: () => void};
 
 type RunAfterTransitionsOptions = {
@@ -16,9 +18,7 @@ type RunAfterTransitionsOptions = {
     waitForUpcomingTransition?: boolean;
 };
 
-let activeCount = 0;
-
-const activeTimeouts: Array<ReturnType<typeof setTimeout>> = [];
+const activeTransitions = new Map<TransitionHandle, ReturnType<typeof setTimeout>>();
 
 let pendingCallbacks: Array<() => void> = [];
 
@@ -44,24 +44,23 @@ function flushCallbacks(): void {
 }
 
 /**
- * Decrements the active count and flushes callbacks when all transitions are idle.
+ * 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();
+    if (activeTransitions.size !== 0) {
+        return;
     }
+    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.
+ * 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(): void {
-    activeCount += 1;
+function startTransition(): TransitionHandle {
+    const handle: TransitionHandle = Symbol('transition');
 
     const resolve = nextTransitionStartResolve;
     if (resolve) {
@@ -73,27 +72,29 @@ function startTransition(): void {
     }
 
     const timeout = setTimeout(() => {
-        const idx = activeTimeouts.indexOf(timeout);
-        if (idx !== -1) {
-            activeTimeouts.splice(idx, 1);
-        }
+        activeTransitions.delete(handle);
         decrementAndFlush();
     }, CONST.MAX_TRANSITION_DURATION_MS);
 
-    activeTimeouts.push(timeout);
+    activeTransitions.set(handle, timeout);
+
+    return handle;
 }
 
 /**
- * Decrements the active transition count.
- * Clears the corresponding auto-timeout since the transition ended normally.
- * When the count reaches zero, flushes all pending callbacks.
+ * 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(): void {
-    const timeout = activeTimeouts.shift();
-    if (timeout !== undefined) {
-        clearTimeout(timeout);
+function endTransition(handle: TransitionHandle): void {
+    const timeout = activeTransitions.get(handle);
+    if (timeout === undefined) {
+        return;
     }
 
+    clearTimeout(timeout);
+    activeTransitions.delete(handle);
     decrementAndFlush();
 }
 
@@ -133,12 +134,13 @@ function runAfterTransitions({callback, runImmediately = false, waitForUpcomingT
         return {
             cancel: () => {
                 cancelled = true;
+                clearTimeout(transitionStartTimeoutId);
                 innerHandle?.cancel();
             },
         };
     }
 
-    if (activeCount === 0 || runImmediately) {
+    if (activeTransitions.size === 0 || runImmediately) {
         callback();
         return {cancel: () => {}};
     }
@@ -162,4 +164,4 @@ const TransitionTracker = {
 };
 
 export default TransitionTracker;
-export type {CancelHandle};
+export type {CancelHandle, TransitionHandle};

src/utils/keyboard/index.android.ts

@@ -32,10 +32,10 @@ const dismiss = (options?: DismissKeyboardOptions): Promise<void> => {
             return;
         }
 
-        TransitionTracker.startTransition();
+        const transitionHandle = TransitionTracker.startTransition();
         const subscription = Keyboard.addListener('keyboardDidHide', () => {
             resolve();
-            TransitionTracker.endTransition();
+            TransitionTracker.endTransition(transitionHandle);
             subscription.remove();
         });
         Keyboard.dismiss();

src/utils/keyboard/index.ts

@@ -31,10 +31,10 @@ const dismiss = (options?: DismissKeyboardOptions): Promise<void> => {
             return;
         }
 
-        TransitionTracker.startTransition();
+        const transitionHandle = TransitionTracker.startTransition();
         const subscription = Keyboard.addListener('keyboardDidHide', () => {
             resolve();
-            TransitionTracker.endTransition();
+            TransitionTracker.endTransition(transitionHandle);
             subscription.remove();
         });
         Keyboard.dismiss();

src/utils/keyboard/index.website.ts

@@ -47,6 +47,8 @@ const dismiss = (options?: DismissKeyboardOptions): Promise<void> => {
             return;
         }
 
+        const transitionHandle = TransitionTracker.startTransition();
+
         const handleDismissResize = () => {
             const viewportHeight = window?.visualViewport?.height;
 
@@ -60,11 +62,10 @@ const dismiss = (options?: DismissKeyboardOptions): Promise<void> => {
             }
 
             window.visualViewport?.removeEventListener('resize', handleDismissResize);
-            TransitionTracker.endTransition();
+            TransitionTracker.endTransition(transitionHandle);
             return resolve();
         };
 
-        TransitionTracker.startTransition();
         window.visualViewport?.addEventListener('resize', handleDismissResize);
         Keyboard.dismiss();