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

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)
     }
   }
 }

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

@@ -37,7 +37,8 @@ class HybridNitroModal(private val reactContext: ThemedReactContext) :
     }
 
   override var mode: ModalMode = ModalMode.BOTTOMSHEET
-  override var detents: Array<SheetDetent> = arrayOf(SheetDetent.FITCONTENT)
+  override var isInline: Boolean = false
+  override var detents: Array<SheetDetent> = arrayOf(SheetDetent.create(NamedSheetDetent.FITCONTENT))
   override var initialDetentIndex: Double = 0.0
   override var backdropColor: Double = 0xFF000000.toDouble()
   override var backdropOpacity: Double = 0.4
@@ -50,6 +51,7 @@ class HybridNitroModal(private val reactContext: ThemedReactContext) :
   override var contentBackgroundColor: Double? = null
   override var keyboardBehavior: KeyboardBehavior = KeyboardBehavior.PAN
   override var popupAnimation: PopupAnimation = PopupAnimation.SCALE
+  override var pullToRefreshEnabled: Boolean = false
 
   override var onPresent: (() -> Unit)? = null
   override var onDismiss: ((reason: DismissReason) -> Unit)? = null
@@ -57,6 +59,8 @@ class HybridNitroModal(private val reactContext: ThemedReactContext) :
   override var onBackdropPress: (() -> Unit)? = null
   override var onBackButtonPress: (() -> Unit)? = null
   override var onContentAreaChange: ((area: ModalContentArea) -> Unit)? = null
+  override var onPullToRefresh: (() -> Unit)? = null
+  override var onRestingTopChange: ((top: Double) -> Unit)? = null
 
   // endregion
 
@@ -93,6 +97,14 @@ class HybridNitroModal(private val reactContext: ThemedReactContext) :
         scheduleReconcile()
       }
     }
+    view.onLayoutChange = {
+      presenter?.onHostLayoutChanged() ?: run {
+        if (config.isInline) {
+          reportEstimatedContentArea()
+          if (wantsOpen) scheduleReconcile()
+        }
+      }
+    }
     view.contentRoot.onContentSizeChange = { presenter?.onContentSizeChanged() }
   }
 
@@ -102,6 +114,7 @@ class HybridNitroModal(private val reactContext: ThemedReactContext) :
     val next = makeConfig()
     if (next == config) return
     config = next
+    view.isInline = next.isInline
     presenter?.update(next) ?: reportEstimatedContentArea()
   }
 
@@ -176,10 +189,14 @@ class HybridNitroModal(private val reactContext: ThemedReactContext) :
     if (!view.isAttachedToWindow) return
     val activity = reactContext.currentActivity ?: return
     if (activity.isFinishing || activity.isDestroyed) return
-
-    val next = when (config.mode) {
-      ModalMode.POPUP -> PopupPresenter(activity, reactContext, view.contentRoot, config, this)
-      ModalMode.BOTTOMSHEET -> BottomSheetPresenter(activity, reactContext, view.contentRoot, config, this)
+    // An inline sheet needs its laid-out area; the host's layout retries.
+    if (config.isInline && (view.width == 0 || view.height == 0)) return
+
+    val next = when {
+      config.isInline ->
+        BottomSheetPresenter(activity, reactContext, view.contentRoot, config, this, inlineHost = view)
+      config.mode == ModalMode.POPUP -> PopupPresenter(activity, reactContext, view.contentRoot, config, this)
+      else -> BottomSheetPresenter(activity, reactContext, view.contentRoot, config, this)
     }
     presenter = next
     phase = Phase.PRESENTING
@@ -263,6 +280,14 @@ class HybridNitroModal(private val reactContext: ThemedReactContext) :
     onDetentChange?.invoke(index.toDouble())
   }
 
