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

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
 
@@ -84,6 +85,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
   private var scrimColor = Color.TRANSPARENT
   private var scrimProgress = 0f
   private var suppressScrimForClosingTarget = false
+  private var scrimPinnedFull = false
   private var maxDetentHeight = Float.NaN
   private var contentHeightMarker: View? = null
 
@@ -293,6 +295,13 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     }
 
     val previousMaxHeight = detentSpecs.maxOfOrNull { it.height } ?: resolvedMaxDetentHeight()
+    // Whether the scrim is currently fully opaque, i.e. the sheet is settled at
+    // or above the first non-zero detent. If so, a detent resize must not dip
+    // the scrim while the sheet re-anchors to the new geometry.
+    val wasScrimFull =
+      modal &&
+        firstNonZeroDetentHeight > 0f &&
+        currentSheetHeight() + 0.5f >= firstNonZeroDetentHeight
     detentSpecs = resolvedDetents
     if (width > 0 && height > 0 && detentSpecs.isNotEmpty()) {
       layoutSheetContainer(width, height)
@@ -316,8 +325,15 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
           // sheet surface keeps the same on-screen height across the resize.
           val visibleHeight = previousMaxHeight - currentTy
           sheetContainer.translationY = (newMaxHeight - visibleHeight).coerceIn(0f, newMaxHeight)
+          scrimPinnedFull = scrimPinnedFull || wasScrimFull
           emitPosition()
-          snapToIndex(targetIndex, 0f, emitIndexChange = false, emitSettle = shouldEmitSettle)
+          snapToIndex(
+            targetIndex,
+            0f,
+            emitIndexChange = false,
+            emitSettle = shouldEmitSettle,
+            preserveScrimPin = true,
+          )
         } else {
           val currentVisibleHeight = previousMaxHeight - sheetContainer.translationY
           val targetHeight = detentSpecs.getOrNull(targetIndex)?.height ?: 0f
@@ -331,8 +347,15 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
             // up to the taller detent.
             sheetContainer.translationY =
               (newMaxHeight - currentVisibleHeight).coerceIn(0f, newMaxHeight)
+            scrimPinnedFull = scrimPinnedFull || wasScrimFull
             emitPosition()
-            snapToIndex(targetIndex, 0f, emitIndexChange = false, emitSettle = false)
+            snapToIndex(
+              targetIndex,
+              0f,
+              emitIndexChange = false,
+              emitSettle = false,
+              preserveScrimPin = true,
+            )
           }
         }
       }
@@ -393,20 +416,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()
@@ -464,12 +496,16 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     velocity: Float,
     emitIndexChange: Boolean = true,
     emitSettle: Boolean = true,
