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

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,10 +416,28 @@ 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
-    return !scrollView.canScrollVertically(-1)
+    if (!isTouchInsideView(scrollView)) return true
+    val inverted = isViewInverted(scrollView)
+    return if (inverted) !scrollView.canScrollVertically(1) else !scrollView.canScrollVertically(-1)
+  }
+
+  private fun isTouchInsideView(target: View): Boolean {
+    val rect = android.graphics.Rect()
+    if (!target.getGlobalVisibleRect(rect)) return false
+    val myLocation = IntArray(2)
+    getLocationOnScreen(myLocation)
+    val touchScreenX = (myLocation[0] + initialTouchX).toInt()
+    val touchScreenY = (myLocation[1] + initialTouchY).toInt()
+    return rect.contains(touchScreenX, touchScreenY)
   }
 
   private fun findScrollView(view: View): View? {
@@ -424,6 +450,19 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     return null
   }
 
+  private fun isViewInverted(view: View): Boolean {
+    val values = FloatArray(9)
+    var current: View? = view
+    while (current != null && current !== sheetContainer) {
+      if (!current.matrix.isIdentity) {
+        current.matrix.getValues(values)
+        if (values[android.graphics.Matrix.MSCALE_Y] < 0) return true
+      }
+      current = current.parent as? View
+    }
+    return false
+  }
+
   // MARK: - Cleanup
 
   fun destroy() {

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()
@@ -314,6 +344,15 @@ public final class RNSBottomSheetHostingView: UIView {
     return nil
   }
 
+  private func isViewInverted(_ view: UIView) -> Bool {
+    var current: UIView? = view
+    while let v = current, v !== sheetContainer {
+      if v.transform.d < 0 { return true }
+      current = v.superview
+    }
+    return false
+  }
+
   public override func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
     guard gestureRecognizer === panGesture else { return true }
 
@@ -324,14 +363,23 @@ 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 }
+    let inverted = isViewInverted(scrollView)
+    if inverted {
+      let maxOffsetY = scrollView.contentSize.height - scrollView.bounds.height + scrollView.adjustedContentInset.bottom
+      return scrollView.contentOffset.y >= maxOffsetY
+    }
+    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.3",
   "description": "Provides bottom-sheet components for React Native.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",