@swmansion/react-native-bottom-sheet 0.11.0 → 0.13.0-next.1

package/README.md

@@ -84,8 +84,8 @@ relative to the provider.
 The library provides two components: `BottomSheet` (inline) and
 `ModalBottomSheet` (modal). Both render their children as the sheet content,
 with a `surface` prop for the background behind it, and are controlled via
-`detents`, `index`, and `onIndexChange`. Use `onSettle` for
-post‍-‍snap observability.
+`detents`, `index`, and `onIndexChange`. Use `onSettle` to observe when the
+sheet finishes moving.
 
 ### Inline
 
@@ -150,6 +150,31 @@ its color:
 </ModalBottomSheet>
 ```
 
+By default, the scrim fades in as the sheet opens and then holds at full
+opacity, so detents above the first share the same scrim. Use `scrimOpacities`
+to control the opacity at each detent: It takes one value in 0–1 per detent,
+indexed to match `detents`, and interpolates linearly as the sheet is dragged
+between them. A shorter array reuses its last value for any remaining detents.
+
+The default maps each detent to 0 when it is closed and 1 otherwise, so the
+scrim is transparent at any closed detent and fully opaque at every open one,
+whatever order the detents are passed in.
+
+To keep the scrim deepening across every detent, pass one value per detent:
+
+```tsx
+<ModalBottomSheet
+  index={index}
+  onIndexChange={setIndex}
+  detents={[0, 300, 'content']}
+  scrimColor="rgba(0, 0, 0, 0.3)"
+  scrimOpacities={[0, 0.5, 1]}
+  surface={/* ... */}
+>
+  {/* ... */}
+</ModalBottomSheet>
+```
+
 ### Surface
 
 Provide the sheet’s background through the `surface` prop. The library renders
@@ -223,12 +248,15 @@ content, never on the&nbsp;surface:
 The `index` prop is a zero&zwj;-&zwj;based index into the `detents` array.
 `onIndexChange` and `onSettle` have different&nbsp;responsibilities:
 
-- `onIndexChange` is for user&zwj;-&zwj;triggered snaps. Treat it as the signal
-  to update your controlled `index`&nbsp;state.
+- `onIndexChange` fires when a user&zwj;-&zwj;triggered snap is _initiated_: the
+  moment a drag commits to a detent, before the animation settles. It does not
+  fire for programmatic `index` changes; you already know when you make those.
+  Treat it as the signal to update your controlled `index`&nbsp;state.
 - `onSettle` fires when the sheet finishes snapping to a detent, regardless of
-  whether that snap was user&zwj;-&zwj;triggered or programmatic. Use it for
-  observability or side effects (analytics, reacting to collapse, etc.), not for
-  updating the controlled `index`&nbsp;state.
+  whether that snap was user&zwj;-&zwj;triggered or programmatic. It is the
+  signal for the _end_ of any movement. Use it for observability or side effects
+  (analytics, reacting to collapse, etc.), not for updating the controlled
+  `index`&nbsp;state.
 
 ```tsx
 const [index, setIndex] = useState(0);
@@ -238,10 +266,10 @@ const [index, setIndex] = useState(0);
 <BottomSheet // Or `ModalBottomSheet`.
   detents={[0, 300, 'content']} // Collapsed, 300 px, content height.
   index={index}
-  onIndexChange={setIndex} // Keep controlled state in sync.
+  onIndexChange={setIndex} // Fires when a drag commits; keep state in sync.
   surface={/* ... */}
   onSettle={(nextIndex) => {
-    if (nextIndex === 0) console.log('Sheet collapsed.');
+    if (nextIndex === 0) console.log('Sheet finished collapsing.');
   }}
 >
   {/* ... */}

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

@@ -83,6 +83,9 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
   private var scrimPressed = false
   private var scrimTouchActive = false
   private var scrimColor = Color.TRANSPARENT
