Add duration optional prop

src/components/Toast/const.ts

@@ -0,0 +1 @@
+export const DEFAULT_TOAST_DURATION = 3000

src/components/Toast/index.tsx

@@ -20,10 +20,10 @@ 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 {Toast} from '#/components/Toast/Toast'
 import {type ToastApi, type ToastType} from '#/components/Toast/types'
 
-const TIMEOUT = 2e3
 const TOAST_ANIMATION_DURATION = 300
 
 export function ToastContainer() {
@@ -44,6 +44,7 @@ export const toast: ToastApi = {
           type={props.type}
           content={props.content}
           a11yLabel={props.a11yLabel}
+          duration={props.duration ?? DEFAULT_TOAST_DURATION}
           destroy={() => item.destroy()}
         />
       ),
@@ -55,11 +56,13 @@ function AnimatedToast({
   type,
   content,
   a11yLabel,
+  duration,
   destroy,
 }: {
   type: ToastType
   content: React.ReactNode
   a11yLabel: string
+  duration: number
   destroy: () => void
 }) {
   const {top} = useSafeAreaInsets()
@@ -82,7 +85,7 @@ function AnimatedToast({
   const destroyTimeoutRef = useRef<ReturnType<typeof setTimeout>>()
   const hideAndDestroyAfterTimeout = useNonReactiveCallback(() => {
     clearTimeout(destroyTimeoutRef.current)
-    destroyTimeoutRef.current = setTimeout(hideAndDestroyImmediately, TIMEOUT)
+    destroyTimeoutRef.current = setTimeout(hideAndDestroyImmediately, duration)
   })
   const pauseDestroy = useNonReactiveCallback(() => {
     clearTimeout(destroyTimeoutRef.current)

src/components/Toast/index.web.tsx

@@ -8,10 +8,10 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {atoms as a, web} 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'
 
-const DURATION = 3500
 const TOAST_ANIMATION_STYLES = {
   entering: {
     animation: 'toastFadeIn 0.3s ease-out forwards',
@@ -97,6 +97,6 @@ export const toast: ToastApi = {
 
     toastTimeout = setTimeout(() => {
       globalSetActiveToast?.(undefined)
-    }, DURATION)
+    }, props.duration || DEFAULT_TOAST_DURATION)
   },
 }

src/components/Toast/types.ts

@@ -5,5 +5,6 @@ export type ToastApi = {
     type: ToastType
     content: React.ReactNode
     a11yLabel: string
+    duration?: number
   }) => void
 }

src/view/screens/Storybook/Toasts.tsx

@@ -24,6 +24,18 @@ export function Toasts() {
           }>
           <Toast content="Default toast" type="default" />
         </Pressable>
+        <Pressable
+          accessibilityRole="button"
+          onPress={() =>
+            toast.show({
+              type: 'default',
+              content: 'Default toast, 6 seconds',
+              a11yLabel: 'Default toast, 6 seconds',
+              duration: 6e3,
+            })
+          }>
+          <Toast content="Default toast, 6 seconds" type="default" />
+        </Pressable>
         <Pressable
           accessibilityRole="button"
           onPress={() =>