Merge pull request #2297 from gluestack/fix/toast-animation

fix: toast animation

Author: ankit-tailor

example/storybook-nativewind/src/core-components/nativewind/toast/index.tsx

@@ -28,7 +28,7 @@ cssInterop(UIToast.Title, { className: 'style' });
 cssInterop(UIToast.Description, { className: 'style' });
 
 const toastStyle = tva({
-  base: 'p-4 m-3 rounded-md gap-1 web:pointer-events-auto shadow-hard-5 border-outline-100',
+  base: 'p-4 m-1 rounded-md gap-1 web:pointer-events-auto shadow-hard-5 border-outline-100',
   variants: {
     action: {
       error: 'bg-error-700',

packages/unstyled/toast/src/ToastList.tsx

@@ -113,6 +113,15 @@ export const ToastList = () => {
                           opacity: 1,
                           y: 0,
                         }}
+                        exit={{
+                          opacity: 0,
+                          y: transitionConfig[position],
+                        }}
+                        transition={{
+                          type: 'timing',
+                          duration: 150,
+                        }}
+                        key={toast.id}
                         {...toast.config?.containerStyle}
                         style={{ pointerEvents: 'box-none' }}
                       >