feat(toast): adjust different height case animation

Author: vvv-sss

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

@@ -77,7 +77,6 @@ import { UsageVariantFlatList } from '../../../components/component-presentation
 
 const MyToast1 = (props: ToastComponentProps) => {
   const { id, hide } = props;
-  console.log('🔴 id 🔴', id); // VS remove
 
   return (
     <Toast
@@ -100,7 +99,6 @@ const MyToast1 = (props: ToastComponentProps) => {
 
 const MyToast2 = (props: ToastComponentProps) => {
   const { id, hide } = props;
-  console.log('🔴 id 🔴', id); // VS remove
 
   return (
     <Toast
@@ -125,7 +123,6 @@ const MyToast2 = (props: ToastComponentProps) => {
 
 const MyToast3 = (props: ToastComponentProps) => {
   const { id, hide } = props;
-  console.log('🔴 id 🔴', id); // VS remove
 
   return (
     <Toast

src/components/toast/toast.animation.ts

@@ -75,8 +75,8 @@ export function useToastRootAnimation(options: {
   animation: ToastRootAnimation | undefined;
   style: ViewStyle | undefined;
   index: number;
-  total: number;
-  heights: SharedValue<number[]>;
+  total: SharedValue<number>;
+  heights: SharedValue<Record<string, number>>;
   placement: ToastPlacement;
   hide?: ((ids?: string | string[]) => void) | undefined;
   id?: string | undefined;
@@ -295,7 +295,9 @@ export function useToastRootAnimation(options: {
     const lastToastId = Object.keys(heights.get())[
       Object.keys(heights.get()).length - 1
     ];
-    const lastToastHeight = heights.get()[lastToastId];
+    const lastToastHeight = lastToastId
+      ? heights.get()[lastToastId]
+      : undefined;
 
     const sign = placement === 'top' ? 1 : -1;
 

src/components/toast/toast.tsx

@@ -35,16 +35,16 @@ const ToastRoot = forwardRef<ViewRef, ToastRootProps>((props, ref) => {
   const {
     children,
     variant = 'default',
+    duration = 4000,
     placement = 'top',
     index,
     total,
     heights,
     className,
     style,
     animation,
-    duration = 4000,
-    hide,
     isSwipable,
+    hide,
     ...restProps
   } = props;
 
@@ -108,10 +108,9 @@ const ToastRoot = forwardRef<ViewRef, ToastRootProps>((props, ref) => {
             style={[styleSheet.root, style]}
             onLayout={(event) => {
               const measuredHeight = event.nativeEvent.layout.height;
-              heights.modify((value: Record<string, number>) => {
+              heights.modify((value) => {
                 'worklet';
-                value[id] = measuredHeight;
-                return value;
+                return { ...value, [id]: measuredHeight };
               });
             }}
             {...restProps}

src/providers/toast/provider.tsx

@@ -29,6 +29,8 @@ const ToasterContext = createContext<ToasterContextValue | null>(null);
 export function ToastProvider({ insets, children }: ToastProviderProps) {
   const [toasts, dispatch] = useReducer(toastReducer, []);
 
+  const isToastVisible = toasts.length > 0;
+
   const heights = useSharedValue<Record<string, number>>({});
 
   const total = useSharedValue<number>(0);
@@ -38,57 +40,58 @@ export function ToastProvider({ insets, children }: ToastProviderProps) {
   /**
    * Show a toast
    */
-  const show = useCallback((options: ToastShowOptions): string => {
-    const id = options.id ?? `toast-${Date.now()}-${idCounter.current++}`;
-
-    dispatch({
-      type: 'SHOW',
-      payload: {
-        id,
-        component: options.component,
-      },
-    });
-
-    total.set((value) => value + 1);
+  const show = useCallback(
+    (options: ToastShowOptions): string => {
+      const id = options.id ?? `toast-${Date.now()}-${idCounter.current++}`;
 
-    return id;
-  }, []);
-
-  /**
-   * Hide one or more toasts
-   */
-  const hide = useCallback((ids?: string | string[]) => {
-    if (ids === undefined) {
-      // Hide all toasts
-      dispatch({ type: 'HIDE_ALL' });
-      heights.set({});
-      total.set(0);
-    } else {
-      // Hide specific toast(s)
-      const idsArray = Array.isArray(ids) ? ids : [ids];
-      const idsToRemove = idsArray;
       dispatch({
-        type: 'HIDE',
-        payload: { ids: idsArray },
+        type: 'SHOW',
+        payload: {
+          id,
+          component: options.component,
+        },
       });
 
-      heights.modify(<T extends Record<string, number>>(value: T): T => {
-        'worklet';
-        const result = { ...value };
-        for (const id of idsToRemove) {
-          delete result[id];
-        }
-        return result;
-      });
+      total.set((value) => value + 1);
 
-      total.set((value) => value - 1);
-    }
-  }, []);
+      return id;
+    },
+    [total]
+  );
 
   /**
-   * Whether any toast is currently visible
+   * Hide one or more toasts
    */
-  const isToastVisible = toasts.length > 0;
+  const hide = useCallback(
+    (ids?: string | string[]) => {
+      if (ids === undefined) {
+        // Hide all toasts
+        dispatch({ type: 'HIDE_ALL' });
+        heights.set({});
+        total.set(0);
+      } else {
+        // Hide specific toast(s)
+        const idsArray = Array.isArray(ids) ? ids : [ids];
+        const idsToRemove = idsArray;
+        dispatch({
+          type: 'HIDE',
+          payload: { ids: idsArray },
+        });
+
+        heights.modify(<T extends Record<string, number>>(value: T): T => {
+          'worklet';
+          const result = { ...value };
+          for (const id of idsToRemove) {
+            delete result[id];
+          }
+          return result;
+        });
+
+        total.set((value) => value - 1);
+      }
+    },
+    [total, heights]
+  );
 
   const contextValue = useMemo<ToasterContextValue>(
     () => ({

src/providers/toast/toast-item-renderer.tsx

@@ -1,13 +1,5 @@
 import { memo } from 'react';
-import type { ToastItem, ToastShowOptions } from './types';
-
-interface ToastItemRendererProps {
-  toastItem: ToastItem;
-  index: number;
-  total: number;
-  show: (options: ToastShowOptions) => string;
-  hide: (ids?: string | string[]) => void;
-}
+import type { ToastItemRendererProps } from './types';
 
 /**
  * Memoized toast item component to prevent unnecessary re-renders

src/providers/toast/types.ts

@@ -1,3 +1,5 @@
+import type { SharedValue } from 'react-native-reanimated';
+
 /**
  * Insets for spacing from screen edges
  */
@@ -56,7 +58,11 @@ export interface ToastComponentProps {
   /**
    * The total number of toasts currently displayed
    */
-  total: number;
+  total: SharedValue<number>;
+  /**
+   * Heights of all toast items, keyed by toast ID
+   */
+  heights: SharedValue<Record<string, number>>;
   /**
    * Show a new toast
    */
@@ -146,6 +152,36 @@ export interface ToastManager {
   hide: (ids?: string | string[]) => void;
 }
 
+/**
+ * Props for the ToastItemRenderer component
+ */
+export interface ToastItemRendererProps {
+  /**
+   * The toast item to render
+   */
+  toastItem: ToastItem;
+  /**
+   * The index of the toast in the array (0-based)
+   */
+  index: number;
+  /**
+   * The total number of toasts currently displayed
+   */
+  total: SharedValue<number>;
+  /**
+   * Heights of all toast items, keyed by toast ID
+   */
+  heights: SharedValue<Record<string, number>>;
+  /**
+   * Show a new toast
+   */
+  show: (options: ToastShowOptions) => string;
+  /**
+   * Hide one or more toasts
+   */
+  hide: (ids?: string | string[]) => void;
+}
+
 /**
  * Context value for the toast provider
  */