@oxyhq/bloom 0.3.12 → 0.4.0

package/README.md

@@ -222,9 +222,37 @@ function Example() {
 - `enableHandlePanningGesture?: boolean` — defaults to `true`.
 - `onDismissAttempt?: () => boolean` — return `false` to veto a dismiss attempt.
 - `detached?: boolean` — when `true`, the sheet floats with horizontal margins and rounded corners on all sides; when `false`, it's flush to the bottom edges with rounded top corners only.
+- `showHandle?: boolean` — defaults to `true`. Toggles the drag handle pill at the top of the sheet.
+- `backdropOpacity?: number` — opacity (0–1) of the dimming backdrop once fully visible. Defaults to `0.5`. Use a higher value (e.g. `0.7`) when stacking a sheet over another sheet.
 - `backgroundComponent?` — custom background renderer.
 - `backdropComponent?` — custom backdrop renderer.
 - `style?`
+- `scrollable?: boolean` — defaults to `true`. When `false`, renders `children` directly without the internal `Animated.ScrollView` wrapper. **Required when the sheet's content owns its own scrolling primitive** (e.g. `FlatList`, `SectionList`, or any `VirtualizedList`) — nesting a virtualized list inside the internal ScrollView breaks windowing and triggers a React Native warning. Combine with `manualActivation` so the handle stays draggable while the inner list owns the scroll.
+- `manualActivation?: boolean` — defaults to `false`. When `true`, the body pan uses RNGH's `manualActivation` and only activates when (a) the inner ScrollView is at the top AND (b) the user has moved their finger downward by > 8dp. This is the `@gorhom/bottom-sheet` coordination model — recommended for sheets that contain a scrolling region on Android (the legacy always-active pan can steal vertical events from the inner scroller). Enabling this also gives the drag handle its own dedicated, unconditionally-active gesture so users can always grab the handle even mid-scroll.
+- `dynamicBackdrop?: boolean` — defaults to `false`. When `true`, the backdrop dims proportionally to drag distance — fades from full `backdropOpacity` (sheet at rest) to 30% as the sheet is pulled down 40% of the screen height. This is the iOS Photos / iMessage drag-to-dismiss look. The base `backdropOpacity` still controls the resting dim.
+- `handleComponent?: () => React.ReactNode` — custom drag-handle renderer. When provided (and `showHandle` is `true`), replaces the default 36×5 pill. In `manualActivation` mode the rendered handle sits inside the dedicated handle hit-area and gesture detector so it remains unconditionally draggable.
+
+**Pattern: sheet with a `FlatList` inside.** Use `scrollable={false}` so the BottomSheet doesn't wrap the list in its own ScrollView, plus `manualActivation` so the drag handle remains the dedicated drag-to-dismiss surface while the list owns vertical scroll:
+
+```tsx
+<BottomSheet ref={sheetRef} scrollable={false} manualActivation>
+  <FlatList data={items} renderItem={renderItem} />
+</BottomSheet>
+```
+
+**Pattern: iOS Photos-style backdrop dim.** Combine `manualActivation` (so the inner photo grid keeps scroll ownership) with `dynamicBackdrop` (so the overlay fades as the user pulls down):
+
+```tsx
+<BottomSheet
+  ref={sheetRef}
+  scrollable={false}
+  manualActivation
+  dynamicBackdrop
+  backdropOpacity={0.85}
+>
+  <PhotoGrid />
+</BottomSheet>
+```
 
 ### Button
 

package/lib/commonjs/bottom-sheet/index.js

@@ -54,7 +54,11 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
     onDismissAttempt,
     detached = false,
     showHandle = true,
-    backdropOpacity = 0.5
+    backdropOpacity = 0.5,
+    scrollable = true,
+    manualActivation = false,
+    dynamicBackdrop = false,
+    handleComponent
   } = props;
   const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
   const theme = (0, _useTheme.useTheme)();
@@ -69,6 +73,16 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
   const closeTimeoutRef = (0, _react.useRef)(null);
   const hasClosedRef = (0, _react.useRef)(false);
   const scrollViewRef = (0, _react.useRef)(null);
