Fix/incubator dialog no measure 2 (#2282)

* IncubatorDialog - fix no measure occurring

* IncubatorDialog - fix enter animation

Author: M-i-k-e-l

src/incubator/Dialog/index.tsx

@@ -11,12 +11,14 @@ import Modal from '../../components/modal';
 import {extractAlignmentsValues} from '../../commons/modifiers';
 import useHiddenLocation from '../hooks/useHiddenLocation';
 import usePanGesture from '../panView/usePanGesture';
-import useAnimatedTransition, {TransitionViewAnimationType} from './useAnimatedTransition';
+import useAnimatedTransition, {AnimatedTransitionProps, TransitionViewAnimationType} from './useAnimatedTransition';
 import DialogHeader from './DialogHeader';
 import {DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps} from './types';
 export {DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps};
 import useFadeView from './useFadeView';
 
+const TRANSITION_ANIMATION_DELAY: AnimatedTransitionProps['delay'] = {enter: 100};
+
 export interface DialogStatics {
   directions: typeof DialogDirectionsEnum;
   Header: typeof DialogHeader;
@@ -40,7 +42,6 @@ const Dialog = (props: DialogProps) => {
   const {overlayBackgroundColor, ...otherModalProps} = modalProps;
   const initialVisibility = useRef(propsVisibility);
   const [visible, setVisible] = useState(propsVisibility);
-  const containerRef = React.createRef<RNView>();
   const opacity = useSharedValue<number>(Number(propsVisibility));
 
   const directions = useMemo((): DialogDirections[] => {
@@ -67,7 +68,7 @@ const Dialog = (props: DialogProps) => {
   },
   [onDismiss, setVisible]);
 
-  const {onLayout, hiddenLocation} = useHiddenLocation({containerRef});
+  const {setRef, onLayout, hiddenLocation} = useHiddenLocation<RNView>();
 
   const {
     translation: panTranslation,
@@ -98,7 +99,8 @@ const Dialog = (props: DialogProps) => {
     enterFrom: direction,
     exitTo: direction,
     onAnimationStart: fade,
-    onAnimationEnd: onTransitionAnimationEnd
+    onAnimationEnd: onTransitionAnimationEnd,
+    delay: TRANSITION_ANIMATION_DELAY
   });
 
   const open = useCallback(() => {
@@ -159,7 +161,7 @@ const Dialog = (props: DialogProps) => {
   const renderDialog = () => {
     return (
       <PanGestureHandler onGestureEvent={isEmpty(directions) ? undefined : panGestureEvent}>
-        <View reanimated style={style} onLayout={onLayout} ref={containerRef} testID={testID}>
+        <View reanimated style={style} onLayout={onLayout} ref={setRef} testID={testID}>
           <DialogHeader {...headerProps}/>
           {children}
         </View>

src/incubator/Dialog/useAnimatedTransition.ts

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {useEffect, useCallback} from 'react';
-import {runOnJS, useSharedValue, withSpring, withTiming} from 'react-native-reanimated';
-import {HiddenLocation} from '../hooks/useHiddenLocation';
+import {runOnJS, useSharedValue, withSpring, withTiming, withDelay} from 'react-native-reanimated';
+import type {HiddenLocation} from '../hooks/useHiddenLocation';
 import {PanningDirections, PanningDirectionsEnum, DEFAULT_ANIMATION_CONFIG} from '../panView';
 import useAnimationEndNotifier, {
   AnimationNotifierEndProps,
@@ -11,6 +11,11 @@ const TransitionViewDirectionEnum = PanningDirectionsEnum;
 type TransitionViewDirection = PanningDirections;
 export {TransitionViewAnimationType, TransitionViewDirectionEnum, TransitionViewDirection};
 
+interface Delay {
+  enter?: number;
+  exit?: number;
+}
+
 export interface AnimatedTransitionProps extends AnimationNotifierEndProps {
   /**
    * Callback to the animation start.
@@ -24,12 +29,16 @@ export interface AnimatedTransitionProps extends AnimationNotifierEndProps {
    * If this is given there will be an exit animation to this direction.
    */
   exitTo?: TransitionViewDirection;
+  /**
+   * Delay the enter \ exit animation.
+   */
+  delay?: Delay;
   hiddenLocation: HiddenLocation;
   onInitPosition: () => void;
 }
 
 export default function useAnimatedTransition(props: AnimatedTransitionProps) {
-  const {hiddenLocation, onInitPosition, enterFrom, exitTo, onAnimationStart, onAnimationEnd} = props;
+  const {hiddenLocation, onInitPosition, 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);
@@ -76,14 +85,15 @@ export default function useAnimatedTransition(props: AnimatedTransitionProps) {
 
   const translateTo = useCallback((to: {x: number; y: number},
     animationDirection: TransitionViewDirection,
-    callback: (isFinished?: boolean) => void) => {
+    callback: (isFinished?: boolean) => void,
+    delay = 0) => {
     'worklet';
     // @ts-expect-error
     if ([TransitionViewDirectionEnum.LEFT, TransitionViewDirectionEnum.RIGHT].includes(animationDirection)) {
-      translationX.value = withSpring(to.x, DEFAULT_ANIMATION_CONFIG, callback);
+      translationX.value = withDelay(delay, withSpring(to.x, DEFAULT_ANIMATION_CONFIG, callback));
       // @ts-expect-error
     } else if ([TransitionViewDirectionEnum.UP, TransitionViewDirectionEnum.DOWN].includes(animationDirection)) {
-      translationY.value = withSpring(to.y, DEFAULT_ANIMATION_CONFIG, callback);
+      translationY.value = withDelay(delay, withSpring(to.y, DEFAULT_ANIMATION_CONFIG, callback));
     }
   },
   []);
@@ -95,9 +105,9 @@ export default function useAnimatedTransition(props: AnimatedTransitionProps) {
         runOnJS(onAnimationStart)('enter');
       }
 
-      translateTo({x: 0, y: 0}, enterFrom, onEnterAnimationEnd);
+      translateTo({x: 0, y: 0}, enterFrom, onEnterAnimationEnd, delay?.enter);
     }
-  }, [onEnterAnimationEnd]);
+  }, [onEnterAnimationEnd, delay?.enter]);
 
   const animateOut = useCallback(() => {
     'worklet';
@@ -106,9 +116,9 @@ export default function useAnimatedTransition(props: AnimatedTransitionProps) {
         runOnJS(onAnimationStart)('exit');
       }
 
-      translateTo(getLocation(exitTo), exitTo, onExitAnimationEnd);
+      translateTo(getLocation(exitTo), exitTo, onExitAnimationEnd, delay?.exit);
     }
-  }, [hiddenLocation, exitTo, onExitAnimationEnd]);
+  }, [hiddenLocation, exitTo, onExitAnimationEnd, delay?.exit]);
 
   return {animateIn, animateOut, translation: {x: translationX, y: translationY}};
 }

src/incubator/hooks/useHiddenLocation.ts

@@ -1,5 +1,5 @@
-import {RefObject, useCallback, useState} from 'react';
-import {View, LayoutChangeEvent} from 'react-native';
+import {useCallback, useRef, useState, RefCallback} from 'react';
+import {View} from 'react-native';
 import {Constants} from '../../commons/new';
 import {PanningDirectionsEnum} from '../panView';
 
@@ -9,13 +9,7 @@ export interface HiddenLocation extends HiddenLocationRecord {
   wasMeasured: boolean;
 }
 
-export interface HiddenLocationProps<T extends View> {
-  containerRef: RefObject<T>;
-}
-
-export default function useHiddenLocation<T extends View>(props: HiddenLocationProps<T>) {
-  const {containerRef} = props;
-
+export default function useHiddenLocation<T extends View>() {
   const getHiddenLocation = ({
     x = 0,
     y = 0,
@@ -33,17 +27,37 @@ export default function useHiddenLocation<T extends View>(props: HiddenLocationP
   };
 
   const [hiddenLocation, setHiddenLocation] = useState<HiddenLocation>(getHiddenLocation({}));
-
-  const onLayout = useCallback((event: LayoutChangeEvent) => {
-    const {width, height} = event.nativeEvent.layout;
-    if (containerRef.current && !hiddenLocation.wasMeasured) {
-      containerRef.current.measureInWindow((x: number, y: number) => {
-        setHiddenLocation(getHiddenLocation({x, y, width, height, wasMeasured: true}));
+  const ref = useRef<T>();
+  const wasMeasured = useRef(false);
+
+  const measure = useCallback(() => {
+    if (!wasMeasured.current) {
+      ref.current?.measureInWindow((x, y, width, height) => {
+        if (!wasMeasured.current && width > 0 && height > 0) {
+          wasMeasured.current = true;
+          setHiddenLocation(getHiddenLocation({
+            x,
+            y,
+            width,
+            height,
+            wasMeasured: true
+          }));
+        }
       });
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const setRef: RefCallback<T> = useCallback((node: T) => {
+    if (node) {
+      ref.current = node;
+      measure();
+    }
   },
-  [containerRef]);
+  [measure]);
+
+  const onLayout = useCallback(() => {
+    measure();
+  }, [measure]);
 
-  return {onLayout, hiddenLocation};
+  return {setRef, onLayout, hiddenLocation};
 }

src/incubator/panView/index.tsx

@@ -49,8 +49,7 @@ const PanView = (props: Props) => {
     ...others
   } = props;
 
-  const containerRef = React.createRef<RNView>();
-  const {onLayout, hiddenLocation} = useHiddenLocation({containerRef});
+  const {setRef, onLayout, hiddenLocation} = useHiddenLocation<RNView>();
   const {translation, panGestureEvent} = usePanGesture({
     directions,
     dismissible,
@@ -68,7 +67,7 @@ const PanView = (props: Props) => {
   }, []);
 
   return (
-    <View ref={containerRef} style={containerStyle} onLayout={onLayout}>
+    <View ref={setRef} style={containerStyle} onLayout={onLayout}>
       <PanGestureHandler onGestureEvent={isEmpty(directions) ? undefined : panGestureEvent}>
         <View reanimated style={animatedStyle}>
           <View {...others}>{children}</View>

src/incubator/panView/usePanGesture.ts

@@ -10,7 +10,7 @@ import {
   getDismissVelocity,
   DEFAULT_THRESHOLD
 } from './panningUtil';
-import {HiddenLocation} from '../hooks/useHiddenLocation';
+import type {HiddenLocation} from '../hooks/useHiddenLocation';
 
 export type PanViewDirections = PanningDirections;
 export const PanViewDirectionsEnum = PanningDirectionsEnum;