fix: fix showing animation when "onLayout" event is delayed

Author: seniv

src/components/NotifierRenderer.tsx

@@ -45,8 +45,13 @@ const NotifierRendererComponent = forwardRef<
   NotifierRendererMethods,
   NotifierRendererProps
 >(({ notification, onHiddenCallback }, notificationRef) => {
-  const { layoutAnimationValues, onLayout, updateHiddenValueByDirection, ref } =
-    useLayout(notification);
+  const {
+    layoutAnimationValues,
+    onLayout,
+    updateHiddenValueByDirection,
+    ref,
+    isLayoutReady,
+  } = useLayout(notification);
   const { shake, shakingAnimationValues } = useShaking(notification);
 
   const { onGestureEvent, resetSwipeAnimation, swipeAnimationValues } =
@@ -115,8 +120,9 @@ const NotifierRendererComponent = forwardRef<
   }));
 
   useEffect(() => {
-    // if "hideNotification" method was called before show notification animation started - ignore it.
-    if (isHidingRef.current) return;
+    // Don't start the animation if layout still not ready (width / height of the component)
+    // or if "hideNotification" method was called before show notification animation started.
+    if (isHidingRef.current || !isLayoutReady) return;
 
     Animated[notification.showAnimationConfig.method](animationState, {
       useNativeDriver: true,
@@ -131,6 +137,12 @@ const NotifierRendererComponent = forwardRef<
       clearTimeout(hideTimerRef.current);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLayoutReady]);
+
+  useEffect(() => {
+    return () => {
+      clearTimeout(hideTimerRef.current);
+    };
   }, []);
 
   const onHandlerStateChange = ({

src/hooks/useLayout.ts

@@ -1,4 +1,4 @@
-import { useCallback, useLayoutEffect, useRef } from 'react';
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { Animated, View } from 'react-native';
 import { getHiddenTranslateValues } from '../utils/animationDirection';
 import type { Direction, Notification } from '../types';
@@ -9,6 +9,7 @@ import { FABRIC_ENABLED, MAX_VALUE } from '../constants';
  * Also, can update hiddenTranslate* values by using updateHiddenValueByDirection function depending on the direction
  */
 export const useLayout = ({ enterFrom }: Notification) => {
+  const [isLayoutReady, setLayoutReady] = useState(false);
   const ref = useRef<View>(null);
   // store current direction to handle the case when component dimensions changes (trigger onLayout)
   // while active direction != enterFrom (e.g. when exitTo is different than enterFrom, and notification started hiding animation).
@@ -65,6 +66,7 @@ export const useLayout = ({ enterFrom }: Notification) => {
       componentWidth.setValue(width);
 
       updateHiddenValueByDirection(currentDirection.current);
+      setLayoutReady(true);
     },
     [componentHeight, componentWidth, updateHiddenValueByDirection]
   );
@@ -112,5 +114,6 @@ export const useLayout = ({ enterFrom }: Notification) => {
     ref,
     onLayout,
     updateHiddenValueByDirection,
+    isLayoutReady,
   };
 };