feat(toast): add ToastItemRenderer component

Author: vvv-sss

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

@@ -4,7 +4,6 @@ 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';
@@ -94,18 +93,15 @@ const MyToast = ({ id }: ToastComponentProps) => {
 const InteractiveDemoContent = () => {
   const toast = useToast();
 
-  const _renderToast = useCallback(
-    ({ id }: ToastComponentProps) => <MyToast id={id} />,
-    []
-  );
+  const _renderToast = ({ id }: ToastComponentProps) => <MyToast id={id} />;
 
   return (
     <View className="flex-1 px-5">
       <View className="flex-1 justify-center gap-3">
         <Button
           onPress={() => {
             toast.show({
-              id: 'my-toast',
+              // id: 'my-toast',
               component: _renderToast,
             });
           }}

src/providers/toast/provider.tsx

@@ -1,6 +1,5 @@
 import {
   createContext,
-  Fragment,
   useCallback,
   useContext,
   useMemo,
@@ -10,6 +9,7 @@ import {
 import { View } from 'react-native';
 import { InsetsContainer } from './insets-container';
 import { toastReducer } from './reducer';
+import { ToastItemRenderer } from './toast-item-renderer';
 import type {
   ToasterContextValue,
   ToastId,
@@ -80,14 +80,9 @@ export function ToastProvider({ insets, children }: ToastProviderProps) {
       {children}
       <InsetsContainer insets={insets}>
         <View className="flex-1">
-          {toasts.map((toastItem) => {
-            const content =
-              typeof toastItem.component === 'function'
-                ? toastItem.component({ id: toastItem.id })
-                : toastItem.component;
-
-            return <Fragment key={toastItem.id}>{content}</Fragment>;
-          })}
+          {toasts.map((toastItem) => (
+            <ToastItemRenderer key={toastItem.id} toastItem={toastItem} />
+          ))}
         </View>
       </InsetsContainer>
     </ToasterContext.Provider>

src/providers/toast/reducer.ts

@@ -17,7 +17,11 @@ export function toastReducer(
 
     case 'HIDE': {
       // Hide specific toasts by ID
-      return state.filter((toast) => !action.payload.ids.includes(toast.id));
+      // Use loose equality to handle string/number ID comparisons
+      return state.filter(
+        (toast) =>
+          !action.payload.ids.some((id) => String(id) === String(toast.id))
+      );
     }
 
     case 'HIDE_ALL':

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

@@ -0,0 +1,24 @@
+import { memo } from 'react';
+import type { ToastItem } from './types';
+
+/**
+ * Memoized toast item component to prevent unnecessary re-renders
+ * Only re-renders when the toast item itself changes
+ */
+export const ToastItemRenderer = memo(
+  ({ toastItem }: { toastItem: ToastItem }) => {
+    const content =
+      typeof toastItem.component === 'function'
+        ? toastItem.component({ id: toastItem.id })
+        : toastItem.component;
+
+    return content;
+  },
+  (prevProps, nextProps) => {
+    // Only re-render if the toast ID or component reference changed
+    return (
+      prevProps.toastItem.id === nextProps.toastItem.id &&
+      prevProps.toastItem.component === nextProps.toastItem.component
+    );
+  }
+);