+    preserveScrimPin: Boolean = false,
   ) {
     if (index < 0 || index >= detentSpecs.size) return
     targetIndex = index
     if (!isTargetingClosedDetent) {
       suppressScrimForClosingTarget = false
     }
+    if (!preserveScrimPin) {
+      scrimPinnedFull = false
+    }
 
     val targetTy = translationY(index)
     val currentTy = sheetContainer.translationY
@@ -494,6 +530,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
           activeAnimation = null
           activeAnimationEmitsSettle = false
           suppressScrimForClosingTarget = false
+          scrimPinnedFull = false
           if (closedIndex == index) {
             sheetContainer.translationY = translationY(index)
             hideScrim()
@@ -510,24 +547,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 +600,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 +678,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 +699,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 +720,8 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
 
   private fun beginPan(event: MotionEvent) {
     isPanning = true
+    scrimPinnedFull = false
+    panStartingIndex = targetIndex
     activePointerId = event.getPointerId(0)
     lastTouchY = event.y
     velocityTracker?.recycle()
@@ -771,6 +814,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     pendingIndex = null
     hasLaidOut = false
     isPanning = false
+    panStartingIndex = null
     initialTouchY = 0f
     initialTouchX = 0f
     lastTouchY = 0f
@@ -802,6 +846,15 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
       return
     }
 
+    // While the sheet is fully open and only its content/detent geometry is
+    // resizing, the position momentarily lags the grown detent height. Keep the
+    // scrim at full opacity instead of dipping it until the re-anchor settles.
+    if (scrimPinnedFull) {
+      scrimProgress = 1f
+      invalidate()
+      return
+    }
+
     val threshold = firstNonZeroDetentHeight
     scrimProgress = if (threshold <= 0f) 0f else (position / threshold).coerceIn(0f, 1f)
     invalidate()

package/ios/RNSBottomSheetHostingView.swift

@@ -55,10 +55,12 @@ public final class RNSBottomSheetHostingView: UIView {
   private var panGesture: UIPanGestureRecognizer!
   private var activeAnimator: UIViewPropertyAnimator?
   private var activeAnimatorEmitsSettle = false
+  private var scrimPinnedFull = false
   private var displayLink: CADisplayLink?
   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 +239,7 @@ public final class RNSBottomSheetHostingView: UIView {
     pendingIndex = nil
     hasLaidOut = false
     isPanning = false
+    panStartingIndex = nil
     setContentInteractionEnabled(true)
     stopObservingContentHeightMarker()
     sheetContainer.transform = .identity
@@ -260,11 +263,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? {
@@ -346,10 +365,14 @@ public final class RNSBottomSheetHostingView: UIView {
     _ index: Int,
     velocity: CGFloat,
     emitIndexChange: Bool = true,
-    emitSettle: Bool = true
+    emitSettle: Bool = true,
+    preserveScrimPin: Bool = false
   ) {
     guard index >= 0, index < detentSpecs.count else { return }
     targetIndex = index
+    if !preserveScrimPin {
+      scrimPinnedFull = false
+    }
 
     let currentTy = sheetContainer.transform.ty
     let targetTy = translationY(for: index)
@@ -373,6 +396,7 @@ public final class RNSBottomSheetHostingView: UIView {
       self.emitPosition()
       self.activeAnimator = nil
       self.activeAnimatorEmitsSettle = false
+      self.scrimPinnedFull = false
       self.setContentInteractionEnabled(true)
       self.updateInteractionState()
       if emitIndexChange {
@@ -393,6 +417,8 @@ public final class RNSBottomSheetHostingView: UIView {
     switch gesture.state {
     case .began:
       isPanning = true
+      scrimPinnedFull = false
+      panStartingIndex = targetIndex
       sheetContainer.endEditing(true)
       setContentInteractionEnabled(false)
       if let handler = surfaceTouchHandler {
@@ -411,8 +437,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 +448,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 +457,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 +475,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 +536,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 +546,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 {
@@ -578,6 +616,12 @@ public final class RNSBottomSheetHostingView: UIView {
     }
 
     let previousMaxHeight = maximumResolvedDetentHeight ?? resolvedMaxDetentHeight
+    // Whether the scrim is currently fully opaque, i.e. the sheet is settled at
+    // or above the first non-zero detent. If so, a detent resize must not dip
+    // the scrim while the sheet re-anchors to the new geometry.
+    let wasScrimFull = modal
+      && firstNonZeroDetentHeight > 0
+      && currentSheetHeight + 0.5 >= firstNonZeroDetentHeight
     detentSpecs = resolvedDetents
 
     guard bounds.width > 0, bounds.height > 0, !detentSpecs.isEmpty else {
@@ -601,8 +645,15 @@ public final class RNSBottomSheetHostingView: UIView {
         let visibleHeight = previousMaxHeight - visualTy
         let reanchoredTy = min(max(newMaxHeight - visibleHeight, 0), newMaxHeight)
         sheetContainer.transform = CGAffineTransform(translationX: 0, y: reanchoredTy)
+        scrimPinnedFull = scrimPinnedFull || wasScrimFull
         emitPosition()
-        snapToIndex(targetIndex, velocity: 0, emitIndexChange: false, emitSettle: shouldEmitSettle)
+        snapToIndex(
+          targetIndex,
+          velocity: 0,
+          emitIndexChange: false,
+          emitSettle: shouldEmitSettle,
+          preserveScrimPin: true
+        )
       } else {
         let currentVisibleHeight = previousMaxHeight - currentTranslationY
         let targetHeight = detent(at: targetIndex).height
@@ -616,8 +667,15 @@ public final class RNSBottomSheetHostingView: UIView {
           // up to the taller detent.
           let startTy = min(max(newMaxHeight - currentVisibleHeight, 0), newMaxHeight)
           sheetContainer.transform = CGAffineTransform(translationX: 0, y: startTy)
+          scrimPinnedFull = scrimPinnedFull || wasScrimFull
           emitPosition()
-          snapToIndex(targetIndex, velocity: 0, emitIndexChange: false, emitSettle: false)
+          snapToIndex(
+            targetIndex,
+            velocity: 0,
+            emitIndexChange: false,
+            emitSettle: false,
+            preserveScrimPin: true
+          )
         }
       }
     }
@@ -755,6 +813,15 @@ private extension RNSBottomSheetHostingView {
       return
     }
 
+    // While the sheet is fully open and only its content/detent geometry is
+    // resizing, the position momentarily lags the grown detent height. Keep the
+    // scrim at full opacity instead of dipping it until the re-anchor settles.
+    if scrimPinnedFull {
+      scrimView.alpha = 1
+      scrimView.isHidden = false
+      return
+    }
+
     let threshold = firstNonZeroDetentHeight
     let progress: CGFloat
     if threshold <= 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.4",
   "description": "Provides bottom-sheet components for React Native.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",