@swmansion/react-native-bottom-sheet 0.8.3-next.2 → 0.9.0-next.1

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

@@ -21,6 +21,12 @@ import com.facebook.react.views.view.ReactViewGroup
 import com.facebook.react.uimanager.events.NativeGestureUtil
 import kotlin.math.abs
 
+private enum class DetentKind {
+  POINTS,
+  CONTENT,
+}
+
+private data class RawDetentSpec(val value: Float, val kind: DetentKind, val programmatic: Boolean)
 private data class DetentSpec(val height: Float, val programmatic: Boolean)
 
 interface BottomSheetViewListener {
@@ -38,6 +44,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
 
   // MARK: - State
 
+  private var rawDetentSpecs: List<RawDetentSpec> = emptyList()
   private var detentSpecs: List<DetentSpec> = emptyList()
   private var targetIndex: Int = 0
   var animateIn: Boolean = true
@@ -68,8 +75,15 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
   private var lastTouchY = 0f
   private var activePointerId = MotionEvent.INVALID_POINTER_ID
   private var scrimPressed = false
-  private var scrimColor = Color.argb(128, 0, 0, 0)
+  private var scrimColor = Color.TRANSPARENT
   private var scrimProgress = 0f
+  private var maxDetentHeight = Float.NaN
+  private var contentHeightMarker: View? = null
+
+  private val contentHeightMarkerLayoutListener =
+    View.OnLayoutChangeListener { _, _, _, _, _, _, _, _, _ ->
+      refreshDetentsFromLayout()
+    }
 
   init {
     clipChildren = false
@@ -94,10 +108,12 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
 
   fun addSheetChild(child: View, index: Int) {
     sheetContainer.addView(child, index)
+    refreshContentHeightMarker()
   }
 
   fun removeSheetChildAt(index: Int) {
     sheetContainer.removeViewAt(index)
+    refreshContentHeightMarker()
   }
 
   // MARK: - Child view management
@@ -115,11 +131,13 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
       super.removeView(view)
     } else {
       sheetContainer.removeView(view)
+      refreshContentHeightMarker()
     }
   }
 
   override fun removeViewAt(index: Int) {
     sheetContainer.removeViewAt(index)
+    refreshContentHeightMarker()
   }
 
   // MARK: - Layout
@@ -130,6 +148,8 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     val h = b - t
     if (w <= 0 || h <= 0) return
 
