Revert "completely rearchitect toasts"

This reverts commit 2e2fcaeeed.

src/view/com/util/Toast.tsx

@@ -1,7 +1,13 @@
 import {useEffect, useMemo, useRef, useState} from 'react'
 import {AccessibilityInfo, View} from 'react-native'
-import {Gesture, GestureDetector} from 'react-native-gesture-handler'
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+} from 'react-native-gesture-handler'
 import Animated, {
+  FadeInUp,
+  FadeOutUp,
   runOnJS,
   useAnimatedReaction,
   useAnimatedStyle,
@@ -9,13 +15,12 @@ import Animated, {
   withDecay,
   withSpring,
 } 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 EventEmitter from 'eventemitter3'
-import {nanoid} from 'nanoid/non-secure'
 
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {atoms as a, useTheme} from '#/alf'
@@ -23,37 +28,6 @@ import {Text} from '#/components/Typography'
 
 const TIMEOUT = 2e3
 
-type ToastProps = {
-  message: string
-  icon: FontAwesomeProps['icon']
-}
-
-const SHOW_TOAST = 'show-toast'
-
-const ToastEventEmitter = new EventEmitter<typeof SHOW_TOAST>()
-
-export function ToastContainer() {
-  const [toasts, setToasts] = useState<(ToastProps & {key: string})[]>([])
-
-  useEffect(() => {
-    const listener = ({message, icon}: ToastProps) => {
-      setToasts(prev => [...prev, {message, icon, key: nanoid()}])
-    }
-    ToastEventEmitter.on(SHOW_TOAST, listener)
-    return () => {
-      ToastEventEmitter.off(SHOW_TOAST, listener)
-    }
-  }, [])
-
-  return toasts.map(toast => (
-    <Toast
-      {...toast}
-      key={toast.key}
-      destroy={() => setToasts(prev => prev.filter(t => t !== toast))}
-    />
-  ))
-}
-
 export function show(
   message: string,
   icon: FontAwesomeProps['icon'] = 'check',
@@ -62,7 +36,9 @@ export function show(
     return
   }
   AccessibilityInfo.announceForAccessibility(message)
-  ToastEventEmitter.emit(SHOW_TOAST, {message, icon})
+  const item = new RootSiblings(
+    <Toast message={message} icon={icon} destroy={() => item.destroy()} />,
+  )
 }
 
 function Toast({
@@ -77,23 +53,19 @@ function Toast({
   const t = useTheme()
   const {top} = useSafeAreaInsets()
   const isPanning = useSharedValue(false)
-  const animationTranslateY = useSharedValue(-200)
   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 = () => {
-    'worklet'
-    animationTranslateY.set(
-      withSpring(
-        -200,
-        {
-          damping: 100,
-          stiffness: 800,
-          restDisplacementThreshold: 0.01,
-        },
-        () => runOnJS(destroy)(),
-      ),
-    )
+    setAlive(false)
+    setTimeout(() => {
+      destroy()
+    }, 1e3)
   }
 
   const destroyTimeoutRef = useRef<ReturnType<typeof setTimeout>>()
@@ -106,15 +78,8 @@ function Toast({
   })
 
   useEffect(() => {
-    animationTranslateY.set(
-      withSpring(0, {
-        damping: 100,
-        stiffness: 800,
-        restDisplacementThreshold: 0.01,
-      }),
-    )
     hideAndDestroyAfterTimeout()
-  }, [hideAndDestroyAfterTimeout, animationTranslateY])
+  }, [hideAndDestroyAfterTimeout])
 
   const panGesture = useMemo(() => {
     return Gesture.Pan()
@@ -123,15 +88,18 @@ function Toast({
       .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) {
@@ -147,15 +115,15 @@ function Toast({
           })
         } else {
           dismissSwipeTranslateY.value = withSpring(0, {
-            damping: 75,
-            stiffness: 1000,
-            restDisplacementThreshold: 0.01,
+            stiffness: 500,
+            damping: 50,
           })
         }
       })
   }, [
     dismissSwipeTranslateY,
     isPanning,
+    alive,
     hideAndDestroyAfterTimeout,
     pauseDestroy,
   ])
@@ -175,7 +143,7 @@ function Toast({
   )
 
   const animatedStyle = useAnimatedStyle(() => {
-    const translation = dismissSwipeTranslateY.get() + animationTranslateY.get()
+    const translation = dismissSwipeTranslateY.get()
     return {
       transform: [
         {
@@ -186,51 +154,62 @@ function Toast({
   })
 
   return (
-    <Animated.View
-      onLayout={evt => setCardHeight(evt.nativeEvent.layout.height)}
-      accessibilityRole="alert"
-      accessible={true}
-      accessibilityLabel={message}
-      accessibilityHint=""
-      onAccessibilityEscape={hideAndDestroyImmediately}
-      style={[
-        a.absolute,
-        {top: topOffset, left: 16, right: 16},
-        a.flex_1,
-        t.name === 'dark' ? t.atoms.bg_contrast_25 : t.atoms.bg,
-        a.shadow_lg,
-        t.atoms.border_contrast_medium,
-        a.rounded_sm,
-        a.border,
-        animatedStyle,
-      ]}>
-      <GestureDetector gesture={panGesture}>
-        <View style={[a.flex_1, a.px_md, a.py_lg, a.flex_row, a.gap_md]}>
-          <View
+    <GestureHandlerRootView
+      style={[a.absolute, {top: topOffset, left: 16, right: 16}]}
+      pointerEvents="box-none">
+      {alive && (
+        <Animated.View
+          entering={FadeInUp}
+          exiting={FadeOutUp}
+          style={[a.flex_1]}>
+          <Animated.View
+            onLayout={evt => setCardHeight(evt.nativeEvent.layout.height)}
+            accessibilityRole="alert"
+            accessible={true}
+            accessibilityLabel={message}
+            accessibilityHint=""
+            onAccessibilityEscape={hideAndDestroyImmediately}
             style={[
-              a.flex_shrink_0,
-              a.rounded_full,
-              {width: 32, height: 32},
-              a.align_center,
-              a.justify_center,
-              {
-                backgroundColor:
-                  t.name === 'dark' ? t.palette.black : t.palette.primary_50,
-              },
+              a.flex_1,
+              t.name === 'dark' ? t.atoms.bg_contrast_25 : t.atoms.bg,
+              a.shadow_lg,
+              t.atoms.border_contrast_medium,
+              a.rounded_sm,
+              a.border,
+              animatedStyle,
             ]}>
-            <FontAwesomeIcon
-              icon={icon}
-              size={16}
-              style={t.atoms.text_contrast_medium}
-            />
-          </View>
-          <View style={[a.h_full, a.justify_center, a.flex_1]}>
-            <Text style={a.text_md} emoji>
-              {message}
-            </Text>
-          </View>
-        </View>
-      </GestureDetector>
-    </Animated.View>
+            <GestureDetector gesture={panGesture}>
+              <View style={[a.flex_1, a.px_md, a.py_lg, a.flex_row, a.gap_md]}>
+                <View
+                  style={[
+                    a.flex_shrink_0,
+                    a.rounded_full,
+                    {width: 32, height: 32},
+                    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]}>
+                  <Text style={a.text_md} emoji>
+                    {message}
+                  </Text>
+                </View>
+              </View>
+            </GestureDetector>
+          </Animated.View>
+        </Animated.View>
+      )}
+    </GestureHandlerRootView>
   )
 }

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

@@ -9,6 +9,7 @@ import {
   type FontAwesomeIconStyle,
   type Props as FontAwesomeProps,
 } from '@fortawesome/react-native-fontawesome'
+import type React from 'react';
 
 const DURATION = 3500
 
@@ -25,7 +26,8 @@ let toastTimeout: NodeJS.Timeout | undefined
 
 // components
 // =
-export function ToastContainer() {
+type ToastContainerProps = {}
+export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
   const [activeToast, setActiveToast] = useState<ActiveToast | undefined>()
   useEffect(() => {
     globalSetActiveToast = (t: ActiveToast | undefined) => {