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

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

@@ -22,6 +22,10 @@ const ToastProvider = ({
   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)(() => {
@@ -35,33 +39,31 @@ const ToastProvider = ({
     };
   }, []);
 
-  // Animate in the toast
-  const animateIn = (0, _react.useCallback)(() => {
-    if (isAnimating) return;
-    setIsAnimating(true);
-    slideAnim.setValue(-200); // Reset to initial position
+  // Keep isAnimatingRef in sync
+  (0, _react.useEffect)(() => {
+    isAnimatingRef.current = isAnimating;
+  }, [isAnimating]);
 
-    animationRef.current = _reactNative.Animated.sequence([_reactNative.Animated.timing(slideAnim, {
-      toValue: _reactNative.Platform.OS === 'ios' ? 100 : 50 + _utils.statusBarHeight,
-      duration: 300,
-      useNativeDriver: true
-    }), _reactNative.Animated.timing(slideAnim, {
-      toValue: _reactNative.Platform.OS === 'ios' ? 80 : 30 + _utils.statusBarHeight,
-      duration: 120,
-      useNativeDriver: true
-    })]);
-    animationRef.current.start(({
-      finished
-    }) => {
-      if (finished) {
-        setIsAnimating(false);
-      }
-    });
-  }, [slideAnim, 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
+  // Animate out the toast - stable with useRef
   const animateOut = (0, _react.useCallback)(callback => {
-    if (isAnimating && animationRef.current) {
+    if (animationRef.current) {
       animationRef.current.stop();
     }
     setIsAnimating(true);
@@ -75,7 +77,6 @@ const ToastProvider = ({
     }) => {
       if (finished) {
         setIsAnimating(false);
-        // Defer state updates to avoid useInsertionEffect error
         requestAnimationFrame(() => {
           setCurrentToast(null);
           if (callback) {
@@ -84,22 +85,57 @@ const ToastProvider = ({
         });
       }
     });
-  }, [slideAnim, isAnimating]);
+  }, [slideAnim]);
 
-  // Process the next toast in the queue
-  const processQueue = (0, _react.useCallback)(() => {
-    // Use setTimeout to defer state update
-    setTimeout(() => {
-      setQueue(prevQueue => {
-        if (prevQueue.length === 0) return prevQueue;
-        const [nextToast, ...remainingQueue] = prevQueue;
-        setCurrentToast(nextToast);
-        return remainingQueue;
-      });
-    }, 0);
-  }, []);
+  // 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);
+    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
+    }), _reactNative.Animated.timing(slideAnim, {
+      toValue: _reactNative.Platform.OS === 'ios' ? 80 : 30 + _utils.statusBarHeight,
+      duration: 120,
+      useNativeDriver: true
+    })]);
+    animationRef.current.start(({
+      finished
+    }) => {
+      if (finished) {
+        setIsAnimating(false);
+      }
+    });
+  }, [slideAnim]);
+
+  // Keep animateInRef updated
+  (0, _react.useEffect)(() => {
+    animateInRef.current = animateIn;
+  }, [animateIn]);
+
+  // 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;
 
@@ -109,14 +145,14 @@ const ToastProvider = ({
       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);
     }
@@ -126,7 +162,7 @@ const ToastProvider = ({
         timeoutRef.current = null;
       }
     };
-  }, [currentToast, animateIn, animateOut, processQueue]);
+  }, [currentToast]); // Solo depende de currentToast para evitar bucle infinito
 
   // Handle manual close
   const handleClose = (0, _react.useCallback)(() => {
@@ -135,9 +171,9 @@ const ToastProvider = ({
       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.9",
+  "version": "0.3.10",
   "description": "A React Native package built from scratch",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",