@swmansion/react-native-bottom-sheet 0.9.0-next.3 → 0.9.1-next.1

package/README.md

@@ -10,6 +10,7 @@ React Native.
 ## Highlights
 
 - Native implementation for optimal performance.
+- Both inline and modal sheet components.
 - Bring your own sheet surface.
 - Dynamic, content‍-‍based sizing out of the box.
 - Automatic handling of vertically scrollable children.
@@ -70,7 +71,8 @@ const insets = useSafeAreaInsets();
 
 ### Modal
 
-`ModalBottomSheet` renders above other content with a scrim.
+`ModalBottomSheet` renders above other content with an optional scrim
+(transparent by default).
 
 ```tsx
 const [index, setIndex] = useState(0);
@@ -106,6 +108,25 @@ its color:
 </ModalBottomSheet>
 ```
 
+### Scrollable negotiation
+
+By default, the sheet coordinates vertical gestures with nested scrollables,
+such as `ScrollView` and&nbsp;`FlatList`.
+
+If you want gestures that start inside a nested scrollable to stay with that
+scrollable even when it cannot scroll any further,
+set&nbsp;`disableScrollableNegotiation`:
+
+```tsx
+<BottomSheet
+  index={index}
+  onIndexChange={setIndex}
+  disableScrollableNegotiation
+>
+  {/* ... */}
+</BottomSheet>
+```
+
 ### Detents and index
 
 Detents are the points to which the sheet snaps. Each detent is either a number
