@swmansion/react-native-bottom-sheet 0.3.0 → 0.4.0

package/lib/typescript/src/useBottomSheetPanGesture.d.ts

@@ -0,0 +1,20 @@
+import type { PanGesture } from 'react-native-gesture-handler';
+import { type AnimatedRef, type SharedValue } from 'react-native-reanimated';
+interface BottomSheetPanGestureParams {
+    animationTarget: SharedValue<number>;
+    translateY: SharedValue<number>;
+    sheetHeight: SharedValue<number>;
+    detentsValue: SharedValue<number[]>;
+    isDraggableValue: SharedValue<boolean[]>;
+    currentIndex: SharedValue<number>;
+    scrollOffset: SharedValue<number>;
+    hasScrollable: SharedValue<boolean>;
+    isScrollableGestureActive: SharedValue<boolean>;
+    isScrollableLocked: SharedValue<boolean>;
+    scrollableRef: AnimatedRef<any>;
+    handleIndexChange: (nextIndex: number) => void;
+    animateToIndex: (targetIndex: number, velocity?: number) => void;
+}
+export declare const useBottomSheetPanGesture: ({ animationTarget, translateY, sheetHeight, detentsValue, isDraggableValue, currentIndex, scrollOffset, hasScrollable, isScrollableGestureActive, isScrollableLocked, scrollableRef, handleIndexChange, animateToIndex, }: BottomSheetPanGestureParams) => PanGesture;
+export {};
+//# sourceMappingURL=useBottomSheetPanGesture.d.ts.map

package/lib/typescript/src/useBottomSheetPanGesture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBottomSheetPanGesture.d.ts","sourceRoot":"","sources":["../../../src/useBottomSheetPanGesture.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAG/D,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,WAAW,EAEjB,MAAM,yBAAyB,CAAC;AAIjC,UAAU,2BAA2B;IACnC,eAAe,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACrC,UAAU,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAChC,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACjC,YAAY,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC;IACpC,gBAAgB,EAAE,WAAW,CAAC,OAAO,EAAE,CAAC,CAAC;IACzC,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,aAAa,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IACpC,yBAAyB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAChD,kBAAkB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IACzC,aAAa,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IAChC,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAClE;AAED,eAAO,MAAM,wBAAwB,GAAI,2NActC,2BAA2B,KAAG,UAoKhC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swmansion/react-native-bottom-sheet",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Provides bottom-sheet components for React Native.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/BottomSheetBase.tsx

@@ -4,8 +4,6 @@ import type { LayoutChangeEvent } from 'react-native';
 import { Pressable, StyleSheet, View, useWindowDimensions } from 'react-native';
 import type { SharedValue, WithSpringConfig } from 'react-native-reanimated';
 import Animated, {
-  measure,
-  scrollTo,
   useAnimatedRef,
   useAnimatedReaction,
   useAnimatedStyle,
@@ -13,13 +11,20 @@ import Animated, {
   useSharedValue,
   withSpring,
 } from 'react-native-reanimated';
-import { scheduleOnRN, scheduleOnUI } from 'react-native-worklets';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { scheduleOnUI } from 'react-native-worklets';
+import { GestureDetector } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Portal } from './BottomSheetProvider';
 import { BottomSheetContextProvider } from './BottomSheetContext';
