Extract core component, use platform-specific wrappers

src/components/Toast/Toast.tsx

@@ -0,0 +1,78 @@
+import {createContext, useContext, useMemo} from 'react'
+import {View} from 'react-native'
+
+import {atoms as a, useTheme} from '#/alf'
+import {getToastTypeStyles, TOAST_TYPE_TO_ICON} from '#/components/Toast/style'
+import {type ToastType} from '#/components/Toast/types'
+import {Text} from '#/components/Typography'
+
+type ContextType = {
+  type: ToastType
+}
+
+const Context = createContext<ContextType>({
+  type: 'default',
+})
+
+export function Toast({
+  type,
+  content,
+}: {
+  type: ToastType
+  content: React.ReactNode
+}) {
+  const t = useTheme()
+  const toastTypeStyles = getToastTypeStyles(t)
+  const styles = toastTypeStyles[type]
+  const Icon = TOAST_TYPE_TO_ICON[type]
+
+  return (
+    <Context.Provider value={useMemo(() => ({type}), [type])}>
+      <View
+        style={[
+          a.py_lg,
+          a.pl_xl,
+          a.pr_2xl,
+          a.rounded_md,
+          a.border,
+          a.flex_row,
+          a.gap_sm,
+          t.atoms.shadow_sm,
+          {
+            backgroundColor: styles.backgroundColor,
+            borderColor: styles.borderColor,
+          },
+        ]}>
+        <Icon size="md" fill={styles.iconColor} />
+
+        <View style={[a.flex_1]}>
+          {typeof content === 'string' ? (
+            <ToastText>{content}</ToastText>
+          ) : (
+            content
+          )}
+        </View>
+      </View>
+    </Context.Provider>
+  )
+}
+
+export function ToastText({children}: {children: React.ReactNode}) {
+  const t = useTheme()
+  const toastTypeStyles = getToastTypeStyles(t)
+  const {type} = useContext(Context)
+  const styles = toastTypeStyles[type]
+  return (
+    <Text
+      style={[
+        a.text_md,
+        a.font_bold,
+        a.leading_snug,
+        {
+          color: styles.textColor,
+        },
+      ]}>
+      {children}
+    </Text>
+  )
+}

src/components/Toast/index.tsx

@@ -1,5 +1,5 @@
 import {useEffect, useMemo, useRef, useState} from 'react'
-import {AccessibilityInfo, View} from 'react-native'
+import {AccessibilityInfo} from 'react-native'
 import {
   Gesture,
   GestureDetector,
@@ -19,14 +19,10 @@ 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, useTheme} from '#/alf'
+import {atoms as a} from '#/alf'
-import {
+import {TOAST_ANIMATION_CONFIG} from '#/components/Toast/style'
-  getToastTypeStyles,
+import {Toast as BaseToast} from '#/components/Toast/Toast'
-  TOAST_ANIMATION_CONFIG,
-  TOAST_TYPE_TO_ICON,
-} from '#/components/Toast/style'
 import {type ToastType} from '#/components/Toast/types'
-import {Text} from '#/components/Typography'
 
 const TIMEOUT = 2e3
 
@@ -54,16 +50,11 @@ function Toast({
   type: ToastType
   destroy: () => void
 }) {
-  const t = useTheme()
   const {top} = useSafeAreaInsets()
   const isPanning = useSharedValue(false)
   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
@@ -175,43 +166,9 @@ function Toast({
           accessibilityLabel={message}
           accessibilityHint=""
           onAccessibilityEscape={hideAndDestroyImmediately}
-          style={[
+          style={[a.flex_1, animatedStyle]}>
-            a.flex_1,
-            {backgroundColor: colors.backgroundColor},
-            a.shadow_sm,
-            {borderColor: colors.borderColor, borderWidth: 1},
-            a.rounded_sm,
-            animatedStyle,
-          ]}>
           <GestureDetector gesture={panGesture}>
-            <View style={[a.flex_1, a.px_md, a.py_lg, a.flex_row, a.gap_md]}>
+            <BaseToast content={message} type={type} />
-              <View
-                style={[
-                  a.flex_shrink_0,
-                  a.rounded_full,
-                  {width: 32, height: 32},
-                  a.align_center,
-                  a.justify_center,
-                  {
-                    backgroundColor: colors.backgroundColor,
-                  },
-                ]}>
-                <IconComponent fill={colors.iconColor} size="sm" />
-              </View>
-              <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>
       )}

src/components/Toast/index.web.tsx

@@ -3,14 +3,13 @@
  */
 
 import {useEffect, useState} from 'react'
-import {Pressable, StyleSheet, Text, View} from 'react-native'
+import {Pressable, View} from 'react-native'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, web} from '#/alf'
-import {
+import {getToastWebAnimationStyles} from '#/components/Toast/style'
-  getToastTypeStyles,
+import {Toast} from '#/components/Toast/Toast'
-  getToastWebAnimationStyles,
-  TOAST_TYPE_TO_ICON,
-} from '#/components/Toast/style'
 import {type ToastType} from '#/components/Toast/types'
 
 const DURATION = 3500