+  /**
+   * Monotonically increasing counter that identifies "the current close
+   * attempt". Bumped every time the sheet re-opens (`present()`), so any
+   * in-flight `withTiming` completion callback or fallback timer from a
+   * PREVIOUS close cycle becomes a no-op. Without this guard, a stale
+   * `runOnJS(finishClose)` from an aborted close would fire `onDismiss`
+   * and unmount the sheet immediately after the user opens it again,
+   * causing "tap to open does nothing" reports in production.
+   */
+  const closeGenerationRef = (0, _react.useRef)(0);
   const screenHeightSV = (0, _reactNativeReanimated.useSharedValue)(screenHeight);
   // Keep shared value in sync when screen dimensions change (rotation/resize)
   (0, _react.useEffect)(() => {
@@ -83,6 +97,21 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
   const context = (0, _reactNativeReanimated.useSharedValue)({
     y: 0
   });
+  // Mirror of `closeGenerationRef` for worklet access. Bumped from the JS
+  // thread in lockstep with the ref so gesture worklets always see the
+  // current generation when they snapshot it on `onEnd`.
+  const closeGeneration = (0, _reactNativeReanimated.useSharedValue)(0);
+  // Used by `manualActivation` body pan to track the touch's initial Y so
+  // it can compute downward distance for the activation decision.
+  const touchStartY = (0, _reactNativeReanimated.useSharedValue)(0);
+
+  // Refs used to mark the handle pan and the body pan as mutually
+  // simultaneous (manualActivation mode only). Without this RNGH treats them
+  // as racing gestures and a touch that begins in the handle area could be
+  // claimed by whichever recognizer activates first — leading to
+  // inconsistent drag start.
+  const bodyPanRef = (0, _react.useRef)(undefined);
+  const handlePanRef = (0, _react.useRef)(undefined);
   useKeyboardHandler({
     onMove: e => {
       'worklet';
@@ -116,7 +145,20 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
   (0, _react.useEffect)(() => {
     renderedRef.current = rendered;
   }, [rendered]);
-  const finishClose = (0, _react.useCallback)(() => {
+
+  /**
+   * Commit a close. Two guards prevent stale callbacks from firing:
+   *   1. `hasClosedRef` — protects against the fallback timer AND the
+   *      animation callback both racing to call us within a single close
+   *      cycle.
+   *   2. `generation` — protects against a callback from a PREVIOUS close
+   *      cycle firing AFTER the user reopened. If the live generation has
+   *      advanced past the one captured when the close started, this
+   *      callback is from a cycle that the user has implicitly cancelled
+   *      by reopening — silently drop it.
+   */
+  const finishClose = (0, _react.useCallback)(generation => {
+    if (closeGenerationRef.current !== generation) return;
     if (hasClosedRef.current) return;
     hasClosedRef.current = true;
     safeClose();
@@ -129,16 +171,25 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
         closeTimeoutRef.current = null;
       }
       hasClosedRef.current = false;
+      // Bump generation: any pending close-completion callback from a
+      // prior cycle (animation or fallback timer) will now no-op when
+      // it eventually fires, because its captured generation is stale.
+      closeGenerationRef.current += 1;
+      closeGeneration.value = closeGenerationRef.current;
       opacity.value = (0, _reactNativeReanimated.withTiming)(1, {
         duration: 250
       });
       translateY.value = (0, _reactNativeReanimated.withSpring)(0, SPRING_CONFIG);
     } else if (rendered) {
+      // Capture the generation for THIS close cycle so the animation
+      // callback (running on the UI thread, scheduled back to JS) and
+      // the fallback timer agree on which cycle they belong to.
+      const generation = closeGenerationRef.current;
       opacity.value = (0, _reactNativeReanimated.withTiming)(0, {
         duration: 250
       }, finished => {
         if (finished) {
-          (0, _reactNativeReanimated.runOnJS)(finishClose)();
+          (0, _reactNativeReanimated.runOnJS)(finishClose)(generation);
         }
       });
       translateY.value = (0, _reactNativeReanimated.withSpring)(screenHeight, {
@@ -146,16 +197,17 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
         stiffness: 250
       });
 
-      // Fallback timer to ensure close completes (especially on web)
+      // Fallback timer to ensure close completes (especially on web
+      // where reanimated callbacks occasionally drop on tab blur).
       if (closeTimeoutRef.current) {
         clearTimeout(closeTimeoutRef.current);
       }
       closeTimeoutRef.current = setTimeout(() => {
-        finishClose();
+        finishClose(generation);
         closeTimeoutRef.current = null;
       }, 300);
     }
-  }, [visible, rendered, finishClose]);
+  }, [visible, rendered, finishClose, screenHeight, closeGeneration, opacity, translateY]);
 
   // On unmount: ensure pending close callbacks (e.g. consumer's `onDismiss`)
   // still fire if the BS is yanked mid-animation by a parent re-render.
@@ -207,79 +259,216 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
   }), [present, dismiss, scrollTo]);
   const nativeGesture = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Native(), []);
 
