react-native-nitro-modal 0.2.0 → 0.3.0-rc

package/README.md

@@ -17,7 +17,9 @@
 
 ## Features
 
-- 📄 **Native bottom sheets** with multiple detents (`small`, `medium`, `large`, `fitContent`) and swipe-to-dismiss
+- 📄 **Native bottom sheets** with multiple detents (`small`, `medium`, `large`, `fitContent` or a height) and swipe-to-dismiss
+- 📌 **Inline sheets** — a persistent sheet that is part of your screen, with the views behind it still usable
+- 🔄 **Pull to refresh** — pulling a sheet down past its lowest detent
 - 🪟 **Centered popups** with native `scale` / `fade` transitions
 - 📏 **Content-sized sheets** — `fitContent` measures your React content and grows with it
 - ⌨️ **Keyboard aware** — the sheet or card follows the keyboard animation (`pan` or `resize`)
@@ -111,6 +113,38 @@ Detents are listed smallest first. `initialDetentIndex` selects where the sheet
 </NitroModal>
 ```
 
+### Inline (persistent) bottom sheet
+
+`presentation="inline"` keeps the sheet inside the component's own frame instead of presenting it over the app — like a sheet that is part of the screen. There is no backdrop, the views behind it stay interactive, it moves with your screen during navigation, and the user can't dismiss it. Position the frame with `style` (it fills its parent by default); the sheet rests against its bottom edge and its largest detent reaches its top edge.
+
+```tsx
+<View style={{ flex: 1 }}>
+  <ScreenContent />
+
+  <NitroModal
+    isOpen
+    presentation="inline"
+    style={{ top: headerHeight }}
+    detents={[320, 'large']}
+    onPullToRefresh={refresh}
+  >
+    <FlatList data={rows} renderItem={renderRow} nestedScrollEnabled />
+  </NitroModal>
+</View>
+```
+
+A number in `detents` is the content height in dp/pt above the bottom safe area.
+
+### Scrolling content and pull to refresh
+
+A sheet hands drags off to the scroll view under the finger:
+
+- Dragging up expands the sheet first, then scrolls the content.
+- Dragging down scrolls the content back to its top. Once the content has scrolled during a drag, that drag never moves the sheet; the next drag collapses it.
+- With `onPullToRefresh` set, a drag that starts with the sheet resting on its lowest detent can pull it further down. Letting go past the threshold calls `onPullToRefresh` (with haptic feedback when it is crossed). This needs a sheet that can't be swiped away: inline, or `dismissOnSwipe={false}`.
+
+On Android, scrollable content takes part through nested scrolling, so set `nestedScrollEnabled` on it.
+
 ### Popup
 
 ```tsx
