@swmansion/react-native-bottom-sheet 0.10.0-next.2 → 0.10.0-next.3

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

@@ -62,6 +62,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
   private var pendingIndex: Int? = null
   private var hasLaidOut = false
   private var isPanning = false
+  private var panStartingIndex: Int? = null
 
   // MARK: - Internal
 
@@ -393,20 +394,29 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
   private val isTargetingClosedDetent: Boolean
     get() = closedIndex?.let { targetIndex == it } == true
 
-  private val draggableMinTy: Float
-    get() {
-      val highestIndex = detentSpecs.indices.lastOrNull { !detentSpecs[it].programmatic } ?: 0
-      return translationY(highestIndex)
+  private fun snapCandidateIndices(includeIndex: Int? = null): List<Int> {
+    val indices = detentSpecs.indices.filter { !detentSpecs[it].programmatic }.toMutableList()
+    if (
+      includeIndex != null &&
+        includeIndex in detentSpecs.indices &&
+        detentSpecs[includeIndex].programmatic
+    ) {
+      indices.add(includeIndex)
     }
+    return indices.distinct().sortedBy { detentSpecs[it].height }
+  }
 
-  private val draggableMaxTy: Float
-    get() {
-      val lowestIndex = detentSpecs.indices.firstOrNull { !detentSpecs[it].programmatic } ?: 0
-      return translationY(lowestIndex)
-    }
+  private fun draggableRange(includeIndex: Int? = null): ClosedFloatingPointRange<Float> {
+    val candidates = snapCandidateIndices(includeIndex)
+    if (candidates.isEmpty()) return 0f..0f
+    val translations = candidates.map(::translationY)
+    return (translations.minOrNull() ?: 0f)..(translations.maxOrNull() ?: 0f)
+  }
 
-  private val isAtMaxDraggable: Boolean
-    get() = sheetContainer.translationY <= draggableMinTy + 1f
+  private fun isAtMaxDragCandidate(includeIndex: Int? = null): Boolean {
+    val range = draggableRange(includeIndex)
+    return sheetContainer.translationY <= range.start + 1f
+  }
 
   private fun emitPosition() {
     val maxHeight = detentSpecs.maxOfOrNull { it.height } ?: resolvedMaxDetentHeight()
@@ -510,24 +520,24 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     spring.start()
   }
 
-  private fun bestSnapIndex(currentHeight: Float, velocity: Float): Int {
-    val draggable = detentSpecs.withIndex().filter { !it.value.programmatic }
-    if (draggable.isEmpty()) return targetIndex
+  private fun bestSnapIndex(currentHeight: Float, velocity: Float, includeIndex: Int? = null): Int {
+    val candidates = snapCandidateIndices(includeIndex)
+    if (candidates.isEmpty()) return targetIndex
 
     val flickThreshold = 600f * density
 
     if (velocity < -flickThreshold) {
-      return draggable.firstOrNull { it.value.height > currentHeight }?.index
-        ?: draggable.lastOrNull()?.index
+      return candidates.firstOrNull { detentSpecs[it].height > currentHeight }
+        ?: candidates.lastOrNull()
         ?: targetIndex
     }
     if (velocity > flickThreshold) {
-      return draggable.lastOrNull { it.value.height < currentHeight }?.index
-        ?: draggable.firstOrNull()?.index
+      return candidates.lastOrNull { detentSpecs[it].height < currentHeight }
+        ?: candidates.firstOrNull()
         ?: targetIndex
     }
 
-    return draggable.minByOrNull { abs(it.value.height - currentHeight) }?.index ?: targetIndex
+    return candidates.minByOrNull { abs(detentSpecs[it].height - currentHeight) } ?: targetIndex
   }
 
   // MARK: - Touch handling
@@ -563,11 +573,12 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
         val dx = x - initialTouchX
         val dy = y - initialTouchY
 
-        if (abs(dy) > touchSlop && abs(dy) > abs(dx) && draggableMinTy < draggableMaxTy) {
+        val dragRange = draggableRange(targetIndex)
+        if (abs(dy) > touchSlop && abs(dy) > abs(dx) && dragRange.start < dragRange.endInclusive) {
           if (disableScrollableNegotiation && findScrollableAtTouch() != null) {
             return false
           }
-          if (!isAtMaxDraggable) {
+          if (!isAtMaxDragCandidate(targetIndex)) {
             lastTouchY = y
             requestDisallowInterceptTouchEvent(false)
             // Cancel in-flight JS touches. React Native's JSTouchDispatcher
@@ -640,7 +651,9 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
         val dy = y - lastTouchY
         lastTouchY = y
 
-        val newTy = (sheetContainer.translationY + dy).coerceIn(draggableMinTy, draggableMaxTy)
+        val dragRange = draggableRange(panStartingIndex)
+        val newTy =
+          (sheetContainer.translationY + dy).coerceIn(dragRange.start, dragRange.endInclusive)
         sheetContainer.translationY = newTy
         emitPosition()
         return true
@@ -659,7 +672,8 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
         velocityTracker = null
         val maxHeight = detentSpecs.maxOfOrNull { it.height } ?: resolvedMaxDetentHeight()
         val currentHeight = maxHeight - sheetContainer.translationY
-        val index = bestSnapIndex(currentHeight, velocity)
+        val index = bestSnapIndex(currentHeight, velocity, panStartingIndex)
+        panStartingIndex = null
         snapToIndex(index, velocity)
         return true
       }
@@ -679,6 +693,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
 
   private fun beginPan(event: MotionEvent) {
     isPanning = true
+    panStartingIndex = targetIndex
     activePointerId = event.getPointerId(0)
     lastTouchY = event.y
     velocityTracker?.recycle()
@@ -771,6 +786,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     pendingIndex = null
     hasLaidOut = false
     isPanning = false
+    panStartingIndex = null
     initialTouchY = 0f
     initialTouchX = 0f
     lastTouchY = 0f

package/ios/RNSBottomSheetHostingView.swift

@@ -59,6 +59,7 @@ public final class RNSBottomSheetHostingView: UIView {
   private var pendingIndex: Int?
   private var hasLaidOut = false
   private var isPanning = false
+  private var panStartingIndex: Int?
   private var isContentInteractionDisabled = false
   private var contentHeightMarker: UIView?
   private static var markerObservationContext = 0
@@ -237,6 +238,7 @@ public final class RNSBottomSheetHostingView: UIView {
     pendingIndex = nil
     hasLaidOut = false
     isPanning = false
+    panStartingIndex = nil
     setContentInteractionEnabled(true)
     stopObservingContentHeightMarker()
     sheetContainer.transform = .identity
@@ -260,11 +262,27 @@ public final class RNSBottomSheetHostingView: UIView {
     return maxHeight - snapHeight
   }
 
-  private var draggableRange: (minTy: CGFloat, maxTy: CGFloat) {
-    let draggable = detentSpecs.enumerated().filter { !$0.element.programmatic }
-    let highestIndex = draggable.last?.offset ?? 0
-    let lowestIndex = draggable.first?.offset ?? 0
-    return (minTy: translationY(for: highestIndex), maxTy: translationY(for: lowestIndex))
+  private func snapCandidateIndices(including index: Int? = nil) -> [Int] {
+    var indices = detentSpecs.indices.filter { !detentSpecs[$0].programmatic }
+    if
+      let index,
+      detentSpecs.indices.contains(index),
+      detentSpecs[index].programmatic
+    {
+      indices.append(index)
+    }
+    return Array(Set(indices)).sorted {
+      detentSpecs[$0].height < detentSpecs[$1].height
+    }
+  }
+
+  private func draggableRange(including index: Int? = nil) -> (minTy: CGFloat, maxTy: CGFloat) {
+    let candidates = snapCandidateIndices(including: index)
+    guard !candidates.isEmpty else { return (minTy: 0, maxTy: 0) }
+    return (
+      minTy: candidates.map { translationY(for: $0) }.min() ?? 0,
+      maxTy: candidates.map { translationY(for: $0) }.max() ?? 0
+    )
   }
 
   private var closedIndex: Int? {
@@ -393,6 +411,7 @@ public final class RNSBottomSheetHostingView: UIView {
     switch gesture.state {
     case .began:
       isPanning = true
+      panStartingIndex = targetIndex
       sheetContainer.endEditing(true)
       setContentInteractionEnabled(false)
       if let handler = surfaceTouchHandler {
@@ -411,8 +430,9 @@ public final class RNSBottomSheetHostingView: UIView {
     case .changed:
       let delta = gesture.translation(in: self).y
       gesture.setTranslation(.zero, in: self)
-      let minTy = draggableRange.minTy
-      let maxTy = draggableRange.maxTy
+      let range = draggableRange(including: panStartingIndex)
+      let minTy = range.minTy
+      let maxTy = range.maxTy
       let newTy = max(minTy, min(maxTy, sheetContainer.transform.ty + delta))
       sheetContainer.transform = CGAffineTransform(translationX: 0, y: newTy)
       emitPosition()
@@ -421,7 +441,8 @@ public final class RNSBottomSheetHostingView: UIView {
       isPanning = false
       let velocity = gesture.velocity(in: self).y
       let currentHeight = maxHeight - sheetContainer.transform.ty
-      let index = bestSnapIndex(for: currentHeight, velocity: velocity)
+      let index = bestSnapIndex(for: currentHeight, velocity: velocity, including: panStartingIndex)
+      panStartingIndex = nil
       snapToIndex(index, velocity: velocity)
 
     case .cancelled:
@@ -429,11 +450,17 @@ public final class RNSBottomSheetHostingView: UIView {
       setContentInteractionEnabled(true)
       let cancelVelocity = gesture.velocity(in: self).y
       let cancelHeight = maxHeight - sheetContainer.transform.ty
-      let cancelIndex = bestSnapIndex(for: cancelHeight, velocity: cancelVelocity)
+      let cancelIndex = bestSnapIndex(
+        for: cancelHeight,
+        velocity: cancelVelocity,
+        including: panStartingIndex
+      )
+      panStartingIndex = nil
       snapToIndex(cancelIndex, velocity: cancelVelocity)
 
     case .failed:
       isPanning = false
+      panStartingIndex = nil
       setContentInteractionEnabled(true)
 
     default:
@@ -441,24 +468,28 @@ public final class RNSBottomSheetHostingView: UIView {
     }
   }
 
-  private func bestSnapIndex(for height: CGFloat, velocity: CGFloat) -> Int {
-    let draggable = detentSpecs.enumerated().filter { !$0.element.programmatic }
-    guard !draggable.isEmpty else { return targetIndex }
+  private func bestSnapIndex(
+    for height: CGFloat,
+    velocity: CGFloat,
+    including index: Int? = nil
+  ) -> Int {
+    let candidates = snapCandidateIndices(including: index)
+    guard !candidates.isEmpty else { return targetIndex }
 
     let flickThreshold: CGFloat = 600
 
     if velocity < -flickThreshold {
-      return draggable.first(where: { $0.element.height > height })?.offset
-        ?? draggable.last?.offset ?? targetIndex
+      return candidates.first(where: { detentSpecs[$0].height > height })
+        ?? candidates.last ?? targetIndex
     }
     if velocity > flickThreshold {
-      return draggable.last(where: { $0.element.height < height })?.offset
-        ?? draggable.first?.offset ?? targetIndex
+      return candidates.last(where: { detentSpecs[$0].height < height })
+        ?? candidates.first ?? targetIndex
     }
 
-    return draggable.min(by: {
-      abs($0.element.height - height) < abs($1.element.height - height)
-    })?.offset ?? targetIndex
+    return candidates.min(by: {
+      abs(detentSpecs[$0].height - height) < abs(detentSpecs[$1].height - height)
+    }) ?? targetIndex
   }
 
   private func isVerticallyScrollable(_ scrollView: UIScrollView) -> Bool {
@@ -498,8 +529,8 @@ public final class RNSBottomSheetHostingView: UIView {
     let velocity = panGesture.velocity(in: self)
     guard abs(velocity.y) > abs(velocity.x) else { return false }
 
-    let draggable = detentSpecs.enumerated().filter { !$0.element.programmatic }
-    guard draggable.count > 1 else { return false }
+    let candidates = snapCandidateIndices(including: targetIndex)
+    guard candidates.count > 1 else { return false }
 
     if disableScrollableNegotiation {
       let locationInContainer = panGesture.location(in: sheetContainer)
@@ -508,9 +539,9 @@ public final class RNSBottomSheetHostingView: UIView {
       }
     }
 
-    let maxDraggableIndex = draggable.last?.offset ?? 0
+    let maxCandidateHeight = candidates.map { detentSpecs[$0].height }.max() ?? 0
     // Below max: allow drag in either direction to reach other detents.
-    guard targetIndex >= maxDraggableIndex else { return true }
+    guard currentSheetHeight >= maxCandidateHeight - 0.5 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 {

package/package.json

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