react-native-nitro-modal 0.1.0

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

@@ -0,0 +1,253 @@
+package com.margelo.nitro.nitromodal
+
+import android.app.Activity
+import android.os.Build
+import android.view.View
+import android.view.ViewGroup
+import android.view.WindowManager
+import android.view.inputmethod.InputMethodManager
+import androidx.activity.ComponentDialog
+import androidx.activity.OnBackPressedCallback
+import androidx.core.graphics.Insets
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowCompat
+import androidx.core.view.WindowInsetsAnimationCompat
+import androidx.core.view.WindowInsetsCompat
+import com.facebook.react.uimanager.ThemedReactContext
+
+/**
+ * Owns one modal window from show to dismiss. Subclasses build the layout and
+ * drive the enter/exit animations; this class handles the window, edge-to-edge
+ * insets, keyboard tracking, back handling and teardown.
+ *
+ * Everything here runs on the UI thread.
+ */
+internal abstract class ModalPresenter(
+  protected val activity: Activity,
+  private val reactContext: ThemedReactContext,
+  protected val contentRoot: ModalContentRoot,
+  config: ModalConfig,
+  protected val listener: Listener,
+) {
+  interface Listener {
+    fun onPresented()
+    /** The window is gone. Called exactly once per presenter. */
+    fun onDismissed(reason: DismissReason)
+    fun onBackdropPress()
+    fun onBackPress()
+    fun onDetentChange(index: Int)
+    /** Area available to the content, in px. */
+    fun onContentAreaChange(width: Int, height: Int)
+  }
+
+  protected var config: ModalConfig = config
+    private set
+
+  protected val dialog = ComponentDialog(activity, R.style.NitroModal_Dialog)
+  protected val backdrop = View(activity)
+
+  /** System bars + display cutout. */
+  protected var systemInsets: Insets = Insets.NONE
+    private set
+
+  /** Current keyboard height, updated every frame while it animates. */
+  protected var imeHeight: Int = 0
+    private set
+
+  private var imeAnimating = false
+  private var presentedNotified = false
+  private var finished = false
+  private var dismissReason = DismissReason.PROGRAMMATIC
+
+  protected var isDismissing = false
+    private set
+
+  protected abstract fun createLayout(): ViewGroup
+  protected abstract fun animateIn()
+  protected abstract fun animateOut(onEnd: () -> Unit)
+  protected abstract fun onConfigChanged(previous: ModalConfig)
+
+  /** System insets or the settled keyboard height changed. */
+  protected abstract fun onInsetsChanged()
+
+  /** Called every frame while the keyboard animates. Must not trigger layout. */
+  protected abstract fun onKeyboardProgress()
+
+  abstract fun onContentSizeChanged()
+
+  open fun snapToDetent(index: Int) = Unit
+
+  fun show() {
+    (contentRoot.parent as? ViewGroup)?.removeView(contentRoot)
+    val root = createLayout()
+    backdrop.setBackgroundColor(config.effectiveBackdropColor)
+    backdrop.alpha = 0f
+    backdrop.setOnClickListener { 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()
+    })
+    observeInsets(root)
+
+    val window = requireNotNull(dialog.window)
+    window.setLayout(WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.MATCH_PARENT)
+    WindowCompat.setDecorFitsSystemWindows(window, false)
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+      window.attributes = window.attributes.apply {
+        layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
+      }
+    }
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+      window.isStatusBarContrastEnforced = false
+      window.isNavigationBarContrastEnforced = false
+    }
+    activity.window?.let { activityWindow ->
+      val source = WindowCompat.getInsetsController(activityWindow, activityWindow.decorView)
+      WindowCompat.getInsetsController(window, window.decorView).apply {
+        isAppearanceLightStatusBars = source.isAppearanceLightStatusBars
+        isAppearanceLightNavigationBars = source.isAppearanceLightNavigationBars
+      }
+      if (activityWindow.attributes.flags and WindowManager.LayoutParams.FLAG_SECURE != 0) {
+        window.addFlags(WindowManager.LayoutParams.FLAG_SECURE)
+      }
+    }
+    applyBlur()
+
+    // Like RN's Modal: not focusable while showing so immersive system bars
+    // don't flash, then focusable again so text inputs work.
+    window.addFlags(WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE)
+    dialog.show()
+    window.clearFlags(WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE)
+    reactContext.onExtraWindowCreate(window)
+
+    animateIn()
+  }
+
+  fun update(newConfig: ModalConfig) {
+    val previous = config
+    if (previous == newConfig) return
+    config = newConfig
+    backdrop.setBackgroundColor(config.effectiveBackdropColor)
+    if (previous.backdropBlurRadius != newConfig.backdropBlurRadius) applyBlur()
+    onConfigChanged(previous)
+  }
+
+  /** Animated dismissal. [Listener.onDismissed] follows when it completes. */
+  fun dismiss(reason: DismissReason) {
+    if (isDismissing || finished) return
+    isDismissing = true
+    dismissReason = reason
+    hideKeyboard()
+    animateOut { finish() }
+  }
+
+  /** Tears the window down without animating or notifying the listener. */
+  fun dismissImmediately() {
+    if (finished) return
+    finished = true
+    teardown()
+  }
+
+  /** For subclasses: the enter animation finished. */
+  protected fun notifyPresented() {
+    if (presentedNotified || isDismissing || finished) return
+    presentedNotified = true
+    listener.onPresented()
+  }
+
+  /** For subclasses: the user dismissed the modal natively (e.g. swipe). */
+  protected fun finishUserDismissal(reason: DismissReason) {
+    if (finished) return
+    if (!isDismissing) dismissReason = reason
+    finish()
+  }
+
+  protected fun reportContentArea(width: Int, height: Int) {
+    if (width > 0 && height > 0) listener.onContentAreaChange(width, height)
+  }
+
+  /** Keyboard overlap below the bottom system inset, in px. */
+  protected val keyboardOverlap: Int
+    get() = (imeHeight - systemInsets.bottom).coerceAtLeast(0)
+
+  protected fun dp(value: Float): Int = activity.dpToPx(value).toInt()
+
+  private fun finish() {
+    if (finished) return
+    finished = true
+    teardown()
+    listener.onDismissed(dismissReason)
+  }
+
+  private fun teardown() {
+    backdrop.animate().cancel()
+    dialog.window?.let { reactContext.onExtraWindowDestroy(it) }
+    if (dialog.isShowing && !activity.isFinishing && !activity.isDestroyed) {
+      try {
+        dialog.dismiss()
+      } catch (e: IllegalArgumentException) {
+        // The window was already detached from the window manager.
+      }
+    }
+    (contentRoot.parent as? ViewGroup)?.removeView(contentRoot)
+  }
+
+  private fun hideKeyboard() {
+    val token = dialog.window?.decorView?.windowToken ?: return
+    (activity.getSystemService(Activity.INPUT_METHOD_SERVICE) as? InputMethodManager)
+      ?.hideSoftInputFromWindow(token, 0)
+  }
+
+  private fun applyBlur() {
+    val window = dialog.window ?: return
+    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.S) return
+    val radius = dp(config.backdropBlurRadius)
+    if (radius > 0 && activity.windowManager.isCrossWindowBlurEnabled) {
+      window.addFlags(WindowManager.LayoutParams.FLAG_BLUR_BEHIND)
+      window.attributes = window.attributes.apply { blurBehindRadius = radius }
+    } else {
+      window.clearFlags(WindowManager.LayoutParams.FLAG_BLUR_BEHIND)
+    }
+  }
+
+  private fun observeInsets(root: View) {
+    ViewCompat.setOnApplyWindowInsetsListener(root) { _, insets ->
+      systemInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars() or WindowInsetsCompat.Type.displayCutout())
+      // While the keyboard animates, the end state arrives up front; the
+      // animation callback below feeds the in-between frames instead.
+      if (!imeAnimating) imeHeight = insets.getInsets(WindowInsetsCompat.Type.ime()).bottom
+      onInsetsChanged()
+      WindowInsetsCompat.CONSUMED
+    }
+    ViewCompat.setWindowInsetsAnimationCallback(
+      root,
+      object : WindowInsetsAnimationCompat.Callback(WindowInsetsAnimationCompat.Callback.DISPATCH_MODE_STOP) {
+        override fun onPrepare(animation: WindowInsetsAnimationCompat) {
+          if (animation.typeMask and WindowInsetsCompat.Type.ime() != 0) imeAnimating = true
+        }
+
+        override fun onProgress(
+          insets: WindowInsetsCompat,
+          runningAnimations: MutableList<WindowInsetsAnimationCompat>,
+        ): WindowInsetsCompat {
+          if (imeAnimating) {
+            imeHeight = insets.getInsets(WindowInsetsCompat.Type.ime()).bottom
+            onKeyboardProgress()
+          }
+          return insets
+        }
+
+        override fun onEnd(animation: WindowInsetsAnimationCompat) {
+          if (animation.typeMask and WindowInsetsCompat.Type.ime() == 0) return
+          imeAnimating = false
+          ViewCompat.getRootWindowInsets(root)?.let {
+            imeHeight = it.getInsets(WindowInsetsCompat.Type.ime()).bottom
+          }
+          onInsetsChanged()
+        }
+      },
+    )
+  }
+}

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