+  override fun onPullToRefresh() {
+    if (!isDropped) onPullToRefresh?.invoke()
+  }
+
+  override fun onRestingTopChange(top: Int) {
+    if (!isDropped) onRestingTopChange?.invoke(kotlin.math.round(reactContext.pxToDp(top)))
+  }
+
   override fun onContentAreaChange(width: Int, height: Int) {
     val area = ModalContentArea(
       kotlin.math.floor(reactContext.pxToDp(width)),
@@ -292,26 +317,41 @@ class HybridNitroModal(private val reactContext: ThemedReactContext) :
 
   // endregion
 
-  private fun makeConfig() = ModalConfig(
-    mode = mode,
-    detents = detents.toList(),
-    initialDetentIndex = if (initialDetentIndex.isNaN()) 0 else initialDetentIndex.toInt(),
-    backdropColor = backdropColor.toProcessedColor(),
-    backdropOpacity = backdropOpacity.toFloat(),
-    backdropBlurRadius = backdropBlurRadius.toFloat(),
-    dismissOnBackdropPress = dismissOnBackdropPress,
-    dismissOnSwipe = dismissOnSwipe,
-    dismissOnBackButton = dismissOnBackButton,
-    grabberVisible = grabberVisible,
-    cornerRadius = cornerRadius.takeIf { it >= 0 }?.toFloat(),
-    contentBackgroundColor = contentBackgroundColor?.toProcessedColor(),
-    keyboardBehavior = keyboardBehavior,
-    popupAnimation = popupAnimation,
-  )
+  private fun makeConfig(): ModalConfig {
+    // An inline sheet is part of the screen; the user can't dismiss it.
+    val inline = isInline && mode == ModalMode.BOTTOMSHEET
+    return ModalConfig(
+      mode = mode,
+      inlinePresentation = isInline,
+      detents = detents.map(Detent::from),
+      initialDetentIndex = if (initialDetentIndex.isNaN()) 0 else initialDetentIndex.toInt(),
+      backdropColor = backdropColor.toProcessedColor(),
+      backdropOpacity = backdropOpacity.toFloat(),
+      backdropBlurRadius = backdropBlurRadius.toFloat(),
+      dismissOnBackdropPress = dismissOnBackdropPress && !inline,
+      dismissOnSwipe = dismissOnSwipe && !inline,
+      dismissOnBackButton = dismissOnBackButton && !inline,
+      grabberVisible = grabberVisible,
+      cornerRadius = cornerRadius.takeIf { it >= 0 }?.toFloat(),
+      contentBackgroundColor = contentBackgroundColor?.toProcessedColor(),
+      keyboardBehavior = keyboardBehavior,
+      popupAnimation = popupAnimation,
+      pullToRefreshEnabled = pullToRefreshEnabled,
+    )
+  }
 
   /** Lets React size the content before the first presentation. */
   private fun reportEstimatedContentArea() {
     val activity = reactContext.currentActivity ?: return
+    if (config.isInline) {
+      if (view.width == 0 || view.height == 0) return
+      // Insets are refined once the sheet is shown.
+      val (width, height) = BottomSheetPresenter.estimateContentArea(
+        activity, config.detents, view.width, view.height, Insets.NONE, isInline = true,
+      )
+      onContentAreaChange(width, height)
+      return
+    }
     val decor = activity.window?.decorView ?: return
     if (decor.width == 0 || decor.height == 0) return
     val insets = ViewCompat.getRootWindowInsets(decor)
@@ -319,7 +359,8 @@ class HybridNitroModal(private val reactContext: ThemedReactContext) :
       ?: Insets.NONE
     val (width, height) = when (config.mode) {
       ModalMode.POPUP -> PopupPresenter.estimateContentArea(activity, decor.width, decor.height, insets)
-      ModalMode.BOTTOMSHEET -> BottomSheetPresenter.estimateContentArea(activity, config.detents, decor.width, decor.height, insets)
+      ModalMode.BOTTOMSHEET ->
+        BottomSheetPresenter.estimateContentArea(activity, config.detents, decor.width, decor.height, insets, isInline = false)
     }
     onContentAreaChange(width, height)
   }