@@ -139,6 +160,9 @@ const [index, setIndex] = useState(0);
 </BottomSheet>
 ```
 
+Detents can also change over time. When you update `detents`, the sheet keeps
+the current index and animates to the updated detent height when needed.
+
 #### Programmatic-only detents
 
 If you want a detent to be reachable only via code (not by dragging), use the

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

@@ -17,8 +17,8 @@ import androidx.dynamicanimation.animation.SpringForce
 import com.facebook.react.bridge.Arguments
 import com.facebook.react.uimanager.PointerEvents
 import com.facebook.react.uimanager.StateWrapper
-import com.facebook.react.views.view.ReactViewGroup
 import com.facebook.react.uimanager.events.NativeGestureUtil
+import com.facebook.react.views.view.ReactViewGroup
 import kotlin.math.abs
 
 private enum class DetentKind {
@@ -27,11 +27,14 @@ private enum class DetentKind {
 }
 
 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 {
   fun onIndexChange(index: Int)
+
   fun onSettle(index: Int)
+
   fun onPositionChange(position: Double)
 }
 
@@ -54,6 +57,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
       updateInteractionState()
       updateScrim()
     }
+
   var disableScrollableNegotiation: Boolean = false
   private var pendingIndex: Int? = null
   private var hasLaidOut = false
@@ -76,15 +80,15 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
   private var lastTouchY = 0f
   private var activePointerId = MotionEvent.INVALID_POINTER_ID
   private var scrimPressed = false
+  private var scrimTouchActive = false
   private var scrimColor = Color.TRANSPARENT
   private var scrimProgress = 0f
+  private var suppressScrimForClosingTarget = false
   private var maxDetentHeight = Float.NaN
   private var contentHeightMarker: View? = null
 
   private val contentHeightMarkerLayoutListener =
-    View.OnLayoutChangeListener { _, _, _, _, _, _, _, _, _ ->
-      refreshDetentsFromLayout()
-    }
+    View.OnLayoutChangeListener { _, _, _, _, _, _, _, _, _ -> refreshDetentsFromLayout() }
 
   init {
     clipChildren = false
@@ -143,10 +147,10 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
 
   // MARK: - Layout
 
-  override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
-    super.onLayout(changed, l, t, r, b)
-    val w = r - l
-    val h = b - t
+  override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+    super.onLayout(changed, left, top, right, bottom)
+    val w = right - left
+    val h = bottom - top
     if (w <= 0 || h <= 0) return
 
     refreshContentHeightMarker()
@@ -154,10 +158,21 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     layoutSheetContainer(w, h)
 
     if (!hasLaidOut && detentSpecs.isNotEmpty()) {
-      hasLaidOut = true
       val indexToApply = pendingIndex ?: targetIndex
+      val clampedIndex = indexToApply.coerceIn(0, detentSpecs.size - 1)
+
+      if (animateIn && isInvalidContentDetentTarget(clampedIndex)) {
+        targetIndex = clampedIndex
+        pendingIndex = clampedIndex
+        val closedTy = detentSpecs.maxOfOrNull { it.height } ?: h.toFloat()
+        sheetContainer.translationY = closedTy
+        emitPosition()
+        return
+      }
+
+      hasLaidOut = true
       pendingIndex = null
-      targetIndex = indexToApply.coerceIn(0, detentSpecs.size - 1)
+      targetIndex = clampedIndex
 
       if (animateIn) {
         val closedTy = detentSpecs.maxOfOrNull { it.height } ?: h.toFloat()
@@ -198,16 +213,17 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
   // MARK: - Prop setters
 
   fun setDetents(raw: List<Map<String, Any>>) {
-    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
-      RawDetentSpec(value = (value * density).toFloat(), kind = kind, programmatic = programmatic)
-    }
+    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
+        RawDetentSpec(value = (value * density).toFloat(), kind = kind, programmatic = programmatic)
+      }
     refreshDetentsFromLayout()
   }
 
@@ -244,7 +260,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
 
   private fun resolveDetentSpecs(): List<DetentSpec> {
     val maxHeight = resolvedMaxDetentHeight()
-    val contentHeight = currentContentHeight().takeIf { it.isFinite() && it > 0f } ?: maxHeight
+    val contentHeight = validContentHeight().takeIf { it.isFinite() } ?: maxHeight
     return rawDetentSpecs.map { spec ->
       val height =
         when (spec.kind) {
@@ -256,6 +272,11 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
   }
 
   private fun refreshDetentsFromLayout() {
+    if (hasLaidOut && isInvalidContentDetentTarget(targetIndex)) {
+      updateScrim()
+      return
+    }
+
     val resolvedDetents = resolveDetentSpecs()
     if (resolvedDetents == detentSpecs) {
       updateScrim()
@@ -268,6 +289,10 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
 
       if (hasLaidOut && !isPanning) {
         targetIndex = targetIndex.coerceIn(0, detentSpecs.size - 1)
+        if (activeAnimation != null && isTargetingClosedDetent) {
+          suppressScrimForClosingTarget = true
+          hideScrim()
+        }
         if (activeAnimation != null) {
           val currentTy = sheetContainer.translationY
           val shouldEmitSettle = activeAnimationEmitsSettle
@@ -301,6 +326,15 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     return marker.top.toFloat()
   }
 
+  private fun validContentHeight(): Float {
+    return currentContentHeight().takeIf { it.isFinite() && it > 0f } ?: Float.NaN
+  }
+
+  private fun isInvalidContentDetentTarget(index: Int): Boolean {
+    return rawDetentSpecs.getOrNull(index)?.kind == DetentKind.CONTENT &&
+      !validContentHeight().isFinite()
+  }
+
   private fun refreshContentHeightMarker() {
     val marker = findContentHeightMarker()
     if (marker === contentHeightMarker) return
@@ -323,12 +357,21 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     return maxHeight - snapHeight
   }
 
+  private val minDetentTranslationY: Float
+    get() = detentSpecs.indices.minOfOrNull(::translationY) ?: 0f
+
+  private val maxDetentTranslationY: Float
+    get() = detentSpecs.indices.maxOfOrNull(::translationY) ?: 0f
+
   private val closedIndex: Int?
     get() = detentSpecs.indexOfFirst { it.height == 0f }.takeIf { it >= 0 }
 
   private val firstNonZeroDetentHeight: Float
     get() = detentSpecs.firstOrNull { it.height > 0f }?.height ?: 0f
 
+  private val isTargetingClosedDetent: Boolean
+    get() = closedIndex?.let { targetIndex == it } == true
+
   private val draggableMinTy: Float
     get() {
       val highestIndex = detentSpecs.indices.lastOrNull { !detentSpecs[it].programmatic } ?: 0
@@ -377,12 +420,13 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
 
   private fun startChoreographer() {
     if (choreographerCallback != null) return
-    val callback = object : Choreographer.FrameCallback {
-      override fun doFrame(frameTimeNanos: Long) {
-        emitPosition()
-        choreographerCallback?.let { Choreographer.getInstance().postFrameCallback(it) }
+    val callback =
+      object : Choreographer.FrameCallback {
+        override fun doFrame(frameTimeNanos: Long) {
+          emitPosition()
+          choreographerCallback?.let { Choreographer.getInstance().postFrameCallback(it) }
+        }
       }
-    }
     choreographerCallback = callback
     Choreographer.getInstance().postFrameCallback(callback)
   }
@@ -402,30 +446,42 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
   ) {
     if (index < 0 || index >= detentSpecs.size) return
     targetIndex = index
+    if (!isTargetingClosedDetent) {
+      suppressScrimForClosingTarget = false
+    }
 
     val targetTy = translationY(index)
     activeAnimationEmitsSettle = emitSettle
     activeAnimation?.cancel()
 
-    val spring = SpringAnimation(sheetContainer, DynamicAnimation.TRANSLATION_Y, targetTy).apply {
-      spring = SpringForce(targetTy).apply {
-        dampingRatio = SpringForce.DAMPING_RATIO_NO_BOUNCY
-        stiffness = SpringForce.STIFFNESS_MEDIUM
-      }
-      setStartVelocity(velocity)
-      addEndListener { _, canceled, _, _ ->
-        if (canceled) {
-          return@addEndListener
+    val spring =
+      SpringAnimation(sheetContainer, DynamicAnimation.TRANSLATION_Y, targetTy).apply {
+        spring =
+          SpringForce(targetTy).apply {
+            dampingRatio = SpringForce.DAMPING_RATIO_NO_BOUNCY
+            stiffness = SpringForce.STIFFNESS_MEDIUM
+          }
+        setMinValue(minDetentTranslationY)
+        setMaxValue(maxDetentTranslationY)
+        setStartVelocity(velocity)
+        addEndListener { _, canceled, _, _ ->
+          if (canceled) {
+            return@addEndListener
+          }
+          stopChoreographer()
+          activeAnimation = null
+          activeAnimationEmitsSettle = false
+          suppressScrimForClosingTarget = false
+          if (closedIndex == index) {
+            sheetContainer.translationY = translationY(index)
+            hideScrim()
+          }
+          emitPosition()
+          updateInteractionState()
+          if (emitIndexChange) listener?.onIndexChange(index)
+          if (emitSettle) listener?.onSettle(index)
         }
-        stopChoreographer()
-        emitPosition()
-        activeAnimation = null
-        activeAnimationEmitsSettle = false
-        updateInteractionState()
-        if (emitIndexChange) listener?.onIndexChange(index)
-        if (emitSettle) listener?.onSettle(index)
       }
-    }
 
     activeAnimation = spring
     startChoreographer()
@@ -440,11 +496,13 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
 
     if (velocity < -flickThreshold) {
       return draggable.firstOrNull { it.value.height > currentHeight }?.index
-        ?: draggable.lastOrNull()?.index ?: targetIndex
+        ?: draggable.lastOrNull()?.index
+        ?: targetIndex
     }
     if (velocity > flickThreshold) {
       return draggable.lastOrNull { it.value.height < currentHeight }?.index
-        ?: draggable.firstOrNull()?.index ?: targetIndex
+        ?: draggable.firstOrNull()?.index
+        ?: targetIndex
     }
 
     return draggable.minByOrNull { abs(it.value.height - currentHeight) }?.index ?: targetIndex
@@ -452,32 +510,34 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
 
   // MARK: - Touch handling
 
-  override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
+  override fun onInterceptTouchEvent(event: MotionEvent): Boolean {
     val sheetTop = sheetContainer.top + sheetContainer.translationY
-    if (ev.actionMasked == MotionEvent.ACTION_DOWN && ev.y < sheetTop) {
+    if (event.actionMasked == MotionEvent.ACTION_DOWN && event.y < sheetTop) {
       if (isScrimVisible()) {
-        initialTouchX = ev.x
-        initialTouchY = ev.y
-        lastTouchY = ev.y
+        initialTouchX = event.x
+        initialTouchY = event.y
+        lastTouchY = event.y
+        activePointerId = event.getPointerId(0)
         scrimPressed = true
+        scrimTouchActive = true
         return true
       }
       return false
     }
 
-    when (ev.actionMasked) {
+    when (event.actionMasked) {
       MotionEvent.ACTION_DOWN -> {
-        initialTouchX = ev.x
-        initialTouchY = ev.y
-        lastTouchY = ev.y
-        activePointerId = ev.getPointerId(0)
+        initialTouchX = event.x
+        initialTouchY = event.y
+        lastTouchY = event.y
+        activePointerId = event.getPointerId(0)
       }
       MotionEvent.ACTION_MOVE -> {
         if (activePointerId == MotionEvent.INVALID_POINTER_ID) return false
-        val pointerIndex = ev.findPointerIndex(activePointerId)
+        val pointerIndex = event.findPointerIndex(activePointerId)
         if (pointerIndex < 0) return false
-        val x = ev.getX(pointerIndex)
-        val y = ev.getY(pointerIndex)
+        val x = event.getX(pointerIndex)
+        val y = event.getY(pointerIndex)
         val dx = x - initialTouchX
         val dy = y - initialTouchY
 
@@ -492,29 +552,31 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
             // processes events at the root view level before onInterceptTouchEvent
             // runs, so without this the JS side never sees a cancel and Pressable
             // would still fire onPress.
-            NativeGestureUtil.notifyNativeGestureStarted(this, ev)
+            NativeGestureUtil.notifyNativeGestureStarted(this, event)
             return true
           }
           if (dy > 0 && isScrollViewAtTop()) {
             lastTouchY = y
             requestDisallowInterceptTouchEvent(false)
-            NativeGestureUtil.notifyNativeGestureStarted(this, ev)
+            NativeGestureUtil.notifyNativeGestureStarted(this, event)
             return true
           }
         }
       }
-      MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
+      MotionEvent.ACTION_UP,
+      MotionEvent.ACTION_CANCEL -> {
         initialTouchX = 0f
         initialTouchY = 0f
         activePointerId = MotionEvent.INVALID_POINTER_ID
         scrimPressed = false
+        scrimTouchActive = false
       }
     }
     return false
   }
 
   override fun onTouchEvent(event: MotionEvent): Boolean {
-    if (scrimPressed) {
+    if (scrimTouchActive) {
       when (event.actionMasked) {
         MotionEvent.ACTION_MOVE -> {
           val sheetTop = sheetContainer.top + sheetContainer.translationY
@@ -525,14 +587,22 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
         }
         MotionEvent.ACTION_UP -> {
           val closeIndex = closedIndex
+          val shouldDismiss = scrimPressed && isScrimVisible()
           scrimPressed = false
-          if (closeIndex != null && isScrimVisible()) {
+          scrimTouchActive = false
+          activePointerId = MotionEvent.INVALID_POINTER_ID
+          if (shouldDismiss && closeIndex != null) {
             snapToIndex(closeIndex, 0f)
           }
           return true
         }
         MotionEvent.ACTION_CANCEL -> {
           scrimPressed = false
+          scrimTouchActive = false
+          activePointerId = MotionEvent.INVALID_POINTER_ID
+          return true
+        }
+        MotionEvent.ACTION_POINTER_UP -> {
           return true
         }
       }
@@ -553,15 +623,17 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
         emitPosition()
         return true
       }
-      MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
+      MotionEvent.ACTION_UP,
+      MotionEvent.ACTION_CANCEL -> {
         isPanning = false
         activePointerId = MotionEvent.INVALID_POINTER_ID
-        val velocity = velocityTracker?.let { tracker ->
-          tracker.computeCurrentVelocity(1000)
-          val v = tracker.yVelocity
-          tracker.recycle()
-          v
-        } ?: 0f
+        val velocity =
+          velocityTracker?.let { tracker ->
+            tracker.computeCurrentVelocity(1000)
+            val v = tracker.yVelocity
+            tracker.recycle()
+            v
+          } ?: 0f
         velocityTracker = null
         val maxHeight = detentSpecs.maxOfOrNull { it.height } ?: resolvedMaxDetentHeight()
         val currentHeight = maxHeight - sheetContainer.translationY
@@ -616,9 +688,9 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     val containerY = initialTouchY - sheetContainer.top - sheetContainer.translationY
     if (
       containerX < 0f ||
-      containerX >= sheetContainer.width ||
-      containerY < 0f ||
-      containerY >= sheetContainer.height
+        containerX >= sheetContainer.width ||
+        containerY < 0f ||
+        containerY >= sheetContainer.height
     ) {
       return null
     }
@@ -636,7 +708,9 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
         if (childX < 0f || childX >= child.width || childY < 0f || childY >= child.height) {
           continue
         }
-        findScrollableAtPoint(child, childX, childY)?.let { return it }
+        findScrollableAtPoint(child, childX, childY)?.let {
+          return it
+        }
       }
     }
 
@@ -680,8 +754,10 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     lastTouchY = 0f
     activePointerId = MotionEvent.INVALID_POINTER_ID
     scrimPressed = false
+    scrimTouchActive = false
     sheetContainer.translationY = 0f
     scrimProgress = 0f
+    suppressScrimForClosingTarget = false
     sheetContainer.removeAllViews()
     stateWrapper = null
     lastShadowOffsetY = Float.NaN
@@ -696,15 +772,21 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
 
     // 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()
+    if (
+      (isTargetingClosedDetent && activeAnimation == null && !isPanning) ||
+        (suppressScrimForClosingTarget && isTargetingClosedDetent)
+    ) {
+      hideScrim()
       return
     }
 
     val threshold = firstNonZeroDetentHeight
-    scrimProgress =
-      if (threshold <= 0f) 0f else (position / threshold).coerceIn(0f, 1f)
+    scrimProgress = if (threshold <= 0f) 0f else (position / threshold).coerceIn(0f, 1f)
+    invalidate()
+  }
+
+  private fun hideScrim() {
+    scrimProgress = 0f
     invalidate()
   }
 

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

@@ -14,8 +14,7 @@ import com.facebook.react.viewmanagers.BottomSheetViewManagerInterface
 
 @ReactModule(name = BottomSheetViewManager.NAME)
 class BottomSheetViewManager :
-  ViewGroupManager<BottomSheetView>(),
-  BottomSheetViewManagerInterface<BottomSheetView> {
+  ViewGroupManager<BottomSheetView>(), BottomSheetViewManagerInterface<BottomSheetView> {
 
   companion object {
     const val NAME = "BottomSheetView"
@@ -29,37 +28,37 @@ class BottomSheetViewManager :
 
   override fun createViewInstance(context: ThemedReactContext): BottomSheetView {
     val view = BottomSheetView(context)
-    view.listener = object : BottomSheetViewListener {
-      override fun onIndexChange(index: Int) {
-        val event = com.facebook.react.bridge.Arguments.createMap().apply {
-          putInt("index", index)
+    view.listener =
+      object : BottomSheetViewListener {
+        override fun onIndexChange(index: Int) {
+          val event =
+            com.facebook.react.bridge.Arguments.createMap().apply { putInt("index", index) }
+          val reactContext = view.context as? ThemedReactContext ?: return
+          reactContext
+            .getJSModule(com.facebook.react.uimanager.events.RCTEventEmitter::class.java)
+            .receiveEvent(view.id, "topIndexChange", event)
         }
-        val reactContext = view.context as? ThemedReactContext ?: return
-        reactContext
-          .getJSModule(com.facebook.react.uimanager.events.RCTEventEmitter::class.java)
-          .receiveEvent(view.id, "topIndexChange", event)
-      }
 
-      override fun onSettle(index: Int) {
-        val event = com.facebook.react.bridge.Arguments.createMap().apply {
-          putInt("index", index)
+        override fun onSettle(index: Int) {
+          val event =
+            com.facebook.react.bridge.Arguments.createMap().apply { putInt("index", index) }
+          val reactContext = view.context as? ThemedReactContext ?: return
+          reactContext
+            .getJSModule(com.facebook.react.uimanager.events.RCTEventEmitter::class.java)
+            .receiveEvent(view.id, "topSettle", event)
         }
-        val reactContext = view.context as? ThemedReactContext ?: return
-        reactContext
-          .getJSModule(com.facebook.react.uimanager.events.RCTEventEmitter::class.java)
-          .receiveEvent(view.id, "topSettle", event)
-      }
 
-      override fun onPositionChange(position: Double) {
-        val event = com.facebook.react.bridge.Arguments.createMap().apply {
-          putDouble("position", position)
+        override fun onPositionChange(position: Double) {
+          val event =
+            com.facebook.react.bridge.Arguments.createMap().apply {
+              putDouble("position", position)
+            }
+          val reactContext = view.context as? ThemedReactContext ?: return
+          reactContext
+            .getJSModule(com.facebook.react.uimanager.events.RCTEventEmitter::class.java)
+            .receiveEvent(view.id, "topPositionChange", event)
         }
-        val reactContext = view.context as? ThemedReactContext ?: return
-        reactContext
-          .getJSModule(com.facebook.react.uimanager.events.RCTEventEmitter::class.java)
-          .receiveEvent(view.id, "topPositionChange", event)
       }
-    }
     return view
   }
 
@@ -69,7 +68,8 @@ class BottomSheetViewManager :
 
   override fun getChildCount(parent: BottomSheetView): Int = parent.sheetChildCount
 
-  override fun getChildAt(parent: BottomSheetView, index: Int): View? = parent.getSheetChildAt(index)
+  override fun getChildAt(parent: BottomSheetView, index: Int): View? =
+    parent.getSheetChildAt(index)
 
   override fun removeViewAt(parent: BottomSheetView, index: Int) {
     parent.removeSheetChildAt(index)

package/ios/RNSBottomSheetHostingView.swift

@@ -28,12 +28,15 @@ public final class RNSBottomSheetHostingView: UIView {
   public var modal: Bool = false {
     didSet { updateScrim() }
   }
+
   public var scrimColor: UIColor? = .clear {
     didSet { scrimView.backgroundColor = scrimColor }
   }
+
   public var maxDetentHeight: CGFloat = .nan {
     didSet { refreshDetentsFromLayout() }
   }
+
   public var disableScrollableNegotiation: Bool = false
 
   private var rawDetentSpecs: [RawDetentSpec] = []
@@ -59,7 +62,7 @@ public final class RNSBottomSheetHostingView: UIView {
   private var isContentInteractionDisabled = false
   private weak var contentHeightMarker: UIView?
 
-  public override init(frame: CGRect) {
+  override public init(frame: CGRect) {
     super.init(frame: frame)
     backgroundColor = .clear
     clipsToBounds = false
@@ -84,19 +87,20 @@ public final class RNSBottomSheetHostingView: UIView {
     sheetContainer.addGestureRecognizer(panGesture)
   }
 
-  public required init?(coder: NSCoder) {
+  @available(*, unavailable)
+  public required init?(coder _: NSCoder) {
     fatalError("init(coder:) has not been implemented")
   }
 
-  // RCTSurfaceTouchHandler dispatches touch events to JS independently of the
-  // pan gesture (it fires in touchesBegan: regardless of its recognizer state).
-  // We cache it here and toggle isEnabled in handlePan(.began) to force a
-  // touchesCancelled dispatch to JS, preventing Pressable from firing onPress
-  // during a sheet drag. This is the iOS equivalent of Android's
-  // NativeGestureUtil.notifyNativeGestureStarted.
+  /// RCTSurfaceTouchHandler dispatches touch events to JS independently of the
+  /// pan gesture (it fires in touchesBegan: regardless of its recognizer state).
+  /// We cache it here and toggle isEnabled in handlePan(.began) to force a
+  /// touchesCancelled dispatch to JS, preventing Pressable from firing onPress
+  /// during a sheet drag. This is the iOS equivalent of Android's
+  /// NativeGestureUtil.notifyNativeGestureStarted.
   private weak var surfaceTouchHandler: UIGestureRecognizer?
 
-  public override func didMoveToWindow() {
+  override public func didMoveToWindow() {
     super.didMoveToWindow()
     surfaceTouchHandler = nil
     guard window != nil else { return }
@@ -112,7 +116,7 @@ public final class RNSBottomSheetHostingView: UIView {
     }
   }
 
-  public override func layoutSubviews() {
+  override public func layoutSubviews() {
     super.layoutSubviews()
     guard bounds.width > 0, bounds.height > 0 else { return }
 
@@ -123,10 +127,21 @@ public final class RNSBottomSheetHostingView: UIView {
     sheetContainer.center = CGPoint(x: bounds.width / 2, y: bounds.height - maxHeight / 2)
 
     if !hasLaidOut && !detentSpecs.isEmpty {
-      hasLaidOut = true
       let indexToApply = pendingIndex ?? targetIndex
+      let clampedIndex = max(0, min(detentSpecs.count - 1, indexToApply))
+
+      if animateIn && isInvalidContentDetentTarget(clampedIndex) {
+        targetIndex = clampedIndex
+        pendingIndex = clampedIndex
+        let closedTy = maximumResolvedDetentHeight ?? bounds.height
+        sheetContainer.transform = CGAffineTransform(translationX: 0, y: closedTy)
+        emitPosition()
+        return
+      }
+
+      hasLaidOut = true
       pendingIndex = nil
-      targetIndex = max(0, min(detentSpecs.count - 1, indexToApply))
+      targetIndex = clampedIndex
 
       if animateIn {
         let closedTy = maximumResolvedDetentHeight ?? bounds.height
@@ -152,7 +167,7 @@ public final class RNSBottomSheetHostingView: UIView {
     return sheetContainer.frame
   }
 
-  public override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
+  override public func point(inside point: CGPoint, with _: UIEvent?) -> Bool {
     if presentedSheetFrame.contains(point) {
       return true
     }
@@ -160,10 +175,10 @@ public final class RNSBottomSheetHostingView: UIView {
     return isScrimVisible && bounds.contains(point)
   }
 
-  public override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
+  override public func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
     guard self.point(inside: point, with: event) else { return nil }
 
-    if isScrimVisible && !presentedSheetFrame.contains(point) {
+    if isScrimVisible, !presentedSheetFrame.contains(point) {
       let scrimPoint = convert(point, to: scrimView)
       return scrimView.hitTest(scrimPoint, with: event)
     }
@@ -475,7 +490,7 @@ public final class RNSBottomSheetHostingView: UIView {
     return nil
   }
 
-  public override func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
+  override public func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
     guard gestureRecognizer === panGesture else { return true }
 
     let velocity = panGesture.velocity(in: self)
@@ -525,7 +540,7 @@ public final class RNSBottomSheetHostingView: UIView {
 
   private func resolveDetentSpecs() -> [DetentSpec] {
     let maxHeight = resolvedMaxDetentHeight
-    let contentHeight = currentContentHeight.map { min($0, maxHeight) } ?? maxHeight
+    let contentHeight = validContentHeight.map { min($0, maxHeight) } ?? maxHeight
     return rawDetentSpecs.map { spec in
       let height: CGFloat
       switch spec.kind {
@@ -540,6 +555,11 @@ public final class RNSBottomSheetHostingView: UIView {
 
   private func refreshDetentsFromLayout() {
     refreshContentHeightMarker()
+    if hasLaidOut, isInvalidContentDetentTarget(targetIndex) {
+      updateScrim()
+      return
+    }
+
     let resolvedDetents = resolveDetentSpecs()
     guard resolvedDetents != detentSpecs else {
       updateScrim()
@@ -552,7 +572,7 @@ public final class RNSBottomSheetHostingView: UIView {
       return
     }
 
-    if hasLaidOut && !isPanning {
+    if hasLaidOut, !isPanning {
       targetIndex = max(0, min(detentSpecs.count - 1, targetIndex))
 
       if let animator = activeAnimator {
@@ -594,6 +614,25 @@ public final class RNSBottomSheetHostingView: UIView {
     guard let marker = contentHeightMarker else { return nil }
     return marker.frame.minY.isFinite ? marker.frame.minY : nil
   }
+
+  private var validContentHeight: CGFloat? {
+    guard let height = currentContentHeight, height.isFinite, height > 0 else {
+      return nil
+    }
+    return height
+  }
+
+  private func isInvalidContentDetentTarget(_ index: Int) -> Bool {
+    guard rawDetentSpecs.indices.contains(index) else {
+      return false
+    }
+    switch rawDetentSpecs[index].kind {
+    case .points:
+      return false
+    case .content:
+      return validContentHeight == nil
+    }
+  }
 }
 
 extension RNSBottomSheetHostingView: UIGestureRecognizerDelegate {
@@ -606,8 +645,8 @@ extension RNSBottomSheetHostingView: UIGestureRecognizerDelegate {
   }
 
   public func gestureRecognizer(
-    _ gestureRecognizer: UIGestureRecognizer,
-    shouldRecognizeSimultaneouslyWith other: UIGestureRecognizer
+    _: UIGestureRecognizer,
+    shouldRecognizeSimultaneouslyWith _: UIGestureRecognizer
   ) -> Bool {
     return false
   }

package/lib/module/BottomSheetProvider.js

@@ -1,16 +1,13 @@
 "use strict";
 
-import { createContext, useContext, useEffect, useId, useReducer, useState } from 'react';
+import { createContext, useContext, useId, useLayoutEffect, useState, useSyncExternalStore } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PortalContext = /*#__PURE__*/createContext(null);
 const PortalHost = () => {
   const context = useContext(PortalContext);
-  const [, forceRender] = useReducer(x => x + 1, 0);
-  useEffect(() => {
-    return context.subscribe(forceRender);
-  }, [context]);
-  return Array.from(context.getPortals().entries()).map(([key, element]) => /*#__PURE__*/_jsx(View, {
+  const portals = useSyncExternalStore(context.subscribe, context.getSnapshot, context.getSnapshot);
+  return portals.map(([key, element]) => /*#__PURE__*/_jsx(View, {
     style: StyleSheet.absoluteFill,
     pointerEvents: "box-none",
     children: element
@@ -24,7 +21,9 @@ export const BottomSheetProvider = ({
   const [context] = useState(() => {
     const portals = new Map();
     const subscribers = new Set();
+    let snapshot = [];
     const notify = () => {
+      snapshot = Array.from(portals.entries());
       subscribers.forEach(subscriber => subscriber());
     };
     return {
@@ -42,7 +41,7 @@ export const BottomSheetProvider = ({
           subscribers.delete(callback);
         };
       },
-      getPortals: () => portals
+      getSnapshot: () => snapshot
     };
   });
   return /*#__PURE__*/_jsxs(PortalContext.Provider, {
@@ -62,10 +61,10 @@ export const Portal = ({
     removePortal
   } = context;
   const id = useId();
-  useEffect(() => {
+  useLayoutEffect(() => {
     addPortal(id, children);
   }, [id, children, addPortal]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     return () => {
       removePortal(id);
     };

package/lib/module/BottomSheetProvider.js.map

@@ -1 +1 @@
-{"version":3,"names":["createContext","useContext","useEffect","useId","useReducer","useState","StyleSheet","View","jsx","_jsx","jsxs","_jsxs","PortalContext","PortalHost","context","forceRender","x","subscribe","Array","from","getPortals","entries","map","key","element","style","absoluteFill","pointerEvents","children","BottomSheetProvider","portals","Map","subscribers","Set","notify","forEach","subscriber","addPortal","set","removePortal","delete","callback","add","Provider","value","Portal","Error","id"],"sourceRoot":"../../src","sources":["BottomSheetProvider.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["createContext","useContext","useId","useLayoutEffect","useState","useSyncExternalStore","StyleSheet","View","jsx","_jsx","jsxs","_jsxs","PortalContext","PortalHost","context","portals","subscribe","getSnapshot","map","key","element","style","absoluteFill","pointerEvents","children","BottomSheetProvider","Map","subscribers","Set","snapshot","notify","Array","from","entries","forEach","subscriber","addPortal","set","removePortal","delete","callback","add","Provider","value","Portal","Error","id"],"sourceRoot":"../../src","sources":["BottomSheetProvider.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetProvider.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetProvider.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA0BvC,iEAAiE;AACjE,eAAO,MAAM,mBAAmB,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CAgCxE,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,SAkB3D,CAAC"}
+{"version":3,"file":"BottomSheetProvider.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetProvider.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA6BvC,iEAAiE;AACjE,eAAO,MAAM,mBAAmB,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CAkCxE,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,SAkB3D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swmansion/react-native-bottom-sheet",
-  "version": "0.9.0-next.3",
+  "version": "0.9.1-next.1",
   "description": "Provides bottom-sheet components for React Native.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -35,7 +35,7 @@
   "scripts": {
     "example": "yarn workspace @swmansion/react-native-bottom-sheet-example",
     "clean": "del-cli lib",
-    "prepare": "bob build",
+    "prepare": "lefthook install && bob build",
     "typecheck": "tsc",
     "lint": "eslint \"**/*.{js,ts,tsx}\""
   },
@@ -69,6 +69,7 @@
     "eslint": "9.39.2",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-prettier": "5.5.5",
+    "lefthook": "2.1.6",
     "prettier": "2.8.8",
     "react": "19.1.0",
     "react-native": "0.81.5",

package/src/BottomSheetProvider.tsx

@@ -1,31 +1,34 @@
 import {
   createContext,
   useContext,
-  useEffect,
   useId,
-  useReducer,
+  useLayoutEffect,
   useState,
+  useSyncExternalStore,
 } from 'react';
 import type { ReactNode } from 'react';
 import { StyleSheet, View } from 'react-native';
 
+type PortalSnapshot = Array<[string, ReactNode]>;
+
 interface PortalContextType {
   addPortal: (key: string, element: ReactNode) => void;
   removePortal: (key: string) => void;
   subscribe: (callback: () => void) => () => void;
-  getPortals: () => Map<string, ReactNode>;
+  getSnapshot: () => PortalSnapshot;
 }
 
 const PortalContext = createContext<PortalContextType | null>(null);
 
 const PortalHost = () => {
   const context = useContext(PortalContext)!;
-  const [, forceRender] = useReducer((x: number) => x + 1, 0);
-  useEffect(() => {
-    return context.subscribe(forceRender);
-  }, [context]);
+  const portals = useSyncExternalStore(
+    context.subscribe,
+    context.getSnapshot,
+    context.getSnapshot
+  );
 
-  return Array.from(context.getPortals().entries()).map(([key, element]) => (
+  return portals.map(([key, element]) => (
     <View key={key} style={StyleSheet.absoluteFill} pointerEvents="box-none">
       {element}
     </View>
@@ -37,7 +40,9 @@ export const BottomSheetProvider = ({ children }: { children: ReactNode }) => {
   const [context] = useState<PortalContextType>(() => {
     const portals = new Map<string, ReactNode>();
     const subscribers = new Set<() => void>();
+    let snapshot: PortalSnapshot = [];
     const notify = () => {
+      snapshot = Array.from(portals.entries());
       subscribers.forEach((subscriber) => subscriber());
     };
     return {
@@ -55,7 +60,7 @@ export const BottomSheetProvider = ({ children }: { children: ReactNode }) => {
           subscribers.delete(callback);
         };
       },
-      getPortals: () => portals,
+      getSnapshot: () => snapshot,
     };
   });
 
@@ -76,10 +81,10 @@ export const Portal = ({ children }: { children: ReactNode }) => {
   const { addPortal, removePortal } = context;
   const id = useId();
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     addPortal(id, children);
   }, [id, children, addPortal]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     return () => {
       removePortal(id);
     };