react-native-nitro-modal 0.1.4 → 0.1.5

package/README.md

@@ -250,6 +250,8 @@ 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.
 
 **Colors**
 

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
 }

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

@@ -3,18 +3,21 @@ package com.margelo.nitro.nitromodal
 import android.app.Activity
 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.AccelerateInterpolator
 import android.view.animation.PathInterpolator
 import android.widget.FrameLayout
+import androidx.activity.BackEventCompat
 import androidx.core.graphics.Insets
 import com.facebook.react.uimanager.ThemedReactContext
 
 /**
  * `popup` mode: a centered card over the backdrop. Enter/exit are
  * [android.view.ViewPropertyAnimator]s on hardware layers, so they run on the
- * UI/render threads without touching JS.
+ * UI/render threads without touching JS. Each one starts from the current
+ * values, so a transition can be turned around mid-flight.
  */
 internal class PopupPresenter(
   activity: Activity,
@@ -25,8 +28,13 @@ internal class PopupPresenter(
 ) : ModalPresenter(activity, reactContext, contentRoot, config, listener) {
 
   private val root = FrameLayout(activity)
+
+  /** Insets + margin; the backdrop sits outside it so it covers the whole window. */
+  private val cardFrame = FrameLayout(activity)
   private val card = FrameLayout(activity)
   private val cardBackground = GradientDrawable()
+  private var started = false
+  private var backPreview = false
 
   override fun createLayout(): ViewGroup {
     root.addView(backdrop, FrameLayout.LayoutParams(MATCH, MATCH))
@@ -34,55 +42,78 @@ internal class PopupPresenter(
     card.outlineProvider = ViewOutlineProvider.BACKGROUND
     card.clipToOutline = true
     card.addView(contentRoot, FrameLayout.LayoutParams(MATCH, MATCH))
-    root.addView(card, FrameLayout.LayoutParams(0, 0, Gravity.CENTER))
-    root.addOnLayoutChangeListener { _, l, t, r, b, oldL, oldT, oldR, oldB ->
+    cardFrame.addView(card, FrameLayout.LayoutParams(0, 0, Gravity.CENTER))
+    cardFrame.addOnLayoutChangeListener { _, l, t, r, b, oldL, oldT, oldR, oldB ->
       if (r - l != oldR - oldL || b - t != oldB - oldT) reportArea()
     }
+    root.addView(cardFrame, FrameLayout.LayoutParams(MATCH, MATCH))
     applyAppearance()
     updateCardSize()
     return root
   }
 
+  /** One frame after show, so the card has its size before it scales in. */
+  private val firstEnter = Runnable {
+    if (config.popupAnimation == PopupAnimation.SCALE) {
+      card.scaleX = ENTER_SCALE
+      card.scaleY = ENTER_SCALE
+    }
+    runEnter()
+  }
+
   override fun animateIn() {
+    if (started) return runEnter()
+    started = true
     card.alpha = 0f
-    root.post {
-      if (isDismissing) return@post
-      if (config.popupAnimation == PopupAnimation.NONE) {
-        backdrop.alpha = 1f
-        card.alpha = 1f
-        notifyPresented()
-        return@post
-      }
-      val scale = if (config.popupAnimation == PopupAnimation.SCALE) 0.9f else 1f
-      card.scaleX = scale
-      card.scaleY = scale
-      backdrop.animate().alpha(1f).setDuration(ENTER_DURATION).setInterpolator(EMPHASIZED_DECELERATE).start()
-      card.animate()
-        .alpha(1f).scaleX(1f).scaleY(1f)
-        .setDuration(ENTER_DURATION)
-        .setInterpolator(EMPHASIZED_DECELERATE)
-        .withLayer()
-        .withEndAction { notifyPresented() }
-        .start()
-    }
+    root.post(firstEnter)
   }
 
-  override fun animateOut(onEnd: () -> Unit) {
+  override fun animateOut(fromBackGesture: Boolean, onEnd: () -> Unit) {
+    root.removeCallbacks(firstEnter)
+    backPreview = false
     if (config.popupAnimation == PopupAnimation.NONE) {
       onEnd()
       return
     }
-    val scale = if (config.popupAnimation == PopupAnimation.SCALE) 0.95f else 1f
-    backdrop.animate().alpha(0f).setDuration(EXIT_DURATION).setInterpolator(ACCELERATE).start()
+    // From wherever the enter or a back preview left the card.
+    val scale = card.scaleX * if (config.popupAnimation == PopupAnimation.SCALE) EXIT_SCALE else 1f
+    val duration = if (fromBackGesture) BACK_COMMIT_DURATION else EXIT_DURATION
+    backdrop.animate().alpha(0f).setDuration(duration).setInterpolator(ACCELERATE).start()
     card.animate()
       .alpha(0f).scaleX(scale).scaleY(scale)
-      .setDuration(EXIT_DURATION)
+      .setDuration(duration)
       .setInterpolator(ACCELERATE)
       .withLayer()
       .withEndAction { onEnd() }
       .start()
   }
 
+  override fun onBackGestureStarted(event: BackEventCompat) {
+    if (config.popupAnimation == PopupAnimation.NONE) return
+    backPreview = true
+    card.animate().cancel()
+    card.setLayerType(View.LAYER_TYPE_HARDWARE, null)
+    onBackGestureProgressed(event)
+  }
+
+  override fun onBackGestureProgressed(event: BackEventCompat) {
+    if (!backPreview) return
+    val scale = 1f - (1f - BACK_MIN_SCALE) * BACK_PROGRESS.getInterpolation(event.progress)
+    card.scaleX = scale
+    card.scaleY = scale
+  }
+
+  override fun onBackGestureCancelled() {
+    if (!backPreview) return
+    backPreview = false
+    card.animate()
+      .scaleX(1f).scaleY(1f)
+      .setDuration(BACK_CANCEL_DURATION)
+      .setInterpolator(EMPHASIZED_DECELERATE)
+      .withEndAction { card.setLayerType(View.LAYER_TYPE_NONE, null) }
+      .start()
+  }
+
   override fun onConfigChanged(previous: ModalConfig) {
     applyAppearance()
     onInsetsChanged()
@@ -90,7 +121,7 @@ internal class PopupPresenter(
 
   override fun onInsetsChanged() {
     val margin = dp(MARGIN_DP)
-    root.setPadding(
+    cardFrame.setPadding(
       systemInsets.left + margin,
       systemInsets.top + margin,
       systemInsets.right + margin,
@@ -105,9 +136,29 @@ internal class PopupPresenter(
 
   override fun onContentSizeChanged() = updateCardSize()
 
+  private fun runEnter() {
+    if (config.popupAnimation == PopupAnimation.NONE) {
+      backdrop.alpha = 1f
+      card.alpha = 1f
+      notifyPresented()
+      return
+    }
+    // Cancelling first restores the layer type a previous animation saved.
+    card.animate().cancel()
+    card.setLayerType(View.LAYER_TYPE_NONE, null)
+    backdrop.animate().alpha(1f).setDuration(ENTER_DURATION).setInterpolator(EMPHASIZED_DECELERATE).start()
+    card.animate()
+      .alpha(1f).scaleX(1f).scaleY(1f)
+      .setDuration(ENTER_DURATION)
+      .setInterpolator(EMPHASIZED_DECELERATE)
+      .withLayer()
+      .withEndAction { notifyPresented() }
+      .start()
+  }
+
   private fun reportArea() {
-    val width = root.width - root.paddingLeft - root.paddingRight
-    val height = root.height - root.paddingTop - root.paddingBottom -
+    val width = cardFrame.width - cardFrame.paddingLeft - cardFrame.paddingRight
+    val height = cardFrame.height - cardFrame.paddingTop - cardFrame.paddingBottom -
       if (config.keyboardBehavior == KeyboardBehavior.RESIZE) keyboardOverlap else 0
     reportContentArea(width, height)
   }
@@ -134,7 +185,7 @@ internal class PopupPresenter(
       card.translationY = 0f
       return
     }
-    val headroom = (card.top - root.paddingTop).coerceAtLeast(0)
+    val headroom = (card.top - cardFrame.paddingTop).coerceAtLeast(0)
     card.translationY = -(keyboardOverlap / 2).coerceAtMost(headroom).toFloat()
   }
 
@@ -142,11 +193,21 @@ internal class PopupPresenter(
     private const val MATCH = ViewGroup.LayoutParams.MATCH_PARENT
     private const val MARGIN_DP = 16f
     private const val DEFAULT_CORNER_RADIUS_DP = 16f
+    private const val ENTER_SCALE = 0.9f
+    private const val EXIT_SCALE = 0.95f
     private const val ENTER_DURATION = 280L
     private const val EXIT_DURATION = 180L
+
+    /** Predictive back: how far the card shrinks while the gesture runs. */
+    private const val BACK_MIN_SCALE = 0.9f
+    private const val BACK_COMMIT_DURATION = 150L
+    private const val BACK_CANCEL_DURATION = 200L
     private val EMPHASIZED_DECELERATE = PathInterpolator(0.05f, 0.7f, 0.1f, 1f)
     private val ACCELERATE = AccelerateInterpolator()
 
+    /** Material's predictive back progress curve. */
+    private val BACK_PROGRESS = PathInterpolator(0.1f, 0.1f, 0f, 1f)
+
     /** Content area before the popup is on screen, in px. */
     fun estimateContentArea(activity: Activity, width: Int, height: Int, insets: Insets): Pair<Int, Int> {
       val margin = activity.dpToPx(MARGIN_DP).toInt() * 2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-nitro-modal",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "react native native modal",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",