@expokit/cli 0.4.3 → 0.5.0

package/registry/toast/files/src/components/ui/toast.tsx

@@ -1,17 +1,24 @@
 import * as Haptics from 'expo-haptics';
 import React, { createContext, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from 'react';
-import {
-  AccessibilityInfo,
-  Animated,
+import { AccessibilityInfo, Pressable, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import { GestureDetector, GestureHandlerRootView, usePanGesture } from 'react-native-gesture-handler';
+import Animated, {
   Easing,
-  PanResponder,
-  Pressable,
-  StyleSheet,
-  Text,
-  View,
-  type StyleProp,
-  type ViewStyle,
-} from 'react-native';
+  Extrapolation,
+  ReduceMotion,
+  cancelAnimation,
+  interpolate,
+  useAnimatedProps,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withSequence,
+  withSpring,
+  withTiming,
+  type SharedValue,
+} from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
 import Svg, { Circle, Defs, Path, RadialGradient, Rect, Stop } from 'react-native-svg';
 
 import { alpha, motion, readableOn, useKit, type Colors } from '@/lib/kit';
@@ -27,15 +34,21 @@ export interface ToastAction {
 
 export interface ToastOptions {
   /** Reuse an id to update a toast in place (e.g. loading → success). */
-  id?: string;
-  description?: string;
+  id?: string | undefined;
+
+  description?: string | undefined;
+
   /** Milliseconds before it auto-dismisses. `Infinity` keeps it until dismissed. */
-  duration?: number;
-  action?: ToastAction;
+  duration?: number | undefined;
+
+  action?: ToastAction | undefined;
+
   /** Replace the type icon (or `false` for none). */
-  icon?: React.ReactNode | false;
+  icon?: React.ReactNode | false | undefined;
+
   /** Send to the `<Toaster id="…">` with this id. Toasts without one go to the Toaster without an id. */
-  toaster?: string;
+  toaster?: string | undefined;
+
 }
 
 export interface ToastData extends ToastOptions {
@@ -44,7 +57,8 @@ export interface ToastData extends ToastOptions {
   title: string;
   /** Bumped on every update, restarts the timer. */
   updatedAt: number;
-  dismissed?: boolean;
+  dismissed?: boolean | undefined;
+
 }
 
 type Message<T> = string | ((value: T) => string);
@@ -174,6 +188,11 @@ function useReduceMotion() {
   return reduce;
 }
 
+/** Toasts handle Reduce Motion themselves, so Reanimated must not also skip their animations. */
+const KEEP = ReduceMotion.Never;
+const SNAPPY = { ...motion.snappy, reduceMotion: KEEP };
+const BOUNCY = { ...motion.bouncy, reduceMotion: KEEP };
+
 const HAPTIC: Partial<Record<ToastType, Haptics.NotificationFeedbackType>> = {
   success: Haptics.NotificationFeedbackType.Success,
   warning: Haptics.NotificationFeedbackType.Warning,
@@ -182,7 +201,7 @@ const HAPTIC: Partial<Record<ToastType, Haptics.NotificationFeedbackType>> = {
 
 /** One notification tap when a toast appears or changes tone. After a spinner, it lands as the circle closes. */
 function useToneHaptic(id: string | undefined, type: ToastType | undefined, enabled: boolean) {
-  const prev = useRef<{ id?: string; type?: ToastType }>({});
+  const prev = useRef<{ id?: string | undefined; type?: ToastType | undefined }>({});
   useEffect(() => {
     const from = prev.current;
     prev.current = { id, type };
@@ -198,11 +217,11 @@ function useToneHaptic(id: string | undefined, type: ToastType | undefined, enab
 }
 
 /**
- * Auto-dismiss clock. Drives a native-driven 1 → 0 `life` value (the drain bar) and fires `onDone`.
+ * Auto-dismiss clock. Drives a UI-thread 1 → 0 `life` value (the drain bar) and fires `onDone`.
  * Both freeze while `paused` and resume where they stopped.
  */
 function useLifetime(key: number | undefined, duration: number, running: boolean, onDone: () => void) {
-  const life = useRef(new Animated.Value(1)).current;
+  const life = useSharedValue(1);
   const remaining = useRef(duration);
   const done = useRef(onDone);
   useEffect(() => {
@@ -210,24 +229,20 @@ function useLifetime(key: number | undefined, duration: number, running: boolean
   });
   useEffect(() => {
     remaining.current = duration;
-    life.setValue(1);
+    life.set(1);
   }, [key, duration, life]);
   useEffect(() => {
     if (!running || !Number.isFinite(duration) || duration <= 0) return;
     const startedAt = Date.now();
-    life.setValue(Math.max(0, remaining.current / duration));
-    Animated.timing(life, {
-      toValue: 0,
-      duration: Math.max(0, remaining.current),
-      easing: Easing.linear,
-      useNativeDriver: true,
-    }).start();
+    life.set(Math.max(0, remaining.current / duration));
+    // The drain is a clock, not decoration: it runs at full length even with Reduce Motion on.
+    life.set(withTiming(0, { duration: Math.max(0, remaining.current), easing: Easing.linear, reduceMotion: KEEP }));
     const timer = setTimeout(() => done.current(), Math.max(0, remaining.current));
     return () => {
       clearTimeout(timer);
-      life.stopAnimation();
+      cancelAnimation(life);
       remaining.current -= Date.now() - startedAt;
-      life.setValue(Math.max(0, remaining.current / duration));
+      life.set(Math.max(0, remaining.current / duration));
     };
   }, [key, duration, running, life]);
   return life;
@@ -240,33 +255,82 @@ export type ToasterVariant = 'default' | 'rich' | 'minimal' | 'island';
 
 export interface ToasterProps {
   /** Only show toasts sent with `{ toaster: id }`. */
-  id?: string;
+  id?: string | undefined;
+
   /** Edge the stack sits on. Ignored by `variant="island"`, which always lives at the top centre. */
-  position?: ToasterPosition;
+  position?: ToasterPosition | undefined;
+
   /**
    * 'default' cards with a tone glow · 'rich' cards filled with the tone · 'minimal' compact inverted pills
    * (a second line for the description when there is one) ·
    * 'island' a black capsule at the top centre that springs open like the iPhone Dynamic Island.
    */
-  variant?: ToasterVariant;
+  variant?: ToasterVariant | undefined;
+
   /** Default auto-dismiss time in ms (default 4000). */
-  duration?: number;
+  duration?: number | undefined;
+
   /** How many cards peek out of the stack (default 3). */
-  visibleToasts?: number;
+  visibleToasts?: number | undefined;
+
   /** Always show the stack fanned out instead of collapsed. */
-  expand?: boolean;
+  expand?: boolean | undefined;
+
+  /** Distance from the top / bottom edge (default 16, island 10), added to `safeArea` and `bottomInset`. */
+  offset?: number | undefined;
+
   /**
-   * Distance from the top / bottom edge (default 16, island 10). There is no safe-area dependency:
-   * pass `insets.top + 8` (react-native-safe-area-context) to sit the island below a notch.
+   * Keep clear of the notch / Dynamic Island and the home indicator: adds the safe-area insets from
+   * react-native-safe-area-context when the app has it (every Expo Router app does). Without it, insets are 0.
    */
-  offset?: number;
+  safeArea?: boolean | undefined;
+
+  /**
+   * Extra space below a bottom stack, for UI that covers the screen's foot — a tab bar, a composer.
+   * With a tab bar: `<Toaster safeArea bottomInset={49} />` (49 = the standard bar above the home indicator).
+   */
+  bottomInset?: number | undefined;
+
   /** Space between fanned-out cards (default 10). */
-  gap?: number;
+  gap?: number | undefined;
+
   /** Show a ✕ on every toast. */
-  closeButton?: boolean;
+  closeButton?: boolean | undefined;
+
   /** Success / warning / error toasts tap the matching notification haptic (default true). */
-  haptics?: boolean;
-  style?: StyleProp<ViewStyle>;
+  haptics?: boolean | undefined;
+
+  style?: StyleProp<ViewStyle> | undefined;
+
+}
+
+interface Insets {
+  top: number;
+  bottom: number;
+}
+
+const NO_INSETS: Insets = { top: 0, bottom: 0 };
+
+declare const require: (id: string) => unknown;
+
+/** react-native-safe-area-context when installed (Expo's Metro allows a missing optional require), else null. */
+const safeAreaLib = (() => {
+  try {
+    return require('react-native-safe-area-context') as {
+      SafeAreaInsetsContext?: React.Context<Insets | null>;
+      initialWindowMetrics?: { insets: Insets } | null;
+    };
+  } catch {
+    return null;
+  }
+})();
+const InsetsContext = safeAreaLib?.SafeAreaInsetsContext ?? createContext<Insets | null>(null);
+
+/** The screen's safe-area insets when `on` (from SafeAreaProvider, else the launch metrics), else 0. */
+function useSafeInsets(on: boolean): Insets {
+  const fromProvider = useContext(InsetsContext);
+  if (!on) return NO_INSETS;
+  return fromProvider ?? safeAreaLib?.initialWindowMetrics?.insets ?? NO_INSETS;
 }
 
 const PEEK = 12;
@@ -289,12 +353,15 @@ export function Toaster({
   visibleToasts = 3,
   expand = false,
   offset,
+  safeArea = false,
+  bottomInset = 0,
   gap = 10,
   closeButton = false,
   haptics = true,
   style,
 }: ToasterProps) {
   const store = useToastStore();
+  const insets = useSafeInsets(safeArea);
   const all = useSyncExternalStore(store.subscribe, store.snapshot, store.snapshot);
   // Inside ToastProvider, show the whole scoped stack (id filter is for the global store only).
   const mine = store === globalStore ? all.filter((t) => t.toaster === id) : all;
@@ -317,7 +384,7 @@ export function Toaster({
         store={store}
         toasts={mine}
         duration={duration}
-        offset={offset ?? 10}
+        offset={(offset ?? 10) + insets.top}
         haptics={haptics}
         reduceMotion={reduceMotion}
         style={style}
@@ -325,7 +392,8 @@ export function Toaster({
     );
   }
 
-  const frontH = heights[active[0]?.id] ?? GUESS_HEIGHT;
+  const frontId = active[0]?.id;
+  const frontH = (frontId === undefined ? undefined : heights[frontId]) ?? GUESS_HEIGHT;
   const layout: Record<string, StackLayout> = {};
   let acc = 0;
   active.forEach((t, i) => {
@@ -347,14 +415,14 @@ export function Toaster({
   });
 
   return (
-    <View pointerEvents="box-none" style={[StyleSheet.absoluteFill, styles.host, style]}>
+    <GestureHandlerRootView pointerEvents="box-none" style={[StyleSheet.absoluteFill, styles.host, style]}>
       {[...mine].reverse().map((t) => (
         <ToastItem
           key={t.id}
           data={t}
           layout={layout[t.id]}
           edge={position}
-          edgeOffset={offset ?? 16}
+          edgeOffset={(offset ?? 16) + (position === 'bottom' ? insets.bottom + bottomInset : insets.top)}
           variant={variant}
           duration={t.duration ?? (t.type === 'loading' ? Infinity : duration)}
           paused={expanded}
@@ -369,7 +437,7 @@ export function Toaster({
           }}
         />
       ))}
-    </View>
+    </GestureHandlerRootView>
   );
 }
 
@@ -379,14 +447,19 @@ interface StackLayout {
   y: number;
   scale: number;
   hidden: boolean;
-  clamp?: number;
+  clamp?: number | undefined;
+
   faded: boolean;
 }
 
+const sameLayout = (a: StackLayout, b: StackLayout) =>
+  a.y === b.y && a.scale === b.scale && a.hidden === b.hidden && a.clamp === b.clamp && a.faded === b.faded;
+
 interface ToastItemProps {
   data: ToastData;
   /** Undefined while the toast is leaving. */
-  layout?: StackLayout;
+  layout?: StackLayout | undefined;
+
   edge: ToasterPosition;
   edgeOffset: number;
   variant: Exclude<ToasterVariant, 'island'>;
@@ -401,6 +474,7 @@ interface ToastItemProps {
 }
 
 function rubber(d: number) {
+  'worklet';
   return (d * 40) / (40 + d);
 }
 
@@ -420,117 +494,113 @@ function ToastItem({
   onRemoved,
 }: ToastItemProps) {
   const toast = useToast();
-  const { colors, radius, dark, font } = useKit();
+  const { colors, radius, dark, font, labels } = useKit();
   const ff = font.family ? { fontFamily: font.family } : null;
   const toward = edge === 'bottom' ? 1 : -1; // swipe direction that dismisses toward the edge
-  const last = useRef(layout ?? { y: 0, scale: 1, hidden: false, faded: false });
-  if (layout) last.current = layout;
-  const L = last.current;
-
-  // Every value here is native-driven: they all end up in transform / opacity.
-  const enter = useRef(new Animated.Value(0)).current;
-  const y = useRef(new Animated.Value(L.y)).current;
-  const scale = useRef(new Animated.Value(L.scale)).current;
-  const vis = useRef(new Animated.Value(L.hidden ? 0 : 1)).current;
-  const content = useRef(new Animated.Value(L.faded ? 0 : 1)).current;
-  const dragX = useRef(new Animated.Value(0)).current;
-  const dragY = useRef(new Animated.Value(0)).current;
-  const [touching, setTouching] = useState(false);
-  const gone = useRef(false);
+  // The last layout the stack gave this toast: it keeps its place while it leaves (layout turns undefined).
+  const [lastLayout, setLastLayout] = useState<StackLayout>(layout ?? { y: 0, scale: 1, hidden: false, faded: false });
+  if (layout && !sameLayout(layout, lastLayout)) setLastLayout(layout);
+  const L = layout ?? lastLayout;
+
+  // Every value here lives on the UI thread and ends up in transform / opacity.
+  const enter = useSharedValue(0);
+  const y = useSharedValue(L.y);
+  const scale = useSharedValue(L.scale);
+  const vis = useSharedValue(L.hidden ? 0 : 1);
+  const content = useSharedValue(L.faded ? 0 : 1);
+  const dragX = useSharedValue(0);
+  const dragY = useSharedValue(0);
+  const axis = useSharedValue<'x' | 'y' | null>(null);
+  const gone = useSharedValue(false);
+  const [pressing, setPressing] = useState(false);
+  const [dragging, setDragging] = useState(false);
 
   useToneHaptic(data.id, data.type, haptics && !data.dismissed);
 
   useEffect(() => {
-    Animated.spring(enter, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
+    enter.set(withSpring(1, SNAPPY));
   }, [enter]);
 
   const target = layout ?? L;
   useEffect(() => {
     if (!layout || data.dismissed) return;
-    Animated.parallel([
-      Animated.spring(y, { toValue: target.y, useNativeDriver: true, ...motion.snappy }),
-      Animated.spring(scale, { toValue: target.scale, useNativeDriver: true, ...motion.snappy }),
-      Animated.timing(vis, { toValue: target.hidden ? 0 : 1, duration: 200, useNativeDriver: true }),
-      Animated.timing(content, { toValue: target.faded ? 0 : 1, duration: 200, useNativeDriver: true }),
-    ]).start();
+    y.set(withSpring(target.y, SNAPPY));
+    scale.set(withSpring(target.scale, SNAPPY));
+    vis.set(withTiming(target.hidden ? 0 : 1, { duration: 200, reduceMotion: KEEP }));
+    content.set(withTiming(target.faded ? 0 : 1, { duration: 200, reduceMotion: KEEP }));
     // eslint-disable-next-line react-hooks/exhaustive-deps -- re-run on the numbers, not the object identity
   }, [target.y, target.scale, target.hidden, target.faded, data.dismissed]);
 
   // Leave: fade + slide toward the edge, then drop out of the store.
   useEffect(() => {
-    if (!data.dismissed || gone.current) return;
-    gone.current = true;
-    Animated.timing(enter, { toValue: 0, duration: 200, easing: Easing.in(Easing.quad), useNativeDriver: true }).start(onRemoved);
+    if (!data.dismissed || gone.get()) return;
+    gone.set(true);
+    enter.set(
+      withTiming(0, { duration: 200, easing: Easing.in(Easing.quad), reduceMotion: KEEP }, () => {
+        scheduleOnRN(onRemoved);
+      }),
+    );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data.dismissed]);
 
   // Auto-dismiss timer + drain line; both pause while the stack is open or a finger is down.
-  const life = useLifetime(data.updatedAt, duration, !data.dismissed && !paused && !touching, () => toast.dismiss(data.id));
-
-  const flyOut = (axis: 'x' | 'y', to: number) => {
-    gone.current = true;
-    Animated.parallel([
-      Animated.timing(axis === 'x' ? dragX : dragY, {
-        toValue: to,
-        duration: 180,
-        easing: Easing.out(Easing.quad),
-        useNativeDriver: true,
+  const life = useLifetime(data.updatedAt, duration, !data.dismissed && !paused && !pressing && !dragging, () => toast.dismiss(data.id));
+
+  const flyOut = (along: 'x' | 'y', to: number) => {
+    'worklet';
+    gone.set(true);
+    (along === 'x' ? dragX : dragY).set(withTiming(to, { duration: 180, easing: Easing.out(Easing.quad), reduceMotion: KEEP }));
+    enter.set(
+      withTiming(0, { duration: 180, reduceMotion: KEEP }, () => {
+        scheduleOnRN(onRemoved);
       }),
-      Animated.timing(enter, { toValue: 0, duration: 180, useNativeDriver: true }),
-    ]).start(onRemoved);
+    );
   };
 
-  const pan = useRef(
-    (() => {
-      const gesture = { axis: null as 'x' | 'y' | null };
-      return PanResponder.create({
-        onMoveShouldSetPanResponder: (_, g) => Math.abs(g.dx) > 6 || Math.abs(g.dy) > 6,
-        onPanResponderGrant: () => {
-          gesture.axis = null;
-          setTouching(true);
-        },
-        onPanResponderMove: (_, g) => {
-          if (!gesture.axis) gesture.axis = Math.abs(g.dx) > Math.abs(g.dy) ? 'x' : 'y';
-          if (gesture.axis === 'x') dragX.setValue(g.dx);
-          else {
-            const d = g.dy * toward;
-            dragY.setValue(d >= 0 ? g.dy : -toward * rubber(-d));
-          }
-        },
-        onPanResponderRelease: (_, g) => {
-          setTouching(false);
-          const { axis } = gesture;
-          if (axis === 'x' && (Math.abs(g.dx) > 90 || Math.abs(g.vx) > 0.7)) return flyOut('x', Math.sign(g.dx || g.vx) * 520);
-          if (axis === 'y' && (g.dy * toward > 36 || g.vy * toward > 0.6)) return flyOut('y', toward * 140);
-          Animated.parallel([
-            Animated.spring(dragX, { toValue: 0, useNativeDriver: true, ...motion.snappy }),
-            Animated.spring(dragY, { toValue: 0, useNativeDriver: true, ...motion.snappy }),
-          ]).start();
-        },
-        onPanResponderTerminate: () => {
-          setTouching(false);
-          Animated.spring(dragX, { toValue: 0, ...motion.snappy, useNativeDriver: true }).start();
-          Animated.spring(dragY, { toValue: 0, ...motion.snappy, useNativeDriver: true }).start();
-        },
-      });
-    })(),
-  ).current;
+  // Swipe sideways, or toward the edge, to dismiss. Runs on the UI thread.
+  const pan = usePanGesture({
+    minDistance: 6,
+    onActivate: () => {
+      axis.set(null);
+      scheduleOnRN(setDragging, true);
+    },
+    onUpdate: (e) => {
+      if (!axis.get()) axis.set(Math.abs(e.translationX) > Math.abs(e.translationY) ? 'x' : 'y');
+      if (axis.get() === 'x') dragX.set(e.translationX);
+      else {
+        const d = e.translationY * toward;
+        dragY.set(d >= 0 ? e.translationY : -toward * rubber(-d));
+      }
+    },
+    onDeactivate: (e) => {
+      // Velocities arrive in points per second.
+      const { translationX: dx, translationY: dy, velocityX: vx, velocityY: vy } = e;
+      if (!e.canceled && axis.get() === 'x' && (Math.abs(dx) > 90 || Math.abs(vx) > 700)) return flyOut('x', Math.sign(dx || vx) * 520);
+      if (!e.canceled && axis.get() === 'y' && (dy * toward > 36 || vy * toward > 600)) return flyOut('y', toward * 140);
+      dragX.set(withSpring(0, SNAPPY));
+      dragY.set(withSpring(0, SNAPPY));
+    },
+    onFinalize: () => {
+      scheduleOnRN(setDragging, false);
+    },
+  });
+
+  const laneStyle = useAnimatedStyle(() => ({
+    opacity: enter.get() * vis.get() * interpolate(dragX.get(), [-260, 0, 260], [0, 1, 0], Extrapolation.CLAMP),
+    transform: [
+      { translateY: y.get() + dragY.get() + toward * 28 * (1 - enter.get()) },
+      { translateX: dragX.get() },
+      { scale: scale.get() * (0.96 + 0.04 * enter.get()) },
+    ],
+  }));
+  const contentStyle = useAnimatedStyle(() => ({ opacity: content.get() }));
+  const barStyle = useAnimatedStyle(() => ({ opacity: content.get(), transform: [{ scaleX: life.get() }] }));
 
   const look = theme(variant, data.type, colors, dark);
   const minimal = variant === 'minimal';
   // A one-line pill stays a capsule; with a description it becomes a soft rounded card.
   const r = minimal ? (data.description ? radius.scale(20) : radius.capsule(44)) : radius.lg;
 
-  const opacity = Animated.multiply(
-    Animated.multiply(enter, vis),
-    dragX.interpolate({ inputRange: [-260, 0, 260], outputRange: [0, 1, 0], extrapolate: 'clamp' }),
-  );
-  const translateY = Animated.add(
-    Animated.add(y, dragY),
-    enter.interpolate({ inputRange: [0, 1], outputRange: [toward * 28, 0] }),
-  );
-  const s = Animated.multiply(scale, enter.interpolate({ inputRange: [0, 1], outputRange: [0.96, 1] }));
-
   const typed = data.type !== 'default';
   const icon =
     data.icon === false ? null : (data.icon ??
@@ -544,88 +614,83 @@ function ToastItem({
       style={[
         styles.lane,
         edge === 'bottom' ? { bottom: edgeOffset } : { top: edgeOffset },
-        {
-          opacity,
-          transform: [{ translateY }, { translateX: dragX }, { scale: s }],
-          transformOrigin: edge === 'bottom' ? 'center top' : 'center bottom',
-        },
+        { transformOrigin: edge === 'bottom' ? 'center top' : 'center bottom' },
+        laneStyle,
       ]}
     >
       {/* Shadow layer (unclipped) */}
-      <View
-        {...pan.panHandlers}
-        style={[
-          minimal ? styles.cardMinimal : styles.cardFull,
-          { borderRadius: r, backgroundColor: look.bg, maxHeight: L.clamp, boxShadow: shadowFor(dark, minimal) },
-        ]}
-      >
-        {/* Surface (clips the glow and drain line to the corners) */}
-        <View style={[styles.clip, { borderRadius: r, borderColor: look.border, maxHeight: L.clamp }]}>
-          <Animated.View pointerEvents="none" style={[StyleSheet.absoluteFill, { opacity: content }]}>
-            {showGlow ? <Glow color={look.glowColor} strength={look.glow} x={32} y={32} /> : null}
-          </Animated.View>
-          <Pressable
-            onPress={onPress}
-            onPressIn={() => setTouching(true)}
-            onPressOut={() => setTouching(false)}
-            accessibilityRole="alert"
-            accessibilityLiveRegion="polite"
-            accessibilityLabel={[data.title, data.description].filter(Boolean).join('. ')}
-            onLayout={(e) => onHeight(Math.round(e.nativeEvent.layout.height))}
-          >
-            <Animated.View style={[styles.row, minimal ? styles.padMinimal : icon ? styles.padIcon : styles.pad, { opacity: content }]}>
-              {icon ? <View style={!minimal && data.description ? styles.iconTop : null}>{icon}</View> : null}
-              <View style={minimal ? styles.textMinimal : styles.text}>
-                <Text numberOfLines={minimal ? 1 : 3} style={[styles.title, ff, { color: look.title }]}>
-                  {data.title}
-                </Text>
-                {data.description ? (
-                  <Text numberOfLines={minimal ? 2 : 4} style={[styles.desc, minimal && styles.descMinimal, ff, { color: look.desc }]}>
-                    {data.description}
+      <GestureDetector gesture={pan}>
+        <View
+          style={[
+            minimal ? styles.cardMinimal : styles.cardFull,
+            { borderRadius: r, backgroundColor: look.bg, maxHeight: L.clamp, boxShadow: shadowFor(dark, minimal) },
+          ]}
+        >
+          {/* Surface (clips the glow and drain line to the corners) */}
+          <View style={[styles.clip, { borderRadius: r, borderColor: look.border, maxHeight: L.clamp }]}>
+            <Animated.View pointerEvents="none" style={[StyleSheet.absoluteFill, contentStyle]}>
+              {showGlow ? <Glow color={look.glowColor} strength={look.glow} x={32} y={32} /> : null}
+            </Animated.View>
+            <Pressable
+              onPress={onPress}
+              onPressIn={() => setPressing(true)}
+              onPressOut={() => setPressing(false)}
+              accessibilityRole="alert"
+              accessibilityLiveRegion="polite"
+              accessibilityLabel={[data.title, data.description].filter(Boolean).join('. ')}
+              onLayout={(e) => onHeight(Math.round(e.nativeEvent.layout.height))}
+            >
+              <Animated.View style={[styles.row, minimal ? styles.padMinimal : icon ? styles.padIcon : styles.pad, contentStyle]}>
+                {icon ? <View style={!minimal && data.description ? styles.iconTop : null}>{icon}</View> : null}
+                <View style={minimal ? styles.textMinimal : styles.text}>
+                  <Text numberOfLines={minimal ? 1 : 3} style={[styles.title, ff, { color: look.title }]}>
+                    {data.title}
                   </Text>
+                  {data.description ? (
+                    <Text numberOfLines={minimal ? 2 : 4} style={[styles.desc, minimal && styles.descMinimal, ff, { color: look.desc }]}>
+                      {data.description}
+                    </Text>
+                  ) : null}
+                </View>
+                {data.action ? (
+                  <Pressable
+                    accessibilityRole="button"
+                    hitSlop={8}
+                    onPress={() => {
+                      data.action?.onPress();
+                      toast.dismiss(data.id);
+                    }}
+                    style={({ pressed }) => [
+                      styles.action,
+                      { borderRadius: radius.capsule(32), backgroundColor: look.actionBg, opacity: pressed ? 0.7 : 1 },
+                    ]}
+                  >
+                    <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.actionText, ff, { color: look.actionFg }]}>
+                      {data.action.label}
+                    </Text>
+                  </Pressable>
                 ) : null}
-              </View>
-              {data.action ? (
-                <Pressable
-                  accessibilityRole="button"
-                  hitSlop={8}
-                  onPress={() => {
-                    data.action?.onPress();
-                    toast.dismiss(data.id);
-                  }}
-                  style={({ pressed }) => [
-                    styles.action,
-                    { borderRadius: radius.capsule(32), backgroundColor: look.actionBg, opacity: pressed ? 0.7 : 1 },
-                  ]}
-                >
-                  <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.actionText, ff, { color: look.actionFg }]}>
-                    {data.action.label}
-                  </Text>
-                </Pressable>
-              ) : null}
-              {closeButton ? (
-                <Pressable
-                  accessibilityRole="button"
-                  accessibilityLabel="Dismiss"
-                  hitSlop={12}
-                  onPress={() => toast.dismiss(data.id)}
-                  style={styles.close}
-                >
-                  <Svg width={14} height={14} viewBox="0 0 24 24">
-                    <Path d="M6 6l12 12M18 6L6 18" stroke={look.desc} strokeWidth={2.4} strokeLinecap="round" />
-                  </Svg>
-                </Pressable>
-              ) : null}
-            </Animated.View>
-          </Pressable>
-          {showBar ? (
-            <Animated.View
-              pointerEvents="none"
-              style={[styles.bar, { backgroundColor: look.bar, opacity: content, transform: [{ scaleX: life }] }]}
-            />
-          ) : null}
+                {closeButton ? (
+                  <Pressable
+                    accessibilityRole="button"
+                    accessibilityLabel={labels.dismiss}
+                    hitSlop={12}
+                    onPress={() => toast.dismiss(data.id)}
+                    style={styles.close}
+                  >
+                    <Svg width={14} height={14} viewBox="0 0 24 24">
+                      <Path d="M6 6l12 12M18 6L6 18" stroke={look.desc} strokeWidth={2.4} strokeLinecap="round" />
+                    </Svg>
+                  </Pressable>
+                ) : null}
+              </Animated.View>
+            </Pressable>
+            {showBar ? (
+              <Animated.View pointerEvents="none" style={[styles.bar, { backgroundColor: look.bar }, barStyle]} />
+            ) : null}
+          </View>
         </View>
-      </View>
+      </GestureDetector>
     </Animated.View>
   );
 }
@@ -643,18 +708,19 @@ interface IslandToasterProps {
   offset: number;
   haptics: boolean;
   reduceMotion: boolean;
-  style?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle> | undefined;
+
 }
 
 /**
  * Dynamic-Island host: one black capsule at the top centre. It widens, then grows taller into a card,
  * holds, and folds back into the capsule. A newer toast squashes the island and swaps its content in place.
  *
- * Drivers: `w` / `h` (size, corner) are JS-driven on `frame` + `clip`; presence, squash, drag and content
- * fade are native-driven on their own wrapper views.
+ * Everything animates on the UI thread: `w` / `h` (size, corner) on `frame` + `clip`; presence, squash,
+ * drag and content fade on their own wrapper views.
  */
 function IslandToaster({ store, toasts, duration, offset, haptics, reduceMotion, style }: IslandToasterProps) {
-  const { colors, radius, dark, font } = useKit();
+  const { colors, radius, dark, font, labels } = useKit();
   const ff = font.family ? { fontFamily: font.family } : null;
   const active = toasts.filter((t) => !t.dismissed);
   const front = active[0];
@@ -663,27 +729,25 @@ function IslandToaster({ store, toasts, duration, offset, haptics, reduceMotion,
   const stageRef = useRef<Stage>('hidden');
   const [shownId, setShownIdState] = useState<string | null>(null);
   const shownRef = useRef<string | null>(null);
-  const lastShown = useRef<ToastData | null>(null);
+  const [lastShown, setLastShown] = useState<ToastData | null>(null);
   const [laneW, setLaneW] = useState(0);
   const [contentH, setContentH] = useState(0);
   const [expanded, setExpanded] = useState(false);
-  const [touching, setTouching] = useState(false);
+  const [pressing, setPressing] = useState(false);
+  const [dragging, setDragging] = useState(false);
 
   const live = shownId ? toasts.find((t) => t.id === shownId) : undefined;
-  useEffect(() => {
-    if (live) lastShown.current = live;
-  });
-  const shown = live ?? (shownId ? lastShown.current : null);
-
-  // JS-driven (layout)
-  const w = useRef(new Animated.Value(CAP_W)).current;
-  const h = useRef(new Animated.Value(CAP_H)).current;
-  // Native-driven (transform / opacity)
-  const presence = useRef(new Animated.Value(0)).current;
-  const sqX = useRef(new Animated.Value(1)).current;
-  const sqY = useRef(new Animated.Value(1)).current;
-  const dragY = useRef(new Animated.Value(0)).current;
-  const content = useRef(new Animated.Value(0)).current;
+  // Keep showing the last version of a toast after the store drops it, while the island closes.
+  if (live && live !== lastShown) setLastShown(live);
+  const shown = live ?? (shownId ? lastShown : null);
+
+  const w = useSharedValue(CAP_W);
+  const h = useSharedValue(CAP_H);
+  const presence = useSharedValue(0);
+  const sqX = useSharedValue(1);
+  const sqY = useSharedValue(1);
+  const dragY = useSharedValue(0);
+  const content = useSharedValue(0);
 
   const timers = useRef<ReturnType<typeof setTimeout>[]>([]);
   const later = (ms: number, fn: () => void) => {
@@ -706,16 +770,17 @@ function IslandToaster({ store, toasts, duration, offset, haptics, reduceMotion,
 
   const squash = () => {
     if (reduceMotion) return;
-    Animated.sequence([
-      Animated.parallel([
-        Animated.timing(sqX, { toValue: 1.05, duration: 90, easing: Easing.out(Easing.quad), useNativeDriver: true }),
-        Animated.timing(sqY, { toValue: 0.9, duration: 90, easing: Easing.out(Easing.quad), useNativeDriver: true }),
-      ]),
-      Animated.parallel([
-        Animated.spring(sqX, { toValue: 1, useNativeDriver: true, ...motion.bouncy }),
-        Animated.spring(sqY, { toValue: 1, useNativeDriver: true, ...motion.bouncy }),
-      ]),
-    ]).start();
+    const press = { duration: 90, easing: Easing.out(Easing.quad), reduceMotion: KEEP };
+    sqX.set(withSequence(withTiming(1.05, press), withSpring(1, BOUNCY)));
+    sqY.set(withSequence(withTiming(0.9, press), withSpring(1, BOUNCY)));
+  };
+
+  // Swap the island's content to another toast once the old content has faded out.
+  const swapTo = (id: string) => {
+    setShown(id);
+    setExpanded(false);
+    squash();
+    content.set(withDelay(30, withTiming(1, { duration: 200, reduceMotion: KEEP })));
   };
 
   // Lifecycle: react to the front toast changing.
@@ -724,7 +789,7 @@ function IslandToaster({ store, toasts, duration, offset, haptics, reduceMotion,
     if (front) {
       if (!current || stageRef.current === 'hidden') {
         clearLater();
-        dragY.setValue(0);
+        dragY.set(0);
         setShown(front.id);
         setExpanded(false);
         setStage('capsule');
@@ -734,12 +799,12 @@ function IslandToaster({ store, toasts, duration, offset, haptics, reduceMotion,
         // Replace in place: older toasts are superseded.
         toasts.forEach((t) => t.id !== front.id && store.remove(t.id));
         if (stageRef.current === 'open') {
-          Animated.timing(content, { toValue: 0, duration: 90, useNativeDriver: true }).start(() => {
-            setShown(front.id);
-            setExpanded(false);
-            squash();
-            Animated.timing(content, { toValue: 1, duration: 200, delay: 30, useNativeDriver: true }).start();
-          });
+          const next = front.id;
+          content.set(
+            withTiming(0, { duration: 90, reduceMotion: KEEP }, () => {
+              scheduleOnRN(swapTo, next);
+            }),
+          );
         } else {
           setShown(front.id);
           setExpanded(false);
@@ -772,21 +837,23 @@ function IslandToaster({ store, toasts, duration, offset, haptics, reduceMotion,
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [shownType]);
 
-  // Declarative size / presence per stage.
+  // Declarative size / presence per stage: opening widens first, closing shortens first.
   const openW = laneW ? Math.min(laneW - 24, 380) : CAP_W;
   useEffect(() => {
     const isOpen = stage === 'open';
     const tw = isOpen ? openW : CAP_W;
     const th = isOpen ? Math.max(CAP_H, contentH || 64) : CAP_H;
-    const wA = Animated.spring(w, { toValue: tw, useNativeDriver: false, ...(isOpen ? motion.bouncy : motion.snappy) });
-    const hA = Animated.spring(h, { toValue: th, useNativeDriver: false, ...motion.snappy });
-    Animated.spring(presence, { toValue: stage === 'hidden' ? 0 : 1, useNativeDriver: true, ...motion.snappy }).start();
+    const wA = withSpring(tw, isOpen ? BOUNCY : SNAPPY);
+    const hA = withSpring(th, SNAPPY);
+    presence.set(withSpring(stage === 'hidden' ? 0 : 1, SNAPPY));
     if (isOpen) {
-      Animated.stagger(reduceMotion ? 0 : 90, [wA, hA]).start();
-      Animated.timing(content, { toValue: 1, duration: 220, delay: reduceMotion ? 0 : 160, useNativeDriver: true }).start();
+      w.set(wA);
+      h.set(withDelay(reduceMotion ? 0 : 90, hA));
+      content.set(withDelay(reduceMotion ? 0 : 160, withTiming(1, { duration: 220, reduceMotion: KEEP })));
     } else {
-      Animated.timing(content, { toValue: 0, duration: 110, useNativeDriver: true }).start();
-      Animated.stagger(reduceMotion ? 0 : 70, [hA, wA]).start();
+      content.set(withTiming(0, { duration: 110, reduceMotion: KEEP }));
+      h.set(hA);
+      w.set(withDelay(reduceMotion ? 0 : 70, wA));
     }
   }, [stage, openW, contentH, reduceMotion, w, h, presence, content]);
 
@@ -796,53 +863,75 @@ function IslandToaster({ store, toasts, duration, offset, haptics, reduceMotion,
   const life = useLifetime(
     shown ? shown.updatedAt : undefined,
     dur,
-    !!shown && !shown.dismissed && stage === 'open' && !touching && !expanded,
+    !!shown && !shown.dismissed && stage === 'open' && !pressing && !dragging && !expanded,
     () => shownRef.current && store.toast.dismiss(shownRef.current),
   );
 
-  // Swipe up to dismiss.
-  const pan = useRef(
-    PanResponder.create({
-      onMoveShouldSetPanResponder: (_, g) => Math.abs(g.dy) > 6 && Math.abs(g.dy) > Math.abs(g.dx),
-      onPanResponderGrant: () => setTouching(true),
-      onPanResponderMove: (_, g) => dragY.setValue(g.dy < 0 ? g.dy : rubber(g.dy)),
-      onPanResponderRelease: (_, g) => {
-        setTouching(false);
-        const id = shownRef.current;
-        if (id && (g.dy < -28 || g.vy < -0.5)) {
-          clearLater();
-          Animated.parallel([
-            Animated.timing(dragY, { toValue: -90, duration: 180, easing: Easing.out(Easing.quad), useNativeDriver: true }),
-            Animated.timing(presence, { toValue: 0, duration: 160, useNativeDriver: true }),
-            Animated.timing(content, { toValue: 0, duration: 100, useNativeDriver: true }),
-          ]).start(() => {
-            w.setValue(CAP_W);
-            h.setValue(CAP_H);
-            dragY.setValue(0);
-            setExpanded(false);
-            setStage('hidden');
-            setShown(null);
-            store.remove(id);
-          });
-          return;
-        }
-        Animated.spring(dragY, { toValue: 0, useNativeDriver: true, ...motion.snappy }).start();
-      },
-      onPanResponderTerminate: () => {
-        setTouching(false);
-        Animated.spring(dragY, { toValue: 0, useNativeDriver: true, ...motion.snappy }).start();
-      },
-    }),
-  ).current;
+  // After a flick: reset to a closed capsule and drop the toast.
+  const flicked = () => {
+    const id = shownRef.current;
+    w.set(CAP_W);
+    h.set(CAP_H);
+    dragY.set(0);
+    setExpanded(false);
+    setStage('hidden');
+    setShown(null);
+    if (id) store.remove(id);
+  };
+
+  // Swipe up to dismiss. The drag and the flick run on the UI thread.
+  const pan = usePanGesture({
+    activeOffsetY: [-6, 6],
+    failOffsetX: [-6, 6],
+    onActivate: () => {
+      scheduleOnRN(setDragging, true);
+    },
+    onUpdate: (e) => {
+      dragY.set(e.translationY < 0 ? e.translationY : rubber(e.translationY));
+    },
+    onDeactivate: (e) => {
+      if (!e.canceled && (e.translationY < -28 || e.velocityY < -500)) {
+        scheduleOnRN(clearLater);
+        dragY.set(
+          withTiming(-90, { duration: 180, easing: Easing.out(Easing.quad), reduceMotion: KEEP }, () => {
+            scheduleOnRN(flicked);
+          }),
+        );
+        presence.set(withTiming(0, { duration: 160, reduceMotion: KEEP }));
+        content.set(withTiming(0, { duration: 100, reduceMotion: KEEP }));
+        return;
+      }
+      dragY.set(withSpring(0, SNAPPY));
+    },
+    onFinalize: () => {
+      scheduleOnRN(setDragging, false);
+    },
+  });
 
   const bg = dark ? mix('#000000', colors.foreground, 0.05) : '#000000';
   const fg = readableOn(bg);
   const tone = !shown || shown.type === 'default' || shown.type === 'loading' ? mix(fg, bg, 0.25) : toneOf(shown.type, colors, true);
   const capR = radius.capsule(CAP_H);
   const cardR = Math.max(capR, radius.scale(30));
-  const corner = h.interpolate({ inputRange: [CAP_H, CAP_H + 28], outputRange: [capR, cardR], extrapolate: 'clamp' });
-  const left = Animated.multiply(Animated.subtract(w, openW), 0.5);
-  const pScale = presence.interpolate({ inputRange: [0, 1], outputRange: [0.5, 1] });
+
+  const outerStyle = useAnimatedStyle(() => {
+    const p = 0.5 + 0.5 * presence.get();
+    return {
+      opacity: presence.get(),
+      transform: [{ translateY: dragY.get() }, { scaleX: p * sqX.get() }, { scaleY: p * sqY.get() }],
+    };
+  });
+  const cornerStyle = useAnimatedStyle(() => ({
+    borderRadius: interpolate(h.get(), [CAP_H, CAP_H + 28], [capR, cardR], Extrapolation.CLAMP),
+  }));
+  const frameStyle = useAnimatedStyle(() => ({ width: w.get(), height: h.get() }));
+  const placeStyle = useAnimatedStyle(() => ({ left: (w.get() - openW) * 0.5 }));
+  const contentStyle = useAnimatedStyle(() => ({
+    opacity: content.get(),
+    transform: [{ scale: 0.92 + 0.08 * content.get() }],
+  }));
+  const fillStyle = useAnimatedStyle(() => ({ transform: [{ scaleX: life.get() }] }));
+
   const typed = !!shown && shown.type !== 'default';
   const icon =
     !shown || shown.icon === false
@@ -851,106 +940,94 @@ function IslandToaster({ store, toasts, duration, offset, haptics, reduceMotion,
   const showBar = Number.isFinite(dur);
 
   return (
-    <View pointerEvents="box-none" style={[StyleSheet.absoluteFill, styles.host, style]}>
+    <GestureHandlerRootView pointerEvents="box-none" style={[StyleSheet.absoluteFill, styles.host, style]}>
       <View
         pointerEvents="box-none"
         style={[styles.islandLane, { top: offset }]}
         onLayout={(e) => setLaneW(Math.round(e.nativeEvent.layout.width))}
       >
         {shown ? (
-          <Animated.View
-            {...pan.panHandlers}
-            style={{
-              opacity: presence,
-              transform: [{ translateY: dragY }, { scaleX: Animated.multiply(pScale, sqX) }, { scaleY: Animated.multiply(pScale, sqY) }],
-              transformOrigin: 'center top',
-            }}
-          >
-            <Animated.View
-              style={{
-                width: w,
-                height: h,
-                borderRadius: corner,
-                backgroundColor: bg,
-                boxShadow: dark
-                  ? '0 0 0 1px rgba(255,255,255,0.08), 0 10px 30px -6px rgba(0,0,0,0.6)'
-                  : '0 2px 6px rgba(0,0,0,0.12), 0 14px 36px -8px rgba(0,0,0,0.35)',
-              }}
-            >
-              <Animated.View style={[styles.islandClip, { borderRadius: corner }]}>
-                <Animated.View style={[styles.islandPlace, { width: openW, left }]}>
-                  <Animated.View
-                    style={{
-                      opacity: content,
-                      transform: [{ scale: content.interpolate({ inputRange: [0, 1], outputRange: [0.92, 1] }) }],
-                    }}
-                    onLayout={(e) => setContentH(Math.round(e.nativeEvent.layout.height))}
-                  >
-                    {typed && shown.icon !== false ? <Glow color={tone} strength={0.3} x={33} y={32} /> : null}
-                    <Pressable
-                      onPress={() => setExpanded((x) => !x)}
-                      onPressIn={() => setTouching(true)}
-                      onPressOut={() => setTouching(false)}
-                      accessibilityRole="alert"
-                      accessibilityLiveRegion="polite"
-                      accessibilityLabel={[shown.title, shown.description].filter(Boolean).join('. ')}
-                      accessibilityHint={shown.description || shown.action ? (expanded ? 'Collapses the notification' : 'Expands the notification') : undefined}
-                      accessibilityState={{ expanded }}
-                      style={[styles.row, icon ? styles.islandPadIcon : styles.islandPad]}
-                    >
-                      {icon ? <View style={expanded && shown.description ? styles.iconTop : null}>{icon}</View> : null}
-                      <View style={styles.text}>
-                        <Text numberOfLines={expanded ? 3 : 1} style={[styles.title, ff, { color: fg }]}>
-                          {shown.title}
-                        </Text>
-                        {shown.description ? (
-                          <Text numberOfLines={expanded ? undefined : 1} style={[styles.desc, ff, { color: alpha(fg, 0.62) }]}>
-                            {shown.description}
+          <GestureDetector gesture={pan}>
+            <Animated.View style={[{ transformOrigin: 'center top' }, outerStyle]}>
+              <Animated.View
+                style={[
+                  {
+                    backgroundColor: bg,
+                    boxShadow: dark
+                      ? '0 0 0 1px rgba(255,255,255,0.08), 0 10px 30px -6px rgba(0,0,0,0.6)'
+                      : '0 2px 6px rgba(0,0,0,0.12), 0 14px 36px -8px rgba(0,0,0,0.35)',
+                  },
+                  frameStyle,
+                  cornerStyle,
+                ]}
+              >
+                <Animated.View style={[styles.islandClip, cornerStyle]}>
+                  <Animated.View style={[styles.islandPlace, { width: openW }, placeStyle]}>
+                    <Animated.View style={contentStyle} onLayout={(e) => setContentH(Math.round(e.nativeEvent.layout.height))}>
+                      {typed && shown.icon !== false ? <Glow color={tone} strength={0.3} x={33} y={32} /> : null}
+                      <Pressable
+                        onPress={() => setExpanded((x) => !x)}
+                        onPressIn={() => setPressing(true)}
+                        onPressOut={() => setPressing(false)}
+                        accessibilityRole="alert"
+                        accessibilityLiveRegion="polite"
+                        accessibilityLabel={[shown.title, shown.description].filter(Boolean).join('. ')}
+                        accessibilityHint={shown.description || shown.action ? (expanded ? labels.collapseNotification : labels.expandNotification) : undefined}
+                        accessibilityState={{ expanded }}
+                        style={[styles.row, icon ? styles.islandPadIcon : styles.islandPad]}
+                      >
+                        {icon ? <View style={expanded && shown.description ? styles.iconTop : null}>{icon}</View> : null}
+                        <View style={styles.text}>
+                          <Text numberOfLines={expanded ? 3 : 1} style={[styles.title, ff, { color: fg }]}>
+                            {shown.title}
                           </Text>
+                          {shown.description ? (
+                            <Text numberOfLines={expanded ? undefined : 1} style={[styles.desc, ff, { color: alpha(fg, 0.62) }]}>
+                              {shown.description}
+                            </Text>
+                          ) : null}
+                        </View>
+                        {!expanded && shown.action ? (
+                          <View style={[styles.islandChip, { borderRadius: radius.capsule(24), backgroundColor: alpha(fg, 0.14) }]}>
+                            <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.islandChipText, ff, { color: fg }]}>
+                              {shown.action.label}
+                            </Text>
+                          </View>
                         ) : null}
-                      </View>
-                      {!expanded && shown.action ? (
-                        <View style={[styles.islandChip, { borderRadius: radius.capsule(24), backgroundColor: alpha(fg, 0.14) }]}>
-                          <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.islandChipText, ff, { color: fg }]}>
-                            {shown.action.label}
-                          </Text>
+                      </Pressable>
+                      {expanded && shown.action ? (
+                        <View style={styles.islandActions}>
+                          <Pressable
+                            accessibilityRole="button"
+                            onPress={() => {
+                              shown.action?.onPress();
+                              store.toast.dismiss(shown.id);
+                            }}
+                            style={({ pressed }) => [
+                              styles.islandAction,
+                              { borderRadius: radius.capsule(44), backgroundColor: alpha(fg, pressed ? 0.24 : 0.16) },
+                            ]}
+                          >
+                            <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.title, ff, { color: fg }]}>
+                              {shown.action.label}
+                            </Text>
+                          </Pressable>
                         </View>
                       ) : null}
-                    </Pressable>
-                    {expanded && shown.action ? (
-                      <View style={styles.islandActions}>
-                        <Pressable
-                          accessibilityRole="button"
-                          onPress={() => {
-                            shown.action?.onPress();
-                            store.toast.dismiss(shown.id);
-                          }}
-                          style={({ pressed }) => [
-                            styles.islandAction,
-                            { borderRadius: radius.capsule(44), backgroundColor: alpha(fg, pressed ? 0.24 : 0.16) },
-                          ]}
-                        >
-                          <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.title, ff, { color: fg }]}>
-                            {shown.action.label}
-                          </Text>
-                        </Pressable>
-                      </View>
-                    ) : null}
-                    {showBar ? (
-                      <View style={[styles.islandTrack, { backgroundColor: alpha(fg, 0.1) }]}>
-                        <Animated.View
-                          style={[styles.islandFill, { backgroundColor: typed ? tone : alpha(fg, 0.5), transform: [{ scaleX: life }] }]}
-                        />
-                      </View>
-                    ) : null}
+                      {showBar ? (
+                        <View style={[styles.islandTrack, { backgroundColor: alpha(fg, 0.1) }]}>
+                          <Animated.View style={[styles.islandFill, { backgroundColor: typed ? tone : alpha(fg, 0.5) }, fillStyle]} />
+                        </View>
+                      ) : null}
+                    </Animated.View>
                   </Animated.View>
                 </Animated.View>
               </Animated.View>
             </Animated.View>
-          </Animated.View>
+          </GestureDetector>
         ) : null}
       </View>
-    </View>
+    </GestureHandlerRootView>
   );
 }
 
@@ -973,7 +1050,7 @@ function toHex(v: number[]) {
 function mix(a: string, b: string, t: number) {
   if (!a.startsWith('#') || !b.startsWith('#')) return a;
   const [x, y] = [rgb(a), rgb(b)];
-  return toHex(x.map((v, i) => v + (y[i] - v) * t));
+  return toHex(x.map((v, i) => v + ((y[i] ?? v) - v) * t));
 }
 
 function toneOf(type: ToastType, c: Colors, dark: boolean) {
@@ -1087,6 +1164,28 @@ const ARC = 0.28; // spinner arc as a fraction of the ring
 
 const TRIANGLE_D = 'M10.3 4.2a2 2 0 0 1 3.4 0l7.1 12.6a2 2 0 0 1-1.7 3H4.9a2 2 0 0 1-1.7-3z';
 
+type IconStroke = {
+  stroke: string;
+  strokeWidth: number;
+  strokeLinecap: 'round';
+  strokeLinejoin: 'round';
+  fill: 'none';
+};
+
+/** A glyph stroke that draws itself in as `draw` runs from `from` to `to`. */
+function DrawPath({ d, len, draw, from = 0, to = 1, stroke }: { d: string; len: number; draw: SharedValue<number>; from?: number; to?: number; stroke: IconStroke }) {
+  const animatedProps = useAnimatedProps(() => ({
+    strokeDashoffset: interpolate(draw.get(), [from, to], [len, 0], Extrapolation.CLAMP),
+  }));
+  return <AnimatedPath d={d} {...stroke} strokeDasharray={[len, len]} animatedProps={animatedProps} />;
+}
+
+/** The dot of an ! or i, fading in near the end of the draw. */
+function DrawDot({ cy, color, draw }: { cy: number; color: string; draw: SharedValue<number> }) {
+  const animatedProps = useAnimatedProps(() => ({ opacity: interpolate(draw.get(), [0, 0.6, 1], [0, 0, 1]) }));
+  return <AnimatedCircle cx={12} cy={cy} r={1.25} fill={color} animatedProps={animatedProps} />;
+}
+
 /**
  * Tone icon that draws itself: the outline strokes in, then the glyph draws and springs. A loading
  * spinner's arc keeps turning while it closes into the success / error circle, then the mark draws in.
@@ -1099,121 +1198,100 @@ function LivingIcon({
 }: {
   type: ToastType;
   color: string;
-  halo?: boolean;
-  reduceMotion?: boolean;
+  halo?: boolean | undefined;
+
+  reduceMotion?: boolean | undefined;
+
 }) {
   const { radius } = useKit();
-  // JS-driven SVG props
-  const outline = useRef(new Animated.Value(0)).current;
-  const draw = useRef(new Animated.Value(0)).current;
-  // Native-driven transforms / opacity (separate views)
-  const pop = useRef(new Animated.Value(0.5)).current;
-  const spin = useRef(new Animated.Value(0)).current;
-  const ripple = useRef(new Animated.Value(1)).current;
-  const loopRef = useRef<Animated.CompositeAnimation | null>(null);
+  const outline = useSharedValue(0);
+  const draw = useSharedValue(0);
+  const pop = useSharedValue(0.5);
+  const spin = useSharedValue(0);
+  const spinning = useSharedValue(false);
+  const ripple = useSharedValue(1);
   const prev = useRef<ToastType | null>(null);
 
   useEffect(() => {
     const from = prev.current;
     prev.current = type;
     const stopSpin = () => {
-      loopRef.current?.stop();
-      loopRef.current = null;
+      'worklet';
+      cancelAnimation(spin);
+      spinning.set(false);
     };
 
     if (type === 'loading') {
-      if (!loopRef.current) {
-        spin.setValue(0);
-        loopRef.current = Animated.loop(
-          Animated.timing(spin, { toValue: 1, duration: 800, easing: Easing.linear, useNativeDriver: true }),
-        );
-        loopRef.current.start();
+      if (!spinning.get()) {
+        spinning.set(true);
+        spin.set(0);
+        spin.set(withRepeat(withTiming(1, { duration: 800, easing: Easing.linear, reduceMotion: KEEP }), -1, false));
       }
-      draw.setValue(0);
-      if (reduceMotion) outline.setValue(ARC);
-      else Animated.timing(outline, { toValue: ARC, duration: 300, easing: Easing.out(Easing.cubic), useNativeDriver: false }).start();
+      draw.set(0);
+      if (reduceMotion) outline.set(ARC);
+      else outline.set(withTiming(ARC, { duration: 300, easing: Easing.out(Easing.cubic), reduceMotion: KEEP }));
       return;
     }
 
     if (reduceMotion) {
       stopSpin();
-      outline.setValue(1);
-      draw.setValue(1);
-      pop.setValue(1);
+      outline.set(1);
+      draw.set(1);
+      pop.set(1);
       return;
     }
 
     const morph = from === 'loading';
-    if (!morph) outline.setValue(0);
-    draw.setValue(0);
-    pop.setValue(0.5);
+    if (!morph) outline.set(0);
+    draw.set(0);
+    pop.set(0.5);
     // The arc keeps spinning while it closes; a full ring looks the same at any angle, so it stops invisibly.
-    Animated.timing(outline, {
-      toValue: 1,
-      duration: morph ? 380 : 420,
-      easing: morph ? Easing.inOut(Easing.cubic) : Easing.out(Easing.cubic),
-      useNativeDriver: false,
-    }).start(({ finished }) => {
-      if (!finished) return;
-      stopSpin();
-      ripple.setValue(0);
-      Animated.parallel([
-        Animated.timing(draw, { toValue: 1, duration: 280, easing: Easing.out(Easing.cubic), useNativeDriver: false }),
-        Animated.spring(pop, { toValue: 1, useNativeDriver: true, ...motion.bouncy }),
-        Animated.timing(ripple, { toValue: 1, duration: 700, easing: Easing.out(Easing.quad), useNativeDriver: true }),
-      ]).start();
-    });
-  }, [type, reduceMotion, outline, draw, pop, spin, ripple]);
-
-  useEffect(() => () => loopRef.current?.stop(), []);
-
-  const stroke = { stroke: color, strokeWidth: 2.2, strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const, fill: 'none' };
-  const dash = (len: number, from = 0, to = 1) => ({
-    strokeDasharray: [len, len],
-    strokeDashoffset: draw.interpolate({ inputRange: [from, to], outputRange: [len, 0], extrapolate: 'clamp' }),
-  });
-  const dot = draw.interpolate({ inputRange: [0, 0.6, 1], outputRange: [0, 0, 1] });
+    outline.set(
+      withTiming(
+        1,
+        { duration: morph ? 380 : 420, easing: morph ? Easing.inOut(Easing.cubic) : Easing.out(Easing.cubic), reduceMotion: KEEP },
+        (finished) => {
+          if (!finished) return;
+          stopSpin();
+          ripple.set(0);
+          draw.set(withTiming(1, { duration: 280, easing: Easing.out(Easing.cubic), reduceMotion: KEEP }));
+          pop.set(withSpring(1, BOUNCY));
+          ripple.set(withTiming(1, { duration: 700, easing: Easing.out(Easing.quad), reduceMotion: KEEP }));
+        },
+      ),
+    );
+  }, [type, reduceMotion, outline, draw, pop, spin, spinning, ripple]);
+
+  useEffect(() => () => cancelAnimation(spin), [spin]);
+
+  const stroke: IconStroke = { stroke: color, strokeWidth: 2.2, strokeLinecap: 'round', strokeLinejoin: 'round', fill: 'none' };
   const triangle = type === 'warning';
   const per = triangle ? TRIANGLE : RING;
   const box = halo ? HALO_OUT : ICON;
   const inset = (box - ICON) / 2;
   const circle = (d: number) => ({ width: d, height: d, borderRadius: radius.full, left: (box - d) / 2, top: (box - d) / 2 });
 
+  const outlineProps = useAnimatedProps(() => ({ strokeDashoffset: per * (1 - outline.get()) }));
+  const rippleStyle = useAnimatedStyle(() => ({
+    opacity: 0.9 * (1 - ripple.get()),
+    transform: [{ scale: 0.8 + 0.75 * ripple.get() }],
+  }));
+  const spinStyle = useAnimatedStyle(() => ({ transform: [{ rotate: `${spin.get() * 360}deg` }] }));
+  const popStyle = useAnimatedStyle(() => ({ transform: [{ scale: pop.get() }] }));
+
   return (
     <View style={{ width: box, height: box }} importantForAccessibility="no-hide-descendants">
       {halo ? (
         <>
           <View style={[styles.abs, circle(HALO_OUT), { backgroundColor: alpha(color, 0.08) }]} />
           <View style={[styles.abs, circle(HALO), { backgroundColor: alpha(color, 0.14) }]} />
-          <Animated.View
-            style={[
-              styles.abs,
-              circle(HALO_OUT),
-              {
-                borderWidth: 1.5,
-                borderColor: alpha(color, 0.35),
-                opacity: ripple.interpolate({ inputRange: [0, 1], outputRange: [0.9, 0] }),
-                transform: [{ scale: ripple.interpolate({ inputRange: [0, 1], outputRange: [0.8, 1.55] }) }],
-              },
-            ]}
-          />
+          <Animated.View style={[styles.abs, circle(HALO_OUT), { borderWidth: 1.5, borderColor: alpha(color, 0.35) }, rippleStyle]} />
         </>
       ) : null}
-      <Animated.View
-        style={[
-          styles.abs,
-          { left: inset, top: inset },
-          { transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] }) }] },
-        ]}
-      >
+      <Animated.View style={[styles.abs, { left: inset, top: inset }, spinStyle]}>
         <Svg width={ICON} height={ICON} viewBox="0 0 24 24">
           {triangle ? (
-            <AnimatedPath
-              d={TRIANGLE_D}
-              {...stroke}
-              strokeDasharray={[per, per]}
-              strokeDashoffset={outline.interpolate({ inputRange: [0, 1], outputRange: [per, 0] })}
-            />
+            <AnimatedPath d={TRIANGLE_D} {...stroke} strokeDasharray={[per, per]} animatedProps={outlineProps} />
           ) : (
             <>
               {type === 'loading' ? <Circle cx={12} cy={12} r={9} {...stroke} stroke={alpha(color, 0.2)} /> : null}
@@ -1225,32 +1303,32 @@ function LivingIcon({
                 rotation={-90}
                 origin="12, 12"
                 strokeDasharray={[per, per]}
-                strokeDashoffset={outline.interpolate({ inputRange: [0, 1], outputRange: [per, 0] })}
+                animatedProps={outlineProps}
               />
             </>
           )}
         </Svg>
       </Animated.View>
       {type !== 'loading' ? (
-        <Animated.View style={[styles.abs, { left: inset, top: inset, transform: [{ scale: pop }] }]}>
+        <Animated.View style={[styles.abs, { left: inset, top: inset }, popStyle]}>
           <Svg width={ICON} height={ICON} viewBox="0 0 24 24">
-            {type === 'success' ? <AnimatedPath d="M8 12.4l2.7 2.7L16.2 9.4" {...stroke} {...dash(12)} /> : null}
+            {type === 'success' ? <DrawPath d="M8 12.4l2.7 2.7L16.2 9.4" len={12} draw={draw} stroke={stroke} /> : null}
             {type === 'error' ? (
               <>
-                <AnimatedPath d="M9.2 9.2l5.6 5.6" {...stroke} {...dash(8, 0, 0.55)} />
-                <AnimatedPath d="M14.8 9.2l-5.6 5.6" {...stroke} {...dash(8, 0.45, 1)} />
+                <DrawPath d="M9.2 9.2l5.6 5.6" len={8} to={0.55} draw={draw} stroke={stroke} />
+                <DrawPath d="M14.8 9.2l-5.6 5.6" len={8} from={0.45} draw={draw} stroke={stroke} />
               </>
             ) : null}
             {type === 'warning' ? (
               <>
-                <AnimatedPath d="M12 9.5v4" {...stroke} {...dash(4.2)} />
-                <AnimatedCircle cx={12} cy={16.6} r={1.25} fill={color} opacity={dot} />
+                <DrawPath d="M12 9.5v4" len={4.2} draw={draw} stroke={stroke} />
+                <DrawDot cy={16.6} color={color} draw={draw} />
               </>
             ) : null}
             {type === 'info' ? (
               <>
-                <AnimatedCircle cx={12} cy={7.9} r={1.25} fill={color} opacity={dot} />
-                <AnimatedPath d="M12 11v5" {...stroke} {...dash(5.2)} />
+                <DrawDot cy={7.9} color={color} draw={draw} />
+                <DrawPath d="M12 11v5" len={5.2} draw={draw} stroke={stroke} />
               </>
             ) : null}
           </Svg>
@@ -1277,7 +1355,7 @@ const styles = StyleSheet.create({
   desc: { fontSize: 13.5, fontWeight: '400', lineHeight: 19 },
   descMinimal: { fontSize: 13, lineHeight: 17 },
   action: { paddingHorizontal: 12, minHeight: 32, alignItems: 'center', justifyContent: 'center' },
-  actionText: { fontSize: 13, fontWeight: '400' },
+  actionText: { fontSize: 13, fontWeight: '400', includeFontPadding: false, textAlignVertical: 'center' },
   close: { alignSelf: 'flex-start', padding: 2, marginRight: -4 },
   bar: { position: 'absolute', left: 0, right: 0, bottom: 0, height: 2, transformOrigin: 'left' },
   abs: { position: 'absolute' },
@@ -1287,7 +1365,7 @@ const styles = StyleSheet.create({
   islandPad: { paddingVertical: 14, paddingHorizontal: 20 },
   islandPadIcon: { paddingTop: 13, paddingBottom: 15, paddingLeft: 14, paddingRight: 18 },
   islandChip: { paddingHorizontal: 10, minHeight: 24, justifyContent: 'center' },
-  islandChipText: { fontSize: 12.5, fontWeight: '400' },
+  islandChipText: { fontSize: 12.5, fontWeight: '400', includeFontPadding: false, textAlignVertical: 'center' },
   islandActions: { paddingHorizontal: 14, paddingBottom: 16, marginTop: -2 },
   islandAction: { minHeight: 44, alignItems: 'center', justifyContent: 'center' },
   islandTrack: { position: 'absolute', left: 28, right: 28, bottom: 6, height: 2, borderRadius: 1, overflow: 'hidden' },