-  // Memoized pan gesture — recreating a Gesture.Pan() on every render causes
-  // gesture detach/reattach during animations and breaks React Compiler memoization.
-  const panGesture = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Pan().enabled(enablePanDownToClose).simultaneousWithExternalGesture(nativeGesture).onStart(() => {
-    'worklet';
+  // Body pan — two strategies, switched by `manualActivation`.
+  //
+  // (1) Legacy mode (`manualActivation: false`, the bloom 0.3.x default):
+  //     Pan is always active. We snapshot the scroll offset at `onStart`
+  //     and gate movement on `scrollOffsetY <= 8` during the gesture.
+  //     This is what current bloom consumers expect.
+  //
+  // (2) gorhom-style mode (`manualActivation: true`):
+  //     Pan uses `manualActivation(true)` and only flips to active when
+  //     the inner ScrollView is at the top AND the user has moved their
+  //     finger downward > 8dp. In every other case it fails, so the
+  //     ScrollView keeps full ownership of the touch. This is the only
+  //     RNGH 2.x pattern that does not steal vertical events from the
+  //     inner scroller on Android. Required for FileManagement /
+  //     PhotoPicker style sheets.
+  const panGesture = (0, _react.useMemo)(() => {
+    if (manualActivation) {
+      return _reactNativeGestureHandler.Gesture.Pan().enabled(enablePanDownToClose).withRef(bodyPanRef).manualActivation(true).simultaneousWithExternalGesture(scrollViewRef, handlePanRef).onTouchesDown(e => {
+        'worklet';
 
-    context.value = {
-      y: translateY.value
-    };
-    allowPanClose.value = scrollOffsetY.value <= 8;
-  }).onUpdate(event => {
-    'worklet';
+        const t = e.changedTouches[0];
+        if (t) touchStartY.value = t.absoluteY;
+        context.value = {
+          y: translateY.value
+        };
+      }).onTouchesMove((e, state) => {
+        'worklet';
 
-    if (!allowPanClose.value) {
-      return;
-    }
-    const newTranslateY = context.value.y + event.translationY;
-    // If user is scrolling down while content isn't at (or near) the top, let ScrollView handle it
-    const atTopOrNearTop = scrollOffsetY.value <= 8; // slightly larger tolerance for smoother handoff
-    if (event.translationY > 0 && !atTopOrNearTop) {
-      return;
-    }
-    if (newTranslateY >= 0) {
-      translateY.value = newTranslateY;
-    } else if (detached) {
-      // Only allow overdrag (pulling up beyond top) when detached
-      translateY.value = newTranslateY * 0.3;
-    } else {
-      // In normal mode, prevent overdrag - clamp to 0
-      translateY.value = 0;
-    }
-  }).onEnd(event => {
-    'worklet';
+        const t = e.changedTouches[0];
+        if (!t) return;
+        const dy = t.absoluteY - touchStartY.value;
+        const atTop = scrollOffsetY.value <= 4;
+        // Activate only when (at scroll top) AND (finger has moved
+        // downward by > 8dp). Any other motion: fail so the
+        // ScrollView claims the gesture.
+        if (atTop && dy > 8) {
+          state.activate();
+        } else if (dy < -4 || !atTop) {
+          state.fail();
+        }
+      }).onUpdate(event => {
+        'worklet';
 
-    if (!allowPanClose.value) {
-      return;
-    }
-    const velocity = event.velocityY;
-    const distance = translateY.value;
-    // Require a deeper pull to close (more like native bottom sheets)
-    const closeThreshold = Math.max(140, screenHeightSV.value * 0.25);
-    const fastSwipeThreshold = 900;
-    const shouldClose = velocity > fastSwipeThreshold || distance > closeThreshold && velocity > -300;
-    if (shouldClose) {
-      translateY.value = (0, _reactNativeReanimated.withSpring)(screenHeightSV.value, {
-        ...SPRING_CONFIG,
-        velocity: velocity
-      });
-      opacity.value = (0, _reactNativeReanimated.withTiming)(0, {
-        duration: 250
-      }, finished => {
-        if (finished) {
-          (0, _reactNativeReanimated.runOnJS)(finishClose)();
+        if (event.translationY < 0) return;
+        const newTranslateY = context.value.y + event.translationY;
+        if (newTranslateY >= 0) {
+          translateY.value = newTranslateY;
+        }
+      }).onEnd(event => {
+        'worklet';
+
+        const velocity = event.velocityY;
+        const distance = translateY.value;
+        const closeThreshold = Math.max(140, screenHeightSV.value * 0.25);
+        const fastSwipeThreshold = 900;
+        const shouldClose = velocity > fastSwipeThreshold || distance > closeThreshold && velocity > -300;
+        if (shouldClose) {
+          // Snapshot the generation on the UI thread at the
+          // moment the close gesture commits. The completion
+          // callback only fires `finishClose` if no reopen
+          // bumped the generation in between.
+          const generation = closeGeneration.value;
+          translateY.value = (0, _reactNativeReanimated.withSpring)(screenHeightSV.value, {
+            ...SPRING_CONFIG,
+            velocity
+          });
+          opacity.value = (0, _reactNativeReanimated.withTiming)(0, {
+            duration: 250
+          }, finished => {
+            if (finished) (0, _reactNativeReanimated.runOnJS)(finishClose)(generation);
+          });
+        } else {
+          translateY.value = (0, _reactNativeReanimated.withSpring)(0, {
+            ...SPRING_CONFIG,
+            velocity
+          });
         }
-      });
-    } else {
-      translateY.value = (0, _reactNativeReanimated.withSpring)(0, {
-        ...SPRING_CONFIG,
-        velocity: velocity
       });
     }
-  }),
-  // Shared values are stable refs; enablePanDownToClose and detached are the only
-  // JS-side values that change the gesture's behavior.
-  // finishClose is stable (useCallback with stable deps).
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [enablePanDownToClose, detached, nativeGesture, finishClose]);
+
+    // Legacy always-active pan (bloom 0.3.x behaviour).
+    return _reactNativeGestureHandler.Gesture.Pan().enabled(enablePanDownToClose).simultaneousWithExternalGesture(nativeGesture).onStart(() => {
+      'worklet';
+
+      context.value = {
+        y: translateY.value
+      };
+      allowPanClose.value = scrollOffsetY.value <= 8;
+    }).onUpdate(event => {
+      'worklet';
+
+      if (!allowPanClose.value) {
+        return;
+      }
+      const newTranslateY = context.value.y + event.translationY;
+      // If user is scrolling down while content isn't at (or near) the top, let ScrollView handle it
+      const atTopOrNearTop = scrollOffsetY.value <= 8; // slightly larger tolerance for smoother handoff
+      if (event.translationY > 0 && !atTopOrNearTop) {
+        return;
+      }
+      if (newTranslateY >= 0) {
+        translateY.value = newTranslateY;
+      } else if (detached) {
+        // Only allow overdrag (pulling up beyond top) when detached
+        translateY.value = newTranslateY * 0.3;
+      } else {
+        // In normal mode, prevent overdrag - clamp to 0
+        translateY.value = 0;
+      }
+    }).onEnd(event => {
+      'worklet';
+
+      if (!allowPanClose.value) {
+        return;
+      }
+      const velocity = event.velocityY;
+      const distance = translateY.value;
+      // Require a deeper pull to close (more like native bottom sheets)
+      const closeThreshold = Math.max(140, screenHeightSV.value * 0.25);
+      const fastSwipeThreshold = 900;
+      const shouldClose = velocity > fastSwipeThreshold || distance > closeThreshold && velocity > -300;
+      if (shouldClose) {
+        const generation = closeGeneration.value;
+        translateY.value = (0, _reactNativeReanimated.withSpring)(screenHeightSV.value, {
+          ...SPRING_CONFIG,
+          velocity: velocity
+        });
+        opacity.value = (0, _reactNativeReanimated.withTiming)(0, {
+          duration: 250
+        }, finished => {
+          if (finished) {
+            (0, _reactNativeReanimated.runOnJS)(finishClose)(generation);
+          }
+        });
+      } else {
+        translateY.value = (0, _reactNativeReanimated.withSpring)(0, {
+          ...SPRING_CONFIG,
+          velocity: velocity
+        });
+      }
+    });
+    // Shared values are stable refs; the listed deps are the only JS-side
+    // values that change the gesture's behavior. `finishClose` is stable
+    // (useCallback with stable deps).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [enablePanDownToClose, detached, manualActivation, nativeGesture, finishClose]);
+
+  // Dedicated handle pan — only built in `manualActivation` mode. Always
+  // active so users can drag the handle even while content is mid-scroll.
+  // In legacy mode the body pan already wraps the whole sheet (handle
+  // included), so no separate gesture is needed.
+  const handlePanGesture = (0, _react.useMemo)(() => {
+    if (!manualActivation) return undefined;
+    return _reactNativeGestureHandler.Gesture.Pan().enabled(enablePanDownToClose && enableHandlePanningGesture).withRef(handlePanRef).simultaneousWithExternalGesture(bodyPanRef).activeOffsetY([-8, 8]).onStart(() => {
+      'worklet';
+
+      context.value = {
+        y: translateY.value
+      };
+    }).onUpdate(event => {
+      'worklet';
+
+      const newTranslateY = context.value.y + event.translationY;
+      if (newTranslateY >= 0) {
+        translateY.value = newTranslateY;
+      } else if (detached) {
+        translateY.value = newTranslateY * 0.3;
+      } else {
+        translateY.value = 0;
+      }
+    }).onEnd(event => {
+      'worklet';
+
+      const velocity = event.velocityY;
+      const distance = translateY.value;
+      const closeThreshold = Math.max(140, screenHeightSV.value * 0.25);
+      const fastSwipeThreshold = 900;
+      const shouldClose = velocity > fastSwipeThreshold || distance > closeThreshold && velocity > -300;
+      if (shouldClose) {
+        const generation = closeGeneration.value;
+        translateY.value = (0, _reactNativeReanimated.withSpring)(screenHeightSV.value, {
+          ...SPRING_CONFIG,
+          velocity
+        });
+        opacity.value = (0, _reactNativeReanimated.withTiming)(0, {
+          duration: 250
+        }, finished => {
+          if (finished) (0, _reactNativeReanimated.runOnJS)(finishClose)(generation);
+        });
+      } else {
+        translateY.value = (0, _reactNativeReanimated.withSpring)(0, {
+          ...SPRING_CONFIG,
+          velocity
+        });
+      }
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [manualActivation, enablePanDownToClose, enableHandlePanningGesture, detached, finishClose]);
 
   // `opacity.value` drives the fade in/out (0 -> 1). `backdropOpacity` is the
   // final dim level once fully visible. We multiply so the consumer-provided
-  // dim opacity applies smoothly across the animation.
-  const backdropStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
-    opacity: opacity.value * backdropOpacity
-  }), [backdropOpacity]);
+  // dim opacity applies smoothly across the animation. When
+  // `dynamicBackdrop` is enabled, the dim also fades proportionally with
+  // drag distance (iOS Photos style).
+  const backdropStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const dragFactor = dynamicBackdrop ? (0, _reactNativeReanimated.interpolate)(translateY.value, [0, screenHeightSV.value * 0.4], [1, 0.3], 'clamp') : 1;
+    return {
+      opacity: opacity.value * backdropOpacity * dragFactor
+    };
+  }, [backdropOpacity, dynamicBackdrop]);
   const sheetStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
     const scale = (0, _reactNativeReanimated.interpolate)(translateY.value, [0, screenHeightSV.value], [1, 0.95]);
     return {
@@ -336,6 +525,64 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
     });
   }, [colors.background, theme.isDark, detached]);
   if (!rendered) return null;
