IncubatorDialog - not opening correctly (#2335)

Author: M-i-k-e-l

src/incubator/Dialog/index.tsx

@@ -2,7 +2,7 @@ import {isEmpty} from 'lodash';
 import React, {useRef, useMemo, useCallback, useState, useImperativeHandle, forwardRef, ForwardedRef} from 'react';
 import {StyleSheet, View as RNView} from 'react-native';
 import hoistStatics from 'hoist-non-react-statics';
-import {useAnimatedStyle, useDerivedValue, useSharedValue, withTiming} from 'react-native-reanimated';
+import {useAnimatedStyle, useDerivedValue} from 'react-native-reanimated';
 import {PanGestureHandler} from 'react-native-gesture-handler';
 import {Spacings, Colors, BorderRadiuses} from 'style';
 import {asBaseComponent} from '../../commons/new';
@@ -47,7 +47,6 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
   const {overlayBackgroundColor, ...otherModalProps} = modalProps;
   const initialVisibility = useRef(propsVisibility);
   const [visible, setVisible] = useState(propsVisibility);
-  const opacity = useSharedValue<number>(Number(propsVisibility));
 
   const directions = useMemo((): DialogDirections[] => {
     return [direction];
@@ -68,7 +67,6 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
   const onTransitionAnimationEnd = useCallback((type: TransitionViewAnimationType) => {
     if (type === 'exit') {
       setVisible(false);
-      opacity.value = withTiming(0, {duration: 0});
       onDismiss?.();
     }
   },
@@ -89,20 +87,13 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
     hiddenLocation
   });
 
-  const onInitPosition = useCallback(() => {
-    if (opacity.value === 0) {
-      opacity.value = withTiming(1, {duration: 0});
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const {
     animateIn,
     animateOut,
-    translation: transitionTranslation
+    translation: transitionTranslation,
+    isMounted
   } = useAnimatedTransition({
     hiddenLocation,
-    onInitPosition,
     enterFrom: direction,
     exitTo: direction,
     onAnimationStart: fade,
@@ -149,7 +140,7 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
     return {
       transform: [{translateX: translation.value.x}, {translateY: translation.value.y}],
       // TODO: do we want to take the component's opacity here? - I think combining opacities is buggy
-      opacity: opacity.value
+      opacity: isMounted.value ? 1 : 0
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

src/incubator/Dialog/useAnimatedTransition.ts

@@ -45,16 +45,16 @@ export interface AnimatedTransitionProps extends AnimationNotifierEndProps {
    */
   delay?: Delay;
   hiddenLocation: HiddenLocation;
-  onInitPosition: () => void;
 }
 
 export default function useAnimatedTransition(props: AnimatedTransitionProps) {
-  const {hiddenLocation, onInitPosition, enterFrom, exitTo, onAnimationStart, onAnimationEnd, delay} = props;
+  const {hiddenLocation, enterFrom, exitTo, onAnimationStart, onAnimationEnd, delay} = props;
 
   // Has to start at {0, 0} with {opacity: 0} so layout can be measured
   const translationX = useSharedValue<number>(0);
   const translationY = useSharedValue<number>(0);
   const {onEnterAnimationEnd, onExitAnimationEnd} = useAnimationEndNotifier({onAnimationEnd});
+  const isMounted = useSharedValue(false);
 
   const getLocation = (direction?: TransitionViewDirection) => {
     return {
@@ -71,7 +71,7 @@ export default function useAnimatedTransition(props: AnimatedTransitionProps) {
     };
   };
 
-  const initPosition = useCallback(() => {
+  const onHiddenLocationUpdated = useCallback(() => {
     'worklet';
     const to = getLocation(enterFrom);
     // @ts-expect-error
@@ -82,12 +82,14 @@ export default function useAnimatedTransition(props: AnimatedTransitionProps) {
       translationY.value = withTiming(to.y, {duration: 0}, animateIn);
     }
 
-    onInitPosition();
-  }, [onInitPosition]);
+    if (!isMounted.value) {
+      isMounted.value = true;
+    }
+  }, []);
 
   useEffect(() => {
     if (hiddenLocation.wasMeasured && enterFrom) {
-      initPosition();
+      onHiddenLocationUpdated();
     }
   }, [hiddenLocation]);
 
@@ -130,5 +132,5 @@ export default function useAnimatedTransition(props: AnimatedTransitionProps) {
     }
   }, [hiddenLocation, exitTo, onExitAnimationEnd, delay?.exit]);
 
-  return {animateIn, animateOut, translation: {x: translationX, y: translationY}};
+  return {animateIn, animateOut, translation: {x: translationX, y: translationY}, isMounted};
 }