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

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

@@ -85,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
 
@@ -294,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)
@@ -317,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
@@ -332,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,
+            )
           }
         }
       }
@@ -474,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
@@ -504,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()
@@ -693,6 +720,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
 
   private fun beginPan(event: MotionEvent) {
     isPanning = true
+    scrimPinnedFull = false
     panStartingIndex = targetIndex
     activePointerId = event.getPointerId(0)
     lastTouchY = event.y
@@ -818,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,6 +55,7 @@ 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
@@ -364,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)
@@ -391,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 {
@@ -411,6 +417,7 @@ public final class RNSBottomSheetHostingView: UIView {
     switch gesture.state {
     case .began:
       isPanning = true
+      scrimPinnedFull = false
       panStartingIndex = targetIndex
       sheetContainer.endEditing(true)
       setContentInteractionEnabled(false)
@@ -609,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 {
@@ -632,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
@@ -647,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
+          )
         }
       }
     }
@@ -786,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.3",
+  "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",