Integrate Sonner for toasts (#8839)

* Integrate Sonner for toasts

* Fix animation on iOS

* Refactor API

* Update e2e file

package.json

@@ -214,6 +214,8 @@
     "react-remove-scroll-bar": "^2.3.8",
     "react-responsive": "^9.0.2",
     "react-textarea-autosize": "^8.5.3",
+    "sonner": "^2.0.7",
+    "sonner-native": "^0.21.0",
     "statsig-react-native-expo": "^4.6.1",
     "tippy.js": "^6.3.7",
     "tlds": "^1.234.0",

src/App.native.tsx

@@ -74,6 +74,7 @@ import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialo
 import {Provider as PolicyUpdateOverlayProvider} from '#/components/PolicyUpdateOverlay'
 import {Provider as PortalProvider} from '#/components/Portal'
 import {Provider as VideoVolumeProvider} from '#/components/Post/Embed/VideoEmbed/VideoVolumeContext'
+import {ToastOutlet} from '#/components/Toast'
 import {Splash} from '#/Splash'
 import {BottomSheetProvider} from '../modules/bottom-sheet'
 import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
@@ -165,6 +166,7 @@ function InnerApp() {
                                                               <TestCtrls />
                                                               <Shell />
                                                               <NuxDialogs />
+                                                              <ToastOutlet />
                                                             </IntentDialogProvider>
                                                           </GlobalGestureEventsProvider>
                                                         </GestureHandlerRootView>

src/App.web.tsx

@@ -62,7 +62,7 @@ import {Provider as PolicyUpdateOverlayProvider} from '#/components/PolicyUpdate
 import {Provider as PortalProvider} from '#/components/Portal'
 import {Provider as ActiveVideoProvider} from '#/components/Post/Embed/VideoEmbed/ActiveVideoWebContext'
 import {Provider as VideoVolumeProvider} from '#/components/Post/Embed/VideoEmbed/VideoVolumeContext'
-import {ToastContainer} from '#/components/Toast'
+import {ToastOutlet} from '#/components/Toast'
 import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
 import {Provider as HideBottomBarBorderProvider} from './lib/hooks/useHideBottomBarBorder'
 
@@ -142,6 +142,7 @@ function InnerApp() {
                                                           <IntentDialogProvider>
                                                             <Shell />
                                                             <NuxDialogs />
+                                                            <ToastOutlet />
                                                           </IntentDialogProvider>
                                                         </HideBottomBarBorderProvider>
                                                       </EmailVerificationProvider>
@@ -163,7 +164,6 @@ function InnerApp() {
                       </StatsigProvider>
                     </PolicyUpdateOverlayProvider>
                   </QueryProvider>
-                  <ToastContainer />
                 </React.Fragment>
               </ActiveVideoProvider>
             </VideoVolumeProvider>

src/components/Toast/Toast.tsx

@@ -13,6 +13,11 @@ type ContextType = {
   type: ToastType
 }
 
+export type ToastComponentProps = {
+  type?: ToastType
+  content: React.ReactNode
+}
+
 export const ICONS = {
   default: CircleCheck,
   success: CircleCheck,
@@ -26,13 +31,7 @@ const Context = createContext<ContextType>({
 })
 Context.displayName = 'ToastContext'
 
-export function Toast({
+export function Toast({type = 'default', content}: ToastComponentProps) {
-  type,
-  content,
-}: {
-  type: ToastType
-  content: React.ReactNode
-}) {
   const {fonts} = useAlf()
   const t = useTheme()
   const styles = useToastStyles({type})
@@ -90,10 +89,12 @@ export function ToastText({children}: {children: React.ReactNode}) {
   const {textColor} = useToastStyles({type})
   return (
     <Text
+      selectable={false}
       style={[
         a.text_md,
         a.font_bold,
         a.leading_snug,
+        a.pointer_events_none,
         {
           color: textColor,
         },

src/components/Toast/const.ts

@@ -1 +1 @@
-export const DEFAULT_TOAST_DURATION = 3000
+export const DURATION = 3e3

src/components/Toast/index.e2e.tsx

@@ -1,9 +1,16 @@
-import {type ToastApi} from '#/components/Toast/types'
+export function ToastOutlet() {
-
-export function ToastContainer() {
   return null
 }
 
-export const toast: ToastApi = {
+export const api = () => {}
-  show() {},
+api.success = () => {}
-}
+api.wiggle = () => {}
+api.error = () => {}
+api.warning = () => {}
+api.info = () => {}
+api.promise = () => {}
+api.custom = () => {}
+api.loading = () => {}
+api.dismiss = () => {}
+
+export function show() {}

src/components/Toast/index.tsx

@@ -1,197 +1,49 @@
-import {useEffect, useMemo, useRef, useState} from 'react'
+import {View} from 'react-native'
-import {AccessibilityInfo} from 'react-native'
+import {toast as sonner, Toaster} from 'sonner-native'
-import {
-  Gesture,
-  GestureDetector,
-  GestureHandlerRootView,
-} from 'react-native-gesture-handler'
-import Animated, {
-  Easing,
-  runOnJS,
-  SlideInUp,
-  SlideOutUp,
-  useAnimatedReaction,
-  useAnimatedStyle,
-  useSharedValue,
-  withDecay,
-  withSpring,
-} from 'react-native-reanimated'
-import RootSiblings from 'react-native-root-siblings'
-import {useSafeAreaInsets} from 'react-native-safe-area-context'
 
-import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {atoms as a} from '#/alf'
-import {DEFAULT_TOAST_DURATION} from '#/components/Toast/const'
+import {DURATION} from '#/components/Toast/const'
-import {Toast} from '#/components/Toast/Toast'
+import {
-import {type ToastApi, type ToastType} from '#/components/Toast/types'
+  Toast as BaseToast,
+  type ToastComponentProps,
+} from '#/components/Toast/Toast'
+import {type BaseToastOptions} from '#/components/Toast/types'
 
-const TOAST_ANIMATION_DURATION = 300
+export {DURATION} from '#/components/Toast/const'
 
-export function ToastContainer() {
+/**
-  return null
+ * Toasts are rendered in a global outlet, which is placed at the top of the
+ * component tree.
+ */
+export function ToastOutlet() {
+  return <Toaster pauseWhenPageIsHidden gap={a.gap_sm.gap} />
 }
 
-export const toast: ToastApi = {
+/**
-  show(props) {
+ * The toast UI component
-    if (process.env.NODE_ENV === 'test') {
+ */
-      return
+export function Toast({type, content}: ToastComponentProps) {
-    }
-
-    AccessibilityInfo.announceForAccessibility(props.a11yLabel)
-
-    const item = new RootSiblings(
-      (
-        <AnimatedToast
-          type={props.type}
-          content={props.content}
-          a11yLabel={props.a11yLabel}
-          duration={props.duration ?? DEFAULT_TOAST_DURATION}
-          destroy={() => item.destroy()}
-        />
-      ),
-    )
-  },
-}
-
-function AnimatedToast({
-  type,
-  content,
-  a11yLabel,
-  duration,
-  destroy,
-}: {
-  type: ToastType
-  content: React.ReactNode
-  a11yLabel: string
-  duration: number
-  destroy: () => void
-}) {
-  const {top} = useSafeAreaInsets()
-  const isPanning = useSharedValue(false)
-  const dismissSwipeTranslateY = useSharedValue(0)
-  const [cardHeight, setCardHeight] = useState(0)
-
-  // for the exit animation to work on iOS the animated component
-  // must not be the root component
-  // so we need to wrap it in a view and unmount the toast ahead of time
-  const [alive, setAlive] = useState(true)
-
-  const hideAndDestroyImmediately = () => {
-    setAlive(false)
-    setTimeout(() => {
-      destroy()
-    }, 1e3)
-  }
-
-  const destroyTimeoutRef = useRef<ReturnType<typeof setTimeout>>()
-  const hideAndDestroyAfterTimeout = useNonReactiveCallback(() => {
-    clearTimeout(destroyTimeoutRef.current)
-    destroyTimeoutRef.current = setTimeout(hideAndDestroyImmediately, duration)
-  })
-  const pauseDestroy = useNonReactiveCallback(() => {
-    clearTimeout(destroyTimeoutRef.current)
-  })
-
-  useEffect(() => {
-    hideAndDestroyAfterTimeout()
-  }, [hideAndDestroyAfterTimeout])
-
-  const panGesture = useMemo(() => {
-    return Gesture.Pan()
-      .activeOffsetY([-10, 10])
-      .failOffsetX([-10, 10])
-      .maxPointers(1)
-      .onStart(() => {
-        'worklet'
-        if (!alive) return
-        isPanning.set(true)
-        runOnJS(pauseDestroy)()
-      })
-      .onUpdate(e => {
-        'worklet'
-        if (!alive) return
-        dismissSwipeTranslateY.value = e.translationY
-      })
-      .onEnd(e => {
-        'worklet'
-        if (!alive) return
-        runOnJS(hideAndDestroyAfterTimeout)()
-        isPanning.set(false)
-        if (e.velocityY < -100) {
-          if (dismissSwipeTranslateY.value === 0) {
-            // HACK: If the initial value is 0, withDecay() animation doesn't start.
-            // This is a bug in Reanimated, but for now we'll work around it like this.
-            dismissSwipeTranslateY.value = 1
-          }
-          dismissSwipeTranslateY.value = withDecay({
-            velocity: e.velocityY,
-            velocityFactor: Math.max(3500 / Math.abs(e.velocityY), 1),
-            deceleration: 1,
-          })
-        } else {
-          dismissSwipeTranslateY.value = withSpring(0, {
-            stiffness: 500,
-            damping: 50,
-          })
-        }
-      })
-  }, [
-    dismissSwipeTranslateY,
-    isPanning,
-    alive,
-    hideAndDestroyAfterTimeout,
-    pauseDestroy,
-  ])
-
-  const topOffset = top + 10
-
-  useAnimatedReaction(
-    () =>
-      !isPanning.get() &&
-      dismissSwipeTranslateY.get() < -topOffset - cardHeight,
-    (isSwipedAway, prevIsSwipedAway) => {
-      'worklet'
-      if (isSwipedAway && !prevIsSwipedAway) {
-        runOnJS(destroy)()
-      }
-    },
-  )
-
-  const animatedStyle = useAnimatedStyle(() => {
-    const translation = dismissSwipeTranslateY.get()
-    return {
-      transform: [
-        {
-          translateY: translation > 0 ? translation ** 0.7 : translation,
-        },
-      ],
-    }
-  })
-
   return (
-    <GestureHandlerRootView
+    <View style={[a.px_xl, a.w_full]}>
-      style={[a.absolute, {top: topOffset, left: 16, right: 16}]}
+      <BaseToast content={content} type={type} />
-      pointerEvents="box-none">
+    </View>
-      {alive && (
-        <Animated.View
-          entering={SlideInUp.easing(Easing.out(Easing.exp)).duration(
-            TOAST_ANIMATION_DURATION,
-          )}
-          exiting={SlideOutUp.easing(Easing.in(Easing.exp)).duration(
-            TOAST_ANIMATION_DURATION * 0.7,
-          )}
-          onLayout={evt => setCardHeight(evt.nativeEvent.layout.height)}
-          accessibilityRole="alert"
-          accessible={true}
-          accessibilityLabel={a11yLabel}
-          accessibilityHint=""
-          onAccessibilityEscape={hideAndDestroyImmediately}
-          style={[a.flex_1, animatedStyle]}>
-          <GestureDetector gesture={panGesture}>
-            <Toast content={content} type={type} />
-          </GestureDetector>
-        </Animated.View>
-      )}
-    </GestureHandlerRootView>
   )
 }
+
+/**
+ * Access the full Sonner API
+ */
+export const api = sonner
+
+/**
+ * Our base toast API, using the `Toast` export of this file.
+ */
+export function show(
+  content: React.ReactNode,
+  {type, ...options}: BaseToastOptions = {},
+) {
+  sonner.custom(<Toast content={content} type={type} />, {
+    ...options,
+    duration: options?.duration ?? DURATION,
+  })
+}

src/components/Toast/index.web.tsx

@@ -1,112 +1,40 @@
-/*
+import {toast as sonner, Toaster} from 'sonner'
- * Note: relies on styles in #/styles.css
- */
 
-import {useEffect, useState} from 'react'
+import {atoms as a} from '#/alf'
-import {AccessibilityInfo, Pressable, View} from 'react-native'
+import {DURATION} from '#/components/Toast/const'
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {atoms as a, useBreakpoints} from '#/alf'
-import {DEFAULT_TOAST_DURATION} from '#/components/Toast/const'
 import {Toast} from '#/components/Toast/Toast'
-import {type ToastApi, type ToastType} from '#/components/Toast/types'
+import {type BaseToastOptions} from '#/components/Toast/types'
-
-const TOAST_ANIMATION_STYLES = {
-  entering: {
-    animation: 'toastFadeIn 0.3s ease-out forwards',
-  },
-  exiting: {
-    animation: 'toastFadeOut 0.2s ease-in forwards',
-  },
-}
-
-interface ActiveToast {
-  type: ToastType
-  content: React.ReactNode
-  a11yLabel: string
-}
-type GlobalSetActiveToast = (_activeToast: ActiveToast | undefined) => void
-let globalSetActiveToast: GlobalSetActiveToast | undefined
-let toastTimeout: NodeJS.Timeout | undefined
-type ToastContainerProps = {}
-
-export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
-  const {_} = useLingui()
-  const {gtPhone} = useBreakpoints()
-  const [activeToast, setActiveToast] = useState<ActiveToast | undefined>()
-  const [isExiting, setIsExiting] = useState(false)
-
-  useEffect(() => {
-    globalSetActiveToast = (t: ActiveToast | undefined) => {
-      if (!t && activeToast) {
-        setIsExiting(true)
-        setTimeout(() => {
-          setActiveToast(t)
-          setIsExiting(false)
-        }, 200)
-      } else {
-        if (t) {
-          AccessibilityInfo.announceForAccessibility(t.a11yLabel)
-        }
-        setActiveToast(t)
-        setIsExiting(false)
-      }
-    }
-  }, [activeToast])
 
+/**
+ * Toasts are rendered in a global outlet, which is placed at the top of the
+ * component tree.
+ */
+export function ToastOutlet() {
   return (
-    <>
+    <Toaster
-      {activeToast && (
+      position="bottom-left"
-        <View
+      gap={a.gap_sm.gap}
-          style={[
+      offset={a.p_xl.padding}
-            a.fixed,
+      mobileOffset={a.p_xl.padding}
-            {
-              left: a.px_xl.paddingLeft,
-              right: a.px_xl.paddingLeft,
-              bottom: a.px_xl.paddingLeft,
-              ...(isExiting
-                ? TOAST_ANIMATION_STYLES.exiting
-                : TOAST_ANIMATION_STYLES.entering),
-            },
-            gtPhone && [
-              {
-                maxWidth: 380,
-              },
-            ],
-          ]}>
-          <Toast content={activeToast.content} type={activeToast.type} />
-          <Pressable
-            style={[a.absolute, a.inset_0]}
-            accessibilityLabel={_(
-              msg({
-                message: `Dismiss message`,
-                comment: `Accessibility label for dismissing a toast notification`,
-              }),
-            )}
-            accessibilityHint=""
-            onPress={() => setActiveToast(undefined)}
     />
-        </View>
-      )}
-    </>
   )
 }
 
-export const toast: ToastApi = {
+/**
-  show(props) {
+ * Access the full Sonner API
-    if (toastTimeout) {
+ */
-      clearTimeout(toastTimeout)
+export const api = sonner
-    }
 
-    globalSetActiveToast?.({
+/**
-      type: props.type,
+ * Our base toast API, using the `Toast` export of this file.
-      content: props.content,
+ */
-      a11yLabel: props.a11yLabel,
+export function show(
+  content: React.ReactNode,
+  {type, ...options}: BaseToastOptions = {},
+) {
+  sonner(<Toast content={content} type={type} />, {
+    unstyled: true, // required on web
+    ...options,
+    duration: options?.duration ?? DURATION,
   })
-
-    toastTimeout = setTimeout(() => {
-      globalSetActiveToast?.(undefined)
-    }, props.duration || DEFAULT_TOAST_DURATION)
-  },
 }

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: {
+ * Not all properties are available on all platforms, so we pick out only those
-    /**
+ * we support. Add more here as needed.
-     * The type of toast to show. This determines the styling and icon used.
  */
-    type: ToastType
+export type BaseToastOptions = Pick<
+  ExternalToast,
+  'duration' | 'dismissible' | 'promiseOptions'
+> & {
+  type?: ToastType
+
   /**
-     * A string, `Text`, or `Span` components to render inside the toast. This
+   * These methods differ between web/native implementations
-     * allows additional formatting of the content, but should not be used for
-     * interactive elements link links or buttons.
    */
-    content: React.ReactNode | string
+  onDismiss?: () => void
-    /**
+  onPress?: () => void
-     * Accessibility label for the toast, used for screen readers.
+  onAutoClose?: () => void
-     */
-    a11yLabel: string
-    /**
-     * Defaults to `DEFAULT_TOAST_DURATION` from `#components/Toast/const`.
-     */
-    duration?: number
-  }) => void
 }

src/view/com/util/Toast.tsx

@@ -1,4 +1,4 @@
-import {toast} from '#/components/Toast'
+import * as toast from '#/components/Toast'
 import {type ToastType} from '#/components/Toast/types'
 
 /**
@@ -46,9 +46,5 @@ export function show(
   type: ToastType | LegacyToastType = 'default',
 ): void {
   const convertedType = convertLegacyToastType(type)
-  toast.show({
+  toast.show(message, {type: convertedType})
-    type: convertedType,
-    content: message,
-    a11yLabel: message,
-  })
 }

src/view/screens/Storybook/Toasts.tsx

@@ -2,8 +2,7 @@ import {Pressable, View} from 'react-native'
 
 import {show as deprecatedShow} from '#/view/com/util/Toast'
 import {atoms as a} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import * as toast from '#/components/Toast'
-import {toast} from '#/components/Toast'
 import {Toast} from '#/components/Toast/Toast'
 import {H1} from '#/components/Typography'
 
@@ -15,101 +14,77 @@ export function Toasts() {
       <View style={[a.gap_md]}>
         <Pressable
           accessibilityRole="button"
-          onPress={() =>
+          onPress={() => toast.show(`Hey I'm a toast!`)}>
-            toast.show({
+          <Toast content="Hey I'm a toast!" />
-              type: 'default',
-              content: 'Default toast',
-              a11yLabel: 'Default toast',
-            })
-          }>
-          <Toast content="Default toast" type="default" />
         </Pressable>
         <Pressable
           accessibilityRole="button"
           onPress={() =>
-            toast.show({
+            toast.show(`This toast will disappear after 6 seconds`, {
-              type: 'default',
-              content: 'Default toast, 6 seconds',
-              a11yLabel: 'Default toast, 6 seconds',
               duration: 6e3,
             })
           }>
-          <Toast content="Default toast, 6 seconds" type="default" />
+          <Toast content="This toast will disappear after 6 seconds" />
         </Pressable>
         <Pressable
           accessibilityRole="button"
           onPress={() =>
-            toast.show({
+            toast.show(
-              type: 'default',
+              `This is a longer message to test how the toast handles multiple lines of text content.`,
-              content:
+            )
-                'This is a longer message to test how the toast handles multiple lines of text content.',
-              a11yLabel:
-                'This is a longer message to test how the toast handles multiple lines of text content.',
-            })
           }>
-          <Toast
+          <Toast content="This is a longer message to test how the toast handles multiple lines of text content." />
-            content="This is a longer message to test how the toast handles multiple lines of text content."
-            type="default"
-          />
         </Pressable>
         <Pressable
           accessibilityRole="button"
           onPress={() =>
-            toast.show({
+            toast.show(`Success! Yayyyyyyy :)`, {
               type: 'success',
-              content: 'Success toast',
-              a11yLabel: 'Success toast',
             })
           }>
-          <Toast content="Success toast" type="success" />
+          <Toast content="Success! Yayyyyyyy :)" type="success" />
         </Pressable>
         <Pressable
           accessibilityRole="button"
           onPress={() =>
-            toast.show({
+            toast.show(`I'm providing info!`, {
               type: 'info',
-              content: 'Info toast',
-              a11yLabel: 'Info toast',
             })
           }>
-          <Toast content="Info" type="info" />
+          <Toast content="I'm providing info!" type="info" />
         </Pressable>
         <Pressable
           accessibilityRole="button"
           onPress={() =>
-            toast.show({
+            toast.show(`This is a warning toast`, {
               type: 'warning',
-              content: 'Warning toast',
-              a11yLabel: 'Warning toast',
             })
           }>
-          <Toast content="Warning" type="warning" />
+          <Toast content="This is a warning toast" type="warning" />
         </Pressable>
         <Pressable
           accessibilityRole="button"
           onPress={() =>
-            toast.show({
+            toast.show(`This is an error toast :(`, {
               type: 'error',
-              content: 'Error toast',
-              a11yLabel: 'Error toast',
             })
           }>
-          <Toast content="Error" type="error" />
+          <Toast content="This is an error toast :(" type="error" />
         </Pressable>
 
-        <Button
+        <Pressable
-          label="Deprecated toast example"
+          accessibilityRole="button"
           onPress={() =>
             deprecatedShow(
-              'This is a deprecated toast example',
+              `This is a test of the deprecated API`,
               'exclamation-circle',
             )
-          }
+          }>
-          size="large"
+          <Toast
-          variant="solid"
+            content="This is a test of the deprecated API"
-          color="secondary">
+            type="warning"
-          <ButtonText>Deprecated toast example</ButtonText>
+          />
-        </Button>
+        </Pressable>
       </View>
     </View>
   )

yarn.lock

@@ -18178,6 +18178,16 @@ sonic-boom@^3.7.0:
   dependencies:
     atomic-sleep "^1.0.0"
 
+sonner-native@^0.21.0:
+  version "0.21.0"
+  resolved "https://registry.yarnpkg.com/sonner-native/-/sonner-native-0.21.0.tgz#b7968f8a7fdcdbc3b13b478455d63b24a45db829"
+  integrity sha512-pIdyMd722xuDukIvCZCmWh9Jy5FV+m9uKYl3oAzonYE+91eX5556vYrIik5MisDlBniSXaWqC9CnPoS6DKo2Lg==
+
+sonner@^2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/sonner/-/sonner-2.0.7.tgz#810c1487a67ec3370126e0f400dfb9edddc3e4f6"
+  integrity sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==
+
 source-list-map@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"