@@ -0,0 +1,52 @@
+package com.margelo.nitro.nitromodal
+
+import android.annotation.SuppressLint
+import android.view.View
+import android.view.ViewGroup
+import android.view.accessibility.AccessibilityEvent
+import com.facebook.react.uimanager.ThemedReactContext
+
+/**
+ * The view Nitro mounts into the React tree. It is an invisible placeholder:
+ * React children added to it (via [NitroModalViewManager]) are hosted by
+ * [contentRoot], which travels into the modal window.
+ */
+@SuppressLint("ViewConstructor")
+class NitroModalHostView(context: ThemedReactContext) : ViewGroup(context) {
+  internal val contentRoot = ModalContentRoot(context)
+  internal var onAttachedChange: ((attached: Boolean) -> Unit)? = null
+
+  internal val reactChildCount: Int
+    get() = contentRoot.childCount
+
+  internal fun addReactChild(child: View, index: Int) = contentRoot.addView(child, index)
+
+  internal fun getReactChildAt(index: Int): View? = contentRoot.getChildAt(index)
+
+  internal fun removeReactChildAt(index: Int) = contentRoot.removeViewAt(index)
+
+  override fun setId(id: Int) {
+    super.setId(id)
+    // Touches that hit no child target the root; give it our React tag.
+    contentRoot.id = id
+  }
+
+  override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
+    // Laid out by Fabric; our children live in the modal window.
+  }
+
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+    onAttachedChange?.invoke(true)
+  }
+
+  override fun onDetachedFromWindow() {
+    super.onDetachedFromWindow()
+    onAttachedChange?.invoke(false)
+  }
+
+  // Accessibility for the content is handled inside the modal window.
+  override fun addChildrenForAccessibility(outChildren: ArrayList<View>) = Unit
+
+  override fun dispatchPopulateAccessibilityEvent(event: AccessibilityEvent): Boolean = false
+}

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

