update: toast styles that reuse consistent style

src/view/com/util/Toast.tsx

@@ -6,8 +6,8 @@ import {
   GestureHandlerRootView,
 } from 'react-native-gesture-handler'
 import Animated, {
-  FadeInUp,
+  FadeIn,
-  FadeOutUp,
+  FadeOut,
   runOnJS,
   useAnimatedReaction,
   useAnimatedStyle,
@@ -17,53 +17,36 @@ import Animated, {
 } from 'react-native-reanimated'
 import RootSiblings from 'react-native-root-siblings'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import {
-  FontAwesomeIcon,
-  type Props as FontAwesomeProps,
-} from '@fortawesome/react-native-fontawesome'
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
-import {isWeb} from '#/platform/detection'
 import {atoms as a, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'
+import {
+  type ToastType,
+  TOAST_TYPE_TO_ICON,
+  getToastTypeStyles,
+  TOAST_ANIMATION_CONFIG,
+} from './Toast.style'
 
 const TIMEOUT = 2e3
 
-export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info'
+export function show(message: string, type: ToastType = 'default') {
-
-const TOAST_TYPE_TO_ICON: Record<ToastType, FontAwesomeProps['icon']> = {
-  default: 'check',
-  success: 'check',
-  error: 'exclamation',
-  warning: 'circle-exclamation',
-  info: 'info',
-}
-
-export function show(
-  message: string,
-  type: ToastType | FontAwesomeProps['icon'] = 'default',
-) {
   if (process.env.NODE_ENV === 'test') {
     return
   }
 
-  const icon =
-    typeof type === 'string' && type in TOAST_TYPE_TO_ICON
-      ? TOAST_TYPE_TO_ICON[type as ToastType]
-      : (type as FontAwesomeProps['icon'])
-
   AccessibilityInfo.announceForAccessibility(message)
   const item = new RootSiblings(
-    <Toast message={message} icon={icon} destroy={() => item.destroy()} />,
+    <Toast message={message} type={type} destroy={() => item.destroy()} />,
   )
 }
 
 function Toast({
   message,
-  icon,
+  type,
   destroy,
 }: {
   message: string
-  icon: FontAwesomeProps['icon']
+  type: ToastType
   destroy: () => void
 }) {
   const t = useTheme()
@@ -72,6 +55,10 @@ function Toast({
   const dismissSwipeTranslateY = useSharedValue(0)
   const [cardHeight, setCardHeight] = useState(0)
 
+  const toastStyles = getToastTypeStyles(t)
+  const colors = toastStyles[type]
+  const IconComponent = TOAST_TYPE_TO_ICON[type]
+
   // 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
@@ -169,103 +156,58 @@ function Toast({
     }
   })
 
-  // Web-specific styles for better compatibility
-  const webContainerStyle = isWeb
-    ? {
-        position: 'absolute' as const,
-        top: topOffset,
-        left: 16,
-        right: 16,
-        zIndex: 9999,
-        pointerEvents: 'auto' as const,
-      }
-    : {}
-
-  const webToastStyle = isWeb
-    ? {
-        backgroundColor:
-          t.name === 'dark' ? t.palette.contrast_25 : t.palette.white,
-        shadowColor: '#000',
-        shadowOffset: {width: 0, height: 10},
-        shadowOpacity: 0.1,
-        shadowRadius: 15,
-        elevation: 10,
-        borderColor: t.palette.contrast_300,
-        borderWidth: 1,
-        borderRadius: 8,
-        minHeight: 60,
-      }
-    : {}
-
   return (
     <GestureHandlerRootView
-      style={[
+      style={[a.absolute, {top: topOffset, left: 16, right: 16}]}
-        a.absolute,
-        {top: topOffset, left: 16, right: 16},
-        isWeb && webContainerStyle,
-      ]}
       pointerEvents="box-none">
       {alive && (
         <Animated.View
-          entering={FadeInUp}
+          entering={FadeIn.duration(TOAST_ANIMATION_CONFIG.duration)}
-          exiting={FadeOutUp}
+          exiting={FadeOut.duration(TOAST_ANIMATION_CONFIG.duration * 0.7)}
-          style={[a.flex_1]}>
+          onLayout={evt => setCardHeight(evt.nativeEvent.layout.height)}
-          <Animated.View
+          accessibilityRole="alert"
-            onLayout={evt => setCardHeight(evt.nativeEvent.layout.height)}
+          accessible={true}
-            accessibilityRole="alert"
+          accessibilityLabel={message}
-            accessible={true}
+          accessibilityHint=""
-            accessibilityLabel={message}
+          onAccessibilityEscape={hideAndDestroyImmediately}
-            accessibilityHint=""
+          style={[
-            onAccessibilityEscape={hideAndDestroyImmediately}
+            a.flex_1,
-            style={[
+            {backgroundColor: colors.backgroundColor},
-              a.flex_1,
+            a.shadow_sm,
-              isWeb
+            {borderColor: colors.borderColor, borderWidth: 1},
-                ? webToastStyle
+            a.rounded_sm,
-                : [
+            animatedStyle,
-                    t.name === 'dark' ? t.atoms.bg_contrast_25 : t.atoms.bg,
+          ]}>
-                    a.shadow_lg,
+          <GestureDetector gesture={panGesture}>
-                    t.atoms.border_contrast_medium,
+            <View style={[a.flex_1, a.px_md, a.py_lg, a.flex_row, a.gap_md]}>
-                    a.rounded_sm,
+              <View
-                    a.border,
+                style={[
-                  ],
+                  a.flex_shrink_0,
-              !isWeb && animatedStyle,
+                  a.rounded_full,
-            ]}>
+                  {width: 32, height: 32},
-            <GestureDetector gesture={panGesture}>
+                  a.align_center,
-              <View style={[a.flex_1, a.px_md, a.py_lg, a.flex_row, a.gap_md]}>
+                  a.justify_center,
-                <View
+                  {
-                  style={[
+                    backgroundColor: colors.backgroundColor,
-                    a.flex_shrink_0,
+                  },
-                    a.rounded_full,
+                ]}>
-                    {width: 32, height: 32},
+                <IconComponent fill={colors.iconColor} size="sm" />
-                    a.align_center,
-                    a.justify_center,
-                    {
-                      backgroundColor:
-                        t.name === 'dark'
-                          ? t.palette.black
-                          : t.palette.primary_50,
-                    },
-                  ]}>
-                  <FontAwesomeIcon
-                    icon={icon}
-                    size={16}
-                    style={t.atoms.text_contrast_medium}
-                  />
-                </View>
-                <View
-                  style={[
-                    a.h_full,
-                    a.justify_center,
-                    a.flex_1,
-                    a.justify_center,
-                  ]}>
-                  <Text style={a.text_md} emoji>
-                    {message}
-                  </Text>
-                </View>
               </View>
-            </GestureDetector>
+              <View
-          </Animated.View>
+                style={[
+                  a.h_full,
+                  a.justify_center,
+                  a.flex_1,
+                  a.justify_center,
+                ]}>
+                <Text
+                  style={[a.text_md, a.font_bold, {color: colors.textColor}]}
+                  emoji>
+                  {message}
+                </Text>
+              </View>
+            </View>
+          </GestureDetector>
         </Animated.View>
       )}
     </GestureHandlerRootView>

src/view/com/util/Toast.web.tsx

@@ -4,28 +4,19 @@
 
 import {useEffect, useState} from 'react'
 import {Pressable, StyleSheet, Text, View} from 'react-native'
+import {atoms as a, useTheme} from '#/alf'
 import {
-  FontAwesomeIcon,
+  type ToastType,
-  type FontAwesomeIconStyle,
+  TOAST_TYPE_TO_ICON,
-  type Props as FontAwesomeProps,
+  getToastTypeStyles,
-} from '@fortawesome/react-native-fontawesome'
+  getToastWebAnimationStyles,
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+  TOAST_WEB_KEYFRAMES,
+} from './Toast.style'
 
-const DURATION = 60000
+const DURATION = 3500
-
-export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info'
-
-const TOAST_TYPE_TO_ICON: Record<ToastType, FontAwesomeProps['icon']> = {
-  default: 'check',
-  success: 'check',
-  error: 'exclamation',
-  warning: 'circle-exclamation',
-  info: 'info',
-}
 
 interface ActiveToast {
   text: string
-  icon: FontAwesomeProps['icon']
   type: ToastType
 }
 type GlobalSetActiveToast = (_activeToast: ActiveToast | undefined) => void
@@ -40,50 +31,45 @@ let toastTimeout: NodeJS.Timeout | undefined
 type ToastContainerProps = {}
 export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
   const [activeToast, setActiveToast] = useState<ActiveToast | undefined>()
+  const [isExiting, setIsExiting] = useState(false)
+
   useEffect(() => {
     globalSetActiveToast = (t: ActiveToast | undefined) => {
-      setActiveToast(t)
+      if (!t && activeToast) {
+        setIsExiting(true)
+        setTimeout(() => {
+          setActiveToast(t)
+          setIsExiting(false)
+        }, 200)
+      } else {
+        setActiveToast(t)
+        setIsExiting(false)
+      }
     }
-  })
+  }, [activeToast])
+
+  useEffect(() => {
+    const styleId = 'toast-animations'
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement('style')
+      style.id = styleId
+      style.textContent = TOAST_WEB_KEYFRAMES
+      document.head.appendChild(style)
+    }
+  }, [])
 
   const t = useTheme()
 
-  const TOAST_TYPE_TO_STYLES = {
+  const toastTypeStyles = getToastTypeStyles(t)
-    default: {
-      backgroundColor: t.atoms.text_contrast_low.color,
-      borderColor: t.atoms.border_contrast_medium.borderColor,
-      iconColor: '#fff',
-      textColor: '#fff',
-    },
-    success: {
-      backgroundColor: '#059669',
-      borderColor: '#047857',
-      iconColor: '#fff',
-      textColor: '#fff',
-    },
-    error: {
-      backgroundColor: t.palette.negative_100,
-      borderColor: t.palette.negative_400,
-      iconColor: t.palette.negative_600,
-      textColor: t.palette.negative_600,
-    },
-    warning: {
-      backgroundColor: t.palette.negative_500,
-      borderColor: t.palette.negative_600,
-      iconColor: '#fff',
-      textColor: '#fff',
-    },
-    info: {
-      backgroundColor: t.atoms.text_contrast_low.color,
-      borderColor: t.atoms.border_contrast_medium.borderColor,
-      iconColor: '#fff',
-      textColor: '#fff',
-    },
-  }
-
   const toastStyles = activeToast
-    ? TOAST_TYPE_TO_STYLES[activeToast.type]
+    ? toastTypeStyles[activeToast.type]
-    : TOAST_TYPE_TO_STYLES.default
+    : toastTypeStyles.default
+
+  const IconComponent = activeToast
+    ? TOAST_TYPE_TO_ICON[activeToast.type]
+    : TOAST_TYPE_TO_ICON.default
+
+  const animationStyles = getToastWebAnimationStyles()
 
   return (
     <>
@@ -94,18 +80,24 @@ export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
             {
               backgroundColor: toastStyles.backgroundColor,
               borderColor: toastStyles.borderColor,
+              ...(isExiting
+                ? animationStyles.exiting
+                : animationStyles.entering),
             },
           ]}>
-          <FontAwesomeIcon
+          <View
-            icon={activeToast.icon}
+            style={[
-            size={20}
+              styles.iconContainer,
-            style={
+              {
-              [
+                backgroundColor: 'transparent',
-                styles.icon,
+              },
-                {color: toastStyles.iconColor},
+            ]}>
-              ] as FontAwesomeIconStyle
+            <IconComponent
-            }
+              fill={toastStyles.iconColor}
-          />
+              size="sm"
+              style={styles.icon}
+            />
+          </View>
           <Text
             style={[
               styles.text,
@@ -132,22 +124,12 @@ export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
 // methods
 // =
 
-export function show(
+export function show(text: string, type: ToastType = 'default') {
-  text: string,
-  type: ToastType | FontAwesomeProps['icon'] = 'default',
-) {
   if (toastTimeout) {
     clearTimeout(toastTimeout)
   }
 
-  // Determine if type is a semantic type or direct icon
+  globalSetActiveToast?.({text, type})
-  const isSemanticType = typeof type === 'string' && type in TOAST_TYPE_TO_ICON
-  const icon = isSemanticType
-    ? TOAST_TYPE_TO_ICON[type as ToastType]
-    : (type as FontAwesomeProps['icon'])
-  const toastType = isSemanticType ? (type as ToastType) : 'default'
-
-  globalSetActiveToast?.({text, icon, type: toastType})
   toastTimeout = setTimeout(() => {
     globalSetActiveToast?.(undefined)
   }, DURATION)
@@ -161,10 +143,10 @@ const styles = StyleSheet.create({
     bottom: 20,
     // @ts-ignore web only
     width: 'calc(100% - 40px)',
-    maxWidth: 350,
+    maxWidth: 380,
     padding: 20,
     flexDirection: 'row',
-    alignItems: 'center',
+    alignItems: 'flex-start',
     borderRadius: 10,
     borderWidth: 1,
   },
@@ -175,6 +157,14 @@ const styles = StyleSheet.create({
     bottom: 0,
     right: 0,
   },
+  iconContainer: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+  },
   icon: {
     flexShrink: 0,
   },

src/view/screens/Storybook/Toasts.tsx

@@ -1,68 +1,99 @@
-import {View} from 'react-native'
+import {View, Pressable} from 'react-native'
 
-import {atoms as a} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {Text, H1} from '#/components/Typography'
-import {H1} from '#/components/Typography'
+import {
+  type ToastType,
+  TOAST_TYPE_TO_ICON,
+  getToastTypeStyles,
+} from '#/view/com/util/Toast.style'
 import * as Toast from '#/view/com/util/Toast'
-import * as ToastHelpers from '#/view/com/util/ToastHelpers'
+
+function ToastPreview({message, type}: {message: string; type: ToastType}) {
+  const t = useTheme()
+  const toastStyles = getToastTypeStyles(t)
+  const colors = toastStyles[type]
+  const IconComponent = TOAST_TYPE_TO_ICON[type]
+
+  return (
+    <Pressable
+      onPress={() => Toast.show(message, type)}
+      style={[
+        {backgroundColor: colors.backgroundColor},
+        a.shadow_sm,
+        {borderColor: colors.borderColor},
+        a.rounded_sm,
+        a.border,
+        a.px_sm,
+        a.py_sm,
+        a.flex_row,
+        a.gap_sm,
+        a.align_center,
+      ]}>
+      <View
+        style={[
+          a.flex_shrink_0,
+          a.rounded_full,
+          {width: 24, height: 24},
+          a.align_center,
+          a.justify_center,
+          {
+            backgroundColor: colors.backgroundColor,
+          },
+        ]}>
+        <IconComponent fill={colors.iconColor} size="xs" />
+      </View>
+      <View style={[a.flex_1]}>
+        <Text
+          style={[
+            a.text_sm,
+            a.font_bold,
+            a.leading_snug,
+            {color: colors.textColor},
+          ]}
+          emoji>
+          {message}
+        </Text>
+      </View>
+    </Pressable>
+  )
+}
 
 export function Toasts() {
   return (
     <View style={[a.gap_md]}>
-      <H1>Toasts</H1>
+      <H1>Toast Examples</H1>
 
-      <View style={[a.gap_sm]}>
+      <View style={[a.gap_md]}>
-        <Button
+        <View style={[a.gap_xs]}>
-          variant="solid"
+          <ToastPreview message="Default Toast" type="default" />
-          color="primary"
+        </View>
-          size="small"
-          label="Show success toast"
-          onPress={() =>
-            Toast.show('Operation completed successfully!', 'success')
-          }>
-          <ButtonText>Success!</ButtonText>
-        </Button>
 
-        <Button
+        <View style={[a.gap_xs]}>
-          variant="solid"
+          <ToastPreview
-          color="negative"
+            message="Operation completed successfully!"
-          size="small"
+            type="success"
-          label="Show error toast"
+          />
-          onPress={() => Toast.show('Something went wrong!', 'error')}>
+        </View>
-          <ButtonText>Error</ButtonText>
-        </Button>
 
-        <Button
+        <View style={[a.gap_xs]}>
-          variant="solid"
+          <ToastPreview message="Something went wrong!" type="error" />
-          color="secondary"
+        </View>
-          size="small"
-          label="Show warning toast"
-          onPress={() => Toast.show('Please check your input', 'warning')}>
-          <ButtonText>Warning</ButtonText>
-        </Button>
 
-        <Button
+        <View style={[a.gap_xs]}>
-          variant="solid"
+          <ToastPreview message="Please check your input" type="warning" />
-          color="secondary"
+        </View>
-          size="small"
-          label="Show info toast"
-          onPress={() => Toast.show("Here's some helpful information", 'info')}>
-          <ButtonText>Info </ButtonText>
-        </Button>
 
-        <Button
+        <View style={[a.gap_xs]}>
-          variant="outline"
+          <ToastPreview message="Here's some helpful information" type="info" />
-          color="secondary"
+        </View>
-          size="small"
+
-          label="Show toast with long message"
+        <View style={[a.gap_xs]}>
-          onPress={() =>
+          <ToastPreview
-            Toast.show(
+            message="This is a longer message to test how the toast handles multiple lines of text content."
-              'This is a longer message to test how the toast handles multiple lines of text content.',
+            type="info"
-              'info',
+          />
-            )
+        </View>
-          }>
-          <ButtonText>Long Message </ButtonText>
-        </Button>
       </View>
     </View>
   )