feat(toast): handle component render function

Author: vvv-sss

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

@@ -1,4 +1,10 @@
-import { Button, Toast, useToast } from 'heroui-native';
+import {
+  Button,
+  Toast,
+  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';
@@ -68,31 +74,40 @@ import { UsageVariantFlatList } from '../../../components/component-presentation
 
 // ------------------------------------------------------------------------------
 
+const MyToast = ({ id }: ToastComponentProps) => {
+  console.log('🔴 🔴', id); // VS remove
+  const toast = useToast();
+
+  return (
+    <Toast variant="accent" className="flex-row items-center gap-3">
+      <View className="flex-1">
+        <Toast.Label>{id}</Toast.Label>
+        <Toast.Description>
+          Use buttons below to control this toast
+        </Toast.Description>
+      </View>
+      <Toast.Action onPress={() => toast.hide(id)}>Close</Toast.Action>
+    </Toast>
+  );
+};
+
 const InteractiveDemoContent = () => {
   const toast = useToast();
 
+  const _renderToast = useCallback(
+    ({ id }: ToastComponentProps) => <MyToast id={id} />,
+    []
+  );
+
   return (
     <View className="flex-1 px-5">
       <View className="flex-1 justify-center gap-3">
         <Button
           onPress={() => {
-            const id = toast.show({
+            toast.show({
               id: 'my-toast',
-              component: (
-                <Toast variant="accent" className="flex-row items-center gap-3">
-                  <View className="flex-1">
-                    <Toast.Label>Interactive Toast</Toast.Label>
-                    <Toast.Description>
-                      Use buttons below to control this toast
-                    </Toast.Description>
-                  </View>
-                  <Toast.Action onPress={() => toast.hide('my-toast')}>
-                    Close
-                  </Toast.Action>
-                </Toast>
-              ),
+              component: _renderToast,
             });
-            console.log('Toast shown with ID:', id);
           }}
           variant="primary"
         >

src/providers/toast/provider.tsx

@@ -81,9 +81,12 @@ export function ToastProvider({ insets, children }: ToastProviderProps) {
       <InsetsContainer insets={insets}>
         <View className="flex-1">
           {toasts.map((toastItem) => {
-            return (
-              <Fragment key={toastItem.id}>{toastItem.component}</Fragment>
-            );
+            const content =
+              typeof toastItem.component === 'function'
+                ? toastItem.component({ id: toastItem.id })
+                : toastItem.component;
+
+            return <Fragment key={toastItem.id}>{content}</Fragment>;
           })}
         </View>
       </InsetsContainer>

src/providers/toast/types.ts

@@ -44,6 +44,16 @@ export interface ToastProviderProps {
   children?: React.ReactNode;
 }
 
+/**
+ * Props passed to the toast component function
+ */
+export interface ToastComponentProps {
+  /**
+   * The unique ID of the toast
+   */
+  id: ToastId;
+}
+
 /**
  * Options for showing a toast
  */
@@ -54,9 +64,11 @@ export interface ToastShowOptions {
    */
   id?: ToastId;
   /**
-   * The React element to render
+   * The React element to render, or a function that receives toast props
    */
-  component: React.ReactElement;
+  component:
+    | React.ReactElement
+    | ((props: ToastComponentProps) => React.ReactElement);
 }
 
 /**
@@ -68,9 +80,11 @@ export interface ToastItem {
    */
   id: ToastId;
   /**
-   * The React element to render
+   * The React element to render, or a function that receives toast props
    */
-  component: React.ReactElement;
+  component:
+    | React.ReactElement
+    | ((props: ToastComponentProps) => React.ReactElement);
 }
 
 /**