feat(example-app): handle toasts hide from components screen

Author: vvv-sss

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

@@ -1,6 +1,7 @@
 import { Ionicons } from '@expo/vector-icons';
-import { useRouter } from 'expo-router';
-import { Accordion } from 'heroui-native';
+import { usePathname, useRouter } from 'expo-router';
+import { Accordion, useToast } from 'heroui-native';
+import { useEffect } from 'react';
 import { View } from 'react-native';
 import { withUniwind } from 'uniwind';
 import { AppText } from '../../../components/app-text';
@@ -106,6 +107,16 @@ const components: Component[] = [
 
 export default function App() {
   const router = useRouter();
+  const pathname = usePathname();
+
+  const { toast, isToastVisible } = useToast();
+
+  useEffect(() => {
+    if (isToastVisible && pathname === '/components') {
+      toast.hide('all');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isToastVisible, pathname]);
 
   return (
     <ScreenScrollView contentContainerClassName="px-4">

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

@@ -9,7 +9,7 @@ import {
   type ToastComponentProps,
 } from 'heroui-native';
 import { useCallback, useRef, useState } from 'react';
-import { TextInput, View } from 'react-native';
+import { Platform, TextInput, View } from 'react-native';
 import { withUniwind } from 'uniwind';
 import type { UsageVariant } from '../../../components/component-presentation/types';
 import { UsageVariantFlatList } from '../../../components/component-presentation/usage-variant-flatlist';
@@ -524,7 +524,7 @@ const CustomToastsContent = () => {
 
 // ------------------------------------------------------------------------------
 
-const TOAST_VARIANTS: UsageVariant[] = [
+const TOAST_VARIANTS_IOS: UsageVariant[] = [
   {
     value: 'default-variants',
     label: 'Default variants',
@@ -557,6 +557,38 @@ const TOAST_VARIANTS: UsageVariant[] = [
   },
 ];
 
+const TOAST_VARIANTS_ANDROID: UsageVariant[] = [
+  {
+    value: 'default-variants',
+    label: 'Default variants',
+    content: <DefaultVariantsContent />,
+  },
+  {
+    value: 'placement-variants',
+    label: 'Placement variants',
+    content: <PlacementVariantsContent />,
+  },
+  {
+    value: 'different-content-sizes',
+    label: 'Different content sizes',
+    content: <DifferentContentSizesContent />,
+  },
+  {
+    value: 'keyboard-avoiding',
+    label: 'Keyboard avoiding',
+    content: <KeyboardAvoidingContent />,
+  },
+  {
+    value: 'custom-toasts',
+    label: 'Custom toasts',
+    content: <CustomToastsContent />,
+  },
+];
+
 export default function ToastScreen() {
-  return <UsageVariantFlatList data={TOAST_VARIANTS} />;
+  return (
+    <UsageVariantFlatList
+      data={Platform.OS === 'ios' ? TOAST_VARIANTS_IOS : TOAST_VARIANTS_ANDROID}
+    />
+  );
 }