feat(toast): handle different height case

vvv-sss · vvv-sss · commit 690659c3e41d · 2025-11-25T21:24:44.000+02:00
diff --git a/example/src/app/(home)/components/toast.tsx b/example/src/app/(home)/components/toast.tsx
@@ -5,6 +5,7 @@ import {
   useToast,
   type ToastComponentProps,
 } from 'heroui-native';
+import { useCallback } from 'react';
 import { View } from 'react-native';
 import type { UsageVariant } from '../../../components/component-presentation/types';
 import { UsageVariantFlatList } from '../../../components/component-presentation/usage-variant-flatlist';
@@ -76,15 +77,17 @@ import { UsageVariantFlatList } from '../../../components/component-presentation
 
 const MyToast1 = (props: ToastComponentProps) => {
   const { id, hide } = props;
+  console.log('🔴 id 🔴', id); // VS remove
 
   return (
     <Toast
       variant="accent"
+      placement="top"
       duration="persistent"
       className="flex-row items-center gap-3"
       {...props}
     >
-      <View className="flex-1 h-[150px]">
+      <View className="flex-1">
         <Toast.Label>{id}</Toast.Label>
         <Toast.Description>
           Use buttons below to control this toast
@@ -97,18 +100,22 @@ const MyToast1 = (props: ToastComponentProps) => {
 
 const MyToast2 = (props: ToastComponentProps) => {
   const { id, hide } = props;
+  console.log('🔴 id 🔴', id); // VS remove
 
   return (
     <Toast
       variant="success"
+      placement="top"
       duration="persistent"
       className="flex-row items-center gap-3"
       {...props}
     >
-      <View className="flex-1 h-[100px]">
+      <View className="flex-1">
         <Toast.Label>{id}</Toast.Label>
         <Toast.Description>
-          Use buttons below to control this toast
+          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam tenetur
+          maxime ab laboriosam qui praesentium facere? Ad dolor fugiat,
+          molestiae esse laudantium sed ut ullam.
         </Toast.Description>
       </View>
       <Toast.Action onPress={() => hide(id)}>Close</Toast.Action>
@@ -118,18 +125,24 @@ const MyToast2 = (props: ToastComponentProps) => {
 
 const MyToast3 = (props: ToastComponentProps) => {
   const { id, hide } = props;
+  console.log('🔴 id 🔴', id); // VS remove
 
   return (
     <Toast
       variant="warning"
+      placement="top"
       duration="persistent"
       className="flex-row items-center gap-3"
       {...props}
     >
-      <View className="flex-1 h-[200px]">
+      <View className="flex-1">
         <Toast.Label>{id}</Toast.Label>
         <Toast.Description>
-          Use buttons below to control this toast
+          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam tenetur
+          maxime ab laboriosam qui praesentium facere? Ad dolor fugiat,
+          molestiae esse laudantium sed ut ullam. Lorem, ipsum dolor sit amet
+          consectetur adipisicing elit. Nam tenetur maxime ab laboriosam qui
+          praesentium facere?
         </Toast.Description>
       </View>
       <Toast.Action onPress={() => hide(id)}>Close</Toast.Action>
@@ -139,9 +152,18 @@ const MyToast3 = (props: ToastComponentProps) => {
 const InteractiveDemoContent = () => {
   const { toast } = useToast();
 
-  const _renderToast1 = (props: ToastComponentProps) => <MyToast1 {...props} />;
-  const _renderToast2 = (props: ToastComponentProps) => <MyToast2 {...props} />;
-  const _renderToast3 = (props: ToastComponentProps) => <MyToast3 {...props} />;
+  const _renderToast1 = useCallback(
+    (props: ToastComponentProps) => <MyToast1 {...props} />,
+    []
+  );
+  const _renderToast2 = useCallback(
+    (props: ToastComponentProps) => <MyToast2 {...props} />,
+    []
+  );
+  const _renderToast3 = useCallback(
+    (props: ToastComponentProps) => <MyToast3 {...props} />,
+    []
+  );
 
   return (
     <View className="flex-1 px-5">
diff --git a/src/components/toast/toast.animation.ts b/src/components/toast/toast.animation.ts
@@ -12,6 +12,7 @@ import {
   withDecay,
   withSpring,
   withTiming,
+  type SharedValue,
 } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
 import {
@@ -75,6 +76,7 @@ export function useToastRootAnimation(options: {
   style: ViewStyle | undefined;
   index: number;
   total: number;
+  heights: SharedValue<number[]>;
   placement: ToastPlacement;
   hide?: ((ids?: string | string[]) => void) | undefined;
   id?: string | undefined;
@@ -85,6 +87,7 @@ export function useToastRootAnimation(options: {
     style,
     index,
     total,
+    heights,
     placement,
     hide,
     id,
@@ -289,10 +292,17 @@ export function useToastRootAnimation(options: {
     });
 
   const rContainerStyle = useAnimatedStyle(() => {
+    const lastToastId = Object.keys(heights.get())[
+      Object.keys(heights.get()).length - 1
+    ];
+    const lastToastHeight = heights.get()[lastToastId];
+
     const sign = placement === 'top' ? 1 : -1;
 
-    const inputRange = [total - 1, total - 2];
-    const opacityInputRange = [total - 3, total - 4];
+    const totalValue = total.get();
+
+    const inputRange = [totalValue - 1, totalValue - 2];
+    const opacityInputRange = [totalValue - 3, totalValue - 4];
 
     const opacity = interpolate(index, opacityInputRange, opacityValue);
     const scale = interpolate(index, inputRange, scaleValue);
@@ -312,6 +322,7 @@ export function useToastRootAnimation(options: {
 
     if (isAnimationDisabled) {
       return {
+        height: lastToastHeight,
         pointerEvents: opacity === 0 ? 'none' : 'auto',
         opacity,
         transform: [
@@ -328,6 +339,13 @@ export function useToastRootAnimation(options: {
     }
 
     return {
+      height: lastToastHeight
+        ? withSpring(lastToastHeight, {
+            damping: 100,
+            stiffness: 1200,
+            mass: 3,
+          })
+        : undefined,
       pointerEvents: opacity === 0 ? 'none' : 'auto',
       opacity: withTiming(opacity, opacityTimingConfig),
       transform: [
diff --git a/src/components/toast/toast.styles.ts b/src/components/toast/toast.styles.ts
@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 import { combineStyles } from '../../helpers/theme/utils/combine-styles';
 
 const root = tv({
-  base: 'rounded-3xl p-4 bg-surface border border-muted/10 shadow-2xl shadow-black/5',
+  base: 'rounded-3xl p-4 bg-surface border border-muted/10 shadow-2xl shadow-black/5 overflow-hidden',
 });
 
 const label = tv({
diff --git a/src/components/toast/toast.tsx b/src/components/toast/toast.tsx
@@ -38,6 +38,7 @@ const ToastRoot = forwardRef<ViewRef, ToastRootProps>((props, ref) => {
     placement = 'top',
     index,
     total,
+    heights,
     className,
     style,
     animation,
@@ -64,6 +65,7 @@ const ToastRoot = forwardRef<ViewRef, ToastRootProps>((props, ref) => {
       style: style as ViewStyle | undefined,
       index,
       total,
+      heights,
       placement,
       hide,
       id,
@@ -88,6 +90,7 @@ const ToastRoot = forwardRef<ViewRef, ToastRootProps>((props, ref) => {
           entering={entering}
           exiting={exiting}
         >
+          {/* Animated toast instance */}
           <AnimatedToastRoot
             ref={ref}
             className={tvStyles}
@@ -96,6 +99,25 @@ const ToastRoot = forwardRef<ViewRef, ToastRootProps>((props, ref) => {
           >
             {children}
           </AnimatedToastRoot>
+          {/* Static toast instance */}
+          <AnimatedToastRoot
+            className={cn(
+              tvStyles,
+              'absolute top-[200px] opacity-0 pointer-events-none'
+            )}
+            style={[styleSheet.root, style]}
+            onLayout={(event) => {
+              const measuredHeight = event.nativeEvent.layout.height;
+              heights.modify((value: Record<string, number>) => {
+                'worklet';
+                value[id] = measuredHeight;
+                return value;
+              });
+            }}
+            {...restProps}
+          >
+            {children}
+          </AnimatedToastRoot>
         </Animated.View>
       </GestureDetector>
     </ToastProvider>
diff --git a/src/providers/toast/provider.tsx b/src/providers/toast/provider.tsx
@@ -7,6 +7,7 @@ import {
   useRef,
 } from 'react';
 import { View } from 'react-native';
+import { useSharedValue } from 'react-native-reanimated';
 import { InsetsContainer } from './insets-container';
 import { toastReducer } from './reducer';
 import { ToastItemRenderer } from './toast-item-renderer';
@@ -28,6 +29,10 @@ const ToasterContext = createContext<ToasterContextValue | null>(null);
 export function ToastProvider({ insets, children }: ToastProviderProps) {
   const [toasts, dispatch] = useReducer(toastReducer, []);
 
+  const heights = useSharedValue<Record<string, number>>({});
+
+  const total = useSharedValue<number>(0);
+
   const idCounter = useRef(0);
 
   /**
@@ -44,6 +49,8 @@ export function ToastProvider({ insets, children }: ToastProviderProps) {
       },
     });
 
+    total.set((value) => value + 1);
+
     return id;
   }, []);
 
@@ -54,13 +61,27 @@ export function ToastProvider({ insets, children }: ToastProviderProps) {
     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);
     }
   }, []);
 
@@ -92,7 +113,8 @@ export function ToastProvider({ insets, children }: ToastProviderProps) {
               show={show}
               hide={hide}
               index={index}
-              total={toasts.length}
+              total={total}
+              heights={heights}
             />
           ))}
         </View>
diff --git a/src/providers/toast/toast-item-renderer.tsx b/src/providers/toast/toast-item-renderer.tsx
@@ -14,7 +14,14 @@ interface ToastItemRendererProps {
  * Only re-renders when the toast item itself changes
  */
 export const ToastItemRenderer = memo(
-  ({ toastItem, show, hide, index, total }: ToastItemRendererProps) => {
+  ({
+    toastItem,
+    show,
+    hide,
+    index,
+    total,
+    heights,
+  }: ToastItemRendererProps) => {
     if (typeof toastItem.component !== 'function') {
       throw new Error(
         'Toast component must be a function that receives ToastComponentProps'
@@ -25,6 +32,7 @@ export const ToastItemRenderer = memo(
       id: toastItem.id,
       index,
       total,
+      heights,
       show,
       hide,
     });
@@ -37,8 +45,7 @@ export const ToastItemRenderer = memo(
     return (
       prevProps.toastItem.id === nextProps.toastItem.id &&
       prevProps.toastItem.component === nextProps.toastItem.component &&
-      prevProps.index === nextProps.index &&
-      prevProps.total === nextProps.total
+      prevProps.index === nextProps.index
     );
   }
 );