+  // The JS layer always supplies a per-detent array; the fully-opaque fallback
+  // only guards against empty input (indexing requires a non-empty array).
+  private var scrimOpacities = listOf(1f)
   private var scrimProgress = 0f
   private var suppressScrimForClosingTarget = false
   private var scrimPinnedFull = false
@@ -255,6 +258,11 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     invalidate()
   }
 
+  fun setScrimOpacities(values: List<Float>) {
+    scrimOpacities = if (values.isEmpty()) listOf(1f) else values
+    updateScrim()
+  }
+
   fun setMaxDetentHeight(maxDetentHeight: Double) {
     this.maxDetentHeight = (maxDetentHeight * density).toFloat()
     refreshDetentsFromLayout()
@@ -566,13 +574,16 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
           }
           emitPosition()
           updateInteractionState()
-          if (emitIndexChange) listener?.onIndexChange(index)
           if (emitSettle) listener?.onSettle(index)
         }
       }
 
     activeAnimation = spring
     startChoreographer()
+    // Report the index change as soon as the snap is committed, not when it
+    // finishes: targetIndex is already set, and a programmatic snap's start is
+    // known to the caller. onSettle remains the signal for movement end.
+    if (emitIndexChange) listener?.onIndexChange(index)
     spring.start()
   }
 
@@ -878,18 +889,55 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
 
     // 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.
+    // scrim pinned to the fully-open opacity instead of dipping it until the
+    // re-anchor settles.
     if (scrimPinnedFull) {
-      scrimProgress = 1f
+      scrimProgress = fullyOpenScrimOpacity()
       invalidate()
       return
     }
 
-    val threshold = firstNonZeroDetentHeight
-    scrimProgress = if (threshold <= 0f) 0f else (position / threshold).coerceIn(0f, 1f)
+    scrimProgress = scrimOpacityAt(position)
     invalidate()
   }
 
+  /** The opacity at the tallest detent, held while the sheet re-anchors. */
+  private fun fullyOpenScrimOpacity(): Float {
+    val maxHeight = detentSpecs.maxOfOrNull { it.height } ?: return 1f
+    return scrimOpacityAt(maxHeight)
+  }
+
+  /**
+   * Interpolates the scrim opacity for a sheet height by bracketing it between adjacent detent
+   * heights and lerping each detent index's configured value.
+   */
+  private fun scrimOpacityAt(position: Float): Float {
+    if (detentSpecs.isEmpty()) return 0f
+    val pairs =
+      detentSpecs.indices
+        .map { index ->
+          detentSpecs[index].height to
+            scrimOpacities[index.coerceAtMost(scrimOpacities.size - 1)].coerceIn(0f, 1f)
+        }
+        .sortedBy { it.first }
+
+    val first = pairs.first()
+    val last = pairs.last()
+    if (position <= first.first) return first.second
+    if (position >= last.first) return last.second
+
+    for (i in 1 until pairs.size) {
+      val upper = pairs[i]
+      if (position <= upper.first) {
+        val lower = pairs[i - 1]
+        val span = upper.first - lower.first
+        val t = if (span <= 0f) 1f else (position - lower.first) / span
+        return lower.second + (upper.second - lower.second) * t
+      }
+    }
+    return last.second
+  }
+
   private fun hideScrim() {
     scrimProgress = 0f
     invalidate()

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

@@ -138,6 +138,17 @@ class BottomSheetViewManager :
     view.setScrimColor(scrimColor)
   }
 
+  @ReactProp(name = "scrimOpacities")
+  override fun setScrimOpacities(view: BottomSheetView, value: ReadableArray?) {
+    val opacities = mutableListOf<Float>()
+    if (value != null) {
+      for (i in 0 until value.size()) {
+        opacities.add(value.getDouble(i).toFloat())
+      }
+    }
+    view.setScrimOpacities(opacities)
+  }
+
   override fun onDropViewInstance(view: BottomSheetView) {
     super.onDropViewInstance(view)
     view.destroy()

package/ios/BottomSheetComponentView.mm

@@ -86,6 +86,14 @@ using namespace facebook::react;
     [_sheetView setScrimColor:RCTUIColorFromSharedColor(newViewProps.scrimColor)];
   }
 
