@swmansion/react-native-bottom-sheet 0.14.0 → 0.15.0-next.1

package/README.md

@@ -303,7 +303,12 @@ drag snapping but can still be targeted via `index` updates.
 
 Use `onPositionChange` to observe the sheet’s current position. It is a standard
 native event; read the distance in pixels from the bottom of the screen to the
-top of the sheet from `event.nativeEvent.position`.
+top of the sheet from `event.nativeEvent.position`. The same event also
+carries `event.nativeEvent.index`—the fractional detent index in
+`0..(detents.length - 1)` (`0` at the shortest detent, `1` at the next, and so
+on, interpolated in between)—the continuous counterpart of `onIndexChange`,
+handy for driving a backdrop or per-detent animation without knowing the
+sheet’s height.
 
 ```tsx
 <BottomSheet // Or `ModalBottomSheet`.
@@ -311,7 +316,7 @@ top of the sheet from&nbsp;`event.nativeEvent.position`.
   onIndexChange={setIndex}
   surface={/* ... */}
   onPositionChange={(event) => {
-    console.log(event.nativeEvent.position);
+    console.log(event.nativeEvent.position, event.nativeEvent.index);
   }}
 >
   {/* ... */}
@@ -356,6 +361,7 @@ import {
 
 ```tsx
 const position = useSharedValue(0);
+const detentIndex = useSharedValue(0);
 
 const onPositionChange = useEvent<
   NativeSyntheticEvent<PositionChangeEventData>
@@ -363,6 +369,7 @@ const onPositionChange = useEvent<
   (event) => {
     'worklet';
     position.value = event.position;
+    detentIndex.value = event.index;
   },
   ['onPositionChange']
 );

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

@@ -35,7 +35,7 @@ interface BottomSheetViewListener {
 
   fun onSettle(index: Int)
 
-  fun onPositionChange(position: Double)
+  fun onPositionChange(position: Double, index: Double)
 }
 
 class BottomSheetView(context: Context) : ReactViewGroup(context) {
@@ -484,10 +484,17 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     updateScrim(position)
     updateSheetVisibility(position)
     updateInteractionState()
-    listener?.onPositionChange((position / density).toDouble())
+    listener?.onPositionChange((position / density).toDouble(), detentIndexAt(position).toDouble())
     updateShadowState(ty)
   }
 
+  // Fractional detent index in 0..(detentSpecs.size - 1): 0 at the shortest
+  // detent, 1 at the next, and so on, interpolated by position in between. The
+  // continuous counterpart of `onIndexChange`, so consumers can drive a backdrop
+  // or animate per detent without knowing the sheet's height.
+  private fun detentIndexAt(position: Float): Float =
+    interpolateAtPosition(position, detentSpecs.indices.map { it.toFloat() })
+
   private fun updateSheetVisibility(position: Float) {
     sheetContainer.alpha = if (position <= 0.5f) 0f else 1f
   }
@@ -911,15 +918,20 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
    * 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 {
+  private fun scrimOpacityAt(position: Float): Float =
+    interpolateAtPosition(
+      position,
+      detentSpecs.indices.map {
+        scrimOpacities[it.coerceAtMost(scrimOpacities.size - 1)].coerceIn(0f, 1f)
+      },
+    )
+
+  // Interpolates a per-detent value (one per detent, by index) by the sheet
+  // position, using each detent's resolved height as the breakpoint.
+  private fun interpolateAtPosition(position: Float, values: List<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 }
+      detentSpecs.indices.map { detentSpecs[it].height to values[it] }.sortedBy { it.first }
 
     val first = pairs.first()
     val last = pairs.last()

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

@@ -44,8 +44,12 @@ class BottomSheetViewManager :
           dispatchEvent(view, "topSettle", event)
         }
 
