Merge branch 'patch' of github.com:gluestack/gluestack-ui into patch

Author: Viraj-10

.changeset/few-rules-refuse.md

@@ -0,0 +1,10 @@
+---
+'@gluestack-ui/toast': patch
+---
+
+Multple fixes to toast
+
+- Fixed `isActive` always returning false
+- Removed almost all instances of `any`, replaced with actual types
+- Fixed duplicate toasts when calling `show` with an existing id
+- Removed unnecessary `@ts-ignore` usages

example/storybook-nativewind/src/components/Toast/Toast.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Icon, CloseIcon } from '@/components/ui/icon';
 import { VStack } from '@/components/ui/vstack';
 import { Pressable } from '@/components/ui/pressable';
@@ -26,31 +26,46 @@ const ToastFigmaStory = ({ _placement = 'top', _colorMode, ...props }: any) => {
   );
 };
 
-const ToastBasic = ({ placement = 'top', ...props }: any) => {
+const ToastBasic = ({ ...props }: any) => {
   const toast = useToast();
+  const [toastId, setToastId] = useState<number>(0);
+
+  const handleToast = () => {
+    if (!toast.isActive(toastId)) {
+      showNewToast();
+    }
+  };
+
+  const showNewToast = () => {
+    const newId = Math.random();
+    setToastId(newId);
+
+    toast.show({
+      id: newId,
+      placement: props.placement,
+      duration: 3000,
+      // duration: null,
+      render: ({ id }) => {
+        const uniqueToastId = `toast-${id}`;
+        return (
+          <Toast nativeID={uniqueToastId} {...props} className="flex-row gap-3">
+            <VStack space="xs">
+              <ToastTitle>Hello World Toast</ToastTitle>
+              <ToastDescription>
+                Please create a support ticket from the support page
+              </ToastDescription>
+            </VStack>
+            <Pressable onPress={() => toast.close(id)}>
+              <Icon as={CloseIcon} className="stroke-background-200" />
+            </Pressable>
+          </Toast>
+        );
+      },
+    });
+  };
+
   return (
-    <Button
-      onPress={() => {
-        toast.show({
-          placement: placement,
-          duration: 3000,
-          // duration: null,
-          render: ({ id }) => {
-            const toastId = `toast-${id}`;
-            return (
-              <>
-                <Toast nativeID={toastId} {...props}>
-                  <ToastTitle>Toast Heading</ToastTitle>
-                  <ToastDescription>
-                    Lorem ipsum dolor sit amet consectetur.
-                  </ToastDescription>
-                </Toast>
-              </>
-            );
-          },
-        });
-      }}
-    >
+    <Button onPress={handleToast}>
       <ButtonText>Press Me</ButtonText>
     </Button>
   );