+
+  // Default handle render — used when `handleComponent` is not provided.
+  const renderDefaultHandle = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: dynamicStyles.handle
+  });
+  const handleNode = showHandle ? handleComponent ? handleComponent() : renderDefaultHandle() : null;
+
+  // In `manualActivation` mode the handle gets its own gesture detector
+  // sitting in a dedicated absolutely-positioned hit area at the top of the
+  // sheet. In legacy mode the handle is rendered inline as a decorative
+  // overlay (the body pan covers the entire sheet, handle included).
+  const handleSlot = handleNode && manualActivation && handlePanGesture ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+    gesture: handlePanGesture,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.handleHitArea,
+      accessible: true,
+      accessibilityRole: "adjustable",
+      children: handleNode
+    })
+  }) : handleNode;
+
+  // Inner content: scrollable wraps in Animated.ScrollView, non-scrollable
+  // renders children directly. In legacy mode the scrollview is also
+  // wrapped in the `nativeGesture` detector for scroll/pan coordination.
+  const scrollViewNode = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.ScrollView, {
+    ref: scrollViewRef,
+    style: [styles.scrollView, _reactNative.Platform.OS === 'web' && {
+      scrollbarWidth: 'thin',
+      scrollbarColor: `${colors.border} transparent`
+    }],
+    contentContainerStyle: dynamicStyles.scrollContent,
+    showsVerticalScrollIndicator: false,
+    keyboardShouldPersistTaps: "handled",
+    onScroll: scrollHandler,
+    scrollEventThrottle: 16,
+    ...(_reactNative.Platform.OS === 'web' ? {
+      className: 'bottom-sheet-scrollview'
+    } : undefined),
+    onLayout: () => {
+      if (_reactNative.Platform.OS === 'web') {
+        createWebScrollbarStyle(colors.border);
+      }
+    },
+    children: children
+  });
+  const bodyContent = scrollable ? manualActivation
+  // In manualActivation mode the scroll view is referenced by the
+  // pan's simultaneous list directly; no wrapping native gesture.
+  ? scrollViewNode
+  // Legacy mode: native gesture wraps the scroll view to coordinate
+  // with the always-active body pan.
+  : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+    gesture: nativeGesture,
+    children: scrollViewNode
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.nonScrollableContent,
+    children: children
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
     visible: rendered,
     transparent: true,