@@ -20,16 +19,12 @@ interface ActiveToast {
   type: ToastType
 }
 type GlobalSetActiveToast = (_activeToast: ActiveToast | undefined) => void
-
-// globals
-// =
 let globalSetActiveToast: GlobalSetActiveToast | undefined
 let toastTimeout: NodeJS.Timeout | undefined
-
-// components
-// =
 type ToastContainerProps = {}
+
 export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
+  const {_} = useLingui()
   const [activeToast, setActiveToast] = useState<ActiveToast | undefined>()
   const [isExiting, setIsExiting] = useState(false)
 
@@ -48,17 +43,6 @@ export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
     }
   }, [activeToast])
 
-  const t = useTheme()
-
-  const toastTypeStyles = getToastTypeStyles(t)
-  const toastStyles = activeToast
-    ? toastTypeStyles[activeToast.type]
-    : toastTypeStyles.default
-
-  const IconComponent = activeToast
-    ? TOAST_TYPE_TO_ICON[activeToast.type]
-    : TOAST_TYPE_TO_ICON.default
-
   const animationStyles = getToastWebAnimationStyles()
 
   return (
@@ -66,44 +50,23 @@ export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
       {activeToast && (
         <View
           style={[
-            styles.container,
+            a.fixed,
             {
-              backgroundColor: toastStyles.backgroundColor,
+              left: a.px_xl.paddingLeft,
-              borderColor: toastStyles.borderColor,
+              bottom: a.px_xl.paddingLeft,
+              width: web(`calc(100% - ${a.px_xl.paddingLeft * 2})`),
+              maxWidth: 380,
               ...(isExiting
                 ? animationStyles.exiting
                 : animationStyles.entering),
             },
           ]}>
-          <View
+          <Toast content={activeToast.text} type={activeToast.type} />
-            style={[
-              styles.iconContainer,
-              {
-                backgroundColor: 'transparent',
-              },
-            ]}>
-            <IconComponent
-              fill={toastStyles.iconColor}
-              size="sm"
-              style={styles.icon}
-            />
-          </View>
-          <Text
-            style={[
-              styles.text,
-              a.text_sm,
-              a.font_bold,
-              {color: toastStyles.textColor},
-            ]}>
-            {activeToast.text}
-          </Text>
           <Pressable
-            style={styles.dismissBackdrop}
+            style={[a.absolute, a.inset_0]}
-            accessibilityLabel="Dismiss"
+            accessibilityLabel={_(msg`Dismiss toast`)}
             accessibilityHint=""
-            onPress={() => {
+            onPress={() => setActiveToast(undefined)}
-              setActiveToast(undefined)
-            }}
           />
         </View>
       )}
@@ -111,9 +74,6 @@ export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
   )
 }
 
-// methods
-// =
-
 export function show(text: string, type: ToastType = 'default') {
   if (toastTimeout) {
     clearTimeout(toastTimeout)
@@ -124,41 +84,3 @@ export function show(text: string, type: ToastType = 'default') {
     globalSetActiveToast?.(undefined)
   }, DURATION)
 }
