@swmansion/react-native-bottom-sheet 0.5.5 → 0.6.1

package/src/useBottomSheetPanGesture.ts

@@ -4,11 +4,11 @@ import { scheduleOnRN } from 'react-native-worklets';
 import {
   measure,
   scrollTo,
-  type AnimatedRef,
   type SharedValue,
   useSharedValue,
 } from 'react-native-reanimated';
 
+import type { ScrollableEntry } from './BottomSheetContext';
 import { findSnapTarget } from './bottomSheetUtils';
 
 interface BottomSheetPanGestureParams {
@@ -18,11 +18,8 @@ interface BottomSheetPanGestureParams {
   detentsValue: SharedValue<number[]>;
   isDraggableValue: SharedValue<boolean[]>;
   currentIndex: SharedValue<number>;
-  scrollOffset: SharedValue<number>;
-  hasScrollable: SharedValue<boolean>;
-  isScrollableGestureActive: SharedValue<boolean>;
+  scrollableEntries: ScrollableEntry[];
   isScrollableLocked: SharedValue<boolean>;
-  scrollableRef: AnimatedRef<any>;
   handleIndexChange: (nextIndex: number) => void;
   animateToIndex: (targetIndex: number, velocity?: number) => void;
 }
@@ -34,11 +31,8 @@ export const useBottomSheetPanGesture = ({
   detentsValue,
   isDraggableValue,
   currentIndex,
-  scrollOffset,
-  hasScrollable,
-  isScrollableGestureActive,
+  scrollableEntries,
   isScrollableLocked,
-  scrollableRef,
   handleIndexChange,
   animateToIndex,
 }: BottomSheetPanGestureParams): PanGesture => {
@@ -48,7 +42,7 @@ export const useBottomSheetPanGesture = ({
   const panStartY = useSharedValue(0);
   const panActivated = useSharedValue(false);
   const dragStartTranslateY = useSharedValue(0);
-  const isTouchWithinScrollable = useSharedValue(false);
+  const activeScrollableIndex = useSharedValue(-1);
 
   return Gesture.Pan()
     .manualActivation(true)
@@ -58,21 +52,26 @@ export const useBottomSheetPanGesture = ({
       isDraggingSheet.set(false);
       isDraggingFromScrollable.set(false);
       isScrollableLocked.set(false);
-      isTouchWithinScrollable.set(false);
+      activeScrollableIndex.set(-1);
       const touch = event.changedTouches[0] ?? event.allTouches[0];
       if (touch !== undefined) {
         panStartX.set(touch.absoluteX);
         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);
+        const entries = scrollableEntries;
+        for (let i = 0; i < entries.length; i++) {
+          const entry = entries[i];
+          if (entry === undefined) continue;
+          const layout = measure(entry.ref);
+          if (layout === null) continue;
+          const withinX =
+            touch.absoluteX >= layout.pageX &&
+            touch.absoluteX <= layout.pageX + layout.width;
+          const withinY =
+            touch.absoluteY >= layout.pageY &&
+            touch.absoluteY <= layout.pageY + layout.height;
+          if (withinX && withinY) {
+            activeScrollableIndex.set(i);
+            break;
           }
         }
       }
@@ -84,14 +83,38 @@ export const useBottomSheetPanGesture = ({
       if (!touch) return;
       const deltaX = touch.absoluteX - panStartX.value;
       const deltaY = touch.absoluteY - panStartY.value;
-      if (
-        hasScrollable.value &&
-        scrollOffset.value > 0 &&
-        isTouchWithinScrollable.value &&
-        translateY.value <= 0
-      ) {
+      // When multiple scrollables overlap (e.g. stacked views), the hit-test
+      // in onTouchesDown may pick the wrong one. Prefer the scrollable whose
+      // native gesture is already active — that is definitively the one
+      // receiving touches (respects pointerEvents, z-order, etc.).
+      // If multiple scrollables are registered but none has confirmed via
+      // isGestureActive yet, defer the decision to avoid acting on a
+      // potentially incorrect hit-test result.
+      const entries = scrollableEntries;
+      let gestureActiveIdx = -1;
+      for (let i = 0; i < entries.length; i++) {
+        const entry = entries[i];
+        if (entry !== undefined && entry.isGestureActive.value) {
+          gestureActiveIdx = i;
+          break;
+        }
+      }
+      if (gestureActiveIdx !== -1) {
+        activeScrollableIndex.set(gestureActiveIdx);
+      } else if (entries.length > 1) {
         return;
       }
+      const activeIdx = activeScrollableIndex.value;
+      if (activeIdx !== -1) {
+        const active = scrollableEntries[activeIdx];
+        if (
+          active !== undefined &&
+          active.scrollOffset.value > 0 &&
+          translateY.value <= 0
+        ) {
+          return;
+        }
+      }
       if (Math.abs(deltaX) > Math.abs(deltaY)) {
         stateManager.fail();
         return;
@@ -113,36 +136,30 @@ export const useBottomSheetPanGesture = ({
     })
     .onUpdate((event) => {
       'worklet';
+      const activeIdx = activeScrollableIndex.value;
+      const hasActive = activeIdx !== -1;
+      const active = hasActive ? scrollableEntries[activeIdx] : undefined;
+      const activeOffset = active !== undefined ? active.scrollOffset.value : 0;
+
       if (isDraggingSheet.value) {
-        if (isDraggingFromScrollable.value) {
-          scrollTo(scrollableRef, 0, 0, false);
+        if (isDraggingFromScrollable.value && active !== undefined) {
+          scrollTo(active.ref, 0, 0, false);
         }
       } else {
         const isDraggingDown = event.translationY > 0;
         const canStartDrag =
-          !hasScrollable.value ||
-          scrollOffset.value <= 0 ||
-          translateY.value > 0 ||
-          !isTouchWithinScrollable.value;
+          !hasActive || activeOffset <= 0 || translateY.value > 0;
         if (!canStartDrag || (!isDraggingDown && translateY.value <= 0)) {
           return;
         }
         const isScrollableActive =
-          hasScrollable.value && isScrollableGestureActive.value;
+          hasActive && active !== undefined && active.isGestureActive.value;
         isDraggingSheet.set(true);
-        isDraggingFromScrollable.set(
-          isScrollableActive &&
-            isTouchWithinScrollable.value &&
-            scrollOffset.value <= 0
-        );
+        isDraggingFromScrollable.set(isScrollableActive && activeOffset <= 0);
         dragStartTranslateY.set(translateY.value - event.translationY);
-        isScrollableLocked.set(hasScrollable.value);
-        if (
-          isTouchWithinScrollable.value &&
-          hasScrollable.value &&
-          scrollOffset.value <= 0
-        ) {
-          scrollTo(scrollableRef, 0, 0, false);
+        isScrollableLocked.set(hasActive);
+        if (hasActive && active !== undefined && activeOffset <= 0) {
+          scrollTo(active.ref, 0, 0, false);
         }
       }
       const rawTranslate = dragStartTranslateY.value + event.translationY;
@@ -163,12 +180,7 @@ export const useBottomSheetPanGesture = ({
         maxDraggableTranslateY
       );
       translateY.set(nextTranslate);
-      if (
-        isDraggingSheet.value &&
-        rawTranslate < 0 &&
-        isTouchWithinScrollable.value &&
-        hasScrollable.value
-      ) {
+      if (isDraggingSheet.value && rawTranslate < 0 && hasActive) {
         isDraggingSheet.set(false);
         isScrollableLocked.set(false);
         let targetSnapIndex = -1;

package/src/useBottomSheetScrollable.ts

@@ -5,7 +5,9 @@ import { isWorkletFunction, scheduleOnRN } from 'react-native-worklets';
 import {
   type SharedValue,
   useAnimatedProps,
+  useAnimatedRef,
   useAnimatedScrollHandler,
+  useSharedValue,
 } from 'react-native-reanimated';
 
 import { useBottomSheetContext } from './BottomSheetContext';
@@ -16,14 +18,11 @@ export const useBottomSheetScrollable = (
   baseScrollEnabled: boolean | SharedValue<boolean | undefined> = true,
   onScroll?: ScrollHandler
 ) => {
-  const {
-    scrollOffset,
-    scrollableRef,
-    hasScrollable,
-    isScrollableGestureActive,
-    isScrollableLocked,
-    panGesture,
-  } = useBottomSheetContext();
+  const { isScrollableLocked, registerScrollable, panGesture } =
+    useBottomSheetContext();
+  const scrollableRef = useAnimatedRef();
+  const scrollOffset = useSharedValue(0);
+  const isGestureActive = useSharedValue(false);
   const isWorkletScrollHandler =
     onScroll !== undefined ? isWorkletFunction(onScroll) : false;
   const scrollHandler = useAnimatedScrollHandler({
@@ -42,11 +41,11 @@ export const useBottomSheetScrollable = (
     .simultaneousWithExternalGesture(panGesture)
     .onStart(() => {
       'worklet';
-      isScrollableGestureActive.set(true);
+      isGestureActive.set(true);
     })
     .onFinalize(() => {
       'worklet';
-      isScrollableGestureActive.set(false);
+      isGestureActive.set(false);
     });
   const animatedProps = useAnimatedProps(() => {
     const resolvedScrollEnabled =
@@ -58,18 +57,12 @@ export const useBottomSheetScrollable = (
     };
   });
   useEffect(() => {
-    if (__DEV__ && hasScrollable.value) {
-      console.warn(
-        'Multiple scrollables within a single bottom sheet. Only one `BottomSheetScrollView` ' +
-          'or `BottomSheetFlatList` is supported per bottom sheet.'
-      );
-    }
-    hasScrollable.set(true);
-    return () => {
-      hasScrollable.set(false);
-      isScrollableGestureActive.set(false);
-      isScrollableLocked.set(false);
-    };
-  }, [hasScrollable, isScrollableGestureActive, isScrollableLocked]);
+    const unregister = registerScrollable({
+      ref: scrollableRef,
+      scrollOffset,
+      isGestureActive,
+    });
+    return unregister;
+  }, [registerScrollable, scrollableRef, scrollOffset, isGestureActive]);
   return { scrollHandler, scrollableRef, nativeGesture, animatedProps };
 };