completely rearchitect toasts

src/App.native.tsx

@@ -61,6 +61,7 @@ import {Provider as HiddenRepliesProvider} from '#/state/threadgate-hidden-repli
 import {Provider as TrendingConfigProvider} from '#/state/trending-config'
 import {TestCtrls} from '#/view/com/testing/TestCtrls'
 import {Provider as VideoVolumeProvider} from '#/view/com/util/post-embeds/VideoVolumeContext'
+import {ToastContainer} from '#/view/com/util/Toast'
 import * as Toast from '#/view/com/util/Toast'
 import {Shell} from '#/view/shell'
 import {ThemeProvider as Alf} from '#/alf'
@@ -157,6 +158,7 @@ function InnerApp() {
                                                     <TestCtrls />
                                                     <Shell />
                                                     <NuxDialogs />
+                                                    <ToastContainer />
                                                   </IntentDialogProvider>
                                                 </GestureHandlerRootView>
                                               </TrendingConfigProvider>

src/App.web.tsx

@@ -51,7 +51,7 @@ import {Provider as TrendingConfigProvider} from '#/state/trending-config'
 import {Provider as ActiveVideoProvider} from '#/view/com/util/post-embeds/ActiveVideoWebContext'
 import {Provider as VideoVolumeProvider} from '#/view/com/util/post-embeds/VideoVolumeContext'
 import * as Toast from '#/view/com/util/Toast'
-import {ToastContainer} from '#/view/com/util/Toast.web'
+import {ToastContainer} from '#/view/com/util/Toast'
 import {Shell} from '#/view/shell/index'
 import {ThemeProvider as Alf} from '#/alf'
 import {useColorModeTheme} from '#/alf/util/useColorModeTheme'

src/view/com/util/Toast.tsx

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

@@ -2,12 +2,12 @@
  * Note: the dataSet properties are used to leverage custom CSS in public/index.html
  */
 
-import React, {useEffect, useState} from 'react'
+import {useEffect, useState} from 'react'
 import {Pressable, StyleSheet, Text, View} from 'react-native'
 import {
   FontAwesomeIcon,
-  FontAwesomeIconStyle,
+  type FontAwesomeIconStyle,
-  Props as FontAwesomeProps,
+  type Props as FontAwesomeProps,
 } from '@fortawesome/react-native-fontawesome'
 
 const DURATION = 3500
@@ -25,8 +25,7 @@ let toastTimeout: NodeJS.Timeout | undefined
 
 // components
 // =
-type ToastContainerProps = {}
+export function ToastContainer() {
-export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
   const [activeToast, setActiveToast] = useState<ActiveToast | undefined>()
   useEffect(() => {
     globalSetActiveToast = (t: ActiveToast | undefined) => {