-
-export type Detent = number | 'max';
+import {
+  clampIndex,
+  isDetentProgrammatic,
+  resolveDetent,
+} from './bottomSheetUtils';
+import type { Detent } from './bottomSheetUtils';
+import { useBottomSheetPanGesture } from './useBottomSheetPanGesture';
+export type { Detent, DetentValue } from './bottomSheetUtils';
+export { programmatic } from './bottomSheetUtils';
 
 export interface BottomSheetCommonProps {
   children: ReactNode;
@@ -48,25 +53,6 @@ const DEFAULT_CLOSE_ANIMATION_CONFIG: WithSpringConfig = {
   overshootClamping: true,
 };
 
-const VELOCITY_THRESHOLD = 800;
-
-const resolveDetent = (
-  detent: Detent,
-  contentHeight: number,
-  maxHeight: number
-) => {
-  if (typeof detent === 'number') return detent;
-  if (detent === 'max') {
-    return contentHeight > 0 ? Math.min(contentHeight, maxHeight) : maxHeight;
-  }
-  throw new Error(`Invalid detent: \`${detent}\`.`);
-};
-
-const clampIndex = (index: number, detentCount: number) => {
-  if (detentCount <= 0) return 0;
-  return Math.min(Math.max(index, 0), detentCount - 1);
-};
-
 const DefaultScrim = ({ progress }: { progress: SharedValue<number> }) => {
   const style = useAnimatedStyle(() => ({ opacity: progress.value }));
   return (
@@ -96,14 +82,18 @@ export const BottomSheetBase = ({
   const maxHeight = screenHeight - insets.top;
   const resolvedIndex = clampIndex(index, detents.length);
   const [contentHeight, setContentHeight] = useState(0);
+
   if (detents.length === 0) {
     throw new Error('detents must include at least one value.');
   }
-  const normalizedDetents = detents.map((point) => {
-    const resolved = resolveDetent(point, contentHeight, maxHeight);
+
+  const normalizedDetents = detents.map((detent) => {
+    const resolved = resolveDetent(detent, contentHeight, maxHeight);
     return Math.max(0, Math.min(resolved, maxHeight));
   });
+  const isDraggable = detents.map((detent) => !isDetentProgrammatic(detent));
   const initialMaxSnap = Math.max(0, ...normalizedDetents);
+
   const translateY = useSharedValue(initialMaxSnap);
   const animationTarget = useSharedValue(NaN);
   const sheetHeight = useSharedValue(initialMaxSnap);
@@ -112,41 +102,50 @@ export const BottomSheetBase = ({
   const isScrollableGestureActive = useSharedValue(false);
   const isScrollableLocked = useSharedValue(false);
   const scrollableRef = useAnimatedRef();
-  const isDraggingSheet = useSharedValue(false);
-  const isDraggingFromScrollable = useSharedValue(false);
-  const panStartY = useSharedValue(0);
-  const panActivated = useSharedValue(false);
-  const dragStartTranslateY = useSharedValue(0);
-  const isTouchWithinScrollable = useSharedValue(false);
+
   const detentsValue = useSharedValue(normalizedDetents);
+  const isDraggableValue = useSharedValue(isDraggable);
   const firstNonzeroDetent = useSharedValue(
-    normalizedDetents.find((d) => d > 0) ?? 0
+    normalizedDetents.find((detent) => detent > 0) ?? 0
   );
   const currentIndex = useSharedValue(resolvedIndex);
   const internalPosition = useDerivedValue(() =>
     Math.max(0, sheetHeight.value - translateY.value)
   );
+
   useAnimatedReaction(
     () => internalPosition.value,
     (value) => {
       if (externalPosition !== undefined) externalPosition.set(value);
     }
   );
+
   const scrimProgress = useDerivedValue(() => {
     const target = firstNonzeroDetent.value;
     if (target <= 0) return 0;
     const progress = internalPosition.value / target;
     return Math.min(1, Math.max(0, progress));
   });
+
   const handleIndexChange = (nextIndex: number) => {
     onIndexChange?.(nextIndex);
   };
+
   useEffect(() => {
     const maxSnap = Math.max(0, ...normalizedDetents);
     detentsValue.set(normalizedDetents);
+    isDraggableValue.set(isDraggable);
     sheetHeight.set(maxSnap);
-    firstNonzeroDetent.set(normalizedDetents.find((d) => d > 0) ?? 0);
-  }, [normalizedDetents, sheetHeight, detentsValue, firstNonzeroDetent]);
+    firstNonzeroDetent.set(normalizedDetents.find((detent) => detent > 0) ?? 0);
+  }, [
+    normalizedDetents,
+    isDraggable,
+    sheetHeight,
+    detentsValue,
+    isDraggableValue,
+    firstNonzeroDetent,
+  ]);
+
   const animateToIndex = useCallback(
     (targetIndex: number, velocity?: number) => {
       'worklet';
@@ -174,135 +173,27 @@ export const BottomSheetBase = ({
       translateY,
     ]
   );
+
   useEffect(() => {
     scheduleOnUI(animateToIndex, resolvedIndex);
   }, [animateToIndex, resolvedIndex, normalizedDetents]);
-  const panGesture = Gesture.Pan()
-    .manualActivation(true)
-    .onTouchesDown((event) => {
-      'worklet';
-      panActivated.set(false);
-      isDraggingSheet.set(false);
-      isDraggingFromScrollable.set(false);
-      isScrollableLocked.set(false);
-      isTouchWithinScrollable.set(false);
-      const touch = event.changedTouches[0] ?? event.allTouches[0];
-      if (touch !== undefined) {
-        panStartY.set(touch.absoluteY);
-        if (hasScrollable.value) {
-          const layout = measure(scrollableRef);
-          if (layout !== null) {
-            const withinX =
-              touch.absoluteX >= layout.pageX &&
-              touch.absoluteX <= layout.pageX + layout.width;
-            const withinY =
-              touch.absoluteY >= layout.pageY &&
-              touch.absoluteY <= layout.pageY + layout.height;
-            isTouchWithinScrollable.set(withinX && withinY);
-          }
-        }
-      }
-    })
-    .onTouchesMove((event, stateManager) => {
-      'worklet';
-      if (panActivated.value) return;
-      const touch = event.changedTouches[0] ?? event.allTouches[0];
-      if (!touch) return;
-      const deltaY = touch.absoluteY - panStartY.value;
-      if (
-        hasScrollable.value &&
-        scrollOffset.value > 0 &&
-        isTouchWithinScrollable.value
-      ) {
-        return;
-      }
-      if (deltaY > 0 || translateY.value > 0) {
-        panActivated.set(true);
-        stateManager.activate();
-      }
-    })
-    .onBegin(() => {
-      'worklet';
-      animationTarget.set(NaN);
-      isDraggingSheet.set(false);
-      isDraggingFromScrollable.set(false);
-      dragStartTranslateY.set(translateY.value);
-    })
-    .onUpdate((event) => {
-      'worklet';
-      if (isDraggingSheet.value) {
-        if (isDraggingFromScrollable.value) {
-          scrollTo(scrollableRef, 0, 0, false);
-        }
-      } else {
-        const isDraggingDown = event.translationY > 0;
-        const canStartDrag =
-          !hasScrollable.value ||
-          scrollOffset.value <= 0 ||
-          !isTouchWithinScrollable.value;
-        if (!canStartDrag || (!isDraggingDown && translateY.value <= 0)) {
-          return;
-        }
-        const isScrollableActive =
-          hasScrollable.value && isScrollableGestureActive.value;
-        isDraggingSheet.set(true);
-        isDraggingFromScrollable.set(
-          isScrollableActive && isTouchWithinScrollable.value
-        );
-        isScrollableLocked.set(hasScrollable.value);
-        if (isTouchWithinScrollable.value && hasScrollable.value) {
-          scrollTo(scrollableRef, 0, 0, false);
-        }
-      }
-      const nextTranslate = Math.min(
-        Math.max(dragStartTranslateY.value + event.translationY, 0),
-        sheetHeight.value
-      );
-      translateY.set(nextTranslate);
-    })
-    .onEnd((event) => {
-      'worklet';
-      const wasDragging = isDraggingSheet.value;
-      isScrollableLocked.set(false);
-      isDraggingSheet.set(false);
-      if (!wasDragging) {
-        animateToIndex(currentIndex.value);
-        return;
-      }
-      const maxSnap = sheetHeight.value;
-      const allPositions = detentsValue.value.map((point, snapIndex) => ({
-        index: snapIndex,
-        translateY: maxSnap - point,
-      }));
-      const currentTranslate = translateY.value;
-      const velocityY = event.velocityY;
-      let targetIndex = currentIndex.value;
-      let minDistance = Infinity;
-      for (const pos of allPositions) {
-        const distance = Math.abs(currentTranslate - pos.translateY);
-        if (distance < minDistance) {
-          minDistance = distance;
-          targetIndex = pos.index;
-        }
-      }
-      if (Math.abs(velocityY) > VELOCITY_THRESHOLD) {
-        if (velocityY > 0) {
-          const lower = allPositions
-            .filter((pos) => pos.translateY > currentTranslate + 1)
-            .sort((a, b) => a.translateY - b.translateY)[0];
-          if (lower !== undefined) targetIndex = lower.index;
-        } else {
-          const upper = allPositions
-            .filter((pos) => pos.translateY < currentTranslate - 1)
-            .sort((a, b) => b.translateY - a.translateY)[0];
-          if (upper !== undefined) targetIndex = upper.index;
-        }
-      }
-      const hasIndexChanged = targetIndex !== currentIndex.value;
-      if (hasIndexChanged) scheduleOnRN(handleIndexChange, targetIndex);
-      const shouldApplyVelocity = hasIndexChanged && Number.isFinite(velocityY);
-      animateToIndex(targetIndex, shouldApplyVelocity ? velocityY : undefined);
-    });
+
+  const panGesture = useBottomSheetPanGesture({
+    animationTarget,
+    translateY,
+    sheetHeight,
+    detentsValue,
+    isDraggableValue,
+    currentIndex,
+    scrollOffset,
+    hasScrollable,
+    isScrollableGestureActive,
+    isScrollableLocked,
+    scrollableRef,
+    handleIndexChange,
+    animateToIndex,
+  });
+
   const handleSentinelLayout = (event: LayoutChangeEvent) => {
     setContentHeight(event.nativeEvent.layout.y);
   };
@@ -312,6 +203,7 @@ export const BottomSheetBase = ({
     handleIndexChange(closedIndex);
     scheduleOnUI(animateToIndex, closedIndex);
   };
+
   const wrapperStyle = useAnimatedStyle(() => ({
     transform: [{ translateY: translateY.value }],
     height: sheetHeight.value,
@@ -325,6 +217,7 @@ export const BottomSheetBase = ({
   } else if (modal) {
     scrimElement = <DefaultScrim progress={scrimProgress} />;
   }
+
   const sheetContent = (
     <BottomSheetContextProvider
       value={{
@@ -361,6 +254,7 @@ export const BottomSheetBase = ({
       </Animated.View>
     </BottomSheetContextProvider>
   );
+
   const sheetContainer = (
     <Animated.View
       style={StyleSheet.absoluteFill}
@@ -375,5 +269,6 @@ export const BottomSheetBase = ({
     </Animated.View>
   );
   if (modal) return <Portal>{sheetContainer}</Portal>;
+
   return sheetContainer;
 };

package/src/BottomSheetProvider.tsx

@@ -24,6 +24,7 @@ const PortalHost = () => {
   useEffect(() => {
     return context.subscribe(forceRender);
   }, [context]);
+
   return Array.from(context.getPortals().entries()).map(([key, element]) => (
     <View key={key} style={StyleSheet.absoluteFill} pointerEvents="box-none">
       {element}
@@ -56,6 +57,7 @@ export const BottomSheetProvider = ({ children }: { children: ReactNode }) => {
       getPortals: () => portals,
     };
   });
+
   return (
     <PortalContext.Provider value={context}>
       {children}
@@ -69,8 +71,10 @@ export const Portal = ({ children }: { children: ReactNode }) => {
   if (context === null) {
     throw new Error('`Portal` must be used within `BottomSheetProvider`.');
   }
+
   const { addPortal, removePortal } = context;
   const id = useId();
+
   useEffect(() => {
     addPortal(id, children);
   }, [id, children, addPortal]);

package/src/bottomSheetUtils.ts

@@ -0,0 +1,82 @@
+export type DetentValue = number | 'max';
+
+export type Detent =
+  | DetentValue
+  | { value: DetentValue; programmatic?: boolean };
+
+export const programmatic = (value: DetentValue): Detent => ({
+  value,
+  programmatic: true,
+});
+
+export const detentValue = (detent: Detent): DetentValue => {
+  if (typeof detent === 'object' && detent !== null) return detent.value;
+  return detent;
+};
+
+export const isDetentProgrammatic = (detent: Detent): boolean => {
+  if (typeof detent === 'object' && detent !== null) {
+    return detent.programmatic === true;
+  }
+  return false;
+};
+
+const VELOCITY_THRESHOLD = 800;
+
+export const findSnapTarget = (
+  currentTranslate: number,
+  velocityY: number,
+  currentIndex: number,
+  allPositions: { index: number; translateY: number; isDraggable: boolean }[]
+) => {
+  'worklet';
+  const draggablePositions = allPositions.filter(
+    (position) => position.isDraggable
+  );
+  const effectivePositions =
+    draggablePositions.length > 0 ? draggablePositions : allPositions;
+
+  let targetIndex = currentIndex;
+  let minDistance = Infinity;
+
+  for (const position of effectivePositions) {
+    const distance = Math.abs(currentTranslate - position.translateY);
+    if (distance < minDistance) {
+      minDistance = distance;
+      targetIndex = position.index;
+    }
+  }
+
+  if (Math.abs(velocityY) > VELOCITY_THRESHOLD) {
+    if (velocityY > 0) {
+      const lowerPosition = effectivePositions
+        .filter((position) => position.translateY > currentTranslate + 1)
+        .sort((a, b) => a.translateY - b.translateY)[0];
+      if (lowerPosition !== undefined) targetIndex = lowerPosition.index;
+    } else {
+      const upperPosition = effectivePositions
+        .filter((position) => position.translateY < currentTranslate - 1)
+        .sort((a, b) => b.translateY - a.translateY)[0];
+      if (upperPosition !== undefined) targetIndex = upperPosition.index;
+    }
+  }
+  return targetIndex;
+};
+
+export const resolveDetent = (
+  detent: Detent,
+  contentHeight: number,
+  maxHeight: number
+) => {
+  const detentValueInput = detentValue(detent);
+  if (typeof detentValueInput === 'number') return detentValueInput;
+  if (detentValueInput === 'max') {
+    return contentHeight > 0 ? Math.min(contentHeight, maxHeight) : maxHeight;
+  }
+  throw new Error(`Invalid detent: \`${detentValueInput}\`.`);
+};
+
+export const clampIndex = (index: number, detentCount: number) => {
+  if (detentCount <= 0) return 0;
+  return Math.min(Math.max(index, 0), detentCount - 1);
+};

package/src/index.tsx

@@ -13,4 +13,5 @@ export type {
   BottomSheetScrollViewMethods,
   BottomSheetScrollViewProps,
 } from './BottomSheetScrollView';
-export type { Detent } from './BottomSheetBase';
+export type { Detent, DetentValue } from './BottomSheetBase';
+export { programmatic } from './BottomSheetBase';

package/src/useBottomSheetPanGesture.ts

@@ -0,0 +1,208 @@
+import type { PanGesture } from 'react-native-gesture-handler';
+import { Gesture } from 'react-native-gesture-handler';
+import { scheduleOnRN } from 'react-native-worklets';
+import {
+  measure,
+  scrollTo,
+  type AnimatedRef,
+  type SharedValue,
+  useSharedValue,
+} from 'react-native-reanimated';
+
+import { findSnapTarget } from './bottomSheetUtils';
+
+interface BottomSheetPanGestureParams {
+  animationTarget: SharedValue<number>;
+  translateY: SharedValue<number>;
+  sheetHeight: SharedValue<number>;
+  detentsValue: SharedValue<number[]>;
+  isDraggableValue: SharedValue<boolean[]>;
+  currentIndex: SharedValue<number>;
+  scrollOffset: SharedValue<number>;
+  hasScrollable: SharedValue<boolean>;
+  isScrollableGestureActive: SharedValue<boolean>;
+  isScrollableLocked: SharedValue<boolean>;
+  scrollableRef: AnimatedRef<any>;
+  handleIndexChange: (nextIndex: number) => void;
+  animateToIndex: (targetIndex: number, velocity?: number) => void;
+}
+
+export const useBottomSheetPanGesture = ({
+  animationTarget,
+  translateY,
+  sheetHeight,
+  detentsValue,
+  isDraggableValue,
+  currentIndex,
+  scrollOffset,
+  hasScrollable,
+  isScrollableGestureActive,
+  isScrollableLocked,
+  scrollableRef,
+  handleIndexChange,
+  animateToIndex,
+}: BottomSheetPanGestureParams): PanGesture => {
+  const isDraggingSheet = useSharedValue(false);
+  const isDraggingFromScrollable = useSharedValue(false);
+  const panStartY = useSharedValue(0);
+  const panActivated = useSharedValue(false);
+  const dragStartTranslateY = useSharedValue(0);
+  const isTouchWithinScrollable = useSharedValue(false);
+
+  return Gesture.Pan()
+    .manualActivation(true)
+    .onTouchesDown((event) => {
+      'worklet';
+      panActivated.set(false);
+      isDraggingSheet.set(false);
+      isDraggingFromScrollable.set(false);
+      isScrollableLocked.set(false);
+      isTouchWithinScrollable.set(false);
+      const touch = event.changedTouches[0] ?? event.allTouches[0];
+      if (touch !== undefined) {
+        panStartY.set(touch.absoluteY);
+        if (hasScrollable.value) {
+          const layout = measure(scrollableRef);
+          if (layout !== null) {
+            const withinX =
+              touch.absoluteX >= layout.pageX &&
+              touch.absoluteX <= layout.pageX + layout.width;
+            const withinY =
+              touch.absoluteY >= layout.pageY &&
+              touch.absoluteY <= layout.pageY + layout.height;
+            isTouchWithinScrollable.set(withinX && withinY);
+          }
+        }
+      }
+    })
+    .onTouchesMove((event, stateManager) => {
+      'worklet';
+      if (panActivated.value) return;
+      const touch = event.changedTouches[0] ?? event.allTouches[0];
+      if (!touch) return;
+      const deltaY = touch.absoluteY - panStartY.value;
+      if (
+        hasScrollable.value &&
+        scrollOffset.value > 0 &&
+        isTouchWithinScrollable.value
+      ) {
+        return;
+      }
+      if (deltaY > 0 || translateY.value > 0) {
+        panActivated.set(true);
+        stateManager.activate();
+      }
+    })
+    .onBegin(() => {
+      'worklet';
+      animationTarget.set(NaN);
+      isDraggingSheet.set(false);
+      isDraggingFromScrollable.set(false);
+      dragStartTranslateY.set(translateY.value);
+    })
+    .onUpdate((event) => {
+      'worklet';
+      if (isDraggingSheet.value) {
+        if (isDraggingFromScrollable.value) {
+          scrollTo(scrollableRef, 0, 0, false);
+        }
+      } else {
+        const isDraggingDown = event.translationY > 0;
+        const canStartDrag =
+          !hasScrollable.value ||
+          scrollOffset.value <= 0 ||
+          !isTouchWithinScrollable.value;
+        if (!canStartDrag || (!isDraggingDown && translateY.value <= 0)) {
+          return;
+        }
+        const isScrollableActive =
+          hasScrollable.value && isScrollableGestureActive.value;
+        isDraggingSheet.set(true);
+        isDraggingFromScrollable.set(
+          isScrollableActive && isTouchWithinScrollable.value
+        );
+        dragStartTranslateY.set(translateY.value - event.translationY);
+        isScrollableLocked.set(hasScrollable.value);
+        if (isTouchWithinScrollable.value && hasScrollable.value) {
+          scrollTo(scrollableRef, 0, 0, false);
+        }
+      }
+      const rawTranslate = dragStartTranslateY.value + event.translationY;
+      const nextTranslate = Math.min(
+        Math.max(rawTranslate, 0),
+        sheetHeight.value
+      );
+      translateY.set(nextTranslate);
+      if (
+        isDraggingSheet.value &&
+        rawTranslate < 0 &&
+        isTouchWithinScrollable.value &&
+        hasScrollable.value
+      ) {
+        isDraggingSheet.set(false);
+        isScrollableLocked.set(false);
+        const resolvedDetentValues = detentsValue.value;
+        const draggable = isDraggableValue.value;
+        let targetSnapIndex = -1;
+        let targetSnapValue = -1;
+        for (let i = resolvedDetentValues.length - 1; i >= 0; i--) {
+          const detentValue = resolvedDetentValues[i];
+          if (
+            detentValue !== undefined &&
+            (draggable[i] ?? true) &&
+            detentValue > targetSnapValue
+          ) {
+            targetSnapValue = detentValue;
+            targetSnapIndex = i;
+          }
+        }
+        if (targetSnapIndex === -1) {
+          const maxSnap = sheetHeight.value;
+          for (let i = resolvedDetentValues.length - 1; i >= 0; i--) {
+            if (resolvedDetentValues[i] === maxSnap) {
+              targetSnapIndex = i;
+              break;
+            }
+          }
+        }
+        if (targetSnapIndex !== -1) {
+          if (targetSnapIndex !== currentIndex.value) {
+            scheduleOnRN(handleIndexChange, targetSnapIndex);
+          }
+          animateToIndex(targetSnapIndex);
+        }
+      }
+    })
+    .onEnd((event) => {
+      'worklet';
+      const wasDragging = isDraggingSheet.value;
+      isScrollableLocked.set(false);
+      isDraggingSheet.set(false);
+      animationTarget.set(NaN);
+      if (!wasDragging) {
+        animateToIndex(currentIndex.value);
+        return;
+      }
+      const maxSnap = sheetHeight.value;
+      const draggable = isDraggableValue.value;
+      const allPositions = detentsValue.value.map((detentValue, snapIndex) => ({
+        index: snapIndex,
+        translateY: maxSnap - detentValue,
+        isDraggable: draggable[snapIndex] ?? true,
+      }));
+      const targetIndex = findSnapTarget(
+        translateY.value,
+        event.velocityY,
+        currentIndex.value,
+        allPositions
+      );
+      const hasIndexChanged = targetIndex !== currentIndex.value;
+      if (hasIndexChanged) scheduleOnRN(handleIndexChange, targetIndex);
+      const shouldApplyVelocity =
+        hasIndexChanged && Number.isFinite(event.velocityY);
+      animateToIndex(
+        targetIndex,
+        shouldApplyVelocity ? event.velocityY : undefined
+      );
+    });
+};