@@ -168,7 +202,9 @@ const sheet = useRef<NitroModalRef>(null);
 | ------------------------ | ---------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------- |
 | `isOpen`                 | `boolean`                                            | —                  | Controls visibility. Leave undefined to use the [ref API](#nitromodalref) instead.                |
 | `mode`                   | `'bottomSheet' \| 'popup'`                           | `'bottomSheet'`    | How the modal is presented.                                                                       |
-| `detents`                | `SheetDetent[]`                                      | `['fitContent']`   | Sheet heights, smallest first. Android uses at most three.                                        |
+| `presentation`           | `'modal' \| 'inline'`                                | `'modal'`          | `inline` keeps a bottom sheet inside the component's frame, as part of the screen. See [Inline](#inline-persistent-bottom-sheet). |
+| `style`                  | `StyleProp<ViewStyle>`                               | `absoluteFill`     | Inline only: the frame the sheet lives in.                                                        |
+| `detents`                | `SheetDetent[]`                                      | `['fitContent']`   | Sheet heights, smallest first: named sizes or a content height in dp/pt. Android uses at most three. |
 | `initialDetentIndex`     | `number`                                             | `0`                | Index into `detents` the sheet opens at.                                                          |
 | `backdropColor`          | `ColorValue`                                         | `'black'`          | Backdrop color.                                                                                   |
 | `backdropOpacity`        | `number`                                             | `0.4`              | Backdrop opacity, `0`–`1`.                                                                        |
@@ -194,6 +230,7 @@ const sheet = useRef<NitroModalRef>(null);
 | `onDetentChange`    | `(index: number) => void`                | A bottom sheet settled on a different detent.                                      |
 | `onBackdropPress`   | `() => void`                             | The backdrop was tapped (fires even when `dismissOnBackdropPress` is `false`).     |
 | `onBackButtonPress` | `() => void`                             | The Android hardware/gesture back (Escape on web) was pressed.                     |
+| `onPullToRefresh`   | `() => void`                             | The sheet was pulled down past its lowest detent and released. See [pull to refresh](#scrolling-content-and-pull-to-refresh). |
 
 ### `NitroModalRef`
 
@@ -208,12 +245,17 @@ const sheet = useRef<NitroModalRef>(null);
 ```ts
 type ModalMode = 'bottomSheet' | 'popup';
 
-type SheetDetent =
+type ModalPresentation = 'modal' | 'inline';
+
+type NamedSheetDetent =
   | 'small'      // ~25% of the available height
   | 'medium'     // ~50% of the available height
   | 'large'      // the full available height
   | 'fitContent'; // the measured height of your content
 
+// A named height, or the content height in dp/pt above the bottom safe area.
+type SheetDetent = NamedSheetDetent | number;
+
 type KeyboardBehavior = 'pan' | 'resize' | 'none';
 
 type PopupAnimation = 'scale' | 'fade' | 'none';
@@ -228,6 +270,8 @@ import type {
   DismissReason,
   KeyboardBehavior,
   ModalMode,
+  ModalPresentation,
+  NamedSheetDetent,
   NitroModalProps,
   NitroModalRef,
   PopupAnimation,
@@ -237,7 +281,7 @@ import type {
 
 ## How it works
 
-`<NitroModal>` mounts a zero-size placeholder in your React tree. When opened, the native side presents a real view controller (iOS) or window (Android) and hosts your React children inside it. Children mount when the modal opens and stay mounted until the native exit animation completes, so content never disappears mid-transition. The native side also reports the exact area available to the content (accounting for rotation, keyboard and sheet size), and the content container is sized accordingly.
+`<NitroModal>` mounts a zero-size placeholder in your React tree. When opened, the native side presents a real view controller (iOS) or window (Android) and hosts your React children inside it. An inline sheet instead lives in a view laid out with `style`, in your screen's own hierarchy: touches that miss the sheet go to the views behind it, and `keyboardBehavior` doesn't apply (the screen's own keyboard handling does). Children mount when the modal opens and stay mounted until the native exit animation completes, so content never disappears mid-transition. The native side also reports the exact area available to the content (accounting for rotation, keyboard and sheet size), and the content container is sized accordingly.
 
 ## Platform notes
 

package/android/src/main/java/com/margelo/nitro/nitromodal/BottomSheetPresenter.kt

@@ -1,21 +1,34 @@
 package com.margelo.nitro.nitromodal
 
+import android.animation.ValueAnimator
+import android.annotation.SuppressLint
 import android.app.Activity
+import android.content.Context
 import android.graphics.Color
 import android.graphics.Outline
 import android.graphics.drawable.GradientDrawable
+import android.os.Build
 import android.view.Gravity
+import android.view.HapticFeedbackConstants
+import android.view.MotionEvent
 import android.view.View
+import android.view.ViewConfiguration
 import android.view.ViewGroup
 import android.view.ViewOutlineProvider
+import android.view.animation.DecelerateInterpolator
 import android.view.animation.PathInterpolator
 import android.widget.FrameLayout
 import androidx.activity.BackEventCompat
 import androidx.coordinatorlayout.widget.CoordinatorLayout
 import androidx.core.graphics.Insets
+import androidx.core.view.ViewCompat
 import androidx.core.view.doOnLayout
+import com.facebook.react.uimanager.PointerEvents
+import com.facebook.react.uimanager.ReactPointerEventsView
 import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.events.NativeGestureUtil
 import com.google.android.material.bottomsheet.BottomSheetBehavior
+import kotlin.math.abs
 import kotlin.math.ceil
 
 /**
@@ -25,6 +38,9 @@ import kotlin.math.ceil
  * `BottomSheetBehavior` supports up to three resting states, so detents map
  * onto collapsed / half-expanded / expanded, smallest first. Predictive back
  * uses the behavior's own Material animation, like `BottomSheetDialog`.
+ *
+ * Inline, the sheet fills the host view instead of a window, with no
+ * backdrop, and touches that miss the sheet reach the views behind it.
  */
 internal class BottomSheetPresenter(
   activity: Activity,
@@ -32,22 +48,30 @@ internal class BottomSheetPresenter(
   contentRoot: ModalContentRoot,
   config: ModalConfig,
   listener: Listener,
-) : ModalPresenter(activity, reactContext, contentRoot, config, listener) {
+  inlineHost: NitroModalHostView? = null,
+) : ModalPresenter(activity, reactContext, contentRoot, config, listener, inlineHost) {
 
-  private class Detent(val index: Int, val height: Int)
+  private class RestingHeight(val index: Int, val height: Int)
 
-  private val coordinator = CoordinatorLayout(activity)
+  private val coordinator = SheetLayout(activity)
   private val sheet = FrameLayout(activity)
   private val grabber = View(activity)
-  private val behavior = BottomSheetBehavior<FrameLayout>()
+  private val behavior = SheetBehavior()
   private val sheetBackground = GradientDrawable()
   private var cornerRadiusPx = 0f
 
   /** Resting detents sorted by height; position i maps to [states][i]. */
-  private var sortedDetents: List<Detent> = emptyList()
+  private var sortedDetents: List<RestingHeight> = emptyList()
   private var maxContentHeight = 0
   private var presented = false
   private var lastDetentIndex = -1
+  private var reportedRestingTop = Int.MIN_VALUE
+
+  /** The behavior is dragging the sheet (as opposed to a nested scroll moving it). */
+  private var sheetDragging = false
+
+  /** How far the sheet is pulled below its lowest detent, in px. */
+  private var pullOffset = 0f
 
   /** A predictive back gesture was committed; the behavior is sliding the sheet out. */
   private var committingBack = false
@@ -59,12 +83,20 @@ internal class BottomSheetPresenter(
         finishUserDismissal(DismissReason.SWIPE)
         return
       }
+      if (newState == BottomSheetBehavior.STATE_DRAGGING) {
+        sheetDragging = true
+        coordinator.notifyNativeGesture(started = true)
+      } else if (sheetDragging) {
+        sheetDragging = false
+        coordinator.notifyNativeGesture(started = false)
+      }
       val position = states().indexOf(newState)
       if (position < 0 || isDismissing) return
       presented = true
       // Hideable while entering/exiting; at rest, swipe-to-dismiss follows the prop.
       behavior.isHideable = this@BottomSheetPresenter.config.dismissOnSwipe
       notifyPresented()
+      reportRestingTop()
       val index = sortedDetents.getOrNull(position)?.index ?: return
       if (index != lastDetentIndex) {
         lastDetentIndex = index
@@ -79,10 +111,12 @@ internal class BottomSheetPresenter(
   }
 
   override fun createLayout(): ViewGroup {
-    coordinator.addView(backdrop, CoordinatorLayout.LayoutParams(MATCH, MATCH))
+    if (!isInline) coordinator.addView(backdrop, CoordinatorLayout.LayoutParams(MATCH, MATCH))
     coordinator.addOnLayoutChangeListener { _, l, t, r, b, oldL, oldT, oldR, oldB ->
       // Rotation / window resize. Posted: detents change the sheet's layout params.
       if (r - l != oldR - oldL || b - t != oldB - oldT) coordinator.post { updateDetents() }
+      // Detent heights can move the resting sheet without a state change.
+      reportRestingTop()
     }
 
     sheet.background = sheetBackground
@@ -106,7 +140,8 @@ internal class BottomSheetPresenter(
     applyAppearance()
 
     behavior.isGestureInsetBottomIgnored = true
-    behavior.maxWidth = dp(MAX_WIDTH_DP)
+    // Inline, the host view decides the width.
+    if (!isInline) behavior.maxWidth = dp(MAX_WIDTH_DP)
     behavior.isHideable = true
     behavior.state = BottomSheetBehavior.STATE_HIDDEN
     // Registered after the initial HIDDEN state so it doesn't read as a dismissal.
@@ -134,6 +169,7 @@ internal class BottomSheetPresenter(
   }
 
   override fun animateOut(fromBackGesture: Boolean, onEnd: () -> Unit) {
+    coordinator.cancelPull()
     if (behavior.state == BottomSheetBehavior.STATE_HIDDEN || !coordinator.isLaidOut) {
       onEnd()
       return
@@ -180,13 +216,13 @@ internal class BottomSheetPresenter(
   override fun onInsetsChanged() {
     sheet.setPadding(systemInsets.left, 0, systemInsets.right, systemInsets.bottom)
     updateDetents()
-    applyKeyboardOffset()
+    applyTranslation()
   }
 
-  override fun onKeyboardProgress() = applyKeyboardOffset()
+  override fun onKeyboardProgress() = applyTranslation()
 
   override fun onContentSizeChanged() {
-    if (config.detents.contains(SheetDetent.FITCONTENT)) updateDetents()
+    if (config.detents.contains(Detent.FitContent)) updateDetents()
   }
 
   override fun snapToDetent(index: Int) {
@@ -194,6 +230,8 @@ internal class BottomSheetPresenter(
     behavior.state = stateFor(index)
   }
 
+  override fun onTeardown() = coordinator.release()
+
   private fun applyAppearance() {
     val radius = activity.dpToPx(config.cornerRadius ?: DEFAULT_CORNER_RADIUS_DP)
     if (radius != cornerRadiusPx) {
@@ -216,9 +254,9 @@ internal class BottomSheetPresenter(
     val bottomInset = systemInsets.bottom
     maxContentHeight = (parentHeight - systemInsets.top - bottomInset).coerceAtLeast(1)
 
-    val requested = config.detents.ifEmpty { listOf(SheetDetent.FITCONTENT) }
+    val requested = config.detents.ifEmpty { listOf(Detent.FitContent) }
     val detents = requested
-      .mapIndexed { index, detent -> Detent(index, contentHeightFor(detent) + bottomInset) }
+      .mapIndexed { index, detent -> RestingHeight(index, contentHeightFor(detent) + bottomInset) }
       .distinctBy { it.height }
       .sortedBy { it.height }
     sortedDetents = when {
@@ -256,18 +294,19 @@ internal class BottomSheetPresenter(
     }
 
     val availableHeight =
-      if (SheetDetent.FITCONTENT in requested) maxContentHeight else sheetHeight - bottomInset
+      if (Detent.FitContent in requested) maxContentHeight else sheetHeight - bottomInset
     val areaHeight = availableHeight -
-      if (config.keyboardBehavior == KeyboardBehavior.RESIZE) keyboardOverlap else 0
+      if (!isInline && config.keyboardBehavior == KeyboardBehavior.RESIZE) keyboardOverlap else 0
     val sheetWidth = minOf(coordinator.width, behavior.maxWidth.takeIf { it > 0 } ?: Int.MAX_VALUE)
     reportContentArea(sheetWidth - systemInsets.left - systemInsets.right, areaHeight)
   }
 
-  private fun contentHeightFor(detent: SheetDetent): Int = when (detent) {
-    SheetDetent.SMALL -> (maxContentHeight * 0.25f).toInt()
-    SheetDetent.MEDIUM -> (maxContentHeight * 0.5f).toInt()
-    SheetDetent.LARGE -> maxContentHeight
-    SheetDetent.FITCONTENT -> contentRoot.contentHeight.coerceIn(1, maxContentHeight)
+  private fun contentHeightFor(detent: Detent): Int = when (detent) {
+    Detent.Small -> (maxContentHeight * 0.25f).toInt()
+    Detent.Medium -> (maxContentHeight * 0.5f).toInt()
+    Detent.Large -> maxContentHeight
+    Detent.FitContent -> contentRoot.contentHeight.coerceIn(1, maxContentHeight)
+    is Detent.Height -> activity.dpToPx(detent.dp).toInt().coerceIn(1, maxContentHeight)
   }
 
   private fun states(): List<Int> = when (sortedDetents.size) {
@@ -289,21 +328,241 @@ internal class BottomSheetPresenter(
     val position = if (target == null) {
       states.lastIndex
     } else {
-      sortedDetents.indices.minBy { kotlin.math.abs(sortedDetents[it].height - target) }
+      sortedDetents.indices.minBy { abs(sortedDetents[it].height - target) }
     }
     return states[position]
   }
 
-  /** Lifts the sheet above the keyboard without relayout (`pan` and `resize`). */
-  private fun applyKeyboardOffset() {
+  /**
+   * Inline: React lays the content out at the sheet's resting top, so what
+   * `measure()` reports (and presses rely on) matches the screen.
+   */
+  private fun reportRestingTop() {
+    if (!isInline || isDismissing || behavior.state !in states()) return
+    val top = sheet.top
+    if (top == reportedRestingTop) return
+    reportedRestingTop = top
+    listener.onRestingTopChange(top)
+  }
+
+  /**
+   * Lifts the sheet above the keyboard without relayout (`pan` and `resize`,
+   * modal only), and moves it down while it's pulled to refresh.
+   */
+  private fun applyTranslation() {
     // The back commit animation owns translationY until the window goes.
     if (committingBack) return
-    if (config.keyboardBehavior == KeyboardBehavior.NONE) {
-      sheet.translationY = 0f
-      return
+    val lift = if (isInline || config.keyboardBehavior == KeyboardBehavior.NONE) {
+      0
+    } else {
+      val headroom = (sheet.top - systemInsets.top).coerceAtLeast(0)
+      keyboardOverlap.coerceAtMost(headroom)
+    }
+    sheet.translationY = pullOffset - lift
+  }
+
+  private fun setPullOffset(offset: Float) {
+    pullOffset = offset
+    applyTranslation()
+  }
+
+  /**
+   * Gives up dragging the sheet down on nested scrollable content once that
+   * content scrolled during the gesture: it scrolls back to its top, and only
+   * a new gesture collapses the sheet.
+   */
+  private inner class SheetBehavior : BottomSheetBehavior<FrameLayout>() {
+    private var contentScrolled = false
+
+    override fun onInterceptTouchEvent(parent: CoordinatorLayout, child: FrameLayout, event: MotionEvent): Boolean {
+      if (event.actionMasked == MotionEvent.ACTION_DOWN && state in states()) {
+        // React may have mounted the scrollable content after the last layout
+        // pass; laying out again re-finds it. The resting sheet doesn't move.
+        onLayoutChild(parent, child, parent.layoutDirection)
+      }
+      return super.onInterceptTouchEvent(parent, child, event)
+    }
+
+    override fun onStartNestedScroll(
+      coordinatorLayout: CoordinatorLayout,
+      child: FrameLayout,
+      directTargetChild: View,
+      target: View,
+      axes: Int,
+      type: Int,
+    ): Boolean {
+      if (type == ViewCompat.TYPE_TOUCH) contentScrolled = false
+      return super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, axes, type)
+    }
+
+    override fun onNestedPreScroll(
+      coordinatorLayout: CoordinatorLayout,
+      child: FrameLayout,
+      target: View,
+      dx: Int,
+      dy: Int,
+      consumed: IntArray,
+      type: Int,
+    ) {
+      if (dy < 0 && contentScrolled) return
+      super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed, type)
+    }
+
+    override fun onNestedScroll(
+      coordinatorLayout: CoordinatorLayout,
+      child: FrameLayout,
+      target: View,
+      dxConsumed: Int,
+      dyConsumed: Int,
+      dxUnconsumed: Int,
+      dyUnconsumed: Int,
+      type: Int,
+      consumed: IntArray,
+    ) {
+      if (type == ViewCompat.TYPE_TOUCH && dyConsumed != 0) contentScrolled = true
+      super.onNestedScroll(
+        coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed, type, consumed,
+      )
+    }
+  }
+
+  /**
+   * The sheet's parent. Touches that miss the sheet fall through to the views
+   * behind it (inline), JS touches are cancelled when the sheet takes over a
+   * gesture, and pulling the sheet down past its lowest detent refreshes:
+   * `BottomSheetBehavior` stops there, so that pull is handled here.
+   */
+  @SuppressLint("ViewConstructor")
+  private inner class SheetLayout(context: Context) : CoordinatorLayout(context), ReactPointerEventsView {
+    private val touchSlop = ViewConfiguration.get(context).scaledTouchSlop
+    private val refreshThreshold = context.dpToPx(REFRESH_THRESHOLD_DP)
+    private var lastEvent: MotionEvent? = null
+    private var downX = 0f
+    private var downY = 0f
+    private var canPull = false
+    private var pulling = false
+    private var armed = false
+    private var pullAnimator: ValueAnimator? = null
+
+    override val pointerEvents: PointerEvents
+      get() = PointerEvents.BOX_NONE
+
+    override fun dispatchTouchEvent(ev: MotionEvent): Boolean {
+      lastEvent?.recycle()
+      lastEvent = MotionEvent.obtain(ev)
+      return super.dispatchTouchEvent(ev)
+    }
+
+    override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
+      if (trackPull(ev)) return true
+      return super.onInterceptTouchEvent(ev)
+    }
+
+    @SuppressLint("ClickableViewAccessibility")
+    override fun onTouchEvent(ev: MotionEvent): Boolean {
+      if (!pulling && trackPull(ev)) {
+        // The behavior had the gesture: let it go of it.
+        val cancel = MotionEvent.obtain(ev).apply { action = MotionEvent.ACTION_CANCEL }
+        super.onTouchEvent(cancel)
+        cancel.recycle()
+        return true
+      }
+      if (!pulling) return super.onTouchEvent(ev)
+      when (ev.actionMasked) {
+        MotionEvent.ACTION_MOVE -> {
+          val offset = rubberBand((ev.y - downY - touchSlop).coerceAtLeast(0f), height.toFloat())
+          setPullOffset(offset)
+          val nowArmed = offset >= refreshThreshold
+          if (nowArmed && !armed) performHapticFeedback(THRESHOLD_FEEDBACK)
+          armed = nowArmed
+        }
+        MotionEvent.ACTION_UP -> endPull(ev, refresh = armed)
+        MotionEvent.ACTION_CANCEL -> endPull(ev, refresh = false)
+      }
+      return true
+    }
+
+    /** Follows a gesture until it turns out to be a pull. Returns true once it is. */
+    private fun trackPull(ev: MotionEvent): Boolean {
+      when (ev.actionMasked) {
+        MotionEvent.ACTION_DOWN -> {
+          downX = ev.x
+          downY = ev.y
+          canPull = canStartPull(ev.x, ev.y)
+        }
+        MotionEvent.ACTION_POINTER_DOWN -> canPull = false
+        MotionEvent.ACTION_MOVE -> if (canPull && !pulling) {
+          val dx = ev.x - downX
+          val dy = ev.y - downY
+          if (dy > touchSlop && dy > abs(dx)) {
+            pulling = true
+            armed = false
+            parent?.requestDisallowInterceptTouchEvent(true)
+            notifyNativeGesture(started = true)
+            return true
+          }
+          if (abs(dx) > touchSlop || dy < -touchSlop) canPull = false
+        }
+      }
+      return false
+    }
+
+    /**
+     * Only from the lowest detent at rest, on the sheet, and where nothing
+     * under the finger can scroll up instead.
+     */
+    private fun canStartPull(x: Float, y: Float): Boolean {
+      if (!config.pullToRefreshEnabled || config.dismissOnSwipe || !presented || isDismissing) return false
+      if (pullOffset != 0f || behavior.state != states().firstOrNull()) return false
+      val top = sheet.top + sheet.translationY
+      if (y < top || x < sheet.left || x >= sheet.right) return false
+      return !canScrollUpAt(sheet, x - sheet.left, y - top)
+    }
+
+    private fun endPull(ev: MotionEvent, refresh: Boolean) {
+      pulling = false
+      armed = false
+      canPull = false
+      notifyNativeGesture(started = false, event = ev)
+      pullAnimator = ValueAnimator.ofFloat(pullOffset, 0f).apply {
+        duration = PULL_RELEASE_DURATION
+        interpolator = DecelerateInterpolator()
+        addUpdateListener { setPullOffset(it.animatedValue as Float) }
+        start()
+      }
+      if (refresh) listener.onPullToRefresh()
+    }
+
+    fun cancelPull() {
+      pulling = false
+      canPull = false
+      pullAnimator?.cancel()
+      pullAnimator = null
+      setPullOffset(0f)
+    }
+
+    /**
+     * Inline, the sheet lives inside the React root view, which forwards
+     * touches to JS. Tell it when the sheet takes over (or lets go of) a
+     * gesture, so a press under the finger is cancelled. A modal's content
+     * root hears about it from the touch cancellation instead.
+     */
+    fun notifyNativeGesture(started: Boolean, event: MotionEvent? = lastEvent) {
+      if (!isInline) return
+      val ev = event ?: return
+      if (started) {
+        NativeGestureUtil.notifyNativeGestureStarted(this, ev)
+      } else {
+        NativeGestureUtil.notifyNativeGestureEnded(this, ev)
+      }
+    }
+
+    fun release() {
+      pullAnimator?.cancel()
+      pullAnimator = null
+      lastEvent?.recycle()
+      lastEvent = null
     }
-    val headroom = (sheet.top - systemInsets.top).coerceAtLeast(0)
-    sheet.translationY = -keyboardOverlap.coerceAtMost(headroom).toFloat()
   }
 
   companion object {
@@ -311,27 +570,69 @@ internal class BottomSheetPresenter(
     private const val DEFAULT_CORNER_RADIUS_DP = 28f
     private const val MAX_WIDTH_DP = 640f
 
+    /** How far below its lowest detent the sheet must be pulled to refresh. */
+    private const val REFRESH_THRESHOLD_DP = 56f
+    private const val PULL_RELEASE_DURATION = 300L
+    private val THRESHOLD_FEEDBACK =
+      if (Build.VERSION.SDK_INT >= 34) {
+        HapticFeedbackConstants.GESTURE_THRESHOLD_ACTIVATE
+      } else {
+        HapticFeedbackConstants.CONTEXT_CLICK
+      }
+
     /** `MaterialBottomContainerBackHelper`'s default hide durations. */
     private const val BACK_HIDE_MAX_DURATION = 300L
     private const val BACK_HIDE_MIN_DURATION = 150L
     private val FAST_OUT_SLOW_IN = PathInterpolator(0.4f, 0f, 0.2f, 1f)
 
+    private fun rubberBand(offset: Float, dimension: Float): Float {
+      if (dimension <= 0f) return 0f
+      return (1f - 1f / (offset * 0.55f / dimension + 1f)) * dimension
+    }
+
+    /** Whether a view under (x, y), in [view]'s coordinates, can scroll up. */
+    private fun canScrollUpAt(view: View, x: Float, y: Float): Boolean {
+      if (view.canScrollVertically(-1)) return true
+      if (view !is ViewGroup) return false
+      for (i in view.childCount - 1 downTo 0) {
+        val child = view.getChildAt(i)
+        if (child.visibility != View.VISIBLE) continue
+        val childX = x + view.scrollX - child.left - child.translationX
+        val childY = y + view.scrollY - child.top - child.translationY
+        if (childX >= 0 && childY >= 0 && childX < child.width && childY < child.height &&
+          canScrollUpAt(child, childX, childY)
+        ) {
+          return true
+        }
+      }
+      return false
+    }
+
     /** Content area before the sheet is on screen, in px. */
     fun estimateContentArea(
       activity: Activity,
-      detents: List<SheetDetent>,
+      detents: List<Detent>,
       width: Int,
       height: Int,
       insets: Insets,
+      isInline: Boolean,
     ): Pair<Int, Int> {
       val maxContent = height - insets.top - insets.bottom
-      val fraction = when {
-        detents.isEmpty() || SheetDetent.LARGE in detents || SheetDetent.FITCONTENT in detents -> 1f
-        SheetDetent.MEDIUM in detents -> 0.5f
-        else -> 0.25f
+      val contentHeight = if (detents.isEmpty()) {
+        maxContent
+      } else {
+        detents.maxOf {
+          when (it) {
+            Detent.Small -> (maxContent * 0.25f).toInt()
+            Detent.Medium -> (maxContent * 0.5f).toInt()
+            // fitContent content can grow up to the maximum.
+            Detent.Large, Detent.FitContent -> maxContent
+            is Detent.Height -> activity.dpToPx(it.dp).toInt().coerceIn(1, maxContent.coerceAtLeast(1))
+          }
+        }
       }
-      val sheetWidth = minOf(width, activity.dpToPx(MAX_WIDTH_DP).toInt())
-      return Pair(sheetWidth - insets.left - insets.right, (maxContent * fraction).toInt())
+      val sheetWidth = if (isInline) width else minOf(width, activity.dpToPx(MAX_WIDTH_DP).toInt())
+      return Pair(sheetWidth - insets.left - insets.right, contentHeight)
     }
   }
 }