+  if (newViewProps.scrimOpacities != oldViewProps.scrimOpacities) {
+    NSMutableArray<NSNumber *> *opacities = [NSMutableArray new];
+    for (const auto &opacity : newViewProps.scrimOpacities) {
+      [opacities addObject:@(opacity)];
+    }
+    [_sheetView setScrimOpacities:opacities];
+  }
+
   [super updateProps:props oldProps:oldProps];
 }
 

package/ios/BottomSheetContentView.h

@@ -23,6 +23,7 @@ NS_ASSUME_NONNULL_BEGIN
 - (void)setMaxDetentHeight:(CGFloat)maxDetentHeight;
 - (void)setDetentIndex:(NSInteger)newIndex;
 - (void)setScrimColor:(UIColor *_Nullable)color;
+- (void)setScrimOpacities:(NSArray<NSNumber *> *)opacities;
 - (CGFloat)currentContentOffsetY;
 - (void)mountChildComponentView:(UIView *)childView atIndex:(NSInteger)index;
 - (void)unmountChildComponentView:(UIView *)childView;

package/ios/BottomSheetContentView.mm

@@ -80,6 +80,11 @@
   _impl.scrimColor = color;
 }
 
+- (void)setScrimOpacities:(NSArray<NSNumber *> *)opacities
+{
+  [_impl setScrimOpacities:opacities];
+}
+
 - (CGFloat)currentContentOffsetY
 {
   return _impl.currentContentOffsetY;

package/ios/BottomSheetHostingView.swift

@@ -34,6 +34,19 @@ public final class BottomSheetHostingView: UIView {
     didSet { scrimView.backgroundColor = scrimColor }
   }
 
+  /// Scrim opacity per detent index. Linearly interpolated between detents and
+  /// clamped to the last value for detents beyond the array. The JS layer always
+  /// supplies a per-detent array; the fully-opaque fallback only guards against
+  /// empty input (indexing requires a non-empty array).
+  private var scrimOpacities: [CGFloat] = [1] {
+    didSet { updateScrim() }
+  }
+
+  public func setScrimOpacities(_ values: [NSNumber]) {
+    let mapped = values.map { CGFloat(truncating: $0) }
+    scrimOpacities = mapped.isEmpty ? [1] : mapped
+  }
+
   public var maxDetentHeight: CGFloat = .nan {
     didSet { refreshDetentsFromLayout() }
   }
@@ -425,13 +438,16 @@ public final class BottomSheetHostingView: UIView {
       self.scrimPinnedFull = false
       self.setContentInteractionEnabled(true)
       self.updateInteractionState()
-      if emitIndexChange {
-        self.eventDelegate?.bottomSheetHostingView(self, didChangeIndex: index)
-      }
       if emitSettle {
         self.eventDelegate?.bottomSheetHostingView(self, didSettle: index)
       }
     }
+    // Report the index change as soon as the snap is committed, not when it
+    // finishes: `targetIndex` is already set, and a programmatic snap's start is
+    // known to the caller. `onSettle` remains the signal for movement end.
+    if emitIndexChange {
+      eventDelegate?.bottomSheetHostingView(self, didChangeIndex: index)
+    }
     animator.startAnimation()
     activeAnimator = animator
     startDisplayLink()
@@ -860,24 +876,55 @@ private extension BottomSheetHostingView {
 
     // 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.
+    // scrim pinned to the fully-open opacity instead of dipping it until the
+    // re-anchor settles.
     if scrimPinnedFull {
-      scrimView.alpha = 1
-      scrimView.isHidden = false
+      let opacity = fullyOpenScrimOpacity
+      scrimView.alpha = opacity
+      scrimView.isHidden = opacity <= 0.001
       return
     }
 
-    let threshold = firstNonZeroDetentHeight
-    let progress: CGFloat
-    if threshold <= 0 {
-      progress = 0
-    } else {
-      progress = min(1, max(0, position / threshold))
-    }
+    let progress = scrimOpacity(forPosition: position)
     scrimView.alpha = progress
     scrimView.isHidden = progress <= 0.001
   }
 
+  /// The opacity at the tallest detent, held while the sheet re-anchors.
+  private var fullyOpenScrimOpacity: CGFloat {
+    guard let maxHeight = detentSpecs.map({ $0.height }).max() else { return 1 }
+    return scrimOpacity(forPosition: maxHeight)
+  }
+
+  /// Interpolates the scrim opacity for a sheet height by bracketing it between
+  /// adjacent detent heights and lerping each detent index's configured value.
+  private func scrimOpacity(forPosition position: CGFloat) -> CGFloat {
+    guard !detentSpecs.isEmpty else { return 0 }
+    let pairs = detentSpecs.indices
+      .map { (
+        height: detentSpecs[$0].height,
+        opacity: clampOpacity(scrimOpacities[min($0, scrimOpacities.count - 1)])
+      ) }
+      .sorted { $0.height < $1.height }
+
+    guard let first = pairs.first, let last = pairs.last else { return 0 }
+    if position <= first.height { return first.opacity }
+    if position >= last.height { return last.opacity }
+
+    for i in 1 ..< pairs.count where position <= pairs[i].height {
+      let lower = pairs[i - 1]
+      let upper = pairs[i]
+      let span = upper.height - lower.height
+      let t = span <= 0 ? 1 : (position - lower.height) / span
+      return lower.opacity + (upper.opacity - lower.opacity) * t
+    }
+    return last.opacity
+  }
+
+  private func clampOpacity(_ value: CGFloat) -> CGFloat {
+    min(1, max(0, value))
+  }
+
   func updateInteractionState() {
     scrimView.isUserInteractionEnabled = modal && (closedIndex != nil) && !scrimView.isHidden
   }

package/lib/module/BottomSheet.js

@@ -25,7 +25,8 @@ export const BottomSheet = ({
   onPositionChange,
   modal = false,
   disableScrollableNegotiation = false,
-  scrimColor
+  scrimColor,
+  scrimOpacities
 }) => {
   const {
     height: windowHeight
@@ -51,6 +52,10 @@ export const BottomSheet = ({
   const clampedIndex = Math.max(0, Math.min(index, nativeDetents.length - 1));
   const selectedDetentValue = detents[clampedIndex] ? resolveDetentValue(detents[clampedIndex]) : 0;
   const isCollapsed = selectedDetentValue === 0;
+  // Default the scrim opacity per detent: transparent at any closed detent,
+  // fully opaque at every open one. Mapping each detent independently keeps
+  // this correct regardless of the order detents are passed in.
+  const resolvedScrimOpacity = scrimOpacities ?? detents.map(detent => resolveDetentValue(detent) === 0 ? 0 : 1);
   const handleIndexChange = event => {
     onIndexChange?.(event.nativeEvent.index);
   };
@@ -86,6 +91,7 @@ export const BottomSheet = ({
         modal: modal,
         disableScrollableNegotiation: disableScrollableNegotiation,
         scrimColor: scrimColor,
+        scrimOpacities: resolvedScrimOpacity,
         onIndexChange: handleIndexChange,
         onSettle: handleSettle,
         onPositionChange: handlePositionChange,

package/lib/module/BottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"names":["StyleSheet","View","useWindowDimensions","useSafeAreaInsets","BottomSheetNativeComponent","BottomSheetSurfaceNativeComponent","Portal","jsx","_jsx","jsxs","_jsxs","programmatic","BottomSheet","children","surface","style","detents","index","animateIn","onIndexChange","onSettle","onPositionChange","modal","disableScrollableNegotiation","scrimColor","height","windowHeight","insets","maxHeight","top","nativeDetents","map","detent","isDetentProgrammatic","value","resolveDetentValue","kind","Math","max","min","clampedIndex","length","selectedDetentValue","isCollapsed","handleIndexChange","event","nativeEvent","handleSettle","handlePositionChange","position","sheet","absoluteFill","pointerEvents","left","right","bottom","maxDetentHeight","collapsable","flex"],"sourceRoot":"../../src","sources":["BottomSheet.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["StyleSheet","View","useWindowDimensions","useSafeAreaInsets","BottomSheetNativeComponent","BottomSheetSurfaceNativeComponent","Portal","jsx","_jsx","jsxs","_jsxs","programmatic","BottomSheet","children","surface","style","detents","index","animateIn","onIndexChange","onSettle","onPositionChange","modal","disableScrollableNegotiation","scrimColor","scrimOpacities","height","windowHeight","insets","maxHeight","top","nativeDetents","map","detent","isDetentProgrammatic","value","resolveDetentValue","kind","Math","max","min","clampedIndex","length","selectedDetentValue","isCollapsed","resolvedScrimOpacity","handleIndexChange","event","nativeEvent","handleSettle","handlePositionChange","position","sheet","absoluteFill","pointerEvents","left","right","bottom","maxDetentHeight","collapsable","flex"],"sourceRoot":"../../src","sources":["BottomSheet.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/BottomSheetNativeComponent.ts

@@ -19,6 +19,7 @@ export interface NativeProps extends ViewProps {
   modal: boolean;
   disableScrollableNegotiation?: boolean;
   scrimColor?: ColorValue;
+  scrimOpacities?: ReadonlyArray<CodegenTypes.Double>;
   onIndexChange?: CodegenTypes.DirectEventHandler<
     Readonly<{ index: CodegenTypes.Int32 }>
   >;

package/lib/typescript/src/BottomSheet.d.ts

@@ -29,7 +29,12 @@ export interface BottomSheetProps {
     index: number;
     /** Whether the sheet should animate in on first layout. */
     animateIn?: boolean;
-    /** Called after a user-driven snap changes the active index. */
+    /**
+     * Called when a user-driven snap is initiated: the moment a drag commits to a
+     * detent, before the animation settles. Does not fire for programmatic `index`
+     * changes; you already know when you make those. Use it to keep your controlled
+     * `index` state in sync. For the end of any movement, use `onSettle`.
+     */
     onIndexChange?: (index: number) => void;
     /** Called when a snap animation settles, including programmatic changes. */
     onSettle?: (index: number) => void;
@@ -45,7 +50,21 @@ export interface BottomSheetProps {
     disableScrollableNegotiation?: boolean;
     /** Scrim color used by `ModalBottomSheet`. */
     scrimColor?: string;
+    /**
+     * Scrim opacities per detent, indexed to match `detents`. Each value in 0–1
+     * scales the scrim color’s alpha at the detent of the same index, and the
+     * opacity is linearly interpolated as the sheet is dragged between detents.
+     * A shorter array than `detents` reuses its last value for any remaining
+     * detents.
+     *
+     * The default maps each detent to 0 when it is closed and 1 otherwise,
+     * so the scrim is transparent at any closed detent and fully opaque at every
+     * open one; e.g., `[0, 'content']` defaults to `[0, 1]`, and all-open detents
+     * default to a constant opaque scrim. Pass one value per detent—e.g.,
+     * `[0, 0.5, 1]`—to keep the scrim deepening across every detent.
+     */
+    scrimOpacities?: number[];
 }
 /** Native bottom sheet that renders inline within the current screen layout. */
-export declare const BottomSheet: ({ children, surface, style, detents, index, animateIn, onIndexChange, onSettle, onPositionChange, modal, disableScrollableNegotiation, scrimColor, }: BottomSheetProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BottomSheet: ({ children, surface, style, detents, index, animateIn, onIndexChange, onSettle, onPositionChange, modal, disableScrollableNegotiation, scrimColor, scrimOpacities, }: BottomSheetProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=BottomSheet.d.ts.map

package/lib/typescript/src/BottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAOzD,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACjD,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,wDAAwD;IACxD,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gEAAgE;IAChE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,gDAAgD;IAChD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,gFAAgF;AAChF,eAAO,MAAM,WAAW,GAAI,sJAazB,gBAAgB,4CAiGlB,CAAC"}
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAOzD,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACjD,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,wDAAwD;IACxD,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,gDAAgD;IAChD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;;;;OAYG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED,gFAAgF;AAChF,eAAO,MAAM,WAAW,GAAI,sKAczB,gBAAgB,4CAwGlB,CAAC"}

package/lib/typescript/src/BottomSheetNativeComponent.d.ts

@@ -12,6 +12,7 @@ export interface NativeProps extends ViewProps {
     modal: boolean;
     disableScrollableNegotiation?: boolean;
     scrimColor?: ColorValue;
+    scrimOpacities?: ReadonlyArray<CodegenTypes.Double>;
     onIndexChange?: CodegenTypes.DirectEventHandler<Readonly<{
         index: CodegenTypes.Int32;
     }>>;

package/lib/typescript/src/BottomSheetNativeComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetNativeComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,KAAK,YAAY,GAAG,QAAQ,CAAC;IAC3B,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,OAAO,CAAC;CACvB,CAAC,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,OAAO,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACrC,eAAe,EAAE,YAAY,CAAC,MAAM,CAAC;IACrC,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC;IAC1B,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACpD,KAAK,EAAE,OAAO,CAAC;IACf,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,CAAC,EAAE,YAAY,CAAC,kBAAkB,CAC7C,QAAQ,CAAC;QAAE,KAAK,EAAE,YAAY,CAAC,KAAK,CAAA;KAAE,CAAC,CACxC,CAAC;IACF,QAAQ,CAAC,EAAE,YAAY,CAAC,kBAAkB,CACxC,QAAQ,CAAC;QAAE,KAAK,EAAE,YAAY,CAAC,KAAK,CAAA;KAAE,CAAC,CACxC,CAAC;IACF,gBAAgB,CAAC,EAAE,YAAY,CAAC,kBAAkB,CAChD,QAAQ,CAAC;QAAE,QAAQ,EAAE,YAAY,CAAC,MAAM,CAAA;KAAE,CAAC,CAC5C,CAAC;CACH;;AAED,wBAAsE"}
+{"version":3,"file":"BottomSheetNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetNativeComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,KAAK,YAAY,GAAG,QAAQ,CAAC;IAC3B,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,OAAO,CAAC;CACvB,CAAC,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,OAAO,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACrC,eAAe,EAAE,YAAY,CAAC,MAAM,CAAC;IACrC,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC;IAC1B,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACpD,KAAK,EAAE,OAAO,CAAC;IACf,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,cAAc,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IACpD,aAAa,CAAC,EAAE,YAAY,CAAC,kBAAkB,CAC7C,QAAQ,CAAC;QAAE,KAAK,EAAE,YAAY,CAAC,KAAK,CAAA;KAAE,CAAC,CACxC,CAAC;IACF,QAAQ,CAAC,EAAE,YAAY,CAAC,kBAAkB,CACxC,QAAQ,CAAC;QAAE,KAAK,EAAE,YAAY,CAAC,KAAK,CAAA;KAAE,CAAC,CACxC,CAAC;IACF,gBAAgB,CAAC,EAAE,YAAY,CAAC,kBAAkB,CAChD,QAAQ,CAAC;QAAE,QAAQ,EAAE,YAAY,CAAC,MAAM,CAAA;KAAE,CAAC,CAC5C,CAAC;CACH;;AAED,wBAAsE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swmansion/react-native-bottom-sheet",
-  "version": "0.11.0",
+  "version": "0.13.0-next.1",
   "description": "Provides bottom-sheet components for React Native.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/BottomSheet.tsx

@@ -36,7 +36,12 @@ export interface BottomSheetProps {
   index: number;
   /** Whether the sheet should animate in on first layout. */
   animateIn?: boolean;
-  /** Called after a user-driven snap changes the active index. */
+  /**
+   * Called when a user-driven snap is initiated: the moment a drag commits to a
+   * detent, before the animation settles. Does not fire for programmatic `index`
+   * changes; you already know when you make those. Use it to keep your controlled
+   * `index` state in sync. For the end of any movement, use `onSettle`.
+   */
   onIndexChange?: (index: number) => void;
   /** Called when a snap animation settles, including programmatic changes. */
   onSettle?: (index: number) => void;
@@ -52,6 +57,20 @@ export interface BottomSheetProps {
   disableScrollableNegotiation?: boolean;
   /** Scrim color used by `ModalBottomSheet`. */
   scrimColor?: string;
+  /**
+   * Scrim opacities per detent, indexed to match `detents`. Each value in 0–1
+   * scales the scrim color’s alpha at the detent of the same index, and the
+   * opacity is linearly interpolated as the sheet is dragged between detents.
+   * A shorter array than `detents` reuses its last value for any remaining
+   * detents.
+   *
+   * The default maps each detent to 0 when it is closed and 1 otherwise,
+   * so the scrim is transparent at any closed detent and fully opaque at every
+   * open one; e.g., `[0, 'content']` defaults to `[0, 1]`, and all-open detents
+   * default to a constant opaque scrim. Pass one value per detent—e.g.,
+   * `[0, 0.5, 1]`—to keep the scrim deepening across every detent.
+   */
+  scrimOpacities?: number[];
 }
 
 /** Native bottom sheet that renders inline within the current screen layout. */
@@ -68,6 +87,7 @@ export const BottomSheet = ({
   modal = false,
   disableScrollableNegotiation = false,
   scrimColor,
+  scrimOpacities,
 }: BottomSheetProps) => {
   const { height: windowHeight } = useWindowDimensions();
   const insets = useSafeAreaInsets();
@@ -96,6 +116,12 @@ export const BottomSheet = ({
     ? resolveDetentValue(detents[clampedIndex])
     : 0;
   const isCollapsed = selectedDetentValue === 0;
+  // Default the scrim opacity per detent: transparent at any closed detent,
+  // fully opaque at every open one. Mapping each detent independently keeps
+  // this correct regardless of the order detents are passed in.
+  const resolvedScrimOpacity =
+    scrimOpacities ??
+    detents.map((detent) => (resolveDetentValue(detent) === 0 ? 0 : 1));
   const handleIndexChange = (event: { nativeEvent: { index: number } }) => {
     onIndexChange?.(event.nativeEvent.index);
   };
@@ -138,6 +164,7 @@ export const BottomSheet = ({
           modal={modal}
           disableScrollableNegotiation={disableScrollableNegotiation}
           scrimColor={scrimColor}
+          scrimOpacities={resolvedScrimOpacity}
           onIndexChange={handleIndexChange}
           onSettle={handleSettle}
           onPositionChange={handlePositionChange}

package/src/BottomSheetNativeComponent.ts

@@ -19,6 +19,7 @@ export interface NativeProps extends ViewProps {
   modal: boolean;
   disableScrollableNegotiation?: boolean;
   scrimColor?: ColorValue;
+  scrimOpacities?: ReadonlyArray<CodegenTypes.Double>;
   onIndexChange?: CodegenTypes.DirectEventHandler<
     Readonly<{ index: CodegenTypes.Int32 }>
   >;