+    refreshContentHeightMarker()
+    refreshDetentsFromLayout()
     layoutSheetContainer(w, h)
 
     if (!hasLaidOut && detentSpecs.isNotEmpty()) {
@@ -139,7 +159,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
       targetIndex = indexToApply.coerceIn(0, detentSpecs.size - 1)
 
       if (animateIn) {
-        val closedTy = detentSpecs.lastOrNull()?.height ?: h.toFloat()
+        val closedTy = detentSpecs.maxOfOrNull { it.height } ?: h.toFloat()
         sheetContainer.translationY = closedTy
         emitPosition()
         snapToIndex(targetIndex, 0f, emitIndexChange = false, emitSettle = false)
@@ -168,7 +188,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
   }
 
   private fun layoutSheetContainer(viewWidth: Int, viewHeight: Int) {
-    val maxHeight = detentSpecs.lastOrNull()?.height ?: viewHeight.toFloat()
+    val maxHeight = detentSpecs.maxOfOrNull { it.height } ?: resolvedMaxDetentHeight(viewHeight)
     val containerTop = (viewHeight - maxHeight).toInt()
     sheetContainer.layout(0, containerTop, viewWidth, containerTop + maxHeight.toInt())
     layoutSheetChildren()
@@ -177,11 +197,71 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
   // MARK: - Prop setters
 
   fun setDetents(raw: List<Map<String, Any>>) {
-    detentSpecs = raw.mapNotNull { dict ->
-      val height = (dict["height"] as? Number)?.toDouble() ?: return@mapNotNull null
+    rawDetentSpecs = raw.mapNotNull { dict ->
+      val value = (dict["value"] as? Number)?.toDouble() ?: return@mapNotNull null
+      val kind =
+        when ((dict["kind"] as? String)?.lowercase()) {
+          "content" -> DetentKind.CONTENT
+          else -> DetentKind.POINTS
+        }
       val programmatic = dict["programmatic"] as? Boolean ?: false
-      DetentSpec(height = (height * density).toFloat(), programmatic = programmatic)
+      RawDetentSpec(value = (value * density).toFloat(), kind = kind, programmatic = programmatic)
+    }
+    refreshDetentsFromLayout()
+  }
+
+  fun setIndex(newIndex: Int) {
+    if (newIndex < 0) return
+
+    if (!hasLaidOut) {
+      pendingIndex = newIndex
+      targetIndex = newIndex
+      return
     }
+
+    if (newIndex >= detentSpecs.size || newIndex == targetIndex) return
+    snapToIndex(newIndex, 0f, emitIndexChange = false)
+  }
+
+  fun setScrimColor(color: Int?) {
+    scrimColor = color ?: Color.TRANSPARENT
+    invalidate()
+  }
+
+  fun setMaxDetentHeight(maxDetentHeight: Double) {
+    this.maxDetentHeight = (maxDetentHeight * density).toFloat()
+    refreshDetentsFromLayout()
+  }
+
+  private fun resolvedMaxDetentHeight(viewHeight: Int = height): Float {
+    val viewHeightPx = viewHeight.toFloat()
+    if (!maxDetentHeight.isFinite() || maxDetentHeight <= 0f) {
+      return viewHeightPx
+    }
+    return maxDetentHeight.coerceIn(0f, viewHeightPx)
+  }
+
+  private fun resolveDetentSpecs(): List<DetentSpec> {
+    val maxHeight = resolvedMaxDetentHeight()
+    val contentHeight = currentContentHeight().takeIf { it.isFinite() && it > 0f } ?: maxHeight
+    return rawDetentSpecs.map { spec ->
+      val height =
+        when (spec.kind) {
+          DetentKind.POINTS -> spec.value
+          DetentKind.CONTENT -> contentHeight.coerceAtMost(maxHeight)
+        }.coerceIn(0f, maxHeight)
+      DetentSpec(height = height, programmatic = spec.programmatic)
+    }
+  }
+
+  private fun refreshDetentsFromLayout() {
+    val resolvedDetents = resolveDetentSpecs()
+    if (resolvedDetents == detentSpecs) {
+      updateScrim()
+      return
+    }
+
+    detentSpecs = resolvedDetents
     if (width > 0 && height > 0 && detentSpecs.isNotEmpty()) {
       layoutSheetContainer(width, height)
 
@@ -195,7 +275,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
           activeAnimationEmitsSettle = false
           stopChoreographer()
           sheetContainer.translationY =
-            currentTy.coerceIn(0f, detentSpecs.lastOrNull()?.height ?: currentTy)
+            currentTy.coerceIn(0f, detentSpecs.maxOfOrNull { it.height } ?: currentTy)
           emitPosition()
           snapToIndex(targetIndex, 0f, emitIndexChange = false, emitSettle = shouldEmitSettle)
         } else {
@@ -209,28 +289,29 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     updateScrim()
   }
 
-  fun setIndex(newIndex: Int) {
-    if (newIndex < 0) return
-
-    if (!hasLaidOut) {
-      pendingIndex = newIndex
-      targetIndex = newIndex
-      return
-    }
+  private fun currentContentHeight(): Float {
+    val marker = contentHeightMarker ?: return Float.NaN
+    return marker.top.toFloat()
+  }
 
-    if (newIndex >= detentSpecs.size || newIndex == targetIndex) return
-    snapToIndex(newIndex, 0f, emitIndexChange = false)
+  private fun refreshContentHeightMarker() {
+    val marker = findContentHeightMarker()
+    if (marker === contentHeightMarker) return
+    contentHeightMarker?.removeOnLayoutChangeListener(contentHeightMarkerLayoutListener)
+    contentHeightMarker = marker
+    contentHeightMarker?.addOnLayoutChangeListener(contentHeightMarkerLayoutListener)
   }
 
-  fun setScrimColor(color: Int?) {
-    scrimColor = color ?: Color.argb(128, 0, 0, 0)
-    invalidate()
+  private fun findContentHeightMarker(): View? {
+    val contentView = sheetContainer.getChildAt(0) as? ViewGroup ?: return null
+    if (contentView.childCount == 0) return null
+    return contentView.getChildAt(contentView.childCount - 1)
   }
 
   // MARK: - Snap logic
 
   private fun translationY(index: Int): Float {
-    val maxHeight = detentSpecs.lastOrNull()?.height ?: height.toFloat()
+    val maxHeight = detentSpecs.maxOfOrNull { it.height } ?: resolvedMaxDetentHeight()
     val snapHeight = detentSpecs.getOrNull(index)?.height ?: 0f
     return maxHeight - snapHeight
   }
@@ -257,7 +338,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     get() = sheetContainer.translationY <= draggableMinTy + 1f
 
   private fun emitPosition() {
-    val maxHeight = detentSpecs.lastOrNull()?.height ?: height.toFloat()
+    val maxHeight = detentSpecs.maxOfOrNull { it.height } ?: resolvedMaxDetentHeight()
     val ty = sheetContainer.translationY
     val position = maxHeight - ty
     updateScrim(position)
@@ -274,7 +355,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
   private var lastShadowOffsetY = Float.NaN
 
   private fun updateShadowState(translationY: Float) {
-    val maxDetentHeight = detentSpecs.lastOrNull()?.height ?: height.toFloat()
+    val maxDetentHeight = detentSpecs.maxOfOrNull { it.height } ?: resolvedMaxDetentHeight()
     val containerTop = height.toFloat() - maxDetentHeight
     val offsetY = ((containerTop + translationY) / density).toDouble()
     if (offsetY.toFloat() == lastShadowOffsetY) return
@@ -472,7 +553,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
           v
         } ?: 0f
         velocityTracker = null
-        val maxHeight = detentSpecs.lastOrNull()?.height ?: height.toFloat()
+        val maxHeight = detentSpecs.maxOfOrNull { it.height } ?: resolvedMaxDetentHeight()
         val currentHeight = maxHeight - sheetContainer.translationY
         val index = bestSnapIndex(currentHeight, velocity)
         snapToIndex(index, velocity)
@@ -562,6 +643,9 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     stopChoreographer()
     velocityTracker?.recycle()
     velocityTracker = null
+    contentHeightMarker?.removeOnLayoutChangeListener(contentHeightMarkerLayoutListener)
+    contentHeightMarker = null
+    rawDetentSpecs = emptyList()
     detentSpecs = emptyList()
     targetIndex = 0
     pendingIndex = null
@@ -610,7 +694,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
   }
 
   private fun currentSheetHeight(): Float {
-    val maxHeight = detentSpecs.lastOrNull()?.height ?: height.toFloat()
+    val maxHeight = detentSpecs.maxOfOrNull { it.height } ?: resolvedMaxDetentHeight()
     return maxHeight - sheetContainer.translationY
   }
 

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

@@ -101,8 +101,9 @@ class BottomSheetViewManager :
     for (i in 0 until detents.size()) {
       val map = detents.getMap(i) ?: continue
       list.add(
-        mapOf(
-          "height" to map.getDouble("height"),
+        mapOf<String, Any>(
+          "value" to map.getDouble("value"),
+          "kind" to (map.getString("kind") ?: "points"),
           "programmatic" to map.getBoolean("programmatic"),
         )
       )
@@ -110,6 +111,11 @@ class BottomSheetViewManager :
     view.setDetents(list)
   }
 
+  @ReactProp(name = "maxDetentHeight")
+  override fun setMaxDetentHeight(view: BottomSheetView, maxDetentHeight: Double) {
+    view.setMaxDetentHeight(maxDetentHeight)
+  }
+
   @ReactProp(name = "index")
   override fun setIndex(view: BottomSheetView, index: Int) {
     view.setIndex(index)

package/ios/BottomSheetComponentView.mm

@@ -51,13 +51,18 @@ using namespace facebook::react;
     NSMutableArray<NSDictionary *> *detentsArray = [NSMutableArray new];
     for (const auto &detent : newViewProps.detents) {
       [detentsArray addObject:@{
-        @"height": @(detent.height),
+        @"value": @(detent.value),
+        @"kind": detent.kind == "content" ? @"content" : @"points",
         @"programmatic": @(detent.programmatic),
       }];
     }
     [_sheetView setDetents:detentsArray];
   }
 
+  if (newViewProps.maxDetentHeight != oldViewProps.maxDetentHeight) {
+    [_sheetView setMaxDetentHeight:newViewProps.maxDetentHeight];
+  }
+
   if (_needsIndexSyncAfterRecycle || newViewProps.index != oldViewProps.index) {
     [_sheetView setDetentIndex:newViewProps.index];
     _needsIndexSyncAfterRecycle = NO;

package/ios/BottomSheetContentView.h

@@ -18,6 +18,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, readonly) UIView *sheetContainer;
 
 - (void)setDetents:(NSArray<NSDictionary *> *)raw;
+- (void)setMaxDetentHeight:(CGFloat)maxDetentHeight;
 - (void)setDetentIndex:(NSInteger)newIndex;
 - (void)setScrimColor:(UIColor *_Nullable)color;
 - (CGFloat)currentContentOffsetY;

package/ios/BottomSheetContentView.mm

@@ -55,6 +55,11 @@
   [_impl setDetents:raw];
 }
 
+- (void)setMaxDetentHeight:(CGFloat)maxDetentHeight
+{
+  _impl.maxDetentHeight = maxDetentHeight;
+}
+
 - (void)setDetentIndex:(NSInteger)newIndex
 {
   [_impl setDetentIndex:newIndex];

package/ios/RNSBottomSheetHostingView.swift

@@ -6,21 +6,36 @@ import UIKit
   func bottomSheetHostingView(_ view: RNSBottomSheetHostingView, didChangePosition position: CGFloat)
 }
 
-private struct DetentSpec {
+private struct DetentSpec: Equatable {
   let height: CGFloat
   let programmatic: Bool
 }
 
+private enum DetentKind {
+  case points
+  case content
+}
+
+private struct RawDetentSpec {
+  let value: CGFloat
+  let kind: DetentKind
+  let programmatic: Bool
+}
+
 @objcMembers
 public final class RNSBottomSheetHostingView: UIView {
   public weak var eventDelegate: RNSBottomSheetHostingViewDelegate?
   public var modal: Bool = false {
     didSet { updateScrim() }
   }
-  public var scrimColor: UIColor? = UIColor.black.withAlphaComponent(0.5) {
+  public var scrimColor: UIColor? = .clear {
     didSet { scrimView.backgroundColor = scrimColor }
   }
+  public var maxDetentHeight: CGFloat = .nan {
+    didSet { refreshDetentsFromLayout() }
+  }
 
+  private var rawDetentSpecs: [RawDetentSpec] = []
   private var detentSpecs: [DetentSpec] = [] {
     didSet {
       setNeedsLayout()
@@ -41,6 +56,7 @@ public final class RNSBottomSheetHostingView: UIView {
   private var hasLaidOut = false
   private var isPanning = false
   private var isContentInteractionDisabled = false
+  private weak var contentHeightMarker: UIView?
 
   public override init(frame: CGRect) {
     super.init(frame: frame)
@@ -100,7 +116,8 @@ public final class RNSBottomSheetHostingView: UIView {
     guard bounds.width > 0, bounds.height > 0 else { return }
 
     scrimView.frame = bounds
-    let maxHeight = detentSpecs.last?.height ?? bounds.height
+    refreshDetentsFromLayout()
+    let maxHeight = maximumResolvedDetentHeight ?? resolvedMaxDetentHeight
     sheetContainer.bounds = CGRect(x: 0, y: 0, width: bounds.width, height: maxHeight)
     sheetContainer.center = CGPoint(x: bounds.width / 2, y: bounds.height - maxHeight / 2)
 
@@ -111,7 +128,7 @@ public final class RNSBottomSheetHostingView: UIView {
       targetIndex = max(0, min(detentSpecs.count - 1, indexToApply))
 
       if animateIn {
-        let closedTy = detentSpecs.last?.height ?? bounds.height
+        let closedTy = maximumResolvedDetentHeight ?? bounds.height
         sheetContainer.transform = CGAffineTransform(translationX: 0, y: closedTy)
         emitPosition()
         snapToIndex(targetIndex, velocity: 0, emitIndexChange: false, emitSettle: false)
@@ -128,7 +145,7 @@ public final class RNSBottomSheetHostingView: UIView {
   }
 
   private var presentedSheetFrame: CGRect {
-    if let presentation = sheetContainer.layer.presentation() {
+    if activeAnimator != nil, let presentation = sheetContainer.layer.presentation() {
       return presentation.frame
     }
     return sheetContainer.frame
@@ -156,13 +173,16 @@ public final class RNSBottomSheetHostingView: UIView {
   }
 
   public func setDetents(_ raw: [NSDictionary]) {
-    detentSpecs = raw.compactMap { dict in
-      guard let height = dict["height"] as? Double ?? (dict["height"] as? NSNumber)?.doubleValue else {
+    rawDetentSpecs = raw.compactMap { dict in
+      guard let value = dict["value"] as? Double ?? (dict["value"] as? NSNumber)?.doubleValue else {
         return nil
       }
+      let kindString = (dict["kind"] as? String) ?? ((dict["kind"] as? NSString) as String?) ?? "points"
+      let kind: DetentKind = kindString == "content" ? .content : .points
       let programmatic = (dict["programmatic"] as? Bool) ?? (dict["programmatic"] as? NSNumber)?.boolValue ?? false
-      return DetentSpec(height: CGFloat(height), programmatic: programmatic)
+      return RawDetentSpec(value: CGFloat(value), kind: kind, programmatic: programmatic)
     }
+    refreshDetentsFromLayout()
     guard bounds.width > 0, bounds.height > 0, !detentSpecs.isEmpty else {
       return
     }
@@ -180,7 +200,7 @@ public final class RNSBottomSheetHostingView: UIView {
         activeAnimatorEmitsSettle = false
         sheetContainer.transform = CGAffineTransform(
           translationX: 0,
-          y: min(max(visualTy, 0), detentSpecs.last?.height ?? visualTy)
+          y: min(max(visualTy, 0), maximumResolvedDetentHeight ?? visualTy)
         )
         emitPosition()
         snapToIndex(targetIndex, velocity: 0, emitIndexChange: false, emitSettle: shouldEmitSettle)
@@ -206,22 +226,28 @@ public final class RNSBottomSheetHostingView: UIView {
 
   public func mountChildComponentView(_ childView: UIView, atIndex index: Int) {
     sheetContainer.insertSubview(childView, at: index)
+    refreshContentHeightMarker()
+    setNeedsLayout()
   }
 
   public func unmountChildComponentView(_ childView: UIView) {
     childView.removeFromSuperview()
+    refreshContentHeightMarker()
+    setNeedsLayout()
   }
 
   public func resetSheetState() {
     activeAnimator?.stopAnimation(true)
     activeAnimator = nil
     stopDisplayLink()
+    rawDetentSpecs = []
     detentSpecs = []
     targetIndex = 0
     pendingIndex = nil
     hasLaidOut = false
     isPanning = false
     setContentInteractionEnabled(true)
+    contentHeightMarker = nil
     sheetContainer.transform = .identity
     scrimView.alpha = 0
     scrimView.isHidden = true
@@ -238,7 +264,7 @@ public final class RNSBottomSheetHostingView: UIView {
   }
 
   private func translationY(for index: Int) -> CGFloat {
-    let maxHeight = detentSpecs.last?.height ?? bounds.height
+    let maxHeight = maximumResolvedDetentHeight ?? resolvedMaxDetentHeight
     let snapHeight = detent(at: index).height
     return maxHeight - snapHeight
   }
@@ -259,15 +285,15 @@ public final class RNSBottomSheetHostingView: UIView {
   }
 
   private var currentSheetHeight: CGFloat {
-    let maxHeight = detentSpecs.last?.height ?? bounds.height
-    let ty = sheetContainer.layer.presentation()?.affineTransform().ty ?? sheetContainer.transform.ty
+    let maxHeight = maximumResolvedDetentHeight ?? resolvedMaxDetentHeight
+    let ty = currentTranslationY
     return maxHeight - ty
   }
 
   public var currentContentOffsetY: CGFloat {
-    let maxHeight = detentSpecs.last?.height ?? bounds.height
+    let maxHeight = maximumResolvedDetentHeight ?? resolvedMaxDetentHeight
     let containerTop = bounds.height - maxHeight
-    let ty = sheetContainer.layer.presentation()?.affineTransform().ty ?? sheetContainer.transform.ty
+    let ty = currentTranslationY
     return containerTop + ty
   }
 
@@ -276,8 +302,8 @@ public final class RNSBottomSheetHostingView: UIView {
   }
 
   private func emitPosition() {
-    let maxHeight = detentSpecs.last?.height ?? bounds.height
-    let ty = sheetContainer.layer.presentation()?.affineTransform().ty ?? sheetContainer.transform.ty
+    let maxHeight = maximumResolvedDetentHeight ?? resolvedMaxDetentHeight
+    let ty = currentTranslationY
     let position = maxHeight - ty
     updateScrim(forPosition: position)
     updateSheetVisibility(forPosition: position)
@@ -371,7 +397,7 @@ public final class RNSBottomSheetHostingView: UIView {
   }
 
   @objc private func handlePan(_ gesture: UIPanGestureRecognizer) {
-    let maxHeight = detentSpecs.last?.height ?? bounds.height
+    let maxHeight = maximumResolvedDetentHeight ?? resolvedMaxDetentHeight
 
     switch gesture.state {
     case .began:
@@ -498,6 +524,83 @@ public final class RNSBottomSheetHostingView: UIView {
     }
     return scrollView.contentOffset.y <= 0
   }
+
+  private var resolvedMaxDetentHeight: CGFloat {
+    if !maxDetentHeight.isFinite || maxDetentHeight <= 0 {
+      return bounds.height
+    }
+    return min(max(0, maxDetentHeight), bounds.height)
+  }
+
+  private var maximumResolvedDetentHeight: CGFloat? {
+    detentSpecs.map(\.height).max()
+  }
+
+  private func resolveDetentSpecs() -> [DetentSpec] {
+    let maxHeight = resolvedMaxDetentHeight
+    let contentHeight = currentContentHeight.map { min($0, maxHeight) } ?? maxHeight
+    return rawDetentSpecs.map { spec in
+      let height: CGFloat
+      switch spec.kind {
+      case .points:
+        height = spec.value
+      case .content:
+        height = contentHeight
+      }
+      return DetentSpec(height: min(max(0, height), maxHeight), programmatic: spec.programmatic)
+    }
+  }
+
+  private func refreshDetentsFromLayout() {
+    refreshContentHeightMarker()
+    let resolvedDetents = resolveDetentSpecs()
+    guard resolvedDetents != detentSpecs else {
+      updateScrim()
+      return
+    }
+
+    detentSpecs = resolvedDetents
+
+    guard bounds.width > 0, bounds.height > 0, !detentSpecs.isEmpty else {
+      return
+    }
+
+    if hasLaidOut && !isPanning {
+      targetIndex = max(0, min(detentSpecs.count - 1, targetIndex))
+
+      if let animator = activeAnimator {
+        stopDisplayLink()
+        let visualTy = sheetContainer.layer.presentation()?.affineTransform().ty ?? sheetContainer.transform.ty
+        let shouldEmitSettle = activeAnimatorEmitsSettle
+        animator.stopAnimation(true)
+        activeAnimator = nil
+        activeAnimatorEmitsSettle = false
+        sheetContainer.transform = CGAffineTransform(
+          translationX: 0,
+          y: min(max(visualTy, 0), maximumResolvedDetentHeight ?? visualTy)
+        )
+        emitPosition()
+        snapToIndex(targetIndex, velocity: 0, emitIndexChange: false, emitSettle: shouldEmitSettle)
+      } else {
+        sheetContainer.transform = CGAffineTransform(translationX: 0, y: translationY(for: targetIndex))
+        emitPosition()
+      }
+    }
+  }
+
+  private func refreshContentHeightMarker() {
+    contentHeightMarker = findContentHeightMarker()
+  }
+
+  private func findContentHeightMarker() -> UIView? {
+    guard let contentView = sheetContainer.subviews.first else { return nil }
+    return contentView.subviews.last
+  }
+
+  private var currentContentHeight: CGFloat? {
+    guard let marker = contentHeightMarker else { return nil }
+    return marker.frame.minY.isFinite ? marker.frame.minY : nil
+  }
 }
 
 extension RNSBottomSheetHostingView: UIGestureRecognizerDelegate {
@@ -518,6 +621,13 @@ extension RNSBottomSheetHostingView: UIGestureRecognizerDelegate {
 }
 
 private extension RNSBottomSheetHostingView {
+  var currentTranslationY: CGFloat {
+    if activeAnimator != nil, let presentation = sheetContainer.layer.presentation() {
+      return presentation.affineTransform().ty
+    }
+    return sheetContainer.transform.ty
+  }
+
   func updateScrim() {
     updateScrim(forPosition: currentSheetHeight)
     updateSheetVisibility(forPosition: currentSheetHeight)

package/lib/module/BottomSheet.js

@@ -1,11 +1,9 @@
 "use strict";
 
-import { useState } from 'react';
 import { StyleSheet, View, useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import BottomSheetNativeComponent from './BottomSheetNativeComponent';
 import { Portal } from "./BottomSheetProvider.js";
-import { resolveDetent } from "./bottomSheetUtils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export { programmatic } from "./bottomSheetUtils.js";
 export const BottomSheet = ({
@@ -18,26 +16,32 @@ export const BottomSheet = ({
   onSettle,
   onPositionChange,
   modal = false,
-  scrimColor = 'rgba(0, 0, 0, 0.5)'
+  scrimColor
 }) => {
   const {
     height: windowHeight
   } = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const maxHeight = windowHeight - insets.top;
-  const [contentHeight, setContentHeight] = useState(0);
-  const resolvedDetents = detents.map(detent => {
-    const value = resolveDetent(detent, contentHeight, maxHeight);
+  const nativeDetents = detents.map(detent => {
+    const programmatic = isDetentProgrammatic(detent);
+    const value = resolveDetentValue(detent);
+    if (value === 'content') {
+      return {
+        value: 0,
+        kind: 'content',
+        programmatic
+      };
+    }
     return {
-      height: Math.max(0, Math.min(value, maxHeight)),
-      programmatic: isDetentProgrammatic(detent)
+      value: Math.max(0, Math.min(value, maxHeight)),
+      kind: 'points',
+      programmatic
     };
   });
-  const handleSentinelLayout = event => {
-    setContentHeight(event.nativeEvent.layout.y);
-  };
-  const clampedIndex = Math.max(0, Math.min(index, resolvedDetents.length - 1));
-  const isCollapsed = (resolvedDetents[clampedIndex]?.height ?? 0) === 0;
+  const clampedIndex = Math.max(0, Math.min(index, nativeDetents.length - 1));
+  const selectedDetentValue = detents[clampedIndex] ? resolveDetentValue(detents[clampedIndex]) : 0;
+  const isCollapsed = selectedDetentValue === 0;
   const handleIndexChange = event => {
     onIndexChange?.(event.nativeEvent.index);
   };
@@ -66,7 +70,8 @@ export const BottomSheet = ({
           // never extends under the status bar.
           height: windowHeight
         }, style],
-        detents: resolvedDetents,
+        detents: nativeDetents,
+        maxDetentHeight: maxHeight,
         index: index,
         animateIn: animateIn,
         modal: modal,
@@ -81,7 +86,7 @@ export const BottomSheet = ({
             maxHeight
           },
           children: [children, /*#__PURE__*/_jsx(View, {
-            onLayout: handleSentinelLayout,
+            collapsable: false,
             pointerEvents: "none"
           })]
         })
@@ -101,4 +106,10 @@ function isDetentProgrammatic(detent) {
   }
   return false;
 }
+function resolveDetentValue(detent) {
+  if (typeof detent === 'object' && detent !== null) {
+    return detent.value;
+  }
+  return detent;
+}
 //# sourceMappingURL=BottomSheet.js.map

package/lib/module/BottomSheet.js.map

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

package/lib/module/BottomSheetNativeComponent.ts

@@ -6,16 +6,18 @@ import {
 } from 'react-native';
 
 type NativeDetent = Readonly<{
-  height: CodegenTypes.Double;
+  value: CodegenTypes.Double;
+  kind: string;
   programmatic: boolean;
 }>;
 
 export interface NativeProps extends ViewProps {
   detents: ReadonlyArray<NativeDetent>;
+  maxDetentHeight: CodegenTypes.Double;
   index: CodegenTypes.Int32;
   animateIn: boolean;
   modal: boolean;
-  scrimColor: ColorValue;
+  scrimColor?: ColorValue;
   onIndexChange?: CodegenTypes.DirectEventHandler<
     Readonly<{ index: CodegenTypes.Int32 }>
   >;

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,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAqB,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAM5E,OAAO,EAAE,KAAK,MAAM,EAAiB,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,GAAI,+GAWzB,gBAAgB,4CA8ElB,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;AAMzD,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,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,GAAI,+GAWzB,gBAAgB,4CAuFlB,CAAC"}

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

@@ -1,14 +1,16 @@
 import { type CodegenTypes, type ColorValue, type ViewProps } from 'react-native';
 type NativeDetent = Readonly<{
-    height: CodegenTypes.Double;
+    value: CodegenTypes.Double;
+    kind: string;
     programmatic: boolean;
 }>;
 export interface NativeProps extends ViewProps {
     detents: ReadonlyArray<NativeDetent>;
+    maxDetentHeight: CodegenTypes.Double;
     index: CodegenTypes.Int32;
     animateIn: boolean;
     modal: boolean;
-    scrimColor: ColorValue;
+    scrimColor?: ColorValue;
     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,MAAM,EAAE,YAAY,CAAC,MAAM,CAAC;IAC5B,YAAY,EAAE,OAAO,CAAC;CACvB,CAAC,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,OAAO,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACrC,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,UAAU,CAAC;IACvB,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,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swmansion/react-native-bottom-sheet",
-  "version": "0.8.3-next.2",
+  "version": "0.9.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,11 +1,11 @@
-import { useState, type ReactNode } from 'react';
-import type { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
+import { type ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import { StyleSheet, View, useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import BottomSheetNativeComponent from './BottomSheetNativeComponent';
 import { Portal } from './BottomSheetProvider';
-import { type Detent, resolveDetent } from './bottomSheetUtils';
+import { type Detent } from './bottomSheetUtils';
 export type { Detent, DetentValue } from './bottomSheetUtils';
 export { programmatic } from './bottomSheetUtils';
 
@@ -32,27 +32,35 @@ export const BottomSheet = ({
   onSettle,
   onPositionChange,
   modal = false,
-  scrimColor = 'rgba(0, 0, 0, 0.5)',
+  scrimColor,
 }: BottomSheetProps) => {
   const { height: windowHeight } = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const maxHeight = windowHeight - insets.top;
-  const [contentHeight, setContentHeight] = useState(0);
+  const nativeDetents = detents.map((detent) => {
+    const programmatic = isDetentProgrammatic(detent);
+    const value = resolveDetentValue(detent);
+
+    if (value === 'content') {
+      return {
+        value: 0,
+        kind: 'content',
+        programmatic,
+      };
+    }
 
-  const resolvedDetents = detents.map((detent) => {
-    const value = resolveDetent(detent, contentHeight, maxHeight);
     return {
-      height: Math.max(0, Math.min(value, maxHeight)),
-      programmatic: isDetentProgrammatic(detent),
+      value: Math.max(0, Math.min(value, maxHeight)),
+      kind: 'points',
+      programmatic,
     };
   });
 
-  const handleSentinelLayout = (event: LayoutChangeEvent) => {
-    setContentHeight(event.nativeEvent.layout.y);
-  };
-
-  const clampedIndex = Math.max(0, Math.min(index, resolvedDetents.length - 1));
-  const isCollapsed = (resolvedDetents[clampedIndex]?.height ?? 0) === 0;
+  const clampedIndex = Math.max(0, Math.min(index, nativeDetents.length - 1));
+  const selectedDetentValue = detents[clampedIndex]
+    ? resolveDetentValue(detents[clampedIndex])
+    : 0;
+  const isCollapsed = selectedDetentValue === 0;
   const handleIndexChange = (event: { nativeEvent: { index: number } }) => {
     onIndexChange?.(event.nativeEvent.index);
   };
@@ -88,7 +96,8 @@ export const BottomSheet = ({
             },
             style,
           ]}
-          detents={resolvedDetents}
+          detents={nativeDetents}
+          maxDetentHeight={maxHeight}
           index={index}
           animateIn={animateIn}
           modal={modal}
@@ -99,7 +108,7 @@ export const BottomSheet = ({
         >
           <View collapsable={false} style={{ flex: 1, maxHeight }}>
             {children}
-            <View onLayout={handleSentinelLayout} pointerEvents="none" />
+            <View collapsable={false} pointerEvents="none" />
           </View>
         </BottomSheetNativeComponent>
       </View>
@@ -119,3 +128,10 @@ function isDetentProgrammatic(detent: Detent): boolean {
   }
   return false;
 }
+
+function resolveDetentValue(detent: Detent) {
+  if (typeof detent === 'object' && detent !== null) {
+    return detent.value;
+  }
+  return detent;
+}

package/src/BottomSheetNativeComponent.ts

@@ -6,16 +6,18 @@ import {
 } from 'react-native';
 
 type NativeDetent = Readonly<{
-  height: CodegenTypes.Double;
+  value: CodegenTypes.Double;
+  kind: string;
   programmatic: boolean;
 }>;
 
 export interface NativeProps extends ViewProps {
   detents: ReadonlyArray<NativeDetent>;
+  maxDetentHeight: CodegenTypes.Double;
   index: CodegenTypes.Int32;
   animateIn: boolean;
   modal: boolean;
-  scrimColor: ColorValue;
+  scrimColor?: ColorValue;
   onIndexChange?: CodegenTypes.DirectEventHandler<
     Readonly<{ index: CodegenTypes.Int32 }>
   >;