fix(toast): close handle press

Author: vvv-sss

example/src/app/(home)/components/toast.tsx

@@ -10,6 +10,10 @@ import {
   LoadingToast,
   useLoadingState,
 } from '../../../components/toast/loading-toast';
+import {
+  ProgressToast,
+  useProgressState,
+} from '../../../components/toast/progress-toast';
 
 const StyledFeather = withUniwind(Feather);
 const StyledOcticons = withUniwind(Octicons);
@@ -196,8 +200,10 @@ const DifferentContentSizesContent = () => {
 
 const CustomToastsContent = () => {
   const { toast } = useToast();
-  const TOAST_ID = 'loading-toast';
+  const LOADING_TOAST_ID = 'loading-toast';
+  const PROGRESS_TOAST_ID = 'progress-toast';
   const { isLoading, setIsLoading } = useLoadingState();
+  const { progress, setProgress, resetProgress } = useProgressState();
 
   /**
    * Simulates loading data (e.g., API call, file upload, etc.)
@@ -210,17 +216,36 @@ const CustomToastsContent = () => {
     await new Promise((resolve) => setTimeout(resolve, 2000));
   };
 
+  /**
+   * Simulates file upload with progress updates
+   * In a real app, this would be an actual upload operation with progress callbacks
+   */
+  const simulateUpload = async (): Promise<void> => {
+    resetProgress();
+    const totalSteps = 100;
+    const stepDuration = 30; // milliseconds per step
+
+    for (let i = 0; i <= totalSteps; i++) {
+      await new Promise((resolve) => setTimeout(resolve, stepDuration));
+      setProgress(i);
+    }
+  };
+
   const renderLoadingToast = useCallback((props: ToastComponentProps) => {
     return <LoadingToast {...props} />;
   }, []);
 
+  const renderProgressToast = useCallback((props: ToastComponentProps) => {
+    return <ProgressToast {...props} />;
+  }, []);
+
   const handleShowLoadingToast = async () => {
     /**
      * Set loading to true and show toast
      */
     setIsLoading(true);
     toast.show({
-      id: TOAST_ID,
+      id: LOADING_TOAST_ID,
       duration: 'persistent',
       component: renderLoadingToast,
     });
@@ -243,14 +268,48 @@ const CustomToastsContent = () => {
     }
   };
 
+  const handleShowProgressToast = async () => {
+    /**
+     * Reset progress and show toast
+     */
+    resetProgress();
+    toast.show({
+      id: PROGRESS_TOAST_ID,
+      duration: 'persistent',
+      component: renderProgressToast,
+    });
+
+    try {
+      /**
+       * Simulate the upload operation with progress updates
+       */
+      await simulateUpload();
+    } catch (error) {
+      /**
+       * Handle errors if needed
+       */
+      console.error('Failed to upload:', error);
+    }
+  };
+
+  const isDisabled = isLoading || (progress > 0 && progress < 100);
+
   return (
     <View className="flex-1 items-center justify-center px-5 gap-5">
       <Button
         variant="secondary"
         onPress={handleShowLoadingToast}
-        isDisabled={isLoading}
+        isDisabled={isDisabled}
+      >
+        Load data
+      </Button>
+
+      <Button
+        variant="secondary"
+        onPress={handleShowProgressToast}
+        isDisabled={isDisabled}
       >
-        {isLoading ? 'Loading...' : 'Load data'}
+        Start upload
       </Button>
 
       <Button onPress={() => toast.hide('all')} variant="destructive-soft">

example/src/components/toast/loading-toast.tsx

@@ -6,23 +6,15 @@ import {
   useThemeColor,
   type ToastComponentProps,
 } from 'heroui-native';
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { View } from 'react-native';
 import { LinearTransition } from 'react-native-reanimated';
 import { withUniwind } from 'uniwind';
+import { useSharedState } from './use-shared-state';
 
 const StyledFeather = withUniwind(Feather);
 
-/**
- * Shared loading state management
- *
- * Why we need this:
- * - The toast component is rendered via a memoized callback that doesn't depend on isLoading
- * - When parent updates loading state, the toast component needs to be notified to re-render
- * - We use sharedLoadingState to track current value and listeners to notify components
- */
-let sharedLoadingState = false;
-const loadingStateListeners = new Set<(loading: boolean) => void>();
+const LOADING_STATE_KEY = 'loading-toast-state';
 
 /**
  * Hook to access and update shared loading state
@@ -32,45 +24,10 @@ const loadingStateListeners = new Set<(loading: boolean) => void>();
  * with the new loading state, even if they're memoized or rendered separately
  */
 export const useLoadingState = () => {
-  /**
-   * Initialize state from shared value (important if component mounts after loading starts)
-   */
-  const [isLoading, setIsLoadingState] = useState(() => sharedLoadingState);
-
-  useEffect(() => {
-    /**
-     * Subscribe to loading state changes
-     * When setIsLoading is called elsewhere, this component will update
-     */
-    const updateState = (loading: boolean) => {
-      setIsLoadingState(loading);
-    };
-
-    /**
-     * Sync with current shared state immediately (important if component mounts after state was set)
-     */
-    setIsLoadingState(sharedLoadingState);
-
-    /**
-     * Add listener to receive future updates
-     */
-    loadingStateListeners.add(updateState);
-
-    /**
-     * Cleanup listener on unmount
-     */
-    return () => {
-      loadingStateListeners.delete(updateState);
-    };
-  }, []);
-
-  /**
-   * Set loading state and notify all listeners (all components using this hook)
-   */
-  const setIsLoading = useCallback((loading: boolean) => {
-    sharedLoadingState = loading;
-    loadingStateListeners.forEach((listener) => listener(loading));
-  }, []);
+  const { state: isLoading, setState: setIsLoading } = useSharedState<boolean>(
+    LOADING_STATE_KEY,
+    false
+  );
 
   return { isLoading, setIsLoading };
 };
@@ -102,6 +59,7 @@ export const LoadingToast = (props: ToastComponentProps) => {
         'mx-auto flex-row items-center gap-3 rounded-full p-1',
         isLoading ? 'w-[115px]' : 'w-[185px]'
       )}
+      isSwipeable={false}
       {...props}
     >
       <View className="flex-1 flex-row items-center gap-2">

example/src/components/toast/progress-toast.tsx

@@ -0,0 +1,127 @@
+import { Toast, type ToastComponentProps } from 'heroui-native';
+import { useCallback, useEffect } from 'react';
+import { View } from 'react-native';
+import Animated, {
+  LinearTransition,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { useSharedState } from './use-shared-state';
+
+const PROGRESS_STATE_KEY = 'progress-toast-state';
+
+/**
+ * Hook to access and update shared progress state
+ * Can be used in both parent component and toast component
+ *
+ * When setProgress is called, all components using this hook will re-render
+ * with the new progress value, even if they're memoized or rendered separately
+ *
+ * @param initialProgress - Initial progress value (0-100)
+ */
+export const useProgressState = (initialProgress = 0) => {
+  const {
+    state: progress,
+    setState: setProgressState,
+    resetState,
+  } = useSharedState<number>(PROGRESS_STATE_KEY, initialProgress);
+
+  /**
+   * Set progress state with clamping between 0 and 100
+   *
+   * @param newProgress - Progress value (0-100)
+   */
+  const setProgress = useCallback(
+    (newProgress: number) => {
+      /**
+       * Clamp progress between 0 and 100
+       */
+      const clampedProgress = Math.max(0, Math.min(100, newProgress));
+      setProgressState(clampedProgress);
+    },
+    [setProgressState]
+  );
+
+  /**
+   * Reset progress to initial value (0)
+   */
+  const resetProgress = useCallback(() => {
+    resetState();
+  }, [resetState]);
+
+  return { progress, setProgress, resetProgress };
+};
+
+/**
+ * Progress toast component that shows a progress bar at the bottom
+ * Progress value ranges from 0 to 100
+ */
+export const ProgressToast = (props: ToastComponentProps) => {
+  const { id, hide } = props;
+  const { progress } = useProgressState();
+
+  /**
+   * Animated progress value for smooth transitions
+   */
+  const animatedProgress = useSharedValue(progress);
+
+  /**
+   * Update animated value when progress changes
+   */
+  useEffect(() => {
+    animatedProgress.value = withTiming(progress, {
+      duration: 300,
+    });
+  }, [progress, animatedProgress]);
+
+  /**
+   * Auto-hide toast when progress reaches 100%
+   */
+  useEffect(() => {
+    if (progress >= 100) {
+      const timeoutId = setTimeout(() => {
+        hide(id);
+      }, 500);
+
+      return () => {
+        clearTimeout(timeoutId);
+      };
+    }
+    return undefined;
+  }, [progress, hide, id]);
+
+  /**
+   * Animated style for progress bar
+   */
+  const progressBarStyle = useAnimatedStyle(() => {
+    return {
+      width: `${animatedProgress.value}%`,
+    };
+  });
+
+  return (
+    <Toast
+      // @ts-ignore
+      layout={LinearTransition.springify().mass(2)}
+      className="w-full overflow-hidden"
+      isSwipeable={false}
+      {...props}
+    >
+      <View className="flex-col gap-2 px-4 py-3">
+        <Toast.Label className="text-sm mb-4">
+          {progress < 100
+            ? `Uploading... ${Math.round(progress)}%`
+            : 'Upload complete!'}
+        </Toast.Label>
+        <View className="h-1 w-full overflow-hidden rounded-full bg-muted/20">
+          <Animated.View
+            className="h-full bg-accent rounded-full"
+            style={progressBarStyle}
+          />
+        </View>
+        <Toast.Close className="absolute right-0 top-1.5" />
+      </View>
+    </Toast>
+  );
+};