@dropi/react-native-design-system 0.3.8 → 0.3.10

package/lib/molecules/Toasts/ToastProvider/ToastProvider.js

@@ -18,9 +18,14 @@ const ToastProvider = ({
   const [currentToast, setCurrentToast] = (0, _react.useState)(null);
   const [queue, setQueue] = (0, _react.useState)([]);
   const [isAnimating, setIsAnimating] = (0, _react.useState)(false);
-  const slideAnim = (0, _react.useRef)(new _reactNative.Animated.Value(-100)).current;
+  const slideAnim = (0, _react.useRef)(new _reactNative.Animated.Value(-200)).current;
   const timeoutRef = (0, _react.useRef)(null);
+  const animationRef = (0, _react.useRef)(null);
   const toastIdCounter = (0, _react.useRef)(0);
+  const isAnimatingRef = (0, _react.useRef)(false);
+  const processQueueRef = (0, _react.useRef)(null);
+  const animateInRef = (0, _react.useRef)(null);
+  const animateOutRef = (0, _react.useRef)(null);
 
   // Cleanup timers on unmount
   (0, _react.useEffect)(() => {
@@ -28,13 +33,71 @@ const ToastProvider = ({
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }
+      if (animationRef.current) {
+        animationRef.current.stop();
+      }
     };
   }, []);
 
-  // Animate in the toast
+  // Keep isAnimatingRef in sync
+  (0, _react.useEffect)(() => {
+    isAnimatingRef.current = isAnimating;
+  }, [isAnimating]);
+
+  // Process the next toast in the queue
+  const processQueue = (0, _react.useCallback)(() => {
+    setTimeout(() => {
+      setQueue(prevQueue => {
+        if (prevQueue.length === 0) return prevQueue;
+        const [nextToast, ...remainingQueue] = prevQueue;
+        setCurrentToast(nextToast);
+        return remainingQueue;
+      });
+    }, 0);
+  }, []);
+
+  // Keep processQueueRef updated
+  (0, _react.useEffect)(() => {
+    processQueueRef.current = processQueue;
+  }, [processQueue]);
+
+  // Animate out the toast - stable with useRef
+  const animateOut = (0, _react.useCallback)(callback => {
+    if (animationRef.current) {
+      animationRef.current.stop();
+    }
+    setIsAnimating(true);
+    animationRef.current = _reactNative.Animated.timing(slideAnim, {
+      toValue: -200,
+      duration: 400,
+      useNativeDriver: true
+    });
+    animationRef.current.start(({
+      finished
+    }) => {
+      if (finished) {
+        setIsAnimating(false);
+        requestAnimationFrame(() => {
+          setCurrentToast(null);
+          if (callback) {
+            callback();
+          }
+        });
+      }
+    });
+  }, [slideAnim]);
+
+  // Keep animateOutRef updated
+  (0, _react.useEffect)(() => {
+    animateOutRef.current = animateOut;
+  }, [animateOut]);
+
+  // Animate in the toast - stable with useRef
   const animateIn = (0, _react.useCallback)(() => {
+    if (isAnimatingRef.current) return;
     setIsAnimating(true);
-    _reactNative.Animated.sequence([_reactNative.Animated.timing(slideAnim, {
+    slideAnim.setValue(-200);
+    animationRef.current = _reactNative.Animated.sequence([_reactNative.Animated.timing(slideAnim, {
       toValue: _reactNative.Platform.OS === 'ios' ? 100 : 50 + _utils.statusBarHeight,
       duration: 300,
       useNativeDriver: true
@@ -42,72 +105,75 @@ const ToastProvider = ({
       toValue: _reactNative.Platform.OS === 'ios' ? 80 : 30 + _utils.statusBarHeight,
       duration: 120,
       useNativeDriver: true
-    })]).start(() => {
-      setIsAnimating(false);
+    })]);
+    animationRef.current.start(({
+      finished
+    }) => {
+      if (finished) {
+        setIsAnimating(false);
+      }
     });
   }, [slideAnim]);
 
-  // Animate out the toast
-  const animateOut = (0, _react.useCallback)(callback => {
-    if (isAnimating) return;
-    setIsAnimating(true);
-    _reactNative.Animated.timing(slideAnim, {
-      toValue: -100,
-      duration: 400,
-      useNativeDriver: true
-    }).start(() => {
-      setIsAnimating(false);
-      setCurrentToast(null);
-      callback?.();
-    });
-  }, [slideAnim, isAnimating]);
+  // Keep animateInRef updated
+  (0, _react.useEffect)(() => {
+    animateInRef.current = animateIn;
+  }, [animateIn]);
 
-  // Process the next toast in the queue
-  const processQueue = (0, _react.useCallback)(() => {
-    setQueue(prevQueue => {
-      if (prevQueue.length === 0) return prevQueue;
-      const [nextToast, ...remainingQueue] = prevQueue;
-      setCurrentToast(nextToast);
-      return remainingQueue;
-    });
-  }, []);
+  // Auto-process queue when currentToast is null and queue has items
+  (0, _react.useEffect)(() => {
+    if (!currentToast && !isAnimating && queue.length > 0) {
+      // Defer to avoid state update during render
+      setTimeout(() => {
+        setQueue(prevQueue => {
+          if (prevQueue.length === 0) return prevQueue;
+          const [nextToast, ...remainingQueue] = prevQueue;
+          setCurrentToast(nextToast);
+          return remainingQueue;
+        });
+      }, 0);
+    }
+  }, [currentToast, isAnimating, queue.length]);
 
-  // Handle auto-dismiss
+  // Handle auto-dismiss - only depends on currentToast
   (0, _react.useEffect)(() => {
     if (!currentToast) return;
 
     // Clear any existing timeout
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
     }
 
-    // Animate in
-    animateIn();
+    // Animate in using ref
+    animateInRef.current?.();
 
     // Set auto-dismiss if duration > 0
     if (currentToast.duration && currentToast.duration > 0) {
       timeoutRef.current = setTimeout(() => {
-        animateOut(() => {
-          processQueue();
+        animateOutRef.current?.(() => {
+          processQueueRef.current?.();
         });
       }, currentToast.duration);
     }
     return () => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
       }
     };
-  }, [currentToast, animateIn, animateOut, processQueue]);
+  }, [currentToast]); // Solo depende de currentToast para evitar bucle infinito
 
   // Handle manual close
   const handleClose = (0, _react.useCallback)(() => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
     }
     animateOut(() => {
-      processQueue();
+      processQueueRef.current?.();
     });
-  }, [animateOut, processQueue]);
+  }, [animateOut]);
 
   // Public API: showToast
   const showToast = (0, _react.useCallback)(params => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dropi/react-native-design-system",
-  "version": "0.3.8",
+  "version": "0.3.10",
   "description": "A React Native package built from scratch",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",