@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/primitives/swipe-row-gesture.jsx

@@ -0,0 +1,341 @@
+import { c as _c } from "react/compiler-runtime";
+import { useContext, useRef, useState } from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, { cancelAnimation, ReduceMotion, runOnJS, useAnimatedReaction, useAnimatedStyle, useSharedValue, withSpring, withTiming } from "react-native-reanimated";
+import { impactHaptic } from "../haptics";
+import { InsidePagerContext } from "../Pager";
+import { EASE_OUT } from "../motion";
+import { palette } from "../palette";
+import { closeSwipeRows, isSwipeRowOpen, markSwipeRowClosed, markSwipeRowOpen, SWIPE_ACTION_WIDTH, SWIPE_FAIL_OFFSET_Y, swipeRowActivation, swipeRowArmed, swipeRowOffset, swipeRowSettle } from "../swipeRow";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { useWebClickGuard } from "./web-click-guard";
+
+// The swipeable row on Gesture Handler: the track phase and the release run
+// as worklets on the UI thread, so the row never lags the finger. The rules
+// are plain worklets in `swipeRow`.
+
+/** The release: springs on at the finger's speed, no bounce (a row overshooting rest would flash the other side). */
+const ROW_SPRING = {
+  duration: 250,
+  dampingRatio: 1,
+  reduceMotion: ReduceMotion.System
+};
+
+/** The armed full swipe: the first action's icon grows a little, with the haptic, so the commit shows without it. */
+const ARMED_SCALE = 1.15;
+const ARMED_TIMING = {
+  duration: 150,
+  easing: EASE_OUT,
+  reduceMotion: ReduceMotion.System
+};
+const ICON_SIZE = 20;
+
+/** Each tone's fill and the icon colour on it. */
+const TONES = {
+  default: {
+    fill: palette.primary,
+    icon: palette.primaryForeground
+  },
+  warning: {
+    fill: palette.warning,
+    icon: palette.warningForeground
+  },
+  danger: {
+    fill: palette.danger,
+    icon: palette.dangerForeground
+  }
+};
+export function GestureSwipeableRow({
+  leadingActions = [],
+  trailingActions = [],
+  enabled = true,
+  backgroundColor,
+  children
+}) {
+  const scheme = useScheme();
+  const x = useSharedValue(0);
+  const width = useSharedValue(0);
+  // Where the row was when the finger caught it.
+  const start = useSharedValue(0);
+  const dragging = useSharedValue(false);
+  const armed = useSharedValue(null);
+  const armedScale = useSharedValue(1);
+  // Plain values for the worklets: they must not capture the actions' functions.
+  const leading = leadingActions.length * SWIPE_ACTION_WIDTH;
+  const trailing = trailingActions.length * SWIPE_ACTION_WIDTH;
+  const leadingExits = leadingActions[0]?.exits === true;
+  const trailingExits = trailingActions[0]?.exits === true;
+  const [handle] = useState(() => ({
+    close: () => x.set(withSpring(0, ROW_SPRING))
+  }));
+
+  // Whether this touch began while a row was open, so its release only closes that row. Nothing renders from it.
+  const closesOnRelease = useRef(false);
+  // The action strips mount on the row's first touch, not with the row: a
+  // list of a hundred rows then mounts no hidden buttons and icons up front.
+  // A touch lands a few frames before a swipe can move the row, so the strip
+  // is there before any of it shows.
+  const [revealed, setRevealed] = useState(false);
+  const reveal = () => setRevealed(true);
+  const webClicks = useWebClickGuard(isSwipeRowOpen);
+  const insidePager = useContext(InsidePagerContext);
+  const opened = () => {
+    closesOnRelease.current = false;
+    webClicks.swallowNext();
+    markSwipeRowOpen(handle);
+  };
+  const closed = () => markSwipeRowClosed(handle);
+  const firstOf = side => side === "leading" ? leadingActions[0] : trailingActions[0];
+  /** Runs an action once the row slid out: if it fails, the row comes back. */
+  const runExited = action => {
+    const result = action?.onPress();
+    if (result instanceof Promise) result.catch(() => x.set(withSpring(0, ROW_SPRING)));
+  };
+  // The worklets take sides, never the actions (their functions stay on the JavaScript thread).
+  const runFirstExited = side_0 => runExited(firstOf(side_0));
+  const runFirstInPlace = side_1 => void firstOf(side_1)?.onPress();
+  /** A tapped button: the row closes, or slides out for an action that exits, then the action runs. */
+  const press = (action_0, side_2) => {
+    closed();
+    if (!action_0.exits) {
+      x.set(withSpring(0, ROW_SPRING));
+      void action_0.onPress();
+      return;
+    }
+    const run = () => runExited(action_0);
+    x.set(withSpring(side_2 === "leading" ? width.get() : -width.get(), {
+      ...ROW_SPRING,
+      overshootClamping: true
+    }, finished => {
+      "worklet";
+
+      if (finished) runOnJS(run)();
+    }));
+  };
+
+  // The full swipe arms and disarms as the row crosses the point: the icon
+  // grows, and a light haptic fires as it arms under the finger.
+  useAnimatedReaction(() => swipeRowArmed(x.get(), {
+    leading,
+    trailing,
+    width: width.get()
+  }), (side_3, previous) => {
+    if (side_3 === previous) return;
+    armed.set(side_3);
+    armedScale.set(withTiming(side_3 ? ARMED_SCALE : 1, ARMED_TIMING));
+    if (side_3 && dragging.get()) runOnJS(impactHaptic)("light");
+  }, [leading, trailing]);
+
+  // Built on each render (for `enabled` and the actions): the detector keeps
+  // the same handler, and a drag in flight, and only takes the new config.
+  const activation = swipeRowActivation({
+    leading,
+    trailing
+  }, insidePager);
+  const pan = Gesture.Pan().enabled(enabled && leading + trailing > 0)
+  // Sideways intent first; a drag that goes vertical first is the list's scroll.
+  .activeOffsetX(activation.activeOffsetX).failOffsetY([-SWIPE_FAIL_OFFSET_Y, SWIPE_FAIL_OFFSET_Y]);
+  if (activation.failOffsetX !== undefined) pan.failOffsetX(activation.failOffsetX);
+  pan.onBegin(() => {
+    runOnJS(reveal)();
+  }).onStart(() => {
+    cancelAnimation(x);
+    start.set(x.get());
+    dragging.set(true);
+    runOnJS(opened)();
+  })
+  // Track phase: one shared value write per frame, on the UI thread.
+  .onUpdate(event => {
+    x.set(swipeRowOffset(start.get() + event.translationX, {
+      leading,
+      trailing,
+      width: width.get()
+    }));
+  }).onEnd((event_0, success) => {
+    dragging.set(false);
+    const rowWidth = width.get();
+    const settle = swipeRowSettle(x.get(), event_0.velocityX, {
+      leading,
+      trailing,
+      width: rowWidth
+    });
+    const velocity = event_0.velocityX;
+    if (success && settle.kind === "commit") {
+      // Armed by the fling rather than the position: the haptic fires now, with the commit.
+      if (armed.get() === null) runOnJS(impactHaptic)("light");
+      runOnJS(closed)();
+      const side_4 = settle.side;
+      if (side_4 === "leading" ? leadingExits : trailingExits) {
+        x.set(withSpring(side_4 === "leading" ? rowWidth : -rowWidth, {
+          ...ROW_SPRING,
+          velocity,
+          overshootClamping: true
+        }, finished_0 => {
+          "worklet";
+
+          if (finished_0) runOnJS(runFirstExited)(side_4);
+        }));
+      } else {
+        x.set(withSpring(0, {
+          ...ROW_SPRING,
+          velocity
+        }));
+        runOnJS(runFirstInPlace)(side_4);
+      }
+      return;
+    }
+    if (settle.kind === "open") {
+      x.set(withSpring(settle.side === "leading" ? leading : -trailing, {
+        ...ROW_SPRING,
+        velocity
+      }));
+      return;
+    }
+    x.set(withSpring(0, {
+      ...ROW_SPRING,
+      velocity
+    }));
+    runOnJS(closed)();
+  }).onFinalize(() => {
+    dragging.set(false);
+  });
+  const rowStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: x.get()
+    }]
+  }));
+  return <View onLayout={event_1 => width.set(event_1.nativeEvent.layout.width)} style={styles.clip}>
+      {revealed && leadingActions.length > 0 ? <ActionStrip side="leading" actions={leadingActions} x={x} armedScale={armedScale} onPress={press} /> : null}
+      {revealed && trailingActions.length > 0 ? <ActionStrip side="trailing" actions={trailingActions} x={x} armedScale={armedScale} onPress={press} /> : null}
+      <GestureDetector gesture={pan}>
+        <Animated.View style={[{
+        backgroundColor: backgroundColor ?? tokens.color.background[scheme]
+      }, rowStyle]}>
+          <View ref={webClicks.ref}
+        // While a row is open, a tap on any row only closes it: the row
+        // takes the touch from the pressables inside.
+        onStartShouldSetResponderCapture={() => {
+          closesOnRelease.current = isSwipeRowOpen();
+          return closesOnRelease.current;
+        }} onResponderRelease={() => {
+          if (closesOnRelease.current) closeSwipeRows();
+        }}>
+            {children}
+          </View>
+        </Animated.View>
+      </GestureDetector>
+    </View>;
+}
+
+/**
+ * One side's actions behind the row, the first at the screen edge, on the
+ * first action's fill (which stretches with a full swipe). Shown only while
+ * the row moves toward that side. Hidden from screen readers: they reach the
+ * actions on the row itself (`swipeActionsAccessibility`).
+ */
+function ActionStrip(t0) {
+  const $ = _c(22);
+  const {
+    side,
+    actions,
+    x,
+    armedScale,
+    onPress
+  } = t0;
+  const scheme = useScheme();
+  const reveal = actions.length * SWIPE_ACTION_WIDTH;
+  const direction = side === "leading" ? 1 : -1;
+  const stripStyle = useAnimatedStyle(() => ({
+    opacity: x.get() * direction > 0 ? 1 : 0
+  }));
+  const firstIconStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: direction * Math.max(0, Math.abs(x.get()) - reveal)
+    }, {
+      scale: armedScale.get()
+    }]
+  }));
+  const t1 = side === "leading" ? "row" : "row-reverse";
+  let t2;
+  if ($[0] !== t1) {
+    t2 = {
+      flexDirection: t1
+    };
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const t3 = TONES[actions[0]?.tone ?? "default"].fill[scheme];
+  let t4;
+  if ($[2] !== t3) {
+    t4 = {
+      backgroundColor: t3
+    };
+    $[2] = t3;
+    $[3] = t4;
+  } else {
+    t4 = $[3];
+  }
+  let t5;
+  if ($[4] !== stripStyle || $[5] !== t2 || $[6] !== t4) {
+    t5 = [StyleSheet.absoluteFill, t2, t4, stripStyle];
+    $[4] = stripStyle;
+    $[5] = t2;
+    $[6] = t4;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] !== actions || $[9] !== firstIconStyle || $[10] !== onPress || $[11] !== scheme || $[12] !== side) {
+    let t7;
+    if ($[14] !== firstIconStyle || $[15] !== onPress || $[16] !== scheme || $[17] !== side) {
+      t7 = (action, index) => {
+        const tone = TONES[action.tone ?? "default"];
+        const Icon = action.icon;
+        return <Pressable key={action.key} accessibilityRole="button" accessibilityLabel={action.label} onPress={() => onPress(action, side)} style={[styles.action, {
+          backgroundColor: tone.fill[scheme]
+        }]}>{index === 0 ? <Animated.View style={firstIconStyle}><Icon size={ICON_SIZE} color={tone.icon[scheme]} /></Animated.View> : <Icon size={ICON_SIZE} color={tone.icon[scheme]} />}</Pressable>;
+      };
+      $[14] = firstIconStyle;
+      $[15] = onPress;
+      $[16] = scheme;
+      $[17] = side;
+      $[18] = t7;
+    } else {
+      t7 = $[18];
+    }
+    t6 = actions.map(t7);
+    $[8] = actions;
+    $[9] = firstIconStyle;
+    $[10] = onPress;
+    $[11] = scheme;
+    $[12] = side;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  let t7;
+  if ($[19] !== t5 || $[20] !== t6) {
+    t7 = <Animated.View aria-hidden={true} importantForAccessibility="no-hide-descendants" style={t5}>{t6}</Animated.View>;
+    $[19] = t5;
+    $[20] = t6;
+    $[21] = t7;
+  } else {
+    t7 = $[21];
+  }
+  return t7;
+}
+const styles = StyleSheet.create({
+  clip: {
+    overflow: "hidden"
+  },
+  action: {
+    width: SWIPE_ACTION_WIDTH,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});

package/dist/primitives/switch.jsx

@@ -0,0 +1,105 @@
+import { c as _c } from "react/compiler-runtime";
+import * as SwitchPrimitives from "@rn-primitives/switch";
+import * as React from "react";
+import { Platform } from "react-native";
+import { cn } from "../cn";
+const Switch = React.forwardRef((t0, ref) => {
+  const $ = _c(30);
+  let checked;
+  let className;
+  let disabled;
+  let props;
+  let style;
+  let thumbClassName;
+  let thumbStyle;
+  let trackStyle;
+  if ($[0] !== t0) {
+    ({
+      className,
+      thumbClassName,
+      trackStyle,
+      thumbStyle,
+      checked,
+      style,
+      disabled,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = checked;
+    $[2] = className;
+    $[3] = disabled;
+    $[4] = props;
+    $[5] = style;
+    $[6] = thumbClassName;
+    $[7] = thumbStyle;
+    $[8] = trackStyle;
+  } else {
+    checked = $[1];
+    className = $[2];
+    disabled = $[3];
+    props = $[4];
+    style = $[5];
+    thumbClassName = $[6];
+    thumbStyle = $[7];
+    trackStyle = $[8];
+  }
+  const isChecked = Boolean(checked);
+  let t1;
+  if ($[9] !== style || $[10] !== trackStyle) {
+    t1 = Platform.OS === "web" || typeof style === "function" ? trackStyle : [trackStyle, style];
+    $[9] = style;
+    $[10] = trackStyle;
+    $[11] = t1;
+  } else {
+    t1 = $[11];
+  }
+  const resolvedStyle = t1;
+  let t2;
+  if ($[12] !== className || $[13] !== disabled || $[14] !== isChecked) {
+    t2 = cn("h-[1.15rem] w-8 shrink-0 rounded-full border border-transparent", Platform.select({
+      web: "outline-none transition-all"
+    }), isChecked ? "bg-primary" : "bg-input dark:bg-input/80", disabled && "opacity-50", className);
+    $[12] = className;
+    $[13] = disabled;
+    $[14] = isChecked;
+    $[15] = t2;
+  } else {
+    t2 = $[15];
+  }
+  const t3 = isChecked ? "translate-x-3.5 dark:bg-primary-foreground" : "translate-x-0 dark:bg-foreground";
+  let t4;
+  if ($[16] !== t3 || $[17] !== thumbClassName) {
+    t4 = cn("h-4 w-4 rounded-full bg-background transition-transform", t3, thumbClassName);
+    $[16] = t3;
+    $[17] = thumbClassName;
+    $[18] = t4;
+  } else {
+    t4 = $[18];
+  }
+  let t5;
+  if ($[19] !== t4 || $[20] !== thumbStyle) {
+    t5 = <SwitchPrimitives.Thumb style={thumbStyle} className={t4} />;
+    $[19] = t4;
+    $[20] = thumbStyle;
+    $[21] = t5;
+  } else {
+    t5 = $[21];
+  }
+  let t6;
+  if ($[22] !== checked || $[23] !== disabled || $[24] !== props || $[25] !== ref || $[26] !== resolvedStyle || $[27] !== t2 || $[28] !== t5) {
+    t6 = <SwitchPrimitives.Root ref={ref} checked={checked} disabled={disabled} style={resolvedStyle} className={t2} {...props}>{t5}</SwitchPrimitives.Root>;
+    $[22] = checked;
+    $[23] = disabled;
+    $[24] = props;
+    $[25] = ref;
+    $[26] = resolvedStyle;
+    $[27] = t2;
+    $[28] = t5;
+    $[29] = t6;
+  } else {
+    t6 = $[29];
+  }
+  return t6;
+});
+Switch.displayName = "Switch";
+export { Switch };

package/dist/primitives/text.jsx

@@ -0,0 +1,145 @@
+import { c as _c } from "react/compiler-runtime";
+import * as Slot from "@rn-primitives/slot";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { Platform, Text as RNText } from "react-native";
+import { cn } from "../cn";
+import { typeStyle } from "../controlStyles";
+const textVariants = cva(cn("text-foreground text-base", Platform.select({
+  web: "select-text"
+})), {
+  variants: {
+    variant: {
+      default: "",
+      h1: cn("text-4xl font-instrument-sans-semibold tracking-tight", Platform.select({
+        web: "scroll-m-20"
+      })),
+      h2: cn("text-3xl font-instrument-sans-semibold tracking-tight border-border border-b pb-2", Platform.select({
+        web: "scroll-m-20"
+      })),
+      h3: cn("text-2xl font-instrument-sans-semibold tracking-tight", Platform.select({
+        web: "scroll-m-20"
+      })),
+      h4: cn("text-xl font-instrument-sans-semibold tracking-tight", Platform.select({
+        web: "scroll-m-20"
+      })),
+      p: "leading-7",
+      blockquote: "border-l-2 border-border pl-4 italic",
+      code: "bg-muted rounded px-[0.3rem] py-[0.2rem] text-sm font-instrument-sans-semibold",
+      lead: "text-xl text-muted-foreground",
+      large: "text-lg font-instrument-sans-semibold",
+      small: "text-sm font-instrument-sans-medium",
+      muted: "text-sm text-muted-foreground"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+const ROLE = {
+  h1: "heading",
+  h2: "heading",
+  h3: "heading",
+  h4: "heading",
+  blockquote: Platform.select({
+    web: "blockquote"
+  }),
+  code: Platform.select({
+    web: "code"
+  })
+};
+const ARIA_LEVEL = {
+  h1: "1",
+  h2: "2",
+  h3: "3",
+  h4: "4"
+};
+
+// The weight of each variant's `font-instrument-sans-*` class, set as a style
+// beside it (`typeStyle`): where an app maps every one of those classes to one
+// family, the class alone draws Regular. Headings are semibold, as the web
+// titles; `h1` was `font-extrabold` before 0.3.13.
+const WEIGHT = {
+  h1: typeStyle("semibold"),
+  h2: typeStyle("semibold"),
+  h3: typeStyle("semibold"),
+  h4: typeStyle("semibold"),
+  code: typeStyle("semibold"),
+  large: typeStyle("semibold"),
+  small: typeStyle("medium")
+};
+const TextClassContext = React.createContext(undefined);
+const Text = React.forwardRef((t0, ref) => {
+  const $ = _c(21);
+  let className;
+  let props;
+  let style;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      className,
+      asChild: t1,
+      variant: t2,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = style;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    className = $[1];
+    props = $[2];
+    style = $[3];
+    t1 = $[4];
+    t2 = $[5];
+  }
+  const asChild = t1 === undefined ? false : t1;
+  const variant = t2 === undefined ? "default" : t2;
+  const textClass = React.useContext(TextClassContext);
+  const Component = asChild ? Slot.Text : RNText;
+  const weight = variant ? WEIGHT[variant] : undefined;
+  let t3;
+  if ($[6] !== className || $[7] !== textClass || $[8] !== variant) {
+    t3 = cn(textVariants({
+      variant
+    }), textClass, className);
+    $[6] = className;
+    $[7] = textClass;
+    $[8] = variant;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  const t4 = variant ? ROLE[variant] : undefined;
+  const t5 = variant ? ARIA_LEVEL[variant] : undefined;
+  let t6;
+  if ($[10] !== style || $[11] !== weight) {
+    t6 = weight ? [weight, style] : style;
+    $[10] = style;
+    $[11] = weight;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] !== Component || $[14] !== props || $[15] !== ref || $[16] !== t3 || $[17] !== t4 || $[18] !== t5 || $[19] !== t6) {
+    t7 = <Component ref={ref} className={t3} role={t4} aria-level={t5} style={t6} {...props} />;
+    $[13] = Component;
+    $[14] = props;
+    $[15] = ref;
+    $[16] = t3;
+    $[17] = t4;
+    $[18] = t5;
+    $[19] = t6;
+    $[20] = t7;
+  } else {
+    t7 = $[20];
+  }
+  return t7;
+});
+Text.displayName = "Text";
+export { Text, TextClassContext };

package/dist/primitives/toast-drag-gesture.jsx

@@ -0,0 +1,94 @@
+import { View } from "react-native";
+import { Gesture, GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
+import Animated, { cancelAnimation, interpolate, ReduceMotion, runOnJS, useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated";
+import { impactHaptic } from "../haptics";
+import { TOAST_DRAG_ACTIVE_OFFSET_Y, toastDragDismisses, toastDragOffset } from "../toastDrag";
+import { useWebClickGuard } from "./web-click-guard";
+
+// The toast drag on Gesture Handler: the track phase and the release run as
+// worklets on the UI thread. The rules are plain worklets in `toastDrag`.
+
+/** Back home after a short drag: a little bounce, as the finger applied force. */
+const HOME_SPRING = {
+  duration: 250,
+  dampingRatio: 0.8,
+  reduceMotion: ReduceMotion.System
+};
+/** Away up the screen: no overshoot back into view. */
+const AWAY_SPRING = {
+  duration: 250,
+  dampingRatio: 1,
+  overshootClamping: true,
+  reduceMotion: ReduceMotion.System
+};
+export function GestureToastDrag({
+  onDismiss,
+  onHoldChange,
+  children
+}) {
+  const y = useSharedValue(0);
+  const height = useSharedValue(0);
+  // Where the toast was when the finger caught it, and the finger's travel then.
+  const start = useSharedValue(0);
+  const startY = useSharedValue(0);
+  const webClicks = useWebClickGuard();
+  const dismissed = () => {
+    impactHaptic("light");
+    onDismiss();
+  };
+
+  // Built on each render: the detector keeps the same handler, and a drag in flight.
+  const pan = Gesture.Pan().activeOffsetY([-TOAST_DRAG_ACTIVE_OFFSET_Y, TOAST_DRAG_ACTIVE_OFFSET_Y])
+  // The timer holds from the touch, a tap included (a tap closes the toast anyway).
+  .onBegin(() => {
+    runOnJS(onHoldChange)(true);
+  }).onStart(event => {
+    cancelAnimation(y);
+    start.set(y.get());
+    // Count from here, so the toast does not jump by the slop the drag needed to start.
+    startY.set(event.translationY);
+    runOnJS(webClicks.swallowNext)();
+  })
+  // Track phase: one shared value write per frame, on the UI thread.
+  .onUpdate(event_0 => {
+    y.set(toastDragOffset(start.get() + event_0.translationY - startY.get()));
+  }).onEnd(event_1 => {
+    const position = y.get();
+    if (toastDragDismisses(position, event_1.velocityY, height.get())) {
+      // Up past its own height, fading on the way (`toastStyle`), at the finger's speed.
+      y.set(withSpring(-height.get() * 1.5, {
+        ...AWAY_SPRING,
+        velocity: event_1.velocityY
+      }, finished => {
+        "worklet";
+
+        if (finished) runOnJS(dismissed)();
+      }));
+      return;
+    }
+    y.set(withSpring(0, {
+      ...HOME_SPRING,
+      velocity: event_1.velocityY
+    }));
+  }).onFinalize(() => {
+    runOnJS(onHoldChange)(false);
+  });
+
+  // Linked to the same value: the toast fades as it rises, gone one height up.
+  const toastStyle = useAnimatedStyle(() => ({
+    opacity: height.get() > 0 ? interpolate(y.get(), [-height.get(), 0], [0, 1], "clamp") : 1,
+    transform: [{
+      translateY: y.get()
+    }]
+  }));
+  return (
+    // Its own root: on iOS the toasts draw in a separate window (`FullWindowOverlay`).
+    <GestureHandlerRootView>
+      <GestureDetector gesture={pan}>
+        <Animated.View style={toastStyle} onLayout={event_2 => height.set(event_2.nativeEvent.layout.height)}>
+          <View ref={webClicks.ref}>{children}</View>
+        </Animated.View>
+      </GestureDetector>
+    </GestureHandlerRootView>
+  );
+}