@@ -0,0 +1,28 @@
+package com.margelo.nitro.nitromodal
+
+import com.facebook.react.BaseReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfoProvider
+import com.facebook.react.uimanager.ViewManager
+
+class NitroModalPackage : BaseReactPackage() {
+    override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? {
+        return null
+    }
+
+    override fun getReactModuleInfoProvider(): ReactModuleInfoProvider {
+        return ReactModuleInfoProvider { HashMap() }
+    }
+
+    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+        // Not nitrogen's generated HybridNitroModalManager: the modal needs children.
+        return listOf(NitroModalViewManager())
+    }
+
+    companion object {
+        init {
+            System.loadLibrary("nitromodal")
+        }
+    }
+}

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

@@ -0,0 +1,67 @@
+package com.margelo.nitro.nitromodal
+
+import android.view.View
+import com.facebook.react.uimanager.ReactStylesDiffMap
+import com.facebook.react.uimanager.StateWrapper
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.ViewGroupManager
+import com.margelo.nitro.R.id.associated_hybrid_view_tag
+import com.margelo.nitro.nitromodal.views.HybridNitroModalStateUpdater
+
+/**
+ * View manager for the "NitroModal" Nitro view.
+ *
+ * Nitrogen generates a `SimpleViewManager`, which cannot have children. This
+ * is the same manager as a `ViewGroupManager`: props still flow through the
+ * generated C++ state updater, and React children are redirected into the
+ * modal's [ModalContentRoot].
+ */
+class NitroModalViewManager : ViewGroupManager<NitroModalHostView>() {
+  private class HybridViewHolder(val hybridView: HybridNitroModal, var lastState: StateWrapper? = null)
+
+  override fun getName(): String = "NitroModal"
+
+  override fun createViewInstance(reactContext: ThemedReactContext): NitroModalHostView {
+    val hybridView = HybridNitroModal(reactContext)
+    val view = hybridView.view
+    view.setTag(associated_hybrid_view_tag, HybridViewHolder(hybridView))
+    return view
+  }
+
+  override fun addEventEmitters(reactContext: ThemedReactContext, view: NitroModalHostView) {
+    view.contentRoot.eventDispatcher = UIManagerHelper.getEventDispatcher(reactContext)
+  }
+
+  override fun updateState(view: NitroModalHostView, props: ReactStylesDiffMap, stateWrapper: StateWrapper): Any? {
+    val holder = holder(view) ?: throw IllegalStateException("Couldn't find the HybridNitroModal for $view")
+    val hybridView = holder.hybridView
+    hybridView.beforeUpdate()
+    HybridNitroModalStateUpdater.updateViewProps(hybridView, stateWrapper, holder.lastState)
+    hybridView.afterUpdate()
+    holder.lastState = stateWrapper
+    return super.updateState(view, props, stateWrapper)
+  }
+
+  override fun onDropViewInstance(view: NitroModalHostView) {
+    holder(view)?.let {
+      it.lastState = null
+      it.hybridView.onDropView()
+    }
+    super.onDropViewInstance(view)
+  }
+
+  // region Children live in the modal window, not in the host view.
+
+  override fun addView(parent: NitroModalHostView, child: View, index: Int) = parent.addReactChild(child, index)
+
+  override fun getChildCount(parent: NitroModalHostView): Int = parent.reactChildCount
+
+  override fun getChildAt(parent: NitroModalHostView, index: Int): View? = parent.getReactChildAt(index)
+
+  override fun removeViewAt(parent: NitroModalHostView, index: Int) = parent.removeReactChildAt(index)
+
+  // endregion
+
+  private fun holder(view: View): HybridViewHolder? = view.getTag(associated_hybrid_view_tag) as? HybridViewHolder
+}

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