-
-const styles = StyleSheet.create({
-  container: {
-    // @ts-ignore web only
-    position: 'fixed',
-    left: 20,
-    bottom: 20,
-    // @ts-ignore web only
-    width: 'calc(100% - 40px)',
-    maxWidth: 380,
-    padding: 20,
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderRadius: 10,
-    borderWidth: 1,
-  },
-  dismissBackdrop: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0,
-  },
-  iconContainer: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 0,
-  },
-  icon: {
-    flexShrink: 0,
-  },
-  text: {
-    marginLeft: 10,
-  },
-})

src/view/screens/Storybook/Toasts.tsx

@@ -1,64 +1,11 @@
 import {Pressable, View} from 'react-native'
 
 import {show as deprecatedShow} from '#/view/com/util/Toast'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {show} from '#/components/Toast'
-import {getToastTypeStyles, TOAST_TYPE_TO_ICON} from '#/components/Toast/style'
+import {Toast} from '#/components/Toast/Toast'
-import {type ToastType} from '#/components/Toast/types'
+import {H1} from '#/components/Typography'
-import {H1, Text} from '#/components/Typography'
-
-function ToastPreview({message, type}: {message: string; type: ToastType}) {
-  const t = useTheme()
-  const toastStyles = getToastTypeStyles(t)
-  const colors = toastStyles[type as keyof typeof toastStyles]
-  const IconComponent =
-    TOAST_TYPE_TO_ICON[type as keyof typeof TOAST_TYPE_TO_ICON]
-
-  return (
-    <Pressable
-      accessibilityRole="button"
-      onPress={() => 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 (
@@ -66,35 +13,44 @@ export function Toasts() {
       <H1>Toast Examples</H1>
 
       <View style={[a.gap_md]}>
-        <View style={[a.gap_xs]}>
+        <Pressable
-          <ToastPreview message="Default Toast" type="default" />
+          accessibilityRole="button"
-        </View>
+          onPress={() => show('Default toast', 'default')}>
-
+          <Toast content="Default toast" type="default" />
-        <View style={[a.gap_xs]}>
+        </Pressable>
-          <ToastPreview
+        <Pressable
-            message="Operation completed successfully!"
+          accessibilityRole="button"
-            type="success"
+          onPress={() =>
+            show(
+              'This is a longer message to test how the toast handles multiple lines of text content.',
+              'default',
+            )
+          }>
+          <Toast
+            content="This is a longer message to test how the toast handles multiple lines of text content."
+            type="default"
           />
-        </View>
+        </Pressable>
-
+        <Pressable
-        <View style={[a.gap_xs]}>
+          accessibilityRole="button"
-          <ToastPreview message="Something went wrong!" type="error" />
+          onPress={() => show('Success toast', 'success')}>
-        </View>
+          <Toast content="Success toast" type="success" />
-
+        </Pressable>
-        <View style={[a.gap_xs]}>
+        <Pressable
-          <ToastPreview message="Please check your input" type="warning" />
+          accessibilityRole="button"
-        </View>
+          onPress={() => show('Info toast', 'info')}>
-
+          <Toast content="Info" type="info" />
-        <View style={[a.gap_xs]}>
+        </Pressable>
-          <ToastPreview message="Here's some helpful information" type="info" />
+        <Pressable
-        </View>
+          accessibilityRole="button"
-
+          onPress={() => show('Warning toast', 'warning')}>
-        <View style={[a.gap_xs]}>
+          <Toast content="Warning" type="warning" />
-          <ToastPreview
+        </Pressable>
-            message="This is a longer message to test how the toast handles multiple lines of text content."
+        <Pressable
-            type="info"
+          accessibilityRole="button"
-          />
+          onPress={() => show('Error toast', 'error')}>
-        </View>
+          <Toast content="Error" type="error" />
+        </Pressable>
 
         <Button
           label="Deprecated toast example"

src/view/screens/Storybook/index.tsx

@@ -91,6 +91,8 @@ function StorybookInner() {
               </Button>
             </View>
 
+            <Toasts />
+
             <Button
               variant="solid"
               color="primary"
@@ -123,7 +125,6 @@ function StorybookInner() {
             <Breakpoints />
             <Dialogs />
             <Admonitions />
-            <Toasts />
             <Settings />
 
             <Button