From 699b7a7668f04863ae9eb552082827adef8e8d95 Mon Sep 17 00:00:00 2001
From: Rajat Chaudhary <rajatchaudhary@Rajats-MacBook-Air.local>
Date: Thu, 11 Jul 2024 13:41:28 +0530
Subject: [PATCH 1/3] fix: multiple rendering of toast component

---
 .../src/components/Toast/Toast.tsx            |  71 +++--
 .../src/components/Toast/index.nw.stories.mdx | 299 ++++++++++--------
 2 files changed, 210 insertions(+), 160 deletions(-)

diff --git a/example/storybook-nativewind/src/components/Toast/Toast.tsx b/example/storybook-nativewind/src/components/Toast/Toast.tsx
index 262ed4164..968d9553b 100644
--- a/example/storybook-nativewind/src/components/Toast/Toast.tsx
+++ b/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,54 @@ 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 = () => {
+    // Check if toast is active and close it if so
+    if (toast.isActive(toastId)) {
+      toast.close(toastId);
+
+      // Wait a moment before showing the new toast
+      setTimeout(() => {
+        showNewToast();
+      }, 75); // Adjust the delay as needed
+    } else {
+      showNewToast();
+    }
+  };
+
+  const showNewToast = () => {
+    const newId = Math.random();
+    setToastId(newId);
+
+    toast.show({
+      id: newId,
+      placement: 'top',
+      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>
   );
diff --git a/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx
index 107abda55..45f02abad 100644
--- a/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx
@@ -61,32 +61,46 @@ This is an illustration of **Toast** component.
     showArgsController={true}
     metaData={{
       code: `
-      function Example() {
+        function Example() {
           const toast = useToast();
+          const [toastId, setToastId] = React.useState(0);
+          const handleToast = () => {
+            if (toast.isActive(toastId)) {
+              toast.close(toastId);
+              setTimeout(() => {
+                showNewToast();
+              }, 75);
+            } else {
+              showNewToast();
+            }
+          };
+          const showNewToast = () => {
+            const newId = Math.random();
+            setToastId(newId);
+            toast.show({
+              id: newId,
+              placement: 'top',
+              duration: 3000,
+              // duration: null,
+              render: ({ id }) => {
+                const uniqueToastId = "toast-" + id;
+                return (
+                  <Toast nativeID={uniqueToastId} {...props}>
+                    <ToastTitle>Toast Heading</ToastTitle>
+                    <ToastDescription>
+                      Lorem ipsum dolor sit amet consectetur.
+                    </ToastDescription>
+                  </Toast>
+                );
+              },
+            });
+          };
           return (
-            <Button
-              onPress={() => {
-                toast.show({
-                  placement:"top",
-                  duration: 3000,
-                  render: ({ id }) => {
-                    const toastId = "toast-" + id;
-                    return (
-                      <Toast nativeID={toastId} {...props}>
-                        <ToastTitle>Toast Heading</ToastTitle>
-                        <ToastDescription>
-                          Lorem ipsum dolor sit amet consectetur.
-                        </ToastDescription>
-                      </Toast>
-                    );
-                  },
-                });
-              }}
-            >
-              <ButtonText>Show Toast</ButtonText>
+            <Button onPress={handleToast}>
+              <ButtonText>Press Me</ButtonText>
             </Button>
           );
-        };
+        }
       `,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'Example');
@@ -405,64 +419,66 @@ The Examples section provides visual representations of the different variants o
     showArgsController={false}
     metaData={{
       code: `
-      function Example() {
+        function Example() {
           const toast = useToast();
+          const [toastId, setToastId] = React.useState(0);
+          const handleToast = () => {
+            if (toast.isActive(toastId)) {
+              toast.close(toastId);
+              setTimeout(() => {
+                showNewToast();
+              }, 75);
+            } else {
+              showNewToast();
+            }
+          };
+          const showNewToast = () => {
+            const newId = Math.random();
+            setToastId(newId);
+            toast.show({
+              id: newId,
+              placement: 'top',
+              duration: 3000,
+              render: ({ id }) => {
+                const uniqueToastId = "toast-" + id;
+                return (
+                  <Toast
+                    action="error"
+                    nativeID={uniqueToastId}
+                    className="p-4 gap-6 w-full shadow-hard-5 max-w-[443px] flex-row justify-between"
+                  >
+                    <HStack space="md">
+                      <Icon
+                        as={HelpCircleIcon}
+                        className="stroke-typography-0"
+                        size="lg"
+                      />
+                      <VStack space="xs">
+                        <ToastTitle className="font-semibold">Toast Heading</ToastTitle>
+                        <ToastDescription className="text-typography-100" size="sm">
+                          Lorem ipsum dolor sit amet consectetur.
+                        </ToastDescription>
+                      </VStack>
+                    </HStack>
+                    <HStack className="min-[450px]:gap-3 gap-1">
+                      <Button variant="link" size="sm" className="px-3.5 self-center">
+                        <ButtonText className="text-typography-0">Retry</ButtonText>
+                      </Button>
+                      <Pressable onPress={() => toast.close(id)}>
+                        <Icon as={CloseIcon} className="stroke-background-0" />
+                      </Pressable>
+                    </HStack>
+                  </Toast>
+                );
+              },
+            });
+          };
           return (
-            <Button
-              onPress={() => {
-                toast.show({
-                  placement:"top",
-                  duration: null,
-                  render: ({ id }) => {
-                    const toastId = "toast-" + id;
-                    return (
-                      <Toast
-                        action="error"
-                        nativeID={toastId}
-                        className="p-4 gap-6 w-full shadow-hard-5 max-w-[443px] flex-row justify-between"
-                      >
-                        <HStack space="md">
-                          <Icon
-                            as={HelpCircleIcon}
-                            className="stroke-typography-0"
-                            size="lg"
-                          />
-                          <VStack space="xs">
-                            <ToastTitle className="font-semibold">
-                              Toast Heading
-                            </ToastTitle>
-                            <ToastDescription
-                              className="text-typography-100"
-                              size="sm"
-                            >
-                              Lorem ipsum dolor sit amet consectetur.
-                            </ToastDescription>
-                          </VStack>
-                        </HStack>
-                        <HStack className="min-[450px]:gap-3 gap-1">
-                          <Button
-                            variant="link"
-                            size="sm"
-                            className="px-3.5 self-center"
-                          >
-                            <ButtonText className="text-typography-0">
-                              Retry
-                            </ButtonText>
-                          </Button>
-                          <Pressable onPress={() => toast.close(id)}>
-                            <Icon as={CloseIcon} className="stroke-background-0" />
-                          </Pressable>
-                        </HStack>
-                      </Toast>
-                    );
-                  },
-                });
-              }}
-            >
-              <ButtonText>Show Toast</ButtonText>
+            <Button onPress={handleToast}>
+              <ButtonText>Press Me</ButtonText>
             </Button>
           );
-        };
+        }
       `,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'Example');
@@ -583,68 +599,79 @@ The Examples section provides visual representations of the different variants o
     metaData={{
       code: `
       function Example() {
-          const toast = useToast();
-          return (
-            <Button
-              onPress={() => {
-                toast.show({
-                  placement:"top",
-                  render: ({ id }) => {
-                    const toastId = "toast-" + id;
-                    return (
-                      <Toast
-                        nativeID={toastId}
-                        className="p-4 gap-4 w-full max-w-[386px] bg-background-0 shadow-hard-2 flex-row"
+        const toast = useToast();
+        const [toastId, setToastId] = React.useState(0);
+        const handleToast = () => {
+          if (toast.isActive(toastId)) {
+            toast.close(toastId);
+            setTimeout(() => {
+              showNewToast();
+            }, 100);
+          } else {
+            showNewToast();
+          }
+        };
+        const showNewToast = () => {
+          const newId = Math.random();
+          setToastId(newId);
+          toast.show({
+            id: newId,
+            placement: 'top',
+            duration: 3000,
+            render: ({ id }) => {
+              const uniqueToastId = "toast-" + id;
+              return (
+                <Toast
+                  nativeID={uniqueToastId}
+                  className="p-4 gap-4 w-full max-w-[386px] bg-background-0 shadow-hard-2 flex-row"
+                >
+                  <Box className="h-11 w-11 items-center justify-center hidden min-[400px]:flex bg-background-50">
+                    {\/* RefreshCw is imported from 'lucide-react-native' *\/}
+                    <Icon
+                      as={RefreshCw}
+                      size="xl"
+                      className="stroke-background-800"
+                    />
+                  </Box>
+                  <VStack space="xl">
+                    <VStack space="xs">
+                      <HStack className="justify-between">
+                        <ToastTitle className="text-typography-900 font-semibold">
+                          Update available
+                        </ToastTitle>
+                        <Pressable onPress={() => toast.close(id)}>
+                          <Icon as={CloseIcon} className="stroke-background-500" />
+                        </Pressable>
+                      </HStack>
+                      <ToastDescription className="text-typography-700">
+                        A new software version is available for download.
+                      </ToastDescription>
+                    </VStack>
+                    <ButtonGroup className="gap-3 flex-row">
+                      <Button
+                        action="secondary"
+                        variant="outline"
+                        size="sm"
+                        className="flex-grow"
                       >
-                        <Box className="h-11 w-11 items-center justify-center hidden min-[400px]:flex bg-background-50">
-                        {\/* RefreshCw is imported from 'lucide-react-native' *\/}
-                          <Icon
-                            as={RefreshCw}
-                            size="xl"
-                            className="stroke-background-800"
-                          />
-                        </Box>
-                        <VStack space="xl">
-                          <VStack space="xs">
-                            <HStack className="justify-between">
-                              <ToastTitle className="text-typography-900 font-semibold">
-                                Update available
-                              </ToastTitle>
-                              <Pressable onPress={() => toast.close(id)}>
-                                <Icon
-                                  as={CloseIcon}
-                                  className="stroke-background-500"
-                                />
-                              </Pressable>
-                            </HStack>
-                            <ToastDescription className="text-typography-700">
-                              A new software version is available for download.
-                            </ToastDescription>
-                          </VStack>
-                          <ButtonGroup className="gap-3 flex-row">
-                            <Button
-                              action="secondary"
-                              variant="outline"
-                              size="sm"
-                              className="flex-grow"
-                            >
-                              <ButtonText>Not now</ButtonText>
-                            </Button>
-                            <Button size="sm" className="flex-grow">
-                              <ButtonText>Update</ButtonText>
-                            </Button>
-                          </ButtonGroup>
-                        </VStack>
-                      </Toast>
-                    );
-                  },
-                });
-              }}
-            >
-              <ButtonText>Show Toast</ButtonText>
-            </Button>
-          );
+                        <ButtonText>Not now</ButtonText>
+                      </Button>
+                      <Button size="sm" className="flex-grow">
+                        <ButtonText>Update</ButtonText>
+                      </Button>
+                    </ButtonGroup>
+                  </VStack>
+                </Toast>
+              );
+            },
+          });
         };
+        return (
+          <Button onPress={handleToast}>
+            <ButtonText>Press Me</ButtonText>
+          </Button>
+        );
+      }
       `,
       transformCode: (code) => {
         return transformedCode(code, 'function', 'Example');

From cce47e9f946defe45a271274d4fe57e4df7d3928 Mon Sep 17 00:00:00 2001
From: Rajat Chaudhary <rajatchaudhary@Rajats-MacBook-Air.local>
Date: Thu, 11 Jul 2024 13:48:25 +0530
Subject: [PATCH 2/3] fix: minor props change

---
 example/storybook-nativewind/src/components/Toast/Toast.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/example/storybook-nativewind/src/components/Toast/Toast.tsx b/example/storybook-nativewind/src/components/Toast/Toast.tsx
index 968d9553b..0ef6e8e21 100644
--- a/example/storybook-nativewind/src/components/Toast/Toast.tsx
+++ b/example/storybook-nativewind/src/components/Toast/Toast.tsx
@@ -26,7 +26,7 @@ const ToastFigmaStory = ({ _placement = 'top', _colorMode, ...props }: any) => {
   );
 };
 
-const ToastBasic = (...props: any) => {
+const ToastBasic = ({ ...props }: any) => {
   const toast = useToast();
   const [toastId, setToastId] = useState<number>(0);
 
@@ -50,7 +50,7 @@ const ToastBasic = (...props: any) => {
 
     toast.show({
       id: newId,
-      placement: 'top',
+      placement: props.placement,
       duration: 3000,
       // duration: null,
       render: ({ id }) => {

From 7aab02ea7c88412ff664a660fe7995e25ce597f1 Mon Sep 17 00:00:00 2001
From: Rajat Chaudhary <rajatchaudhary@Rajats-MacBook-Air.local>
Date: Fri, 12 Jul 2024 13:01:31 +0530
Subject: [PATCH 3/3] fix: toast component rendering

---
 .../src/components/Toast/Toast.tsx            | 10 +--------
 .../src/components/Toast/index.nw.stories.mdx | 21 +++----------------
 2 files changed, 4 insertions(+), 27 deletions(-)

diff --git a/example/storybook-nativewind/src/components/Toast/Toast.tsx b/example/storybook-nativewind/src/components/Toast/Toast.tsx
index 0ef6e8e21..4f3ac5fed 100644
--- a/example/storybook-nativewind/src/components/Toast/Toast.tsx
+++ b/example/storybook-nativewind/src/components/Toast/Toast.tsx
@@ -31,15 +31,7 @@ const ToastBasic = ({ ...props }: any) => {
   const [toastId, setToastId] = useState<number>(0);
 
   const handleToast = () => {
-    // Check if toast is active and close it if so
-    if (toast.isActive(toastId)) {
-      toast.close(toastId);
-
-      // Wait a moment before showing the new toast
-      setTimeout(() => {
-        showNewToast();
-      }, 75); // Adjust the delay as needed
-    } else {
+    if (!toast.isActive(toastId)) {
       showNewToast();
     }
   };
diff --git a/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx
index 45f02abad..8dcb9646d 100644
--- a/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx
@@ -65,12 +65,7 @@ This is an illustration of **Toast** component.
           const toast = useToast();
           const [toastId, setToastId] = React.useState(0);
           const handleToast = () => {
-            if (toast.isActive(toastId)) {
-              toast.close(toastId);
-              setTimeout(() => {
-                showNewToast();
-              }, 75);
-            } else {
+            if (!toast.isActive(toastId)) {
               showNewToast();
             }
           };
@@ -423,12 +418,7 @@ The Examples section provides visual representations of the different variants o
           const toast = useToast();
           const [toastId, setToastId] = React.useState(0);
           const handleToast = () => {
-            if (toast.isActive(toastId)) {
-              toast.close(toastId);
-              setTimeout(() => {
-                showNewToast();
-              }, 75);
-            } else {
+            if (!toast.isActive(toastId)) {
               showNewToast();
             }
           };
@@ -602,12 +592,7 @@ The Examples section provides visual representations of the different variants o
         const toast = useToast();
         const [toastId, setToastId] = React.useState(0);
         const handleToast = () => {
-          if (toast.isActive(toastId)) {
-            toast.close(toastId);
-            setTimeout(() => {
-              showNewToast();
-            }, 100);
-          } else {
+          if (!toast.isActive(toastId)) {
             showNewToast();
           }
         };