@swmansion/react-native-bottom-sheet 0.8.1-next.1 → 0.8.2-next.1

package/README.md

@@ -42,7 +42,8 @@ React Native.
 The library provides two components: `BottomSheet` (inline) and
 `ModalBottomSheet` (modal). Both render their children as the sheet content
 (including any background) and are controlled via `detents`, `index`,
-and `onIndexChange`.
+and `onIndexChange`. Use `onSettle` for
+post‍-‍snap observability.
 
 ### Inline
 
@@ -108,13 +109,18 @@ its color:
 ### Detents and index
 
 Detents are the points to which the sheet snaps. Each detent is either a number
-(a fixed height in pixels) or `'max'` (the sheet’s content height, capped by the
-available screen height). The default detents are `[0, 'max']`.
+(a fixed height in pixels) or `'content'` (the sheet’s content height, capped by
+the available screen height). The default detents are `[0, 'content']`.
 
 The `index` prop is a zero‍-‍based index into the `detents` array.
-`onIndexChange` is called when the sheet snaps to a different detent after
-a drag. You can also control the sheet externally by updating the
-index state.
+`onIndexChange` and `onSettle` have different responsibilities:
+
+- `onIndexChange` is for user‍-‍triggered snaps. Treat it as the signal
+  to update your controlled `index` state.
+- `onSettle` fires when the sheet finishes snapping to a detent, regardless of
+  whether that snap was user‍-‍triggered or programmatic. Use it for
+  observability or side effects (analytics, reacting to collapse, etc.), not for
+  updating the controlled `index` state.
 
 ```tsx
 const [index, setIndex] = useState(0);
@@ -122,9 +128,12 @@ const [index, setIndex] = useState(0);
 
 ```tsx
 <BottomSheet // Or `ModalBottomSheet`.
-  detents={[0, 300, 'max']} // Collapsed, 300 px, content height.
+  detents={[0, 300, 'content']} // Collapsed, 300 px, content height.
   index={index}
-  onIndexChange={setIndex}
+  onIndexChange={setIndex} // Keep controlled state in sync.
+  onSettle={(nextIndex) => {
+    if (nextIndex === 0) console.log('Sheet collapsed.');
+  }}
 >
   {/* ... */}
 </BottomSheet>
@@ -138,9 +147,12 @@ drag snapping but can still be targeted via `index`&nbsp;updates.
 
 ```tsx
 <BottomSheet
-  detents={[0, programmatic(300), 'max']}
+  detents={[0, programmatic(300), 'content']}
   index={index}
   onIndexChange={setIndex}
+  onSettle={(nextIndex) => {
+    console.log(`Settled at ${nextIndex}.`);
+  }}
 >
   {/* ... */}
 </BottomSheet>

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

@@ -581,6 +581,14 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
       return
     }
 
+    // When settled at the closed detent, dynamic content updates can briefly
+    // produce stale non-zero positions. Keep scrim hidden in this state.
+    if (closedIndex != null && targetIndex == closedIndex && activeAnimation == null && !isPanning) {
+      scrimProgress = 0f
+      invalidate()
+      return
+    }
+
     val threshold = firstNonZeroDetentHeight
     scrimProgress =
       if (threshold <= 0f) 0f else (position / threshold).coerceIn(0f, 1f)
@@ -601,7 +609,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     return maxHeight - sheetContainer.translationY
   }
 
-  private fun isScrimVisible(): Boolean = modal && currentSheetHeight() > 1f
+  private fun isScrimVisible(): Boolean = modal && scrimProgress > 0.001f
 
   private fun drawScrim(canvas: Canvas) {
     if (!modal || scrimProgress <= 0.001f) {

package/ios/RNSBottomSheetHostingView.swift

@@ -272,7 +272,7 @@ public final class RNSBottomSheetHostingView: UIView {
   }
 
   private var isScrimVisible: Bool {
-    modal && currentSheetHeight > 0.5
+    modal && !scrimView.isHidden
   }
 
   private func emitPosition() {
@@ -523,6 +523,19 @@ private extension RNSBottomSheetHostingView {
       return
     }
 
+    // If we're settled on the closed detent, dynamic detent/content updates can
+    // momentarily report a stale non-zero position. Keep scrim fully hidden.
+    if
+      let closedIndex,
+      targetIndex == closedIndex,
+      activeAnimator == nil,
+      !isPanning
+    {
+      scrimView.alpha = 0
+      scrimView.isHidden = true
+      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.8.1-next.1",
+  "version": "0.8.2-next.1",
   "description": "Provides bottom-sheet components for React Native.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",