Integrate Sonner for toasts (#8839)

* Integrate Sonner for toasts

* Fix animation on iOS

* Refactor API

* Update e2e file

1 files changed, 26 insertions, 21 deletions

diff --git a/src/components/Toast/types.ts b/src/components/Toast/types.ts
index 9f1245fa2..463e6d66c 100644
--- a/src/components/Toast/types.ts
+++ b/src/components/Toast/types.ts
@@ -1,24 +1,29 @@
+import {type toast as sonner} from 'sonner-native'
+
+/**
+ * This is not exported from `sonner-native` so just hacking it in here.
+ */
+export type ExternalToast = Exclude<
+  Parameters<typeof sonner.custom>[1],
+  undefined
+>
+
 export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info'
 
-export type ToastApi = {
-  show: (props: {
-    /**
-     * The type of toast to show. This determines the styling and icon used.
-     */
-    type: ToastType
-    /**
-     * A string, `Text`, or `Span` components to render inside the toast. This
-     * allows additional formatting of the content, but should not be used for
-     * interactive elements link links or buttons.
-     */
-    content: React.ReactNode | string
-    /**
-     * Accessibility label for the toast, used for screen readers.
-     */
-    a11yLabel: string
-    /**
-     * Defaults to `DEFAULT_TOAST_DURATION` from `#components/Toast/const`.
-     */
-    duration?: number
-  }) => void
+/**
+ * Not all properties are available on all platforms, so we pick out only those
+ * we support. Add more here as needed.
+ */
+export type BaseToastOptions = Pick<
+  ExternalToast,
+  'duration' | 'dismissible' | 'promiseOptions'
+> & {
+  type?: ToastType
+
+  /**
+   * These methods differ between web/native implementations
+   */
+  onDismiss?: () => void
+  onPress?: () => void
+  onAutoClose?: () => void
 }