@swmansion/react-native-bottom-sheet 0.7.1 → 0.7.2

package/README.md

@@ -12,6 +12,7 @@ React Native.
 - Native implementation for optimal performance.
 - Bring your own sheet surface.
 - Dynamic, content‍-‍based sizing out of the box.
+- Automatic handling of vertically scrollable children.
 - Position tracking for driving UI tied to sheets.
 - Programmatic‍-‍only detents for snap points unreachable
   by dragging.
@@ -178,7 +179,7 @@ const position = useSharedValue(0);
   }}
 >
   {/* ... */}
-</BottomSheet>;
+</BottomSheet>
 ```
 
 ## By [Software Mansion](https://swmansion.com)

package/android/src/main/java/com/swmansion/reactnativebottomsheet/BottomSheetView.kt

@@ -59,6 +59,10 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
   init {
     clipChildren = false
     clipToPadding = false
+    // Set directly rather than via the JSX prop because Fabric doesn't forward
+    // pointerEvents to the native view on Android. Without BOX_NONE the view
+    // itself becomes a touch target and its onTouchEvent would claim gestures
+    // that should go to children.
     pointerEvents = PointerEvents.BOX_NONE
     sheetContainer.clipChildren = false
     sheetContainer.clipToPadding = false
@@ -327,6 +331,10 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
           if (!isAtMaxDraggable) {
             lastTouchY = y
             requestDisallowInterceptTouchEvent(false)
+            // Cancel in-flight JS touches. React Native's JSTouchDispatcher
+            // processes events at the root view level before onInterceptTouchEvent
+            // runs, so without this the JS side never sees a cancel and Pressable
+            // would still fire onPress.
             NativeGestureUtil.notifyNativeGestureStarted(this, ev)
             return true
           }
@@ -408,12 +416,32 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
   }
 
   // MARK: - Scroll view helpers
+  //
+  // Explicit scroll-view detection is required because Android's touch dispatch
+  // doesn't support mid-gesture handoff. Once a ScrollView claims a gesture it
+  // keeps it for the entire sequence, and it always claims (returns true from
+  // onTouchEvent) even when at the scroll boundary. Without this check the sheet
+  // could never collapse by dragging down when a ScrollView is at the top.
 
   private fun isScrollViewAtTop(): Boolean {
     val scrollView = findScrollView(sheetContainer) ?: return true
+    if (!isTouchInsideView(scrollView)) return true
     return !scrollView.canScrollVertically(-1)
   }
 
+  private fun isTouchInsideView(target: View): Boolean {
+    val targetLocation = IntArray(2)
+    target.getLocationOnScreen(targetLocation)
+    val myLocation = IntArray(2)
+    getLocationOnScreen(myLocation)
+    val touchScreenX = myLocation[0] + initialTouchX
+    val touchScreenY = myLocation[1] + initialTouchY
+    return touchScreenX >= targetLocation[0] &&
+      touchScreenX < targetLocation[0] + target.width &&
+      touchScreenY >= targetLocation[1] &&
+      touchScreenY < targetLocation[1] + target.height
+  }
+
   private fun findScrollView(view: View): View? {
     if (view.canScrollVertically(1) || view.canScrollVertically(-1)) return view
     if (view is ViewGroup) {

package/ios/RNSBottomSheetHostingView.swift

@@ -42,6 +42,8 @@ public final class RNSBottomSheetHostingView: UIView {
     panGesture = UIPanGestureRecognizer(target: self, action: #selector(handlePan(_:)))
     panGesture.delegate = self
     panGesture.cancelsTouchesInView = true
+    // Delay touch delivery to views so that Pressable doesn't flash its pressed
+    // state while the pan gesture is still being disambiguated.
     panGesture.delaysTouchesBegan = true
     panGesture.delaysTouchesEnded = false
     sheetContainer.addGestureRecognizer(panGesture)
@@ -51,6 +53,30 @@ public final class RNSBottomSheetHostingView: UIView {
     fatalError("init(coder:) has not been implemented")
   }
 
+  // RCTSurfaceTouchHandler dispatches touch events to JS independently of the
+  // pan gesture (it fires in touchesBegan: regardless of its recognizer state).
+  // We cache it here and toggle isEnabled in handlePan(.began) to force a
+  // touchesCancelled dispatch to JS, preventing Pressable from firing onPress
+  // during a sheet drag. This is the iOS equivalent of Android's
+  // NativeGestureUtil.notifyNativeGestureStarted.
+  private weak var surfaceTouchHandler: UIGestureRecognizer?
+
+  public override func didMoveToWindow() {
+    super.didMoveToWindow()
+    surfaceTouchHandler = nil
+    guard window != nil else { return }
+    var current: UIView? = superview
+    while let view = current {
+      for gr in view.gestureRecognizers ?? [] {
+        if NSStringFromClass(type(of: gr)).contains("TouchHandler") {
+          surfaceTouchHandler = gr
+          return
+        }
+      }
+      current = view.superview
+    }
+  }
+
   public override func layoutSubviews() {
     super.layoutSubviews()
     guard bounds.width > 0, bounds.height > 0 else { return }
@@ -240,6 +266,10 @@ public final class RNSBottomSheetHostingView: UIView {
     case .began:
       isPanning = true
       setContentInteractionEnabled(false)
+      if let handler = surfaceTouchHandler {
+        handler.isEnabled = false
+        handler.isEnabled = true
+      }
       gesture.setTranslation(.zero, in: self)
       if let animator = activeAnimator {
         stopDisplayLink()
@@ -324,14 +354,18 @@ public final class RNSBottomSheetHostingView: UIView {
     guard draggable.count > 1 else { return false }
 
     let maxDraggableIndex = draggable.last?.offset ?? 0
+    // Below max: allow drag in either direction to reach other detents.
     guard targetIndex >= maxDraggableIndex else { return true }
-
+    // At max: only allow downward drag, and only when the scroll view (if any)
+    // is at its top edge — otherwise the scroll view should handle the gesture.
     if velocity.y < 0 {
       return false
     }
 
-    let scrollAtTop = (firstScrollView(in: sheetContainer)?.contentOffset.y ?? 0) <= 0
-    return scrollAtTop
+    guard let scrollView = firstScrollView(in: sheetContainer) else { return true }
+    let locationInScroll = panGesture.location(in: scrollView)
+    guard scrollView.bounds.contains(locationInScroll) else { return true }
+    return scrollView.contentOffset.y <= 0
   }
 }
 

package/package.json

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