@@ -0,0 +1,156 @@
+package com.margelo.nitro.nitromodal
+
+import android.app.Activity
+import android.graphics.drawable.GradientDrawable
+import android.view.Gravity
+import android.view.ViewGroup
+import android.view.ViewOutlineProvider
+import android.view.animation.AccelerateInterpolator
+import android.view.animation.PathInterpolator
+import android.widget.FrameLayout
+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.
+ */
+internal class PopupPresenter(
+  activity: Activity,
+  reactContext: ThemedReactContext,
+  contentRoot: ModalContentRoot,
+  config: ModalConfig,
+  listener: Listener,
+) : ModalPresenter(activity, reactContext, contentRoot, config, listener) {
+
+  private val root = FrameLayout(activity)
+  private val card = FrameLayout(activity)
+  private val cardBackground = GradientDrawable()
+
+  override fun createLayout(): ViewGroup {
+    root.addView(backdrop, FrameLayout.LayoutParams(MATCH, MATCH))
+    card.background = cardBackground
+    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 ->
+      if (r - l != oldR - oldL || b - t != oldB - oldT) reportArea()
+    }
+    applyAppearance()
+    updateCardSize()
+    return root
+  }
+
+  override fun animateIn() {
+    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()
+    }
+  }
+
+  override fun animateOut(onEnd: () -> Unit) {
+    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()
+    card.animate()
+      .alpha(0f).scaleX(scale).scaleY(scale)
+      .setDuration(EXIT_DURATION)
+      .setInterpolator(ACCELERATE)
+      .withLayer()
+      .withEndAction { onEnd() }
+      .start()
+  }
+
+  override fun onConfigChanged(previous: ModalConfig) {
+    applyAppearance()
+    onInsetsChanged()
+  }
+
+  override fun onInsetsChanged() {
+    val margin = dp(MARGIN_DP)
+    root.setPadding(
+      systemInsets.left + margin,
+      systemInsets.top + margin,
+      systemInsets.right + margin,
+      systemInsets.bottom + margin,
+    )
+    updateCardSize()
+    applyKeyboardOffset()
+    reportArea()
+  }
+
+  override fun onKeyboardProgress() = applyKeyboardOffset()
+
+  override fun onContentSizeChanged() = updateCardSize()
+
+  private fun reportArea() {
+    val width = root.width - root.paddingLeft - root.paddingRight
+    val height = root.height - root.paddingTop - root.paddingBottom -
+      if (config.keyboardBehavior == KeyboardBehavior.RESIZE) keyboardOverlap else 0
+    reportContentArea(width, height)
+  }
+
+  private fun applyAppearance() {
+    cardBackground.cornerRadius = activity.dpToPx(config.cornerRadius ?: DEFAULT_CORNER_RADIUS_DP)
+    cardBackground.setColor(config.surfaceColor(activity))
+  }
+
+  private fun updateCardSize() {
+    val params = card.layoutParams ?: return
+    val width = contentRoot.contentWidth
+    val height = contentRoot.contentHeight
+    if (params.width != width || params.height != height) {
+      params.width = width
+      params.height = height
+      card.layoutParams = params
+    }
+  }
+
+  /** Keeps the card centered in the space above the keyboard. */
+  private fun applyKeyboardOffset() {
+    if (config.keyboardBehavior == KeyboardBehavior.NONE) {
+      card.translationY = 0f
+      return
+    }
+    val headroom = (card.top - root.paddingTop).coerceAtLeast(0)
+    card.translationY = -(keyboardOverlap / 2).coerceAtMost(headroom).toFloat()
+  }
+
+  companion object {
+    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_DURATION = 280L
+    private const val EXIT_DURATION = 180L
+    private val EMPHASIZED_DECELERATE = PathInterpolator(0.05f, 0.7f, 0.1f, 1f)
+    private val ACCELERATE = AccelerateInterpolator()
+
+    /** 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
+      return Pair(width - insets.left - insets.right - margin, height - insets.top - insets.bottom - margin)
+    }
+  }
+}

package/android/src/main/res/values/styles.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+  <!--
+    Full-screen, transparent, undimmed window. The backdrop, sheet and card are
+    regular views inside it so their animations can be driven per frame.
+  -->
+  <style name="NitroModal.Dialog" parent="@android:style/Theme.Translucent.NoTitleBar">
+    <item name="android:windowIsFloating">false</item>
+    <item name="android:windowBackground">@android:color/transparent</item>
+    <item name="android:backgroundDimEnabled">false</item>
+    <item name="android:windowAnimationStyle">@null</item>
+    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
+    <item name="android:statusBarColor">@android:color/transparent</item>
+    <item name="android:navigationBarColor">@android:color/transparent</item>
+    <item name="android:windowSoftInputMode">adjustResize</item>
+  </style>
+</resources>

package/ios/BackdropView.swift

@@ -0,0 +1,64 @@
+//
+//  BackdropView.swift
+//  NitroModal
+//
+
+import UIKit
+
+/// Dimming (and optional blur) layer behind the modal. Its `alpha` is driven
+/// by the presentation transitions, so it fades with the modal, including
+/// interactive swipe-to-dismiss.
+final class BackdropView: UIView {
+  var onTap: (() -> Void)?
+
+  private let dimView = UIView()
+  private var blurView: UIVisualEffectView?
+
+  override init(frame: CGRect) {
+    super.init(frame: frame)
+    dimView.frame = bounds
+    dimView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+    addSubview(dimView)
+    addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handleTap)))
+    isAccessibilityElement = true
+    accessibilityTraits = .button
+    accessibilityLabel = "Dismiss"
+  }
+
+  @available(*, unavailable)
+  required init?(coder: NSCoder) {
+    fatalError("init(coder:) is not supported")
+  }
+
+  func configure(color: UIColor, opacity: CGFloat, blurRadius: CGFloat) {
+    var alpha: CGFloat = 1
+    color.getRed(nil, green: nil, blue: nil, alpha: &alpha)
+    dimView.backgroundColor = color.withAlphaComponent(alpha * min(max(opacity, 0), 1))
+
+    guard blurRadius > 0 else {
+      blurView?.removeFromSuperview()
+      blurView = nil
+      return
+    }
+    let blurView = self.blurView ?? {
+      let view = UIVisualEffectView(effect: UIBlurEffect(style: .systemUltraThinMaterial))
+      view.frame = bounds
+      view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+      insertSubview(view, belowSubview: dimView)
+      self.blurView = view
+      return view
+    }()
+    // UIKit has no public blur radius. Blend a thin system material instead,
+    // reaching full strength at ~30pt.
+    blurView.alpha = min(blurRadius / 30, 1)
+  }
+
+  @objc private func handleTap() {
+    onTap?()
+  }
+
+  override func accessibilityActivate() -> Bool {
+    onTap?()
+    return true
+  }
+}