@@ -363,32 +610,7 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
             style: [dynamicStyles.sheet, sheetMarginStyle, sheetStyle, sheetHeightStyle, style],
             children: [backgroundComponent?.({
               style: styles.background
-            }), showHandle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: dynamicStyles.handle
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
-              gesture: nativeGesture,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.ScrollView, {
-                ref: scrollViewRef,
-                style: [styles.scrollView, _reactNative.Platform.OS === 'web' && {
-                  scrollbarWidth: 'thin',
-                  scrollbarColor: `${colors.border} transparent`
-                }],
-                contentContainerStyle: dynamicStyles.scrollContent,
-                showsVerticalScrollIndicator: false,
-                keyboardShouldPersistTaps: "handled",
-                onScroll: scrollHandler,
-                scrollEventThrottle: 16,
-                ...(_reactNative.Platform.OS === 'web' ? {
-                  className: 'bottom-sheet-scrollview'
-                } : undefined),
-                onLayout: () => {
-                  if (_reactNative.Platform.OS === 'web') {
-                    createWebScrollbarStyle(colors.border);
-                  }
-                },
-                children: children
-              })
-            })]
+            }), handleSlot, bodyContent]
           })
         })]
       })
@@ -428,6 +650,7 @@ const styles = _reactNative.StyleSheet.create({
     borderTopLeftRadius: 24,
     borderTopRightRadius: 24
   },
+  /** Legacy (non-manualActivation) handle: decorative overlay only. */
   handle: {
     position: 'absolute',
     top: 10,
@@ -438,6 +661,23 @@ const styles = _reactNative.StyleSheet.create({
     borderRadius: 3,
     zIndex: 100
   },
+  /**
+   * Hit area for the drag handle in `manualActivation` mode. Absolutely
+   * positioned at the top of the sheet so the area visually "floats" above
+   * the content — content scrolls up underneath it (no layout offset)
+   * while the thumb can still grab the full-width 28dp strip to drag.
+   */
+  handleHitArea: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: 28,
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    paddingTop: 6,
+    zIndex: 100
+  },
   background: {
     ..._reactNative.StyleSheet.absoluteFillObject
   },
@@ -446,6 +686,9 @@ const styles = _reactNative.StyleSheet.create({
   },
   scrollContent: {
     flexGrow: 1
+  },
+  nonScrollableContent: {
+    flex: 1
   }
 });