Incubator.Dialog - another fix for hiding (#2300)

* Small refactor

* Exit animation should end faster - switch to time

Author: M-i-k-e-l

src/incubator/Dialog/useAnimatedTransition.ts

@@ -1,6 +1,14 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {useEffect, useCallback} from 'react';
-import {runOnJS, useSharedValue, withSpring, withTiming, withDelay} from 'react-native-reanimated';
+import {
+  runOnJS,
+  useSharedValue,
+  withSpring,
+  withTiming,
+  withDelay,
+  WithTimingConfig,
+  WithSpringConfig
+} from 'react-native-reanimated';
 import type {HiddenLocation} from '../hooks/useHiddenLocation';
 import {PanningDirections, PanningDirectionsEnum, DEFAULT_ANIMATION_CONFIG} from '../panView';
 import useAnimationEndNotifier, {
@@ -11,6 +19,9 @@ const TransitionViewDirectionEnum = PanningDirectionsEnum;
 type TransitionViewDirection = PanningDirections;
 export {TransitionViewAnimationType, TransitionViewDirectionEnum, TransitionViewDirection};
 
+const ENTER_ANIMATION_CONFIG = DEFAULT_ANIMATION_CONFIG;
+const EXIT_ANIMATION_CONFIG = {duration: 300};
+
 interface Delay {
   enter?: number;
   exit?: number;
@@ -60,40 +71,39 @@ export default function useAnimatedTransition(props: AnimatedTransitionProps) {
     };
   };
 
-  const initPosition = useCallback((to: {x: number; y: number},
-    animationDirection: TransitionViewDirection,
-    callback: (isFinished?: boolean) => void) => {
+  const initPosition = useCallback(() => {
     'worklet';
+    const to = getLocation(enterFrom);
     // @ts-expect-error
-    if ([TransitionViewDirectionEnum.LEFT, TransitionViewDirectionEnum.RIGHT].includes(animationDirection)) {
-      translationX.value = withTiming(to.x, {duration: 0}, callback);
+    if ([TransitionViewDirectionEnum.LEFT, TransitionViewDirectionEnum.RIGHT].includes(enterFrom)) {
+      translationX.value = withTiming(to.x, {duration: 0}, animateIn);
       // @ts-expect-error
-    } else if ([TransitionViewDirectionEnum.UP, TransitionViewDirectionEnum.DOWN].includes(animationDirection)) {
-      translationY.value = withTiming(to.y, {duration: 0}, callback);
+    } else if ([TransitionViewDirectionEnum.UP, TransitionViewDirectionEnum.DOWN].includes(enterFrom)) {
+      translationY.value = withTiming(to.y, {duration: 0}, animateIn);
     }
 
     onInitPosition();
-  },
-  [onInitPosition]);
+  }, [onInitPosition]);
 
   useEffect(() => {
     if (hiddenLocation.wasMeasured && enterFrom) {
-      const location = getLocation(enterFrom);
-      initPosition(location, enterFrom, animateIn);
+      initPosition();
     }
   }, [hiddenLocation]);
 
   const translateTo = useCallback((to: {x: number; y: number},
+    animation: typeof withTiming | typeof withSpring,
+    animationConfig: WithTimingConfig | WithSpringConfig,
     animationDirection: TransitionViewDirection,
     callback: (isFinished?: boolean) => void,
     delay = 0) => {
     'worklet';
     // @ts-expect-error
     if ([TransitionViewDirectionEnum.LEFT, TransitionViewDirectionEnum.RIGHT].includes(animationDirection)) {
-      translationX.value = withDelay(delay, withSpring(to.x, DEFAULT_ANIMATION_CONFIG, callback));
+      translationX.value = withDelay(delay, animation(to.x, animationConfig, callback));
       // @ts-expect-error
     } else if ([TransitionViewDirectionEnum.UP, TransitionViewDirectionEnum.DOWN].includes(animationDirection)) {
-      translationY.value = withDelay(delay, withSpring(to.y, DEFAULT_ANIMATION_CONFIG, callback));
+      translationY.value = withDelay(delay, animation(to.y, animationConfig, callback));
     }
   },
   []);
@@ -105,7 +115,7 @@ export default function useAnimatedTransition(props: AnimatedTransitionProps) {
         runOnJS(onAnimationStart)('enter');
       }
 
-      translateTo({x: 0, y: 0}, enterFrom, onEnterAnimationEnd, delay?.enter);
+      translateTo({x: 0, y: 0}, withSpring, ENTER_ANIMATION_CONFIG, enterFrom, onEnterAnimationEnd, delay?.enter);
     }
   }, [onEnterAnimationEnd, delay?.enter]);
 
@@ -116,7 +126,7 @@ export default function useAnimatedTransition(props: AnimatedTransitionProps) {
         runOnJS(onAnimationStart)('exit');
       }
 
-      translateTo(getLocation(exitTo), exitTo, onExitAnimationEnd, delay?.exit);
+      translateTo(getLocation(exitTo), withTiming, EXIT_ANIMATION_CONFIG, exitTo, onExitAnimationEnd, delay?.exit);
     }
   }, [hiddenLocation, exitTo, onExitAnimationEnd, delay?.exit]);