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

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/BottomSheetComponentView.mm

@@ -3,6 +3,7 @@
 #import "../common/cpp/react/renderer/components/ReactNativeBottomSheetSpec/BottomSheetStateHelper.h"
 #import "../common/cpp/react/renderer/components/ReactNativeBottomSheetSpec/ComponentDescriptors.h"
 
+#import <React/RCTAssert.h>
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
 #import <react/renderer/components/ReactNativeBottomSheetSpec/EventEmitters.h>
@@ -138,6 +139,11 @@ using namespace facebook::react;
   }
 }
 
+- (void)bottomSheetView:(BottomSheetContentView *)view didReportError:(NSString *)message
+{
+  RCTFatal([NSError errorWithDomain:RCTErrorDomain code:0 userInfo:@{NSLocalizedDescriptionKey : message}]);
+}
+
 - (void)prepareForRecycle
 {
   [super prepareForRecycle];

package/ios/BottomSheetContentView.h

@@ -8,6 +8,7 @@ NS_ASSUME_NONNULL_BEGIN
 - (void)bottomSheetView:(BottomSheetContentView *)view didChangeIndex:(NSInteger)index;
 - (void)bottomSheetView:(BottomSheetContentView *)view didSettle:(NSInteger)index;
 - (void)bottomSheetView:(BottomSheetContentView *)view didChangePosition:(CGFloat)position;
+- (void)bottomSheetView:(BottomSheetContentView *)view didReportError:(NSString *)message;
 @end
 
 @interface BottomSheetContentView : UIView

package/ios/BottomSheetContentView.mm

@@ -115,6 +115,11 @@
   [self.delegate bottomSheetView:self didChangePosition:position];
 }
 
+- (void)bottomSheetHostingView:(RNSBottomSheetHostingView *)view didReportError:(NSString *)message
+{
+  [self.delegate bottomSheetView:self didReportError:message];
+}
+
 - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
 {
   CGPoint implPoint = [self convertPoint:point toView:_impl];

package/ios/RNSBottomSheetHostingView.swift

@@ -4,6 +4,7 @@ import UIKit
   func bottomSheetHostingView(_ view: RNSBottomSheetHostingView, didChangeIndex index: Int)
   func bottomSheetHostingView(_ view: RNSBottomSheetHostingView, didSettle index: Int)
   func bottomSheetHostingView(_ view: RNSBottomSheetHostingView, didChangePosition position: CGFloat)
+  func bottomSheetHostingView(_ view: RNSBottomSheetHostingView, didReportError message: String)
 }
 
 private struct DetentSpec: Equatable {
@@ -55,10 +56,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 lastReportedInvalidDetentMessage: String?
   private var panStartingIndex: Int?
   private var isContentInteractionDisabled = false
   private var contentHeightMarker: UIView?
@@ -364,10 +367,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 +398,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 +419,7 @@ public final class RNSBottomSheetHostingView: UIView {
     switch gesture.state {
     case .began:
       isPanning = true
+      scrimPinnedFull = false
       panStartingIndex = targetIndex
       sheetContainer.endEditing(true)
       setContentInteractionEnabled(false)
@@ -571,28 +580,35 @@ public final class RNSBottomSheetHostingView: UIView {
     detentSpecs.map(\.height).max()
   }
 
-  private func resolveDetentSpecs() -> [DetentSpec] {
+  private func resolveDetentSpecs() -> [DetentSpec]? {
     let maxHeight = resolvedMaxDetentHeight
     let measuredContentHeight = maxHeight > 0 ? validContentHeight.map { min($0, maxHeight) } : nil
     let contentHeight = measuredContentHeight ?? maxHeight
-    return rawDetentSpecs.enumerated().map { index, spec in
+    var resolvedDetents: [DetentSpec] = []
+    resolvedDetents.reserveCapacity(rawDetentSpecs.count)
+
+    for (index, spec) in rawDetentSpecs.enumerated() {
       let height: CGFloat
       switch spec.kind {
       case .points:
         if measuredContentHeight != nil, spec.value > contentHeight {
-          NSException(
-            name: NSExceptionName.invalidArgumentException,
-            reason:
-            "Invalid bottom sheet detent at index \(index): fixed detent \(spec.value) exceeds measured content height \(contentHeight).",
-            userInfo: nil
-          ).raise()
+          let message =
+            "Invalid bottom sheet detent at index \(index): fixed detent \(spec.value) exceeds measured content height \(contentHeight)."
+          if lastReportedInvalidDetentMessage != message {
+            lastReportedInvalidDetentMessage = message
+            eventDelegate?.bottomSheetHostingView(self, didReportError: message)
+          }
+          return nil
         }
         height = spec.value
       case .content:
         height = contentHeight
       }
-      return DetentSpec(height: min(max(0, height), maxHeight), programmatic: spec.programmatic)
+      resolvedDetents.append(DetentSpec(height: min(max(0, height), maxHeight), programmatic: spec.programmatic))
     }
+
+    lastReportedInvalidDetentMessage = nil
+    return resolvedDetents
   }
 
   private func refreshDetentsFromLayout() {
@@ -602,13 +618,22 @@ public final class RNSBottomSheetHostingView: UIView {
       return
     }
 
-    let resolvedDetents = resolveDetentSpecs()
+    guard let resolvedDetents = resolveDetentSpecs() else {
+      updateScrim()
+      return
+    }
     guard resolvedDetents != detentSpecs else {
       updateScrim()
       return
     }
 
     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 +657,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 +679,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 +825,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.5",
   "description": "Provides bottom-sheet components for React Native.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",