@vvedantb/native-ui 0.13.0 → 0.17.0

package/src/primitives/pager-gesture.tsx

@@ -0,0 +1,131 @@
+import { useEffect, useRef, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, {
+  cancelAnimation,
+  ReduceMotion,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from "react-native-reanimated";
+import { selectionHaptic } from "../haptics";
+import { InsidePagerContext, type PagerProps } from "../Pager";
+import { PAGER_ACTIVE_OFFSET_X, PAGER_FAIL_OFFSET_Y, pagerPosition, pagerSettle, pagesBetween } from "../pagerSwipe";
+import { useWebClickGuard } from "./web-click-guard";
+
+// The pager on Gesture Handler: the track phase and the release run as
+// worklets on the UI thread, so the pages never lag the finger. The rules are
+// plain worklets in `pagerSwipe`.
+
+/** The release: springs on at the finger's speed, no bounce (an overshoot would flash the next page's edge). */
+const PAGER_SPRING = { duration: 250, dampingRatio: 1, reduceMotion: ReduceMotion.System } as const;
+
+/** A page set from outside (a tab press) slides there; at once with Reduce Motion. */
+const PAGER_SLIDE = { duration: 220, reduceMotion: ReduceMotion.System } as const;
+
+export function GesturePager({ index, count, onIndexChange, progress, renderPage }: PagerProps) {
+  const width = useSharedValue(0);
+  // Where the pages were when the finger caught them, and the finger's travel then.
+  const start = useSharedValue(0);
+  const startX = useSharedValue(0);
+  const [mounted, setMounted] = useState<ReadonlySet<number>>(() => new Set([index]));
+  const [shown, setShown] = useState(index);
+  // A page reached from outside is drawn from then on, with every page the
+  // slide there passes, so it never crosses a blank page.
+  if (shown !== index) {
+    setShown(index);
+    setMounted(new Set([...mounted, ...pagesBetween(shown, index)]));
+  }
+  // The page a swipe settled on, until the new `index` comes back: that one must not stop the spring.
+  const settling = useRef<number | null>(null);
+  // A page set from outside slides there. An effect: a shared value is never
+  // written in render.
+  useEffect(() => {
+    const fromSwipe = settling.current === index;
+    settling.current = null;
+    if (fromSwipe) return;
+    progress.set(withTiming(index, PAGER_SLIDE));
+  }, [index, progress]);
+
+  const webClicks = useWebClickGuard();
+  const dragStarted = () => {
+    webClicks.swallowNext();
+    // Both neighbours, so the finger finds a page there.
+    setMounted((current) => new Set([...current, index - 1, index + 1].filter((page) => page >= 0 && page < count)));
+  };
+  const settled = (page: number) => {
+    settling.current = page;
+    selectionHaptic();
+    onIndexChange(page);
+  };
+
+  // Built on each render (for `index` and `count`): the detector keeps the
+  // same handler, and a drag in flight, and only takes the new config.
+  const pan = Gesture.Pan()
+    .enabled(count > 1)
+    // Clearly sideways only: a vertical drag is the page's scroll, and a row swipe starts sooner.
+    .activeOffsetX([-PAGER_ACTIVE_OFFSET_X, PAGER_ACTIVE_OFFSET_X])
+    .failOffsetY([-PAGER_FAIL_OFFSET_Y, PAGER_FAIL_OFFSET_Y])
+    .onStart((event) => {
+      cancelAnimation(progress);
+      start.set(progress.get());
+      // Count from here, so the pages do not jump by the slop the drag needed to start.
+      startX.set(event.translationX);
+      runOnJS(dragStarted)();
+    })
+    // Track phase: one shared value write per frame, on the UI thread.
+    .onUpdate((event) => {
+      progress.set(pagerPosition(start.get(), event.translationX - startX.get(), width.get(), count));
+    })
+    .onEnd((event) => {
+      const pageWidth = width.get();
+      const target = pagerSettle(progress.get(), event.velocityX, pageWidth, Math.round(start.get()), count);
+      // The finger's speed in pages per second, the unit of `progress`.
+      const velocity = pageWidth > 0 ? -event.velocityX / pageWidth : 0;
+      progress.set(withSpring(target, { ...PAGER_SPRING, velocity }));
+      if (target !== index) runOnJS(settled)(target);
+    });
+
+  const trackStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: `${(-progress.get() * 100) / count}%` }],
+  }));
+  return (
+    <InsidePagerContext.Provider value>
+      <View style={styles.clip} onLayout={(event) => width.set(event.nativeEvent.layout.width)}>
+        <GestureDetector gesture={pan}>
+          <Animated.View style={[styles.fill, { width: `${count * 100}%` }, trackStyle]}>
+            <View ref={webClicks.ref} style={styles.track}>
+              {Array.from({ length: count }, (_, page) => (
+                <View
+                  key={page}
+                  // Off-screen pages are hidden from screen readers; the tabs above switch pages for them.
+                  accessibilityElementsHidden={page !== index}
+                  importantForAccessibility={page === index ? "auto" : "no-hide-descendants"}
+                  style={{ width: `${100 / count}%` }}
+                >
+                  {mounted.has(page) ? renderPage(page) : null}
+                </View>
+              ))}
+            </View>
+          </Animated.View>
+        </GestureDetector>
+      </View>
+    </InsidePagerContext.Provider>
+  );
+}
+
+const styles = StyleSheet.create({
+  clip: {
+    flex: 1,
+    overflow: "hidden",
+  },
+  fill: {
+    flex: 1,
+  },
+  track: {
+    flex: 1,
+    flexDirection: "row",
+  },
+});

