Merge pull request #8744 from internet-development/@APiligrim/update-toast

hot fix: imports for toast and alignment

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

@@ -1,10 +1,20 @@
-import {type Theme, select} from '#/alf'
-import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo'
-import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
+import {select, type Theme} from '#/alf'
 import {Check_Stroke2_Corner0_Rounded as SuccessIcon} from '#/components/icons/Check'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
+import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo'
+import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
 
-export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info'
+export type ToastType =
+  | 'default'
+  | 'success'
+  | 'error'
+  | 'warning'
+  | 'info'
+  | 'xmark'
+  | 'exclamation-circle'
+  | 'check'
+  | 'clipboard-check'
+  | 'circle-exclamation'
 
 export const TOAST_ANIMATION_CONFIG = {
   duration: 300,

src/view/com/util/Toast.tsx

@@ -17,15 +17,16 @@ import Animated, {
 } 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, useTheme} from '#/alf'
-import {Text} from '#/components/Typography'
 import {
-  type ToastType,
-  TOAST_TYPE_TO_ICON,
   getToastTypeStyles,
   TOAST_ANIMATION_CONFIG,
-} from './Toast.style'
+  TOAST_TYPE_TO_ICON,
+  type ToastType,
+} from '#/view/com/util/Toast.style'
+import {atoms as a, useTheme} from '#/alf'
+import {Text} from '#/components/Typography'
 
 const TIMEOUT = 2e3
 
@@ -56,8 +57,9 @@ function Toast({
   const [cardHeight, setCardHeight] = useState(0)
 
   const toastStyles = getToastTypeStyles(t)
-  const colors = toastStyles[type]
-  const IconComponent = TOAST_TYPE_TO_ICON[type]
+  const colors = toastStyles[type as keyof typeof toastStyles]
+  const IconComponent =
+    TOAST_TYPE_TO_ICON[type as keyof typeof TOAST_TYPE_TO_ICON]
 
   // for the exit animation to work on iOS the animated component
   // must not be the root component

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

@@ -4,14 +4,15 @@
 
 import {useEffect, useState} from 'react'
 import {Pressable, StyleSheet, Text, View} from 'react-native'
-import {atoms as a, useTheme} from '#/alf'
+
 import {
-  type ToastType,
-  TOAST_TYPE_TO_ICON,
   getToastTypeStyles,
   getToastWebAnimationStyles,
+  TOAST_TYPE_TO_ICON,
   TOAST_WEB_KEYFRAMES,
-} from './Toast.style'
+  type ToastType,
+} from '#/view/com/util/Toast.style'
+import {atoms as a, useTheme} from '#/alf'
 
 const DURATION = 3500
 
@@ -62,11 +63,11 @@ export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
 
   const toastTypeStyles = getToastTypeStyles(t)
   const toastStyles = activeToast
-    ? toastTypeStyles[activeToast.type]
+    ? toastTypeStyles[activeToast.type as keyof typeof toastTypeStyles]
     : toastTypeStyles.default
 
   const IconComponent = activeToast
-    ? TOAST_TYPE_TO_ICON[activeToast.type]
+    ? TOAST_TYPE_TO_ICON[activeToast.type as keyof typeof TOAST_TYPE_TO_ICON]
     : TOAST_TYPE_TO_ICON.default
 
   const animationStyles = getToastWebAnimationStyles()
@@ -146,7 +147,7 @@ const styles = StyleSheet.create({
     maxWidth: 380,
     padding: 20,
     flexDirection: 'row',
-    alignItems: 'flex-start',
+    alignItems: 'center',
     borderRadius: 10,
     borderWidth: 1,
   },

src/view/screens/Storybook/Toasts.tsx

@@ -1,22 +1,24 @@
-import {View, Pressable} from 'react-native'
+import {Pressable, View} from 'react-native'
 
-import {atoms as a, useTheme} from '#/alf'
-import {Text, 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 {
+  getToastTypeStyles,
+  TOAST_TYPE_TO_ICON,
+  type ToastType,
+} from '#/view/com/util/Toast.style'
+import {atoms as a, useTheme} from '#/alf'
+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]
-  const IconComponent = TOAST_TYPE_TO_ICON[type]
+  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={() => Toast.show(message, type)}
       style={[
         {backgroundColor: colors.backgroundColor},