panelui-native 0.51.1 → 0.54.0

package/src/components/sortable/index.tsx

@@ -76,6 +76,7 @@ import Animated, {
   scrollTo,
   useAnimatedRef,
   useAnimatedStyle,
+  useDerivedValue,
   useFrameCallback,
   useReducedMotion,
   useScrollViewOffset,
@@ -93,8 +94,14 @@ import { impactKnock, selectionTick } from '../../utils/haptics';
  * Rows getting out of the way of the one being carried. Quick, because they
  * are answering a finger that has already moved — a neighbour that ambles into
  * its new slot reads as the list struggling to keep up with the drag.
+ *
+ * Critically damped, and stiff. Both were wrong before: the spring overshot its
+ * slot and spent the rest of a third of a second coming back, so a row the
+ * finger had already passed was still visibly moving. A row getting out of the
+ * way has nothing to express by bouncing — it is not the thing being carried,
+ * and the fastest way to say "your place is free" is to be out of it.
  */
-const DISPLACE = { damping: 22, stiffness: 300, mass: 0.7 } as const;
+const DISPLACE = { damping: 28, stiffness: 400, mass: 0.5 } as const;
 
 /**
  * Settles a row into its slot. Stiffer and less bouncy than the library's
@@ -222,34 +229,114 @@ function slotCenter(
 }
 
 /**
- * Where the dragged row belongs now, given where its middle has reached.
+ * The order after a row has moved, with pinned rows left where they were.
+ *
+ * The move is applied first, to the whole list, so a carried row can be dragged
+ * *past* a pinned one — refusing the move instead would make a pinned row a
+ * wall, and a row that holds its place is not the same as a row nothing may
+ * cross. The pinned ids are then put back at the indices they occupy in the
+ * laid-out order, and everything else falls into the slots that are left, in
+ * the order the move produced.
+ *
+ * `laid` rather than `list` is what the fixed indices are read from, because
+ * that is the one order a pinned row is guaranteed to be correctly placed in:
+ * it is where it was rendered, and holding its slot is the whole point.
+ */
+function moveWithPinned(
+  list: readonly string[],
+  laid: readonly string[],
+  pinned: Record<string, boolean>,
+  id: string,
+  from: number,
+  to: number
+): string[] {
+  'worklet';
+  const moved = [...list];
+  moved.splice(from, 1);
+  moved.splice(to, 0, id);
+
+  const next: (string | undefined)[] = [];
+  let anyPinned = false;
+  for (let i = 0; i < moved.length; i += 1) next.push(undefined);
+  for (let i = 0; i < laid.length && i < next.length; i += 1) {
+    const at = laid[i];
+    if (at !== undefined && pinned[at]) {
+      next[i] = at;
+      anyPinned = true;
+    }
+  }
+  if (!anyPinned) return moved;
+
+  const free: string[] = [];
+  for (let i = 0; i < moved.length; i += 1) {
+    const at = moved[i];
+    if (at !== undefined && !pinned[at]) free.push(at);
+  }
+
+  const result: string[] = [];
+  let f = 0;
+  for (let i = 0; i < next.length; i += 1) {
+    const held = next[i];
+    if (held !== undefined) {
+      result.push(held);
+      continue;
+    }
+    const take = free[f];
+    f += 1;
+    if (take !== undefined) result.push(take);
+  }
+  return result;
+}
+
+/**
+ * Where the dragged row belongs now, given where its edges have reached.
  *
  * It walks outwards from the row's current slot and stops at the first
- * neighbour it has *not* passed the middle of, rather than scanning the whole
- * list for the nearest slot. The difference shows up with rows of unequal
- * height: scanning can hand back a slot two places away that happens to be
- * closer, which reads as the row skipping one.
+ * neighbour it has not reached, rather than scanning the whole list for the
+ * nearest slot. The difference shows up with rows of unequal height: scanning
+ * can hand back a slot two places away that happens to be closer, which reads
+ * as the row skipping one.
+ *
+ * What counts as reaching a neighbour is the *leading edge* of the carried row
+ * against that neighbour's middle — its bottom edge going down, its top edge
+ * going up. Comparing middle against middle, as this used to, means the finger
+ * has to travel a whole row before anything happens, because a row's middle
+ * starts a whole row away from its neighbour's: the list sat still through the
+ * first row of every drag and then moved all at once. Leading edge against
+ * middle halves that, and it is also the more natural reading — the rows get
+ * out of the way once the row being carried is over them, not once it is past
+ * them.
  */
 function targetIndex(
   order: readonly string[],
   current: number,
-  center: number,
+  top: number,
+  height: number,
   heights: Record<string, number>,
   gap: number
 ): number {
   'worklet';
-  if (center < slotCenter(order, current, heights, gap)) {
+  // Where the carried row's own slot begins, so the direction of travel is
+  // read from the row rather than from the sign of a gesture that may have
+  // changed its mind since.
+  const self = order[current];
+  const restingTop =
+    slotCenter(order, current, heights, gap) -
+    (self === undefined ? 0 : (heights[self] ?? 0)) / 2;
+
+  if (top < restingTop) {
     let target = current;
     for (let i = current - 1; i >= 0; i -= 1) {
-      if (center >= slotCenter(order, i, heights, gap)) break;
+      if (top >= slotCenter(order, i, heights, gap)) break;
       target = i;
     }
     return target;
   }
 
+  const bottom = top + height;
   let target = current;
   for (let i = current + 1; i < order.length; i += 1) {
-    if (center <= slotCenter(order, i, heights, gap)) break;
+    if (bottom <= slotCenter(order, i, heights, gap)) break;
     target = i;
   }
   return target;
@@ -266,6 +353,20 @@ interface SortableContextValue {
   rendered: SharedValue<string[]>;
   /** Measured row heights, keyed by id. */
   heights: SharedValue<Record<string, number>>;
+  /** Which ids hold their slot. Read on the UI thread while a drag resolves. */
+  pinned: SharedValue<Record<string, boolean>>;
+  /**
+   * How far each row is from where it was laid out, keyed by id.
+   *
+   * Derived once per rearrangement rather than worked out by each row for
+   * itself. Every row's style worklet re-runs on every frame of a drag — it
+   * closes over the value the carried row is riding on — so a row summing the
+   * heights above it twice per frame made the list cost the square of its
+   * length to drag, which is felt exactly when a list is long enough to be
+   * worth reordering by hand. This is invalidated by the same shared values it
+   * is built from, so a row changing height still puts it right.
+   */
+  offsets: SharedValue<Record<string, number>>;
   /** The row under the finger, or `null`. Also the settling row, until it lands. */
   activeId: SharedValue<string | null>;
   /** The active row's offset from where it was laid out. */
@@ -300,6 +401,8 @@ interface SortableContextValue {
   /** Index of each id in the rendered order. */
   indexOf: (id: string) => number;
   measured: (id: string, height: number) => void;
+  /** Register or clear a row's hold on its slot. */
+  setPinned: (id: string, value: boolean) => void;
   begin: (id: string) => void;
   settled: (id: string) => void;
   /** Move a row by whole slots — the path that is not a gesture. */
@@ -437,6 +540,7 @@ function SortableRoot({
   const order = useSharedValue<string[]>(value);
   const rendered = useSharedValue<string[]>(value);
   const heights = useSharedValue<Record<string, number>>({});
+  const pinned = useSharedValue<Record<string, boolean>>({});
   const activeId = useSharedValue<string | null>(null);
   const translate = useSharedValue(0);
   const lift = useSharedValue(0);
@@ -479,14 +583,69 @@ function SortableRoot({
 
   const indexOf = useCallback((id: string) => indices.get(id) ?? -1, [indices]);
 
+  /*
+   * Both maps are accumulated in a ref and then published, rather than built by
+   * reading the shared value back and spreading it. Every row reports its
+   * layout in the same batch on mount, and a write to `.value` is not visible
+   * to the next read in that batch — so a read-modify-write there has all the
+   * rows spreading the same empty map and only the last one surviving. A list
+   * that knows one row's height puts every slot a gap apart, and the first
+   * drag drops the row at the end of the list.
+   */
+  const measuredHeights = useRef<Record<string, number>>({});
+  const pinnedFlags = useRef<Record<string, boolean>>({});
+
   const measured = useCallback(
     (id: string, height: number) => {
-      if (heights.value[id] === height) return;
-      heights.value = { ...heights.value, [id]: height };
+      if (measuredHeights.current[id] === height) return;
+      measuredHeights.current = { ...measuredHeights.current, [id]: height };
+      heights.value = measuredHeights.current;
     },
     [heights]
   );
 
+  const setPinned = useCallback(
+    (id: string, next: boolean) => {
+      if (Boolean(pinnedFlags.current[id]) === next) return;
+      pinnedFlags.current = { ...pinnedFlags.current, [id]: next };
+      pinned.value = pinnedFlags.current;
+    },
+    [pinned]
+  );
+
+  /*
+   * Every row's distance from where it was laid out, in one pass.
+   *
+   * Two prefix sums — one over the order being dragged, one over the order the
+   * children are actually in — and the difference between them per id. Rebuilt
+   * when a swap changes `order`, when a drop resets both, or when a row reports
+   * a new height, and at no other time; a drag that is only moving the carried
+   * row does not touch it at all.
+   */
+  const offsets = useDerivedValue<Record<string, number>>(() => {
+    const map = heights.value;
+    const target: Record<string, number> = {};
+    const list = order.value;
+    let at = 0;
+    for (let i = 0; i < list.length; i += 1) {
+      const id = list[i];
+      if (id === undefined) continue;
+      target[id] = at;
+      at += (map[id] ?? 0) + gap;
+    }
+
+    const result: Record<string, number> = {};
+    const laid = rendered.value;
+    at = 0;
+    for (let i = 0; i < laid.length; i += 1) {
+      const id = laid[i];
+      if (id === undefined) continue;
+      result[id] = (target[id] ?? at) - at;
+      at += (map[id] ?? 0) + gap;
+    }
+    return result;
+  }, [gap]);
+
   /* ---------------------------------------------------------------------- */
   /* Autoscroll                                                             */
   /* ---------------------------------------------------------------------- */
@@ -607,6 +766,8 @@ function SortableRoot({
       order,
       rendered,
       heights,
+      pinned,
+      offsets,
       activeId,
       translate,
       lift,
@@ -623,6 +784,7 @@ function SortableRoot({
       activeItem,
       indexOf,
       measured,
+      setPinned,
       begin,
       settled,
       step,
@@ -632,6 +794,8 @@ function SortableRoot({
       order,
       rendered,
       heights,
+      pinned,
+      offsets,
       activeId,
       translate,
       lift,
@@ -648,6 +812,7 @@ function SortableRoot({
       activeItem,
       indexOf,
       measured,
+      setPinned,
       begin,
       settled,
       step,
@@ -686,10 +851,20 @@ export interface SortableItemProps extends Omit<ViewProps, 'children'> {
   /**
    * Stop this row being picked up. The others still move past it, because a
    * row that cannot be dragged is not the same as a row that cannot be
-   * displaced — a pinned row is a different feature, and pretending this one
-   * is it would mean silently refusing drops that look like they worked.
+   * displaced — that is what `pinned` is for, and conflating the two would mean
+   * silently refusing drops that look like they worked.
    */
   disabled?: boolean;
+  /**
+   * Hold this row's place in the list. It cannot be picked up, and — unlike a
+   * `disabled` row — nothing else can take its slot either: the rows being
+   * dragged reorder among the places left over, and one carried past this row
+   * goes around it rather than through it.
+   *
+   * For the row that means something by being where it is. A header, a total, a
+   * step that has to come first.
+   */
+  pinned?: boolean;
   /**
    * Extra classes for the row while it is being carried, applied last. A
    * lifted row is given an opaque surface and a shadow so it is never drawn
@@ -711,6 +886,7 @@ function SortableItem({
   id,
   children,
   disabled = false,
+  pinned = false,
   ...props
 }: SortableItemProps) {
   const root = useSortableRoot('Sortable.Item');
@@ -718,6 +894,8 @@ function SortableItem({
     order,
     rendered,
     heights,
+    pinned: pinnedIds,
+    offsets,
     activeId,
     translate,
     lift,
@@ -733,13 +911,23 @@ function SortableItem({
     activeItem,
     indexOf,
     measured,
+    setPinned,
     begin,
     settled,
     step,
   } = root;
 
-  /** A row is undraggable if either it or the whole list says so. */
-  const locked = root.disabled || disabled;
+  /** A row is undraggable if it, the whole list, or its own pin says so. */
+  const locked = root.disabled || disabled || pinned;
+
+  /*
+   * Published to the root so the drag can read it on the UI thread. A pin is
+   * resolved while a finger is moving, where the props of a row two places away
+   * are not reachable.
+   */
+  useEffect(() => {
+    setPinned(id, pinned);
+  }, [id, pinned, setPinned]);
   const index = indexOf(id);
   const isActive = activeItem === id;
 
@@ -811,13 +999,20 @@ function SortableItem({
         if (current < 0) return;
 
         const top = slotOffset(rendered.value, id, map, gap) + translate.value;
-        const center = top + (map[id] ?? 0) / 2;
-        const to = targetIndex(list, current, center, map, gap);
+        const to = targetIndex(list, current, top, map[id] ?? 0, map, gap);
         if (to === current) return;
 
-        const next = [...list];
-        next.splice(current, 1);
-        next.splice(to, 0, id);
+        const next = moveWithPinned(
+          list,
+          rendered.value,
+          pinnedIds.value,
+          id,
+          current,
+          to
+        );
+        // A move that only pinned rows could have absorbed leaves the order
+        // exactly as it was, and there is nothing to feel or to redraw.
+        if (next[current] === id) return;
         order.value = next;
 
         if (haptics) runOnJS(notifyTick)();
@@ -850,10 +1045,15 @@ function SortableItem({
          * drop unreported; `seq` is what tells the two cases apart, because
          * the only interruption that should be ignored is the row being picked
          * up again.
+         *
+         * `activeId` is checked as well as `seq` because reporting the drop is
+         * itself what interrupts the spring: the caller applies the reorder,
+         * and the reset that follows puts `translate` back to rest, which ends
+         * the animation and calls this a second time under the same `seq`.
          */
         const land = () => {
           'worklet';
-          if (dragSeq.value !== seq) return;
+          if (dragSeq.value !== seq || activeId.value === null) return;
           activeId.value = null;
           runOnJS(notifySettled)(id);
         };
@@ -914,9 +1114,14 @@ function SortableItem({
       };
     }
 
-    const map = heights.value;
-    const offset =
-      slotOffset(order.value, id, map, gap) - slotOffset(rendered.value, id, map, gap);
+    /*
+     * Read, not worked out. This worklet re-runs on every frame of a drag —
+     * it closes over the value the carried row rides on — so summing the
+     * heights above this row here, twice, made a list cost the square of its
+     * length to drag. The root derives every row's offset in one pass instead,
+     * and only when the arrangement actually changes.
+     */
+    const offset = offsets.value[id] ?? 0;
 
     /*
      * Only animated while a drag is in flight, and the difference is the whole
@@ -956,17 +1161,27 @@ function SortableItem({
    * no way to discover it from the row. Moving by whole slots is published as
    * an accessibility action instead, which is the only path to reordering for
    * someone who is not dragging anything.
+   *
+   * The actions sit wherever the drag does. A handle list keeps them on the
+   * grip, which is an element in its own right; put here they would never be
+   * offered, because the actions of a view that is not itself an accessibility
+   * element are not reachable, and a row full of text is not one. A long-press
+   * list has no grip and gives the whole row to the drag, so the row becomes
+   * the element — which is what a screen reader wants from a row in any case.
    */
-  const a11y = locked
-    ? undefined
-    : [
+  const carriesActions = activation === 'longPress' && !locked;
+
+  const a11y = carriesActions
+    ? [
         { name: 'moveUp', label: 'Move up' },
         { name: 'moveDown', label: 'Move down' },
-      ];
+      ]
+    : undefined;
 
   const row = (
     <Animated.View
       onLayout={onLayout}
+      accessible={carriesActions}
       accessibilityActions={a11y}
       onAccessibilityAction={(event) => {
         if (event.nativeEvent.actionName === 'moveUp') step(id, -1);
@@ -1038,7 +1253,7 @@ function SortableHandle({
   accessibilityLabel = 'Drag to reorder',
   ...props
 }: SortableHandleProps) {
-  const { activation, disabled: rootDisabled } = useSortableRoot('Sortable.Handle');
+  const { activation, disabled: rootDisabled, step } = useSortableRoot('Sortable.Handle');
   const item = useContext(SortableItemContext);
 
   /*
@@ -1049,17 +1264,44 @@ function SortableHandle({
   const muted = useCSSVariable('--color-muted-foreground');
   const tint = typeof muted === 'string' ? muted : undefined;
 
+  const locked = rootDisabled || item?.disabled;
+
+  /*
+   * `adjustable` promises an element that answers a swipe up or down, and the
+   * promise was never kept: the grip published the role and nothing else, so
+   * the one part of a row a screen reader could reach did nothing at all.
+   * Moving by whole slots is what it was always meant to do. The same move is
+   * offered as a named action too, because a swipe says nothing about which
+   * way the row is going to travel.
+   */
+  const move = (delta: number) => {
+    if (locked || !item) return;
+    step(item.id, delta);
+  };
+
   const glyph = (
     <View
       accessible
       accessibilityRole="adjustable"
       accessibilityLabel={accessibilityLabel}
-      accessibilityState={{ disabled: rootDisabled || item?.disabled }}
-      className={cn(
-        'items-center justify-center px-2 py-1.5',
-        (rootDisabled || item?.disabled) && 'opacity-40',
-        className
-      )}
+      accessibilityState={{ disabled: locked }}
+      accessibilityValue={item ? { text: `Position ${item.index + 1}` } : undefined}
+      accessibilityActions={
+        locked
+          ? undefined
+          : [
+              { name: 'increment' },
+              { name: 'decrement' },
+              { name: 'moveUp', label: 'Move up' },
+              { name: 'moveDown', label: 'Move down' },
+            ]
+      }
+      onAccessibilityAction={(event) => {
+        const action = event.nativeEvent.actionName;
+        if (action === 'increment' || action === 'moveUp') move(-1);
+        if (action === 'decrement' || action === 'moveDown') move(1);
+      }}
+      className={cn('items-center justify-center px-2 py-1.5', locked && 'opacity-40', className)}
       {...props}
     >
       <IconColorProvider color={tint}>

package/src/components/tabs/index.tsx

@@ -140,6 +140,16 @@ const MEASURE_WIDTH = 400;
 
 export type TabsVariant = 'segmented' | 'underline' | 'pill' | 'expanding';
 
+/**
+ * How much of an inactive panel survives a switch away from it.
+ *
+ * `false` unmounts it. `true` keeps it mounted but takes it out of layout, so
+ * it costs nothing to have around. `'measured'` keeps it laid out at full size
+ * as well — the expensive option, and the only one a child that sizes itself
+ * from its parent can be built inside while it is hidden.
+ */
+export type TabsKeepMounted = boolean | 'measured';
+
 const tabsVariants = tv({
   slots: {
     list: 'flex-row',
@@ -246,7 +256,7 @@ interface TabsContextValue {
   variant: TabsVariant;
   scrollable: boolean;
   setScrollable: (scrollable: boolean) => void;
-  keepMounted: boolean;
+  keepMounted: TabsKeepMounted;
   swipeable: boolean;
   /**
    * How far the visible panel is displaced from its resting place, in points.
@@ -292,8 +302,29 @@ export interface TabsProps extends ViewProps {
    * Keep inactive panels mounted and hidden instead of unmounting them, so a
    * scroll position or a half-filled form survives a switch away and back.
    * Costs the render of every panel up front.
+   *
+   * `true` hides a kept panel with `display: none`, which also takes it out of
+   * layout: it is mounted, but it has no size. That is what makes it cheap, and
+   * it is enough for a panel whose content sizes itself — a column of views, a
+   * form, a `ScrollView` of known children.
+   *
+   * It is *not* enough for a child that decides what to render by measuring the
+   * space it has been given. A virtualised list asks its parent how tall it is
+   * and fills that many rows; asked inside a panel of zero height it answers
+   * zero rows, and the whole first render still lands on the frame the tab
+   * becomes visible — the stall this flag looks like it should have avoided.
+   *
+   * `'measured'` is for that case. A kept panel stays laid out at the full size
+   * of the tab set, and is hidden by not being drawn rather than by being
+   * removed from layout: a list inside it measures, renders its rows and
+   * settles while it is still hidden, so becoming visible costs nothing.
+   *
+   * The trade is real and is why it is not the default — every kept panel lays
+   * out and draws, up front and on every size change, so a five-tab set builds
+   * five panels' worth of rows to show one. Reach for it when a panel is slow
+   * to appear and its content is virtualised; leave it at `true` otherwise.
    */
-  keepMounted?: boolean;
+  keepMounted?: TabsKeepMounted;
   /**
    * Move between tabs by dragging sideways on the panel, as well as by
    * pressing the triggers.
@@ -310,7 +341,9 @@ export interface TabsProps extends ViewProps {
    * something is moving*, so a panel that is slow to build stops being a pause
    * before it appears and starts being a stutter in the movement. If a swipe
    * feels heavier than a press on the same tab set, the panel is expensive to
-   * mount; `keepMounted` is the answer, not turning this off.
+   * mount — and the answer is whichever `keepMounted` actually keeps its
+   * content built, which for a virtualised list is `'measured'` rather than
+   * `true`. Turning this off hides the cost rather than removing it.
    */
   swipeable?: boolean;
   children: ReactNode;
@@ -928,11 +961,41 @@ function TabsContent({ className, value, children, style, ...props }: TabsConten
 
   if (!active && !context.keepMounted) return null;
 
+  /*
+   * Under `keepMounted='measured'` a hidden panel keeps its size instead of
+   * losing it. It is taken out of the flow and stretched over the tab set, so
+   * it is laid out at the same size as the visible panel without contributing
+   * its height to the parent, and it is hidden by being transparent rather
+   * than by `display: none`.
+   *
+   * That distinction is the whole point: `display: none` lays a panel out at
+   * zero size, and a child that sizes itself from its parent — a virtualised
+   * list deciding how many rows to render — renders nothing at all inside one.
+   * Given a real size while still hidden, it builds its rows now rather than on
+   * the frame the tab is switched to.
+   *
+   * `opacity: 0` is set once and never animated, so it costs a composite and
+   * not a per-frame redraw; the negative `zIndex` keeps it behind the visible
+   * panel rather than over it, whatever order the panels are written in.
+   */
+  const measured = context.keepMounted === 'measured';
+  const hiddenStyle = measured
+    ? ({
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        opacity: 0,
+        zIndex: -1,
+      } as const)
+    : ({ display: 'none' } as const);
+
   /*
    * Hidden rather than unmounted under `keepMounted`, and hidden thoroughly:
-   * `display: none` takes it out of layout, and the accessibility props take
-   * it out of the reading order too. A screen reader walking through three
-   * panels of a tab set it cannot see is worse than no tabs at all.
+   * it is not drawn, it takes no touches, and the accessibility props take it
+   * out of the reading order too. A screen reader walking through three panels
+   * of a tab set it cannot see is worse than no tabs at all.
    */
   const panel = (
     <Animated.View
@@ -953,19 +1016,21 @@ function TabsContent({ className, value, children, style, ...props }: TabsConten
         // window would be most of the way across it.
         //
         // Zero is ignored. Every panel reports into the same value, and a
-        // kept-mounted one is `display: none` — it measures as nothing, and
-        // letting it say so would leave the visible panel with no width.
+        // panel kept with `display: none` measures as nothing — letting it say
+        // so would leave the visible panel with no width. A `'measured'` one
+        // is stretched over the tab set and reports the same width as the
+        // visible panel, so it is agreeing rather than overwriting.
         const measured = event.nativeEvent.layout.width;
         if (measured > 0) width.value = measured;
       }}
       /*
        * The follow style goes on the panel that is moving, and only that one.
-       * Under `keepMounted` every other panel is `display: none` and cannot be
-       * seen to move — but an animated style still subscribes them all to the
-       * offset, so a five-tab set ran five mappers per frame to reposition four
-       * views nobody was looking at.
+       * Under `keepMounted` every other panel is hidden and cannot be seen to
+       * move — but an animated style still subscribes them all to the offset,
+       * so a five-tab set ran five mappers per frame to reposition four views
+       * nobody was looking at.
        */
-      style={[!active && { display: 'none' }, swipeable && active && followStyle, style]}
+      style={[!active && hiddenStyle, swipeable && active && followStyle, style]}
       pointerEvents={active ? 'auto' : 'none'}
       accessibilityElementsHidden={!active}
       importantForAccessibility={active ? 'auto' : 'no-hide-descendants'}
@@ -976,9 +1041,10 @@ function TabsContent({ className, value, children, style, ...props }: TabsConten
     </Animated.View>
   );
 
-  // Only the visible panel carries the gesture. A kept-mounted panel is
-  // `display: none` and takes no touches anyway, but attaching a detector to
-  // each of them would put several competing recognisers in the same tree.
+  // Only the visible panel carries the gesture. A kept-mounted panel takes no
+  // touches anyway — `pointerEvents` is off on it whichever way it is hidden —
+  // but attaching a detector to each of them would put several competing
+  // recognisers in the same tree.
   if (!swipeable || !active) return panel;
 
   return <GestureDetector gesture={pan}>{panel}</GestureDetector>;