@swmansion/react-native-bottom-sheet 0.10.0-next.1 → 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
 
@@ -292,12 +293,15 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
       return
     }
 
+    val previousMaxHeight = detentSpecs.maxOfOrNull { it.height } ?: resolvedMaxDetentHeight()
     detentSpecs = resolvedDetents
     if (width > 0 && height > 0 && detentSpecs.isNotEmpty()) {
       layoutSheetContainer(width, height)
 
       if (hasLaidOut && !isPanning) {
         targetIndex = targetIndex.coerceIn(0, detentSpecs.size - 1)
+        val newMaxHeight = detentSpecs.maxOfOrNull { it.height } ?: resolvedMaxDetentHeight()
+        val targetTy = translationY(targetIndex)
         if (activeAnimation != null && isTargetingClosedDetent) {
           suppressScrimForClosingTarget = true
           hideScrim()
@@ -309,17 +313,26 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
           activeAnimation = null
           activeAnimationEmitsSettle = false
           stopChoreographer()
-          sheetContainer.translationY =
-            currentTy.coerceIn(0f, detentSpecs.maxOfOrNull { it.height } ?: currentTy)
+          // Re-anchor the in-flight position to the new container height so the
+          // sheet surface keeps the same on-screen height across the resize.
+          val visibleHeight = previousMaxHeight - currentTy
+          sheetContainer.translationY = (newMaxHeight - visibleHeight).coerceIn(0f, newMaxHeight)
           emitPosition()
           snapToIndex(targetIndex, 0f, emitIndexChange = false, emitSettle = shouldEmitSettle)
         } else {
-          val targetTy = translationY(targetIndex)
-          val currentTy = sheetContainer.translationY
-          if (abs(targetTy - currentTy) <= 0.5f) {
+          val currentVisibleHeight = previousMaxHeight - sheetContainer.translationY
+          val targetHeight = detentSpecs.getOrNull(targetIndex)?.height ?: 0f
+          if (targetHeight <= currentVisibleHeight + 0.5f) {
+            // Content shrank (or is unchanged): snap immediately. Animating here
+            // would expose blank space below the shrunken content.
             sheetContainer.translationY = targetTy
             emitPosition()
           } else {
+            // Content grew: re-anchor at the current visible height, then animate
+            // up to the taller detent.
+            sheetContainer.translationY =
+              (newMaxHeight - currentVisibleHeight).coerceIn(0f, newMaxHeight)
+            emitPosition()
             snapToIndex(targetIndex, 0f, emitIndexChange = false, emitSettle = false)
           }
         }
@@ -381,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()
@@ -498,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
@@ -551,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
@@ -628,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
@@ -647,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
       }
@@ -667,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()
@@ -759,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,8 +59,10 @@ 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 weak var contentHeightMarker: UIView?
+  private var contentHeightMarker: UIView?
+  private static var markerObservationContext = 0
 
   override public init(frame: CGRect) {
     super.init(frame: frame)
@@ -236,8 +238,9 @@ public final class RNSBottomSheetHostingView: UIView {
     pendingIndex = nil
     hasLaidOut = false
     isPanning = false
+    panStartingIndex = nil
     setContentInteractionEnabled(true)
-    contentHeightMarker = nil
+    stopObservingContentHeightMarker()
     sheetContainer.transform = .identity
     scrimView.alpha = 0
     scrimView.isHidden = true
@@ -259,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? {
@@ -392,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 {
@@ -410,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()
@@ -420,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:
@@ -428,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:
@@ -440,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 {
@@ -497,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)
@@ -507,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 {
@@ -576,6 +608,7 @@ public final class RNSBottomSheetHostingView: UIView {
       return
     }
 
+    let previousMaxHeight = maximumResolvedDetentHeight ?? resolvedMaxDetentHeight
     detentSpecs = resolvedDetents
 
     guard bounds.width > 0, bounds.height > 0, !detentSpecs.isEmpty else {
@@ -584,6 +617,8 @@ public final class RNSBottomSheetHostingView: UIView {
 
     if hasLaidOut, !isPanning {
       targetIndex = max(0, min(detentSpecs.count - 1, targetIndex))
+      let newMaxHeight = maximumResolvedDetentHeight ?? resolvedMaxDetentHeight
+      let targetTy = translationY(for: targetIndex)
 
       if let animator = activeAnimator {
         stopDisplayLink()
@@ -592,19 +627,27 @@ public final class RNSBottomSheetHostingView: UIView {
         animator.stopAnimation(true)
         activeAnimator = nil
         activeAnimatorEmitsSettle = false
-        sheetContainer.transform = CGAffineTransform(
-          translationX: 0,
-          y: min(max(visualTy, 0), maximumResolvedDetentHeight ?? visualTy)
-        )
+        // Re-anchor the in-flight position to the new container height so the
+        // sheet surface keeps the same on-screen height across the resize.
+        let visibleHeight = previousMaxHeight - visualTy
+        let reanchoredTy = min(max(newMaxHeight - visibleHeight, 0), newMaxHeight)
+        sheetContainer.transform = CGAffineTransform(translationX: 0, y: reanchoredTy)
         emitPosition()
         snapToIndex(targetIndex, velocity: 0, emitIndexChange: false, emitSettle: shouldEmitSettle)
       } else {
-        let targetTy = translationY(for: targetIndex)
-        let currentTy = currentTranslationY
-        if abs(targetTy - currentTy) <= 0.5 {
+        let currentVisibleHeight = previousMaxHeight - currentTranslationY
+        let targetHeight = detent(at: targetIndex).height
+        if targetHeight <= currentVisibleHeight + 0.5 {
+          // Content shrank (or is unchanged): snap immediately. Animating here
+          // would expose blank space below the shrunken content.
           sheetContainer.transform = CGAffineTransform(translationX: 0, y: targetTy)
           emitPosition()
         } else {
+          // Content grew: re-anchor at the current visible height, then animate
+          // up to the taller detent.
+          let startTy = min(max(newMaxHeight - currentVisibleHeight, 0), newMaxHeight)
+          sheetContainer.transform = CGAffineTransform(translationX: 0, y: startTy)
+          emitPosition()
           snapToIndex(targetIndex, velocity: 0, emitIndexChange: false, emitSettle: false)
         }
       }
@@ -612,7 +655,50 @@ public final class RNSBottomSheetHostingView: UIView {
   }
 
   private func refreshContentHeightMarker() {
-    contentHeightMarker = findContentHeightMarker()
+    let marker = findContentHeightMarker()
+    guard marker !== contentHeightMarker else { return }
+    stopObservingContentHeightMarker()
+    contentHeightMarker = marker
+    if let marker {
+      // The marker's frame is updated by React Native when content above it
+      // resizes; observe its layer so we can re-resolve detents immediately
+      // instead of waiting for an unrelated layout pass. This is the iOS
+      // counterpart to Android's OnLayoutChangeListener on the marker.
+      marker.layer.addObserver(
+        self, forKeyPath: "position", options: [], context: &Self.markerObservationContext
+      )
+      marker.layer.addObserver(
+        self, forKeyPath: "bounds", options: [], context: &Self.markerObservationContext
+      )
+    }
+  }
+
+  private func stopObservingContentHeightMarker() {
+    guard let marker = contentHeightMarker else { return }
+    marker.layer.removeObserver(
+      self, forKeyPath: "position", context: &Self.markerObservationContext
+    )
+    marker.layer.removeObserver(
+      self, forKeyPath: "bounds", context: &Self.markerObservationContext
+    )
+    contentHeightMarker = nil
+  }
+
+  override public func observeValue(
+    forKeyPath keyPath: String?,
+    of object: Any?,
+    change: [NSKeyValueChangeKey: Any]?,
+    context: UnsafeMutableRawPointer?
+  ) {
+    if context == &Self.markerObservationContext {
+      refreshDetentsFromLayout()
+    } else {
+      super.observeValue(forKeyPath: keyPath, of: object, change: change, context: context)
+    }
+  }
+
+  deinit {
+    stopObservingContentHeightMarker()
   }
 
   private func findContentHeightMarker() -> UIView? {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swmansion/react-native-bottom-sheet",
-  "version": "0.10.0-next.1",
+  "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",