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

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

@@ -18,8 +18,9 @@ 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);
 
   // Cleanup timers on unmount
@@ -28,13 +29,19 @@ const ToastProvider = ({
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }
+      if (animationRef.current) {
+        animationRef.current.stop();
+      }
     };
   }, []);
 
   // Animate in the toast
   const animateIn = (0, _react.useCallback)(() => {
+    if (isAnimating) return;
     setIsAnimating(true);
-    _reactNative.Animated.sequence([_reactNative.Animated.timing(slideAnim, {
+    slideAnim.setValue(-200); // Reset to initial position
+
+    animationRef.current = _reactNative.Animated.sequence([_reactNative.Animated.timing(slideAnim, {
       toValue: _reactNative.Platform.OS === 'ios' ? 100 : 50 + _utils.statusBarHeight,
       duration: 300,
       useNativeDriver: true
@@ -42,34 +49,54 @@ 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]);
+  }, [slideAnim, isAnimating]);
 
   // Animate out the toast
   const animateOut = (0, _react.useCallback)(callback => {
-    if (isAnimating) return;
+    if (isAnimating && animationRef.current) {
+      animationRef.current.stop();
+    }
     setIsAnimating(true);
-    _reactNative.Animated.timing(slideAnim, {
-      toValue: -100,
+    animationRef.current = _reactNative.Animated.timing(slideAnim, {
+      toValue: -200,
       duration: 400,
       useNativeDriver: true
-    }).start(() => {
-      setIsAnimating(false);
-      setCurrentToast(null);
-      callback?.();
+    });
+    animationRef.current.start(({
+      finished
+    }) => {
+      if (finished) {
+        setIsAnimating(false);
+        // Defer state updates to avoid useInsertionEffect error
+        requestAnimationFrame(() => {
+          setCurrentToast(null);
+          if (callback) {
+            callback();
+          }
+        });
+      }
     });
   }, [slideAnim, isAnimating]);
 
   // 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;
-    });
+    // Use setTimeout to defer state update
+    setTimeout(() => {
+      setQueue(prevQueue => {
+        if (prevQueue.length === 0) return prevQueue;
+        const [nextToast, ...remainingQueue] = prevQueue;
+        setCurrentToast(nextToast);
+        return remainingQueue;
+      });
+    }, 0);
   }, []);
 
   // Handle auto-dismiss
@@ -79,6 +106,7 @@ const ToastProvider = ({
     // Clear any existing timeout
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
     }
 
     // Animate in
@@ -95,6 +123,7 @@ const ToastProvider = ({
     return () => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
       }
     };
   }, [currentToast, animateIn, animateOut, processQueue]);
@@ -103,6 +132,7 @@ const ToastProvider = ({
   const handleClose = (0, _react.useCallback)(() => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
     }
     animateOut(() => {
       processQueue();

package/package.json

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