react-native-nitro-modal 0.1.4 → 0.2.0

package/README.md

@@ -7,13 +7,13 @@
 [![npm version](https://img.shields.io/npm/v/react-native-nitro-modal.svg?style=flat-square)](https://www.npmjs.com/package/react-native-nitro-modal)
 [![npm downloads](https://img.shields.io/npm/dm/react-native-nitro-modal.svg?style=flat-square)](https://www.npmjs.com/package/react-native-nitro-modal)
 [![license](https://img.shields.io/npm/l/react-native-nitro-modal.svg?style=flat-square)](LICENSE)
-![platforms](https://img.shields.io/badge/platforms-iOS%20%7C%20Android-lightgrey.svg?style=flat-square)
+![platforms](https://img.shields.io/badge/platforms-iOS%20%7C%20Android%20%7C%20Web-lightgrey.svg?style=flat-square)
 
 </div>
 
 ---
 
-`react-native-nitro-modal` renders your React content inside native modal presentations — an edge-attached UIKit sheet on iOS and Material `BottomSheetBehavior` on Android — so gestures, detent snapping, keyboard handling and transitions are handled natively, not re-implemented in JavaScript.
+`react-native-nitro-modal` renders your React content inside native modal presentations — an edge-attached UIKit sheet on iOS and Material `BottomSheetBehavior` on Android — so gestures, detent snapping, keyboard handling and transitions are handled natively, not re-implemented in JavaScript. On the web (React Native Web), the same API renders a DOM sheet and popup with matching behavior.
 
 ## Features
 
@@ -35,9 +35,10 @@
 | `react-native-nitro-modules`   | `^0.37.1`                                    |
 | iOS                            | 15.0+ (16.0+ for `small` and `fitContent`)   |
 | Android                        | API 24 (Android 7.0)+                        |
+| Web                            | via `react-native-web` (tested with 0.21)    |
 
 > [!NOTE]
-> Web and other platforms are not supported. On those platforms the component renders nothing and logs a one-time warning.
+> Other platforms (e.g. macOS, Windows) are not supported. There the component renders nothing and logs a one-time warning.
 
 ## Installation
 
@@ -171,10 +172,10 @@ const sheet = useRef<NitroModalRef>(null);
 | `initialDetentIndex`     | `number`                                             | `0`                | Index into `detents` the sheet opens at.                                                          |
 | `backdropColor`          | `ColorValue`                                         | `'black'`          | Backdrop color.                                                                                   |
 | `backdropOpacity`        | `number`                                             | `0.4`              | Backdrop opacity, `0`–`1`.                                                                        |
-| `backdropBlur`           | `number`                                             | `0`                | Blur radius (dp/pt) behind the modal. `0` disables it. See [platform notes](#platform-notes).     |
+| `backdropBlur`           | `number`                                             | `0`                | Blur radius (dp/pt/px) behind the modal. `0` disables it. See [platform notes](#platform-notes).  |
 | `dismissOnBackdropPress` | `boolean`                                            | `true`             | Tapping the backdrop closes the modal.                                                            |
 | `dismissOnSwipe`         | `boolean`                                            | `true`             | Swiping down closes a bottom sheet.                                                               |
-| `dismissOnBackButton`    | `boolean`                                            | `true`             | The Android back button/gesture closes the modal.                                                 |
+| `dismissOnBackButton`    | `boolean`                                            | `true`             | The Android back button/gesture (Escape on web) closes the modal.                                 |
 | `showGrabber`            | `boolean`                                            | `false`            | Shows the drag handle on a bottom sheet.                                                          |
 | `cornerRadius`           | `number`                                             | platform default   | Corner radius of the sheet/card.                                                                  |
 | `backgroundColor`        | `ColorValue`                                         | system surface     | Background of the sheet/card.                                                                     |
@@ -192,7 +193,7 @@ const sheet = useRef<NitroModalRef>(null);
 | `onDismiss`         | `(reason: DismissReason) => void`        | The modal is fully gone. Fires exactly once per presentation.                      |
 | `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 was pressed.                                     |
+| `onBackButtonPress` | `() => void`                             | The Android hardware/gesture back (Escape on web) was pressed.                     |
 
 ### `NitroModalRef`
 
@@ -250,6 +251,17 @@ import type {
 - Bottom sheets use Material Components' `BottomSheetBehavior`, which supports at most three detents.
 - `backdropBlur` requires Android 12 (API 31)+; it is ignored on older versions.
 - `onBackButtonPress` and `dismissOnBackButton` apply to both the hardware back button and the system back gesture.
+- Predictive back (Android 14+, when the app opts in or targets SDK 36) previews the exit while the gesture runs: the sheet uses Material's bottom-sheet animation and the popup scales down.
+- Transitions are interruptible: closing during the enter animation turns it around, and reopening during the exit animation brings the same modal back (no extra `onDismiss`/`onPresent`). Once the exit starts, taps and back presses reach the screen below, as with a native dialog.
+
+**Web**
+
+- Renders through React Native Web's `Modal`, so it stacks with your other modals, traps focus while open and returns it on close. Nothing is rendered in place.
+- Bottom sheets can be dragged with touch or mouse, with the same detent snapping, fling-to-dismiss and hand-off to scrollable content as on iOS. A touch that starts on content already scrolled down scrolls it natively instead of moving the sheet.
+- The Escape key acts as the back button: it fires `onBackButtonPress` and, unless `dismissOnBackButton` is `false`, dismisses the topmost modal with reason `'backButton'`. The browser's history back is not intercepted.
+- `backdropBlur` uses CSS `backdrop-filter`. Without `backgroundColor`, the sheet/card uses the CSS `Canvas` system color, which follows your page's `color-scheme`.
+- `keyboardBehavior` follows the on-screen keyboard through the `visualViewport` API (mobile browsers). Safe-area insets are respected when the page uses `viewport-fit=cover`.
+- Sheets are at most 640px wide and centered. Animations are skipped when the user prefers reduced motion.
 
 **Colors**
 
@@ -261,7 +273,7 @@ The repository includes an example app that covers content-sized sheets, multi-d
 
 ```sh
 yarn
-yarn example ios      # or: yarn example android
+yarn example ios      # or: yarn example android / yarn example web
 ```
 
 ## Contributing

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

@@ -1,28 +1,30 @@
 package com.margelo.nitro.nitromodal
 
 import android.app.Activity
-import android.content.res.ColorStateList
 import android.graphics.Color
+import android.graphics.Outline
 import android.graphics.drawable.GradientDrawable
 import android.view.Gravity
 import android.view.View
 import android.view.ViewGroup
 import android.view.ViewOutlineProvider
+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.doOnLayout
 import com.facebook.react.uimanager.ThemedReactContext
 import com.google.android.material.bottomsheet.BottomSheetBehavior
-import com.google.android.material.shape.MaterialShapeDrawable
-import com.google.android.material.shape.ShapeAppearanceModel
+import kotlin.math.ceil
 
 /**
  * `bottomSheet` mode, driven by [BottomSheetBehavior]. Dragging, flinging,
  * snapping and the backdrop fade all run on the UI thread with no JS.
  *
  * `BottomSheetBehavior` supports up to three resting states, so detents map
- * onto collapsed / half-expanded / expanded, smallest first.
+ * onto collapsed / half-expanded / expanded, smallest first. Predictive back
+ * uses the behavior's own Material animation, like `BottomSheetDialog`.
  */
 internal class BottomSheetPresenter(
   activity: Activity,
@@ -38,7 +40,8 @@ internal class BottomSheetPresenter(
   private val sheet = FrameLayout(activity)
   private val grabber = View(activity)
   private val behavior = BottomSheetBehavior<FrameLayout>()
-  private val sheetBackground = MaterialShapeDrawable()
+  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()
@@ -46,6 +49,10 @@ internal class BottomSheetPresenter(
   private var presented = false
   private var lastDetentIndex = -1
 
+  /** A predictive back gesture was committed; the behavior is sliding the sheet out. */
+  private var committingBack = false
+  private var backProgress = 0f
+
   private val callback = object : BottomSheetBehavior.BottomSheetCallback() {
     override fun onStateChanged(bottomSheet: View, newState: Int) {
       if (newState == BottomSheetBehavior.STATE_HIDDEN) {
@@ -54,11 +61,10 @@ internal class BottomSheetPresenter(
       }
       val position = states().indexOf(newState)
       if (position < 0 || isDismissing) return
-      if (!presented) {
-        presented = true
-        behavior.isHideable = this@BottomSheetPresenter.config.dismissOnSwipe
-        notifyPresented()
-      }
+      presented = true
+      // Hideable while entering/exiting; at rest, swipe-to-dismiss follows the prop.
+      behavior.isHideable = this@BottomSheetPresenter.config.dismissOnSwipe
+      notifyPresented()
       val index = sortedDetents.getOrNull(position)?.index ?: return
       if (index != lastDetentIndex) {
         lastDetentIndex = index
@@ -80,7 +86,15 @@ internal class BottomSheetPresenter(
     }
 
     sheet.background = sheetBackground
-    sheet.outlineProvider = ViewOutlineProvider.BACKGROUND
+    sheet.outlineProvider = object : ViewOutlineProvider() {
+      override fun getOutline(view: View, outline: Outline) {
+        // Extends past the bottom edge so only the top corners round. A round
+        // rect clips cheaply on every API level; a path outline only clips on
+        // API 33+, and slowly.
+        val overhang = ceil(cornerRadiusPx).toInt()
+        outline.setRoundRect(0, 0, view.width, view.height + overhang, cornerRadiusPx)
+      }
+    }
     sheet.clipToOutline = true
     sheet.addView(contentRoot, FrameLayout.LayoutParams(MATCH, MATCH))
     sheet.addView(
@@ -110,25 +124,54 @@ internal class BottomSheetPresenter(
 
   override fun animateIn() {
     coordinator.doOnLayout {
+      if (isDismissing) return@doOnLayout
       updateDetents()
-      // Settles from HIDDEN with the behavior's own animation.
-      behavior.state = stateFor(config.clampedInitialDetentIndex)
+      // Settles with the behavior's own animation, from HIDDEN on show or from
+      // wherever a reversed exit got to (back to the detent it left).
+      val index = if (lastDetentIndex >= 0) lastDetentIndex else config.clampedInitialDetentIndex
+      behavior.state = stateFor(index)
     }
   }
 
-  override fun animateOut(onEnd: () -> Unit) {
+  override fun animateOut(fromBackGesture: Boolean, onEnd: () -> Unit) {
     if (behavior.state == BottomSheetBehavior.STATE_HIDDEN || !coordinator.isLaidOut) {
       onEnd()
       return
     }
     behavior.isHideable = true
-    behavior.state = BottomSheetBehavior.STATE_HIDDEN
+    if (fromBackGesture) {
+      // Slides out from the gesture's preview. onSlide doesn't run for this
+      // animation, so fade the backdrop alongside it, timed like Material's
+      // slide (shorter the further the gesture got).
+      committingBack = true
+      val duration = BACK_HIDE_MAX_DURATION -
+        ((BACK_HIDE_MAX_DURATION - BACK_HIDE_MIN_DURATION) * backProgress).toLong()
+      backdrop.animate().alpha(0f).setDuration(duration).setInterpolator(FAST_OUT_SLOW_IN).start()
+      behavior.handleBackInvoked()
+    } else {
+      behavior.state = BottomSheetBehavior.STATE_HIDDEN
+    }
     // STATE_HIDDEN reaches finishUserDismissal(), which keeps our reason.
   }
 
+  override val canReverseDismiss: Boolean
+    get() = !committingBack
+
+  override fun onBackGestureStarted(event: BackEventCompat) {
+    backProgress = event.progress
+    behavior.startBackProgress(event)
+  }
+
+  override fun onBackGestureProgressed(event: BackEventCompat) {
+    backProgress = event.progress
+    behavior.updateBackProgress(event)
+  }
+
+  override fun onBackGestureCancelled() = behavior.cancelBackProgress()
+
   override fun onConfigChanged(previous: ModalConfig) {
     applyAppearance()
-    if (presented) behavior.isHideable = config.dismissOnSwipe
+    if (presented && !isDismissing) behavior.isHideable = config.dismissOnSwipe
     if (previous.detents != config.detents || previous.keyboardBehavior != config.keyboardBehavior) {
       updateDetents()
     }
@@ -153,11 +196,12 @@ internal class BottomSheetPresenter(
 
   private fun applyAppearance() {
     val radius = activity.dpToPx(config.cornerRadius ?: DEFAULT_CORNER_RADIUS_DP)
-    sheetBackground.shapeAppearanceModel = ShapeAppearanceModel.builder()
-      .setTopLeftCornerSize(radius)
-      .setTopRightCornerSize(radius)
-      .build()
-    sheetBackground.fillColor = ColorStateList.valueOf(config.surfaceColor(activity))
+    if (radius != cornerRadiusPx) {
+      cornerRadiusPx = radius
+      sheetBackground.cornerRadii = floatArrayOf(radius, radius, radius, radius, 0f, 0f, 0f, 0f)
+      sheet.invalidateOutline()
+    }
+    sheetBackground.setColor(config.surfaceColor(activity))
     grabber.visibility = if (config.grabberVisible) View.VISIBLE else View.GONE
     grabber.background = GradientDrawable().apply {
       cornerRadius = activity.dpToPx(2f)
@@ -252,6 +296,8 @@ internal class BottomSheetPresenter(
 
   /** Lifts the sheet above the keyboard without relayout (`pan` and `resize`). */
   private fun applyKeyboardOffset() {
+    // The back commit animation owns translationY until the window goes.
+    if (committingBack) return
     if (config.keyboardBehavior == KeyboardBehavior.NONE) {
       sheet.translationY = 0f
       return
@@ -265,6 +311,11 @@ internal class BottomSheetPresenter(
     private const val DEFAULT_CORNER_RADIUS_DP = 28f
     private const val MAX_WIDTH_DP = 640f
 
+    /** `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)
+
     /** Content area before the sheet is on screen, in px. */
     fun estimateContentArea(
       activity: Activity,

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

@@ -17,6 +17,9 @@ import com.facebook.react.uimanager.ThemedReactContext
  * Presentation is a small state machine so that rapid `isOpen` toggles,
  * native dismissals and unmounts always settle on a consistent state, and
  * every accepted present request ends with exactly one `onDismiss`.
+ * Transitions are interrupted rather than queued: closing mid-enter turns the
+ * enter around, and opening mid-exit turns the exit around (that session
+ * carries on, so it gets no `onDismiss` and at most one `onPresent`).
  */
 @DoNotStrip
 class HybridNitroModal(private val reactContext: ThemedReactContext) :
@@ -68,6 +71,9 @@ class HybridNitroModal(private val reactContext: ThemedReactContext) :
 
   /** A present request was accepted and its `onDismiss` is still owed. */
   private var sessionActive = false
+
+  /** `onPresent` was sent for the current session. */
+  private var presentSent = false
   private var dismissReason = DismissReason.PROGRAMMATIC
   private var reconcileScheduled = false
   private var isDropped = false
@@ -151,8 +157,12 @@ class HybridNitroModal(private val reactContext: ThemedReactContext) :
 
   private fun reconcile() {
     when (phase) {
-      Phase.PRESENTING, Phase.DISMISSING -> Unit // The transition reconciles when done.
-      Phase.PRESENTED -> if (!wantsOpen) startDismiss()
+      Phase.PRESENTING, Phase.PRESENTED -> if (!wantsOpen) startDismiss()
+      // Not reversible (e.g. a committed back gesture): finishDismiss reconciles.
+      Phase.DISMISSING -> if (wantsOpen && presenter?.cancelDismiss() == true) {
+        phase = Phase.PRESENTING
+        dismissReason = DismissReason.PROGRAMMATIC
+      }
       Phase.IDLE -> when {
         wantsOpen -> startPresent()
         sessionActive -> endSession() // Cancelled before anything appeared.
@@ -200,6 +210,7 @@ class HybridNitroModal(private val reactContext: ThemedReactContext) :
     if (!sessionActive) return
     val reason = dismissReason
     dismissReason = DismissReason.PROGRAMMATIC
+    presentSent = false
     // A present requested while we were dismissing starts a new session.
     sessionActive = wantsOpen
     if (!isDropped) onDismiss?.invoke(reason)
@@ -218,7 +229,10 @@ class HybridNitroModal(private val reactContext: ThemedReactContext) :
   override fun onPresented() {
     if (phase != Phase.PRESENTING) return
     phase = Phase.PRESENTED
-    if (!isDropped) onPresent?.invoke()
+    if (!presentSent) {
+      presentSent = true
+      if (!isDropped) onPresent?.invoke()
+    }
     reconcile()
   }
 

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

@@ -1,11 +1,13 @@
 package com.margelo.nitro.nitromodal
 
 import android.app.Activity
+import android.content.Context
 import android.os.Build
 import android.view.View
 import android.view.ViewGroup
 import android.view.WindowManager
 import android.view.inputmethod.InputMethodManager
+import androidx.activity.BackEventCompat
 import androidx.activity.ComponentDialog
 import androidx.activity.OnBackPressedCallback
 import androidx.core.graphics.Insets
@@ -20,6 +22,10 @@ import com.facebook.react.uimanager.ThemedReactContext
  * drive the enter/exit animations; this class handles the window, edge-to-edge
  * insets, keyboard tracking, back handling and teardown.
  *
+ * Transitions are interruptible like native ones: dismissing mid-enter turns
+ * the enter around, and [cancelDismiss] turns an exit back around. Once an
+ * exit starts the window stops taking input, as a dismissed dialog would.
+ *
  * Everything here runs on the UI thread.
  */
 internal abstract class ModalPresenter(
@@ -30,6 +36,7 @@ internal abstract class ModalPresenter(
   protected val listener: Listener,
 ) {
   interface Listener {
+    /** An enter transition settled: the first one, or one that reversed an exit. */
     fun onPresented()
     /** The window is gone. Called exactly once per presenter. */
     fun onDismissed(reason: DismissReason)
@@ -44,7 +51,7 @@ internal abstract class ModalPresenter(
     private set
 
   protected val dialog = ComponentDialog(activity, R.style.NitroModal_Dialog)
-  protected val backdrop = View(activity)
+  protected val backdrop: View = BackdropView(activity)
 
   /** System bars + display cutout. */
   protected var systemInsets: Insets = Insets.NONE
@@ -55,16 +62,51 @@ internal abstract class ModalPresenter(
     private set
 
   private var imeAnimating = false
-  private var presentedNotified = false
+  private var entering = false
+  private var backGestureActive = false
   private var finished = false
   private var dismissReason = DismissReason.PROGRAMMATIC
 
   protected var isDismissing = false
     private set
 
+  private val backCallback = object : OnBackPressedCallback(true) {
+    // Predictive back (Android 14+): preview the exit while the gesture runs.
+    override fun handleOnBackStarted(backEvent: BackEventCompat) {
+      if (!config.dismissOnBackButton || entering || isDismissing || finished) return
+      backGestureActive = true
+      onBackGestureStarted(backEvent)
+    }
+
+    override fun handleOnBackProgressed(backEvent: BackEventCompat) {
+      if (backGestureActive) onBackGestureProgressed(backEvent)
+    }
+
+    override fun handleOnBackCancelled() = cancelBackGesture()
+
+    override fun handleOnBackPressed() {
+      // Already on its way out: the back press is spent.
+      if (isDismissing || finished) return
+      listener.onBackPress()
+      // Still here (back didn't dismiss): settle the preview.
+      cancelBackGesture()
+    }
+  }
+
   protected abstract fun createLayout(): ViewGroup
+
+  /**
+   * Animates from the current state to presented, then calls
+   * [notifyPresented]. Runs on show and again when an exit is reversed.
+   */
   protected abstract fun animateIn()
-  protected abstract fun animateOut(onEnd: () -> Unit)
+
+  /**
+   * Animates from the current state (possibly mid-enter) to gone, then calls
+   * [onEnd]. [fromBackGesture]: a predictive back preview is being committed.
+   */
+  protected abstract fun animateOut(fromBackGesture: Boolean, onEnd: () -> Unit)
+
   protected abstract fun onConfigChanged(previous: ModalConfig)
 
   /** System insets or the settled keyboard height changed. */
@@ -77,18 +119,24 @@ internal abstract class ModalPresenter(
 
   open fun snapToDetent(index: Int) = Unit
 
+  protected open fun onBackGestureStarted(event: BackEventCompat) = Unit
+  protected open fun onBackGestureProgressed(event: BackEventCompat) = Unit
+  protected open fun onBackGestureCancelled() = Unit
+
+  /** Whether the running exit can still be turned around. */
+  protected open val canReverseDismiss: Boolean
+    get() = true
+
   fun show() {
     (contentRoot.parent as? ViewGroup)?.removeView(contentRoot)
     val root = createLayout()
     backdrop.setBackgroundColor(config.effectiveBackdropColor)
     backdrop.alpha = 0f
-    backdrop.setOnClickListener { listener.onBackdropPress() }
+    backdrop.setOnClickListener { if (!isDismissing) listener.onBackdropPress() }
 
     dialog.setContentView(root, ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT))
     dialog.setCancelable(false)
-    dialog.onBackPressedDispatcher.addCallback(dialog, object : OnBackPressedCallback(true) {
-      override fun handleOnBackPressed() = listener.onBackPress()
-    })
+    dialog.onBackPressedDispatcher.addCallback(dialog, backCallback)
     observeInsets(root)
 
     val window = requireNotNull(dialog.window)
@@ -122,6 +170,7 @@ internal abstract class ModalPresenter(
     window.clearFlags(WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE)
     reactContext.onExtraWindowCreate(window)
 
+    entering = true
     animateIn()
   }
 
@@ -134,13 +183,34 @@ internal abstract class ModalPresenter(
     onConfigChanged(previous)
   }
 
-  /** Animated dismissal. [Listener.onDismissed] follows when it completes. */
+  /**
+   * Animated dismissal, also from mid-enter. [Listener.onDismissed] follows
+   * when it completes, unless [cancelDismiss] turns it around first.
+   */
   fun dismiss(reason: DismissReason) {
     if (isDismissing || finished) return
     isDismissing = true
+    entering = false
     dismissReason = reason
+    val fromBackGesture = backGestureActive
+    backGestureActive = false
+    releaseInput()
     hideKeyboard()
-    animateOut { finish() }
+    animateOut(fromBackGesture) { finish() }
+  }
+
+  /**
+   * Reverses a running exit from wherever it is. [Listener.onPresented]
+   * follows once it settles. Returns false when the exit can't be reversed.
+   */
+  fun cancelDismiss(): Boolean {
+    if (!isDismissing || finished || !canReverseDismiss) return false
+    isDismissing = false
+    dismissReason = DismissReason.PROGRAMMATIC
+    dialog.window?.clearFlags(INPUT_RELEASE_FLAGS)
+    entering = true
+    animateIn()
+    return true
   }
 
   /** Tears the window down without animating or notifying the listener. */
@@ -150,10 +220,10 @@ internal abstract class ModalPresenter(
     teardown()
   }
 
-  /** For subclasses: the enter animation finished. */
+  /** For subclasses: the running enter animation settled. */
   protected fun notifyPresented() {
-    if (presentedNotified || isDismissing || finished) return
-    presentedNotified = true
+    if (!entering || isDismissing || finished) return
+    entering = false
     listener.onPresented()
   }
 
@@ -174,6 +244,26 @@ internal abstract class ModalPresenter(
 
   protected fun dp(value: Float): Int = activity.dpToPx(value).toInt()
 
+  private fun cancelBackGesture() {
+    if (!backGestureActive) return
+    backGestureActive = false
+    onBackGestureCancelled()
+  }
+
+  /**
+   * A dismissed native dialog leaves the screen at once, so taps and back
+   * presses during the exit reach whatever is below. Do the same while the
+   * exit animates. Focus is kept while the keyboard is up: giving it away
+   * then would cut the keyboard's hide animation short.
+   */
+  private fun releaseInput() {
+    val window = dialog.window ?: return
+    val keyboardVisible = imeAnimating || imeHeight > 0
+    window.addFlags(
+      if (keyboardVisible) WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE else INPUT_RELEASE_FLAGS,
+    )
+  }
+
   private fun finish() {
     if (finished) return
     finished = true
@@ -250,4 +340,23 @@ internal abstract class ModalPresenter(
       },
     )
   }
+
+  private companion object {
+    const val INPUT_RELEASE_FLAGS =
+      WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE or WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE
+  }
+}
+
+/**
+ * Full-window scrim. It draws a single rect, so fading it needs no offscreen
+ * layer; the default (overlapping) would allocate a full-screen buffer for
+ * every animated frame.
+ */
+private class BackdropView(context: Context) : View(context) {
+  init {
+    // Native dialogs don't click when tapped outside.
+    isSoundEffectsEnabled = false
+  }
+
+  override fun hasOverlappingRendering(): Boolean = false
 }