package/src/primitives/sheet-drag.tsx

@@ -0,0 +1,305 @@
+import { createContext, useContext, useState, type ComponentType, type ReactNode } from "react";
+import {
+  PanResponder,
+  ScrollView,
+  View,
+  useWindowDimensions,
+  type LayoutChangeEvent,
+  type ScrollViewProps,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import Animated, {
+  cancelAnimation,
+  interpolate,
+  runOnJS,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  type SharedValue,
+} from "react-native-reanimated";
+import { impactHaptic } from "../haptics";
+import { SHEET_SNAP_SPRING, SHEET_SPRING } from "../motion";
+import { isSheetDragDown, SHEET_OVERPULL, sheetDragDismisses, sheetDragOffset, sheetSnapVelocity } from "../sheetDrag";
+
+/**
+ * The live state of one open overlay's motion, shared by the sheet (which
+ * moves), the backdrop (which fades with it) and a `DialogBody` / `SheetBody`
+ * inside (which reports its scroll, so a drag only takes over at the top).
+ * One `offset` drives the slide in, the drag, the release and the slide out,
+ * so each can take over from the others mid-flight. Shared values, so the
+ * motion runs on the UI thread and a drag re-renders nothing per move.
+ * `dragging` is for the `PanResponder` drag only; the Gesture Handler drag
+ * (`SheetGestureParts`) holds the body still on the UI thread instead.
+ */
+export type SheetDragState = {
+  /** How far down the sheet sits from rest. */
+  offset: SharedValue<number>;
+  /** The sheet's height, from its layout; 0 until it is laid out. */
+  height: SharedValue<number>;
+  /** The scroll offset of the body inside, 0 at the top. */
+  scrollTop: SharedValue<number>;
+  /** Set once a release flung the sheet out: the overlay then closes. */
+  dismissed: SharedValue<boolean>;
+  /** Set while the sheet slides out after the overlay closed: a touch no longer catches it. */
+  closing: SharedValue<boolean>;
+  /** The sheet slides in from below on its first layout (a bottom sheet, Reduce Motion off). */
+  slides: boolean;
+  /** While the sheet follows a `PanResponder` finger: the body inside stops scrolling, so the native scroll does not take the touch. */
+  dragging: boolean;
+  setDragging: (dragging: boolean) => void;
+};
+
+const SheetDragContext = createContext<SheetDragState | null>(null);
+
+/**
+ * Makes the motion state for one open overlay and closes it once a drag
+ * flung the sheet out. Call it inside the `Modal`, so each opening starts
+ * fresh: below the screen when `slides`, else at rest.
+ */
+export function useSheetDragState(close: () => void, slides: boolean): SheetDragState {
+  const window = useWindowDimensions();
+  const offset = useSharedValue(slides ? window.height : 0);
+  const height = useSharedValue(0);
+  const scrollTop = useSharedValue(0);
+  const dismissed = useSharedValue(false);
+  const closing = useSharedValue(false);
+  const [dragging, setDragging] = useState(false);
+  useAnimatedReaction(
+    () => dismissed.get(),
+    (done, previous) => {
+      if (done && !previous) runOnJS(close)();
+    },
+    [close],
+  );
+  return { offset, height, scrollTop, dismissed, closing, slides, dragging, setDragging };
+}
+
+export const SheetDragProvider = SheetDragContext.Provider;
+
+export type SheetDragViewProps = {
+  enabled: boolean;
+  style?: StyleProp<ViewStyle>;
+  children: ReactNode;
+};
+
+/**
+ * The Gesture Handler build of the sheet parts, from
+ * `@vvedantb/native-ui/gesture-handler`. Without it (the peer is optional)
+ * the sheets drag with `PanResponder`. A context, so only that entry imports
+ * `react-native-gesture-handler` and an app without it bundles as before.
+ */
+export type SheetGestureParts = {
+  /** Wraps each overlay's `Modal` content: on Android a `Modal` is its own root, and gestures need a root view there. */
+  ModalRoot: ComponentType<{ children: ReactNode }>;
+  DragView: ComponentType<SheetDragViewProps & { drag: SheetDragState }>;
+  ScrollView: ComponentType<ScrollViewProps & { drag: SheetDragState }>;
+};
+
+export const SheetGestureContext = createContext<SheetGestureParts | null>(null);
+
+/** The backdrop's opacity, from the sheet's offset: 1 at rest, 0 with the sheet out of sight. */
+export function useSheetBackdropStyle(drag: SheetDragState) {
+  return useAnimatedStyle(() => {
+    const height = drag.height.get();
+    // Not laid out yet: hidden while a sliding sheet waits below the screen.
+    if (height === 0) return { opacity: drag.offset.get() > 0 ? 0 : 1 };
+    return { opacity: interpolate(drag.offset.get(), [0, height], [1, 0], "clamp") };
+  });
+}
+
+/** Springs a sheet that is sliding out back to rest: the overlay opened again. */
+export function slideSheetIn(drag: SheetDragState) {
+  drag.closing.set(false);
+  if (drag.height.get() > 0) drag.offset.set(withSpring(0, SHEET_SPRING));
+}
+
+/** Slides the sheet down out of sight, then calls `done` (which hides the `Modal`). */
+export function slideSheetOut(drag: SheetDragState, done: () => void) {
+  drag.closing.set(true);
+  drag.offset.set(
+    withSpring(drag.height.get(), SHEET_SPRING, (finished) => {
+      "worklet";
+      if (finished) runOnJS(done)();
+    }),
+  );
+}
+
+/**
+ * A scroll view that hands a downward drag to the sheet around it: the drag
+ * moves the sheet only once the content is scrolled to its top, and the
+ * content holds still while the sheet follows the finger. With
+ * `react-native-gesture-handler` (`SheetGestureParts`) both run on the UI
+ * thread; with `PanResponder`, `onScroll` reports the offset and
+ * `scrollEnabled` is off during a drag, so the native scroll does not take
+ * the touch over (Android and iOS would cancel the drag). Outside a sheet, a
+ * plain `ScrollView`.
+ */
+export function SheetScrollView(props: ScrollViewProps) {
+  const drag = useContext(SheetDragContext);
+  const gestures = useContext(SheetGestureContext);
+  if (!drag) return <ScrollView {...props} />;
+  if (gestures) return <gestures.ScrollView {...props} drag={drag} />;
+  const { onScroll, scrollEnabled = true } = props;
+  return (
+    <ScrollView
+      {...props}
+      scrollEnabled={scrollEnabled && !drag.dragging}
+      onScroll={(event) => {
+        drag.scrollTop.set(event.nativeEvent.contentOffset.y);
+        onScroll?.(event);
+      }}
+    />
+  );
+}
+
+/**
+ * The part of a bottom sheet that follows the finger. A drag down from
+ * anywhere on it (rows included; a body only when scrolled to its top) moves
+ * the sheet 1:1 and fades the backdrop. A touch on a sheet still sliding in,
+ * springing home or flung out catches it where it is. On release the sheet
+ * springs on at the finger's speed: a quick flick or a drag past half the
+ * sheet carries it out and closes the overlay; a slow, short drag springs it
+ * home, with a light haptic. Pulled up past rest, it gives a little, with
+ * resistance. On its first layout it slides in from below when `slides`.
+ * With Reduce Motion on it still follows the finger, and the release settles
+ * at once. `enabled={false}` (a sheet that may not be dismissed) leaves it
+ * still under the finger. The drag runs on Gesture Handler when the app
+ * provides it (`SheetGestureParts`), else on `PanResponder`.
+ */
+export function SheetDragView({ enabled, style, children }: SheetDragViewProps) {
+  const drag = useContext(SheetDragContext);
+  const gestures = useContext(SheetGestureContext);
+  if (!drag) return <View style={style}>{children}</View>;
+  if (gestures) {
+    return (
+      <gestures.DragView drag={drag} enabled={enabled} style={style}>
+        {children}
+      </gestures.DragView>
+    );
+  }
+  return (
+    <PanResponderDragView drag={drag} enabled={enabled} style={style}>
+      {children}
+    </PanResponderDragView>
+  );
+}
+
+/**
+ * The view that moves: `translateY` from the sheet's offset, and the slide in
+ * from below on its first layout. Both drags wrap it.
+ */
+export function SheetMotionView({
+  drag,
+  style,
+  ...props
+}: ViewProps & { drag: SheetDragState }) {
+  const dragStyle = useAnimatedStyle(() => ({ transform: [{ translateY: drag.offset.get() }] }));
+  return (
+    <Animated.View
+      {...props}
+      onLayout={(event: LayoutChangeEvent) => {
+        const height = event.nativeEvent.layout.height;
+        const first = drag.height.get() === 0;
+        drag.height.set(height);
+        // Slide in: from just below the screen edge, whatever the sheet's height.
+        if (first && drag.slides) {
+          drag.offset.set(height);
+          drag.offset.set(withSpring(0, SHEET_SPRING));
+        }
+      }}
+      style={[style, dragStyle]}
+    />
+  );
+}
+
+/** The drag on the JavaScript thread, for an app without `react-native-gesture-handler`. */
+function PanResponderDragView({
+  drag,
+  enabled,
+  style,
+  children,
+}: SheetDragViewProps & { drag: SheetDragState }) {
+  // Created once: its handlers only touch shared values and `start`, so they never go stale.
+  const [responder] = useState(() => {
+    // Where the sheet was when the finger caught it.
+    let start = 0;
+    const release = (position: number, vy: number, mayDismiss: boolean) => {
+      drag.setDragging(false);
+      if (settleSheet(drag, position, vy, mayDismiss)) impactHaptic("light");
+    };
+    return PanResponder.create({
+      // A touch on a sheet in motion catches it: it stops under the finger.
+      onStartShouldSetPanResponderCapture: () => sheetCatches(drag),
+      // Capture, so a downward drag wins over the rows and over a body
+      // scrolled to its top. Only then: a body scrolled down keeps its
+      // scroll both ways, and an upward drag always scrolls it.
+      onMoveShouldSetPanResponderCapture: (_event, gesture) => sheetTakesDrag(drag, gesture.dx, gesture.dy),
+      onPanResponderTerminationRequest: () => false,
+      onPanResponderGrant: () => {
+        cancelAnimation(drag.offset);
+        start = drag.offset.get();
+        drag.setDragging(true);
+      },
+      // Track phase: one shared value write per move, no React render.
+      onPanResponderMove: (_event, gesture) => {
+        drag.offset.set(sheetDragOffset(start + gesture.dy));
+      },
+      onPanResponderRelease: (_event, gesture) => release(start + gesture.dy, gesture.vy, true),
+      onPanResponderTerminate: (_event, gesture) => release(start + gesture.dy, gesture.vy, false),
+    });
+  });
+  return (
+    <SheetMotionView drag={drag} {...(enabled ? responder.panHandlers : null)} style={style}>
+      {children}
+    </SheetMotionView>
+  );
+}
+
+/** The parts of the motion state a worklet may capture (no React setter). */
+export type SheetMotion = Pick<SheetDragState, "offset" | "height" | "scrollTop" | "dismissed" | "closing">;
+
+/** A touch on a sheet in motion (sliding in, springing home, flung out) catches it; one sliding out after a close does not. */
+export function sheetCatches(drag: SheetMotion): boolean {
+  "worklet";
+  return !drag.closing.get() && drag.offset.get() > 1;
+}
+
+/** A downward drag takes the sheet once the body inside is at its top. */
+export function sheetTakesDrag(drag: SheetMotion, dx: number, dy: number): boolean {
+  "worklet";
+  return !drag.closing.get() && isSheetDragDown(dx, dy) && drag.scrollTop.get() <= 0;
+}
+
+/**
+ * Release phase, at `position` below rest with velocity `vy` (pt/ms): the
+ * sheet springs on at the finger's speed, out (then the overlay closes) or
+ * home. `mayDismiss` is false when the system took the touch away. Returns
+ * true when it springs home from below rest: the caller fires the light
+ * haptic, in the same frame.
+ */
+export function settleSheet(drag: SheetMotion, position: number, vy: number, mayDismiss: boolean): boolean {
+  "worklet";
+  const height = drag.height.get();
+  const velocity = vy * 1000;
+  if (mayDismiss && sheetDragDismisses({ dy: position, vy, height })) {
+    drag.offset.set(
+      withSpring(height, { ...SHEET_SPRING, velocity }, (finished) => {
+        "worklet";
+        if (finished) drag.dismissed.set(true);
+      }),
+    );
+    return false;
+  }
+  drag.offset.set(
+    withSpring(0, {
+      ...SHEET_SNAP_SPRING,
+      velocity: sheetSnapVelocity(position, velocity),
+      // Bounce, but never so far up that the bottom edge lifts off the screen.
+      clamp: { min: -SHEET_OVERPULL },
+    }),
+  );
+  return position > 1;
+}

package/src/primitives/sheet-gesture.tsx

@@ -0,0 +1,181 @@
+import { createContext, useContext, useState, type ReactNode } from "react";
+import { StyleSheet, type ScrollViewProps } from "react-native";
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+  type NativeGesture,
+} from "react-native-gesture-handler";
+import Animated, {
+  cancelAnimation,
+  runOnJS,
+  scrollTo,
+  useAnimatedReaction,
+  useAnimatedRef,
+  useScrollOffset,
+  useSharedValue,
+  type SharedValue,
+} from "react-native-reanimated";
+import { impactHaptic } from "../haptics";
+import { SwipeRowGestureContext } from "../SwipeableRow";
+import { sheetDragAnchor, sheetDragOffset } from "../sheetDrag";
+import {
+  settleSheet,
+  sheetCatches,
+  sheetTakesDrag,
+  SheetMotionView,
+  type SheetDragState,
+  type SheetDragViewProps,
+  type SheetGestureParts,
+  type SheetMotion,
+  SheetGestureContext,
+} from "./sheet-drag";
+import { PagerGestureContext } from "../Pager";
+import { ToastDragContext } from "../toastDrag";
+import { GesturePager } from "./pager-gesture";
+import { GestureSwipeableRow } from "./swipe-row-gesture";
+import { GestureToastDrag } from "./toast-drag-gesture";
+
+// The sheet drag on Gesture Handler: the touch, the track phase and the
+// release all run as worklets on the UI thread, so a busy JavaScript thread
+// (a reply streaming in behind the sheet) cannot make the sheet lag the
+// finger. The rules are the same as the `PanResponder` drag's (`sheet-drag`).
+
+/** What a body inside the sheet needs from the drag around it. */
+type SheetScrollLink = {
+  /** The body's native scroll, run together with the sheet's pan. */
+  native: NativeGesture;
+  /** While the sheet follows the finger: the scroll offset the body holds; else `null`. */
+  heldTop: SharedValue<number | null>;
+};
+
+const SheetScrollLinkContext = createContext<SheetScrollLink | null>(null);
+
+function motionOf(drag: SheetDragState): SheetMotion {
+  return {
+    offset: drag.offset,
+    height: drag.height,
+    scrollTop: drag.scrollTop,
+    dismissed: drag.dismissed,
+    closing: drag.closing,
+  };
+}
+
+function GestureSheetDragView({ drag, enabled, style, children }: SheetDragViewProps & { drag: SheetDragState }) {
+  // Shared values only: the worklets must not capture the React setter in `drag`.
+  const motion = motionOf(drag);
+  const [native] = useState(() => Gesture.Native());
+  const heldTop = useSharedValue<number | null>(null);
+  // Where the finger touched down, and the body's scroll then.
+  const downX = useSharedValue(0);
+  const downY = useSharedValue(0);
+  const downTop = useSharedValue(0);
+  // Where the sheet was when the finger caught it, and the finger position
+  // its travel counts from (`sheetDragAnchor`). Window positions, as the
+  // sheet moves under the finger.
+  const start = useSharedValue(0);
+  const anchorY = useSharedValue(0);
+  // Built on each render (for `enabled`): the detector keeps the same handler,
+  // and a drag in flight, and only takes the new config.
+  const pan = Gesture.Pan()
+    .enabled(enabled)
+    // The same rules as the `PanResponder` capture: a touch on a sheet in
+    // motion catches it; a drag down takes it once the body is at its top.
+    .manualActivation(true)
+    .simultaneousWithExternalGesture(native)
+    .onTouchesDown((event, manager) => {
+      const touch = event.allTouches[0];
+      if (!touch) return;
+      downX.set(touch.absoluteX);
+      downY.set(touch.absoluteY);
+      downTop.set(motion.scrollTop.get());
+      if (sheetCatches(motion)) manager.activate();
+    })
+    .onTouchesMove((event, manager) => {
+      const touch = event.allTouches[0];
+      if (touch && sheetTakesDrag(motion, touch.absoluteX - downX.get(), touch.absoluteY - downY.get())) {
+        manager.activate();
+      }
+    })
+    .onStart(() => {
+      cancelAnimation(motion.offset);
+      start.set(motion.offset.get());
+      anchorY.set(sheetDragAnchor(downY.get(), downTop.get(), motion.scrollTop.get()));
+      heldTop.set(motion.scrollTop.get());
+    })
+    // Track phase: one shared value write per frame, on the UI thread.
+    .onUpdate((event) => {
+      motion.offset.set(sheetDragOffset(start.get() + event.absoluteY - anchorY.get()));
+    })
+    .onEnd((event, success) => {
+      const position = start.get() + event.absoluteY - anchorY.get();
+      // `velocityY` is pt/s; the rules take pt/ms, as `PanResponder`'s `vy`.
+      if (settleSheet(motion, position, event.velocityY / 1000, success)) runOnJS(impactHaptic)("light");
+    })
+    .onFinalize(() => {
+      heldTop.set(null);
+    });
+  return (
+    <SheetScrollLinkContext.Provider value={{ native, heldTop }}>
+      <GestureDetector gesture={pan}>
+        <SheetMotionView drag={drag} style={style}>
+          {children}
+        </SheetMotionView>
+      </GestureDetector>
+    </SheetScrollLinkContext.Provider>
+  );
+}
+
+function GestureSheetScrollView({ drag, ...props }: ScrollViewProps & { drag: SheetDragState }) {
+  const link = useContext(SheetScrollLinkContext);
+  const heldTop = link?.heldTop;
+  const ref = useAnimatedRef<Animated.ScrollView>();
+  // The offset on the UI thread, where the pan reads it: no `onScroll` to JavaScript.
+  useScrollOffset(ref, drag.scrollTop);
+  // While the sheet follows the finger, the content stays where it was, so
+  // the scroll (which runs together with the pan) does not move it too.
+  useAnimatedReaction(
+    () => drag.scrollTop.get(),
+    (top) => {
+      const held = heldTop?.get();
+      if (typeof held === "number" && top !== held) scrollTo(ref, 0, held, false);
+    },
+  );
+  const scroll = <Animated.ScrollView ref={ref} {...props} />;
+  return link ? <GestureDetector gesture={link.native}>{scroll}</GestureDetector> : scroll;
+}
+
+function GestureModalRoot({ children }: { children: ReactNode }) {
+  return <GestureHandlerRootView style={styles.fill}>{children}</GestureHandlerRootView>;
+}
+
+const PARTS: SheetGestureParts = {
+  ModalRoot: GestureModalRoot,
+  DragView: GestureSheetDragView,
+  ScrollView: GestureSheetScrollView,
+};
+
+/**
+ * Runs the kit's sheet drags (`SheetContent`, the compact `DialogContent`)
+ * on Gesture Handler instead of `PanResponder`, and turns on the swipes of
+ * `SwipeableRow`, `Pager` and the `Toaster` toasts (up to dismiss). Put it
+ * inside the app's `GestureHandlerRootView`; each overlay adds its own root
+ * view inside its `Modal`.
+ */
+export function GestureHandlerProvider({ children }: { children: ReactNode }) {
+  return (
+    <SheetGestureContext.Provider value={PARTS}>
+      <SwipeRowGestureContext.Provider value={GestureSwipeableRow}>
+        <PagerGestureContext.Provider value={GesturePager}>
+          <ToastDragContext.Provider value={GestureToastDrag}>{children}</ToastDragContext.Provider>
+        </PagerGestureContext.Provider>
+      </SwipeRowGestureContext.Provider>
+    </SheetGestureContext.Provider>
+  );
+}
+
+const styles = StyleSheet.create({
+  fill: {
+    flex: 1,
+  },
+});