-        override fun onPositionChange(position: Double) {
-          val event = Arguments.createMap().apply { putDouble("position", position) }
+        override fun onPositionChange(position: Double, index: Double) {
+          val event =
+            Arguments.createMap().apply {
+              putDouble("position", position)
+              putDouble("index", index)
+            }
           dispatchEvent(view, "topPositionChange", event)
         }
       }

package/ios/BottomSheetComponentView.mm

@@ -140,11 +140,14 @@ using namespace facebook::react;
   }
 }
 
-- (void)bottomSheetView:(BottomSheetContentView *)view didChangePosition:(CGFloat)position
+- (void)bottomSheetView:(BottomSheetContentView *)view
+      didChangePosition:(CGFloat)position
+                  index:(CGFloat)index
 {
   if (_eventEmitter) {
     auto emitter = std::static_pointer_cast<const BottomSheetViewEventEmitter>(_eventEmitter);
-    emitter->onPositionChange({.position = static_cast<double>(position)});
+    emitter->onPositionChange(
+        {.position = static_cast<double>(position), .index = static_cast<double>(index)});
   }
 
   float contentOffsetY = static_cast<float>(view.currentContentOffsetY);

package/ios/BottomSheetContentView.h

@@ -7,7 +7,9 @@ NS_ASSUME_NONNULL_BEGIN
 @protocol BottomSheetContentViewDelegate <NSObject>
 - (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
+      didChangePosition:(CGFloat)position
+                  index:(CGFloat)index;
 - (void)bottomSheetView:(BottomSheetContentView *)view didReportError:(NSString *)message;
 @end
 

package/ios/BottomSheetContentView.mm

@@ -125,9 +125,11 @@
   [self.delegate bottomSheetView:self didSettle:index];
 }
 
-- (void)bottomSheetHostingView:(BottomSheetHostingView *)view didChangePosition:(CGFloat)position
+- (void)bottomSheetHostingView:(BottomSheetHostingView *)view
+              didChangePosition:(CGFloat)position
+                          index:(CGFloat)index
 {
-  [self.delegate bottomSheetView:self didChangePosition:position];
+  [self.delegate bottomSheetView:self didChangePosition:position index:index];
 }
 
 - (void)bottomSheetHostingView:(BottomSheetHostingView *)view didReportError:(NSString *)message

package/ios/BottomSheetHostingView.swift

@@ -3,7 +3,8 @@ import UIKit
 @objc public protocol BottomSheetHostingViewDelegate: AnyObject {
   func bottomSheetHostingView(_ view: BottomSheetHostingView, didChangeIndex index: Int)
   func bottomSheetHostingView(_ view: BottomSheetHostingView, didSettle index: Int)
-  func bottomSheetHostingView(_ view: BottomSheetHostingView, didChangePosition position: CGFloat)
+  func bottomSheetHostingView(
+    _ view: BottomSheetHostingView, didChangePosition position: CGFloat, index: CGFloat)
   func bottomSheetHostingView(_ view: BottomSheetHostingView, didReportError message: String)
 }
 
@@ -357,7 +358,8 @@ public final class BottomSheetHostingView: UIView {
     updateScrim(forPosition: position)
     updateSheetVisibility(forPosition: position)
     updateInteractionState()
-    eventDelegate?.bottomSheetHostingView(self, didChangePosition: position)
+    eventDelegate?.bottomSheetHostingView(
+      self, didChangePosition: position, index: detentIndex(forPosition: position))
   }
 
   private func startDisplayLink() {
@@ -899,26 +901,40 @@ private extension BottomSheetHostingView {
   /// 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)])
-      ) }
+    interpolate(
+      forPosition: position,
+      values: detentSpecs.indices.map {
+        clampOpacity(scrimOpacities[min($0, scrimOpacities.count - 1)])
+      })
+  }
+
+  // Fractional detent index in 0...(detentSpecs.count - 1): 0 at the shortest
+  // detent, 1 at the next, and so on, interpolated by position in between. The
+  // continuous counterpart of `onIndexChange`, so consumers can drive a backdrop
+  // or animate per detent without knowing the sheet's height.
+  private func detentIndex(forPosition position: CGFloat) -> CGFloat {
+    interpolate(forPosition: position, values: detentSpecs.indices.map { CGFloat($0) })
+  }
+
+  // Interpolates a per-detent value (one per detent, by index) by the sheet
+  // position, using each detent's resolved height as the breakpoint.
+  private func interpolate(forPosition position: CGFloat, values: [CGFloat]) -> CGFloat {
+    let pairs = zip(detentSpecs.map(\.height), values)
+      .map { (height: $0, value: $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 }
+    if position <= first.height { return first.value }
+    if position >= last.height { return last.value }
 
     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 lower.value + (upper.value - lower.value) * t
     }
-    return last.opacity
+    return last.value
   }
 
   private func clampOpacity(_ value: CGFloat) -> CGFloat {

package/lib/module/BottomSheet.js

@@ -1,8 +1,8 @@
 "use strict";
 
 import { useState } from 'react';
-import { StyleSheet, View, useWindowDimensions } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { StyleSheet, View } from 'react-native';
+import { useSafeAreaFrame, useSafeAreaInsets } from 'react-native-safe-area-context';
 import BottomSheetNativeView from './BottomSheetNativeComponent';
 import BottomSheetSurfaceNativeComponent from './BottomSheetSurfaceNativeComponent';
 import { Portal } from "./BottomSheetProvider.js";
@@ -37,7 +37,7 @@ export const BottomSheet = ({
 }) => {
   const {
     height: windowHeight
-  } = useWindowDimensions();
+  } = useSafeAreaFrame();
   const insets = useSafeAreaInsets();
   const maxHeight = windowHeight - insets.top;
   const nativeDetents = detents.map(detent => {

package/lib/module/BottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"names":["useState","StyleSheet","View","useWindowDimensions","useSafeAreaInsets","BottomSheetNativeView","BottomSheetSurfaceNativeComponent","Portal","jsx","_jsx","jsxs","_jsxs","programmatic","BottomSheet","children","surface","style","detents","index","animateIn","onIndexChange","onSettle","onPositionChange","wrapNativeView","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","NativeView","sheet","absoluteFill","pointerEvents","position","left","right","bottom","maxDetentHeight","collapsable","flex"],"sourceRoot":"../../src","sources":["BottomSheet.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useState","StyleSheet","View","useSafeAreaFrame","useSafeAreaInsets","BottomSheetNativeView","BottomSheetSurfaceNativeComponent","Portal","jsx","_jsx","jsxs","_jsxs","programmatic","BottomSheet","children","surface","style","detents","index","animateIn","onIndexChange","onSettle","onPositionChange","wrapNativeView","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","NativeView","sheet","absoluteFill","pointerEvents","position","left","right","bottom","maxDetentHeight","collapsable","flex"],"sourceRoot":"../../src","sources":["BottomSheet.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/BottomSheetNativeComponent.ts

@@ -27,7 +27,7 @@ export interface NativeProps extends ViewProps {
     Readonly<{ index: CodegenTypes.Int32 }>
   >;
   onPositionChange?: CodegenTypes.DirectEventHandler<
-    Readonly<{ position: CodegenTypes.Double }>
+    Readonly<{ position: CodegenTypes.Double; index: CodegenTypes.Double }>
   >;
 }
 

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

@@ -11,6 +11,13 @@ export { programmatic } from './bottomSheetUtils';
 export type PositionChangeEventData = Readonly<{
     /** Sheet position, in points from the bottom. */
     position: number;
+    /**
+     * Fractional detent index in `0..(detents.length - 1)`: `0` at the shortest
+     * detent, `1` at the next, and so on, interpolated as the sheet moves between
+     * them. The continuous counterpart of `onIndexChange`, so a backdrop or
+     * per-detent animation can be driven without knowing the sheet's height.
+     */
+    index: number;
 }>;
 /**
  * Props for the inline bottom-sheet component.

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,EAAY,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI/E,OAA8B,EAC5B,KAAK,WAAW,EACjB,MAAM,8BAA8B,CAAC;AAGtC,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;;;GAGG;AACH,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC;IAC7C,iDAAiD;IACjD,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH;;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;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CACjB,KAAK,EAAE,oBAAoB,CAAC,uBAAuB,CAAC,KACjD,IAAI,CAAC;IACV;;;;;;;;;;;OAWG;IACH,cAAc,CAAC,EAAE,CACf,SAAS,EAAE,aAAa,CAAC,WAAW,CAAC,KAClC,aAAa,CAAC,WAAW,CAAC,CAAC;IAChC,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,sLAezB,gBAAgB,4CAgHlB,CAAC"}
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAO/E,OAA8B,EAC5B,KAAK,WAAW,EACjB,MAAM,8BAA8B,CAAC;AAGtC,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;;;GAGG;AACH,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC;IAC7C,iDAAiD;IACjD,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH;;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;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CACjB,KAAK,EAAE,oBAAoB,CAAC,uBAAuB,CAAC,KACjD,IAAI,CAAC;IACV;;;;;;;;;;;OAWG;IACH,cAAc,CAAC,EAAE,CACf,SAAS,EAAE,aAAa,CAAC,WAAW,CAAC,KAClC,aAAa,CAAC,WAAW,CAAC,CAAC;IAChC,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,sLAezB,gBAAgB,4CAgHlB,CAAC"}

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

@@ -21,6 +21,7 @@ export interface NativeProps extends ViewProps {
     }>>;
     onPositionChange?: CodegenTypes.DirectEventHandler<Readonly<{
         position: CodegenTypes.Double;
+        index: CodegenTypes.Double;
     }>>;
 }
 declare const _default: import("react-native/types_generated/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;

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,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"}
+{"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,CAAC;QAAC,KAAK,EAAE,YAAY,CAAC,MAAM,CAAA;KAAE,CAAC,CACxE,CAAC;CACH;;AAED,wBAAsE"}

package/package.json

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

@@ -1,7 +1,10 @@
 import { useState, type ComponentType, type ReactNode } from 'react';
 import type { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
-import { StyleSheet, View, useWindowDimensions } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { StyleSheet, View } from 'react-native';
+import {
+  useSafeAreaFrame,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
 
 import BottomSheetNativeView, {
   type NativeProps,
@@ -19,6 +22,13 @@ export { programmatic } from './bottomSheetUtils';
 export type PositionChangeEventData = Readonly<{
   /** Sheet position, in points from the bottom. */
   position: number;
+  /**
+   * Fractional detent index in `0..(detents.length - 1)`: `0` at the shortest
+   * detent, `1` at the next, and so on, interpolated as the sheet moves between
+   * them. The continuous counterpart of `onIndexChange`, so a backdrop or
+   * per-detent animation can be driven without knowing the sheet's height.
+   */
+  index: number;
 }>;
 
 /**
@@ -122,7 +132,7 @@ export const BottomSheet = ({
   scrimColor,
   scrimOpacities,
 }: BottomSheetProps) => {
-  const { height: windowHeight } = useWindowDimensions();
+  const { height: windowHeight } = useSafeAreaFrame();
   const insets = useSafeAreaInsets();
   const maxHeight = windowHeight - insets.top;
   const nativeDetents = detents.map((detent) => {

package/src/BottomSheetNativeComponent.ts

@@ -27,7 +27,7 @@ export interface NativeProps extends ViewProps {
     Readonly<{ index: CodegenTypes.Int32 }>
   >;
   onPositionChange?: CodegenTypes.DirectEventHandler<
-    Readonly<{ position: CodegenTypes.Double }>
+    Readonly<{ position: CodegenTypes.Double; index: CodegenTypes.Double }>
   >;
 }