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

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

@@ -4,10 +4,35 @@ import android.content.Context
 import android.content.res.Configuration
 import android.graphics.Color
 
+/** A resting height of a `bottomSheet`. */
+internal sealed interface Detent {
+  data object Small : Detent
+  data object Medium : Detent
+  data object Large : Detent
+  data object FitContent : Detent
+
+  /** Content height in dp, above the bottom system inset. */
+  data class Height(val dp: Float) : Detent
+
+  companion object {
+    fun from(detent: SheetDetent): Detent = when (detent) {
+      is SheetDetent.First -> when (detent.value) {
+        NamedSheetDetent.SMALL -> Small
+        NamedSheetDetent.MEDIUM -> Medium
+        NamedSheetDetent.LARGE -> Large
+        NamedSheetDetent.FITCONTENT -> FitContent
+      }
+      is SheetDetent.Second -> if (detent.value.isFinite()) Height(detent.value.toFloat()) else Large
+    }
+  }
+}
+
 /** Snapshot of the React props that shape a presentation. */
 internal data class ModalConfig(
   val mode: ModalMode = ModalMode.BOTTOMSHEET,
-  val detents: List<SheetDetent> = listOf(SheetDetent.FITCONTENT),
+  /** An inline `bottomSheet` (see [isInline]), as opposed to a modal one. */
+  val inlinePresentation: Boolean = false,
+  val detents: List<Detent> = listOf(Detent.FitContent),
   val initialDetentIndex: Int = 0,
   val backdropColor: Int = Color.BLACK,
   val backdropOpacity: Float = 0.4f,
@@ -23,7 +48,12 @@ internal data class ModalConfig(
   val contentBackgroundColor: Int? = null,
   val keyboardBehavior: KeyboardBehavior = KeyboardBehavior.PAN,
   val popupAnimation: PopupAnimation = PopupAnimation.SCALE,
+  val pullToRefreshEnabled: Boolean = false,
 ) {
+  /** A `bottomSheet` living in the host view's bounds. Popups are always modal. */
+  val isInline: Boolean
+    get() = inlinePresentation && mode == ModalMode.BOTTOMSHEET
+
   val clampedInitialDetentIndex: Int
     get() = initialDetentIndex.coerceIn(0, (detents.size - 1).coerceAtLeast(0))
 

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

@@ -8,6 +8,7 @@ import com.facebook.react.config.ReactFeatureFlags
 import com.facebook.react.uimanager.JSPointerDispatcher
 import com.facebook.react.uimanager.JSTouchDispatcher
 import com.facebook.react.uimanager.RootView
+import com.facebook.react.uimanager.RootViewUtil
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.events.EventDispatcher
 import com.facebook.react.views.view.ReactViewGroup
@@ -19,6 +20,9 @@ import com.facebook.react.views.view.ReactViewGroup
  * root view. Like React Native's own `Modal`, this view is a [RootView] that
  * forwards touch and pointer events to JS itself. Children are laid out by
  * Fabric; [ReactViewGroup.onLayout] is a no-op.
+ *
+ * An inline sheet keeps this view inside the React root view, which already
+ * forwards its touches: then it only passes native gestures on to that root.
  */
 @SuppressLint("ViewConstructor")
 internal class ModalContentRoot(private val reactContext: ThemedReactContext) :
@@ -29,40 +33,68 @@ internal class ModalContentRoot(private val reactContext: ThemedReactContext) :
   /** Called when a child's laid-out bounds change. */
   var onContentSizeChange: (() -> Unit)? = null
 
+  /** Hosted by an inline sheet, inside the React root view. */
+  var isInline: Boolean = false
+    set(value) {
+      if (field == value) return
+      field = value
+      updateReactOrigin()
+    }
+
   private val touchDispatcher = JSTouchDispatcher(this)
   private val pointerDispatcher: JSPointerDispatcher? =
     if (ReactFeatureFlags.dispatchPointerEvents) JSPointerDispatcher(this) else null
 
+  /** Dispatches touches to JS itself: only outside the React root view. */
+  private val activeEventDispatcher: EventDispatcher?
+    get() = if (isInline) null else eventDispatcher
+
   private val childLayoutListener =
     OnLayoutChangeListener { _, left, top, right, bottom, oldLeft, oldTop, oldRight, oldBottom ->
       if (left != oldLeft || top != oldTop || right != oldRight || bottom != oldBottom) {
+        updateReactOrigin()
         onContentSizeChange?.invoke()
       }
     }
 
+  /**
+   * Where React placed the children, in px. Inline, React lays the content
+   * out at the sheet's resting top so that `measure()` matches the screen;
+   * scrolling this view by the same amount cancels that offset out on screen.
+   */
+  private val reactOriginY: Int
+    get() = if (isInline) (0 until childCount).minOfOrNull { getChildAt(it).top } ?: 0 else 0
+
   /** Bounding size of the React children, in px. */
   val contentWidth: Int
     get() = (0 until childCount).maxOfOrNull { getChildAt(it).right } ?: 0
 
   val contentHeight: Int
-    get() = (0 until childCount).maxOfOrNull { getChildAt(it).bottom } ?: 0
+    get() = ((0 until childCount).maxOfOrNull { getChildAt(it).bottom } ?: 0) - reactOriginY
 
   override fun onViewAdded(child: View) {
     super.onViewAdded(child)
     child.addOnLayoutChangeListener(childLayoutListener)
+    updateReactOrigin()
     onContentSizeChange?.invoke()
   }
 
   override fun onViewRemoved(child: View) {
     super.onViewRemoved(child)
     child.removeOnLayoutChangeListener(childLayoutListener)
+    updateReactOrigin()
     onContentSizeChange?.invoke()
   }
 
+  private fun updateReactOrigin() {
+    val originY = reactOriginY
+    if (scrollY != originY) scrollTo(0, originY)
+  }
+
   // region Touch forwarding (mirrors ReactModalHostView.DialogRootViewGroup)
 
   override fun onInterceptTouchEvent(event: MotionEvent): Boolean {
-    eventDispatcher?.let {
+    activeEventDispatcher?.let {
       touchDispatcher.handleTouchEvent(event, it, reactContext)
       pointerDispatcher?.handleMotionEvent(event, it, true)
     }
@@ -71,7 +103,7 @@ internal class ModalContentRoot(private val reactContext: ThemedReactContext) :
 
   @SuppressLint("ClickableViewAccessibility")
   override fun onTouchEvent(event: MotionEvent): Boolean {
-    eventDispatcher?.let {
+    activeEventDispatcher?.let {
       touchDispatcher.handleTouchEvent(event, it, reactContext)
       pointerDispatcher?.handleMotionEvent(event, it, false)
     }
@@ -81,17 +113,21 @@ internal class ModalContentRoot(private val reactContext: ThemedReactContext) :
   }
 
   override fun onInterceptHoverEvent(event: MotionEvent): Boolean {
-    eventDispatcher?.let { pointerDispatcher?.handleMotionEvent(event, it, true) }
+    activeEventDispatcher?.let { pointerDispatcher?.handleMotionEvent(event, it, true) }
     return super.onInterceptHoverEvent(event)
   }
 
   override fun onHoverEvent(event: MotionEvent): Boolean {
-    eventDispatcher?.let { pointerDispatcher?.handleMotionEvent(event, it, false) }
+    activeEventDispatcher?.let { pointerDispatcher?.handleMotionEvent(event, it, false) }
     return super.onHoverEvent(event)
   }
 
   @OptIn(UnstableReactNativeAPI::class)
   override fun onChildStartedNativeGesture(childView: View?, ev: MotionEvent) {
+    if (isInline) {
+      outerRootView()?.onChildStartedNativeGesture(childView, ev)
+      return
+    }
     eventDispatcher?.let {
       touchDispatcher.onChildStartedNativeGesture(ev, it, reactContext)
       pointerDispatcher?.onChildStartedNativeGesture(childView, ev, it)
@@ -99,10 +135,17 @@ internal class ModalContentRoot(private val reactContext: ThemedReactContext) :
   }
 
   override fun onChildEndedNativeGesture(childView: View, ev: MotionEvent) {
+    if (isInline) {
+      outerRootView()?.onChildEndedNativeGesture(childView, ev)
+      return
+    }
     eventDispatcher?.let { touchDispatcher.onChildEndedNativeGesture(ev, it) }
     pointerDispatcher?.onChildEndedNativeGesture()
   }
 
+  /** The React root view an inline sheet lives in. */
+  private fun outerRootView(): RootView? = (parent as? View)?.let { RootViewUtil.getRootView(it) }
+
   override fun handleException(t: Throwable) {
     reactContext.reactApplicationContext.handleException(RuntimeException(t))
   }

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

@@ -22,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.
  *
+ * With an [inlineHost], there is no window: the layout fills that view, in
+ * the screen's own hierarchy, and the keyboard and back button are left to
+ * the screen.
+ *
  * 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.
@@ -34,6 +38,7 @@ internal abstract class ModalPresenter(
   protected val contentRoot: ModalContentRoot,
   config: ModalConfig,
   protected val listener: Listener,
+  private val inlineHost: NitroModalHostView? = null,
 ) {
   interface Listener {
     /** An enter transition settled: the first one, or one that reversed an exit. */
@@ -45,12 +50,20 @@ internal abstract class ModalPresenter(
     fun onDetentChange(index: Int)
     /** Area available to the content, in px. */
     fun onContentAreaChange(width: Int, height: Int)
+    /** The user pulled the sheet past its lowest detent and let go. */
+    fun onPullToRefresh()
+    /** Inline sheets: the sheet's top at rest, in the host view, in px. */
+    fun onRestingTopChange(top: Int)
   }
 
   protected var config: ModalConfig = config
     private set
 
-  protected val dialog = ComponentDialog(activity, R.style.NitroModal_Dialog)
+  /** Lives in [inlineHost] rather than in a window of its own. */
+  protected val isInline: Boolean
+    get() = inlineHost != null
+
+  protected val dialog by lazy { ComponentDialog(activity, R.style.NitroModal_Dialog) }
   protected val backdrop: View = BackdropView(activity)
 
   /** System bars + display cutout. */
@@ -119,6 +132,9 @@ internal abstract class ModalPresenter(
 
   open fun snapToDetent(index: Int) = Unit
 
+  /** Runs once, right before the layout is torn down. */
+  protected open fun onTeardown() = Unit
+
   protected open fun onBackGestureStarted(event: BackEventCompat) = Unit
   protected open fun onBackGestureProgressed(event: BackEventCompat) = Unit
   protected open fun onBackGestureCancelled() = Unit
@@ -130,6 +146,13 @@ internal abstract class ModalPresenter(
   fun show() {
     (contentRoot.parent as? ViewGroup)?.removeView(contentRoot)
     val root = createLayout()
+    inlineHost?.let { host ->
+      host.addInlineRoot(root)
+      updateInlineInsets()
+      entering = true
+      animateIn()
+      return
+    }
     backdrop.setBackgroundColor(config.effectiveBackdropColor)
     backdrop.alpha = 0f
     backdrop.setOnClickListener { if (!isDismissing) listener.onBackdropPress() }
@@ -179,10 +202,15 @@ internal abstract class ModalPresenter(
     if (previous == newConfig) return
     config = newConfig
     backdrop.setBackgroundColor(config.effectiveBackdropColor)
-    if (previous.backdropBlurRadius != newConfig.backdropBlurRadius) applyBlur()
+    if (!isInline && previous.backdropBlurRadius != newConfig.backdropBlurRadius) applyBlur()
     onConfigChanged(previous)
   }
 
+  /** The inline host moved or resized. */
+  fun onHostLayoutChanged() {
+    if (isInline && !finished) updateInlineInsets()
+  }
+
   /**
    * Animated dismissal, also from mid-enter. [Listener.onDismissed] follows
    * when it completes, unless [cancelDismiss] turns it around first.
@@ -207,7 +235,7 @@ internal abstract class ModalPresenter(
     if (!isDismissing || finished || !canReverseDismiss) return false
     isDismissing = false
     dismissReason = DismissReason.PROGRAMMATIC
-    dialog.window?.clearFlags(INPUT_RELEASE_FLAGS)
+    if (!isInline) dialog.window?.clearFlags(INPUT_RELEASE_FLAGS)
     entering = true
     animateIn()
     return true
@@ -257,6 +285,7 @@ internal abstract class ModalPresenter(
    * then would cut the keyboard's hide animation short.
    */
   private fun releaseInput() {
+    if (isInline) return
     val window = dialog.window ?: return
     val keyboardVisible = imeAnimating || imeHeight > 0
     window.addFlags(
@@ -273,6 +302,12 @@ internal abstract class ModalPresenter(
 
   private fun teardown() {
     backdrop.animate().cancel()
+    onTeardown()
+    if (inlineHost != null) {
+      (contentRoot.parent as? ViewGroup)?.removeView(contentRoot)
+      inlineHost.removeAllViews()
+      return
+    }
     dialog.window?.let { reactContext.onExtraWindowDestroy(it) }
     if (dialog.isShowing && !activity.isFinishing && !activity.isDestroyed) {
       try {
@@ -285,11 +320,35 @@ internal abstract class ModalPresenter(
   }
 
   private fun hideKeyboard() {
-    val token = dialog.window?.decorView?.windowToken ?: return
+    if (isInline && !contentRoot.hasFocus()) return
+    val token = (if (isInline) contentRoot.windowToken else dialog.window?.decorView?.windowToken) ?: return
     (activity.getSystemService(Activity.INPUT_METHOD_SERVICE) as? InputMethodManager)
       ?.hideSoftInputFromWindow(token, 0)
   }
 
+  /**
+   * Inline: the system bars and cutout overlapping the host view, so the
+   * sheet keeps its content clear of them like a modal sheet does.
+   */
+  private fun updateInlineInsets() {
+    val host = inlineHost ?: return
+    val window = ViewCompat.getRootWindowInsets(host)
+      ?.getInsets(WindowInsetsCompat.Type.systemBars() or WindowInsetsCompat.Type.displayCutout())
+      ?: Insets.NONE
+    val location = IntArray(2)
+    host.getLocationInWindow(location)
+    val root = host.rootView
+    val next = Insets.of(
+      (window.left - location[0]).coerceIn(0, host.width),
+      (window.top - location[1]).coerceIn(0, host.height),
+      (location[0] + host.width - (root.width - window.right)).coerceIn(0, host.width),
+      (location[1] + host.height - (root.height - window.bottom)).coerceIn(0, host.height),
+    )
+    if (next == systemInsets) return
+    systemInsets = next
+    onInsetsChanged()
+  }
+
   private fun applyBlur() {
     val window = dialog.window ?: return
     if (Build.VERSION.SDK_INT < Build.VERSION_CODES.S) return

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

@@ -4,21 +4,51 @@ import android.annotation.SuppressLint
 import android.view.View
 import android.view.ViewGroup
 import android.view.accessibility.AccessibilityEvent
+import com.facebook.react.uimanager.PointerEvents
+import com.facebook.react.uimanager.ReactPointerEventsView
 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.
+ * The view Nitro mounts into the React tree. React children added to it (via
+ * [NitroModalViewManager]) are hosted by [contentRoot].
+ *
+ * Modal: an invisible placeholder; [contentRoot] travels into the modal
+ * window. Inline: the area the sheet lives in. Its only child is the sheet's
+ * layout, which it lays out itself, and only touches on the sheet hit it.
  */
 @SuppressLint("ViewConstructor")
-class NitroModalHostView(context: ThemedReactContext) : ViewGroup(context) {
+class NitroModalHostView(context: ThemedReactContext) : ViewGroup(context), ReactPointerEventsView {
   internal val contentRoot = ModalContentRoot(context)
   internal var onAttachedChange: ((attached: Boolean) -> Unit)? = null
 
+  /** The size or position changed. */
+  internal var onLayoutChange: (() -> Unit)? = null
+
+  internal var isInline: Boolean = false
+    set(value) {
+      if (field == value) return
+      field = value
+      contentRoot.isInline = value
+    }
+
   internal val reactChildCount: Int
     get() = contentRoot.childCount
 
+  // Inline: touches that miss the sheet go to the views behind it.
+  override val pointerEvents: PointerEvents
+    get() = if (isInline) PointerEvents.BOX_NONE else PointerEvents.AUTO
+
+  private var layoutPending = false
+
+  private val measureAndLayout = Runnable {
+    layoutPending = false
+    measure(
+      MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+      MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY),
+    )
+    layout(left, top, right, bottom)
+  }
+
   internal fun addReactChild(child: View, index: Int) = contentRoot.addView(child, index)
 
   internal fun getReactChildAt(index: Int): View? = contentRoot.getChildAt(index)
@@ -31,8 +61,31 @@ class NitroModalHostView(context: ThemedReactContext) : ViewGroup(context) {
     contentRoot.id = id
   }
 
+  override fun requestLayout() {
+    super.requestLayout()
+    // React Native views drop layout requests; the inline sheet's layout
+    // (CoordinatorLayout, BottomSheetBehavior) relies on them. Also called
+    // from the super constructor, before any child exists.
+    if (childCount > 0 && !layoutPending) {
+      layoutPending = true
+      post(measureAndLayout)
+    }
+  }
+
   override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
-    // Laid out by Fabric; our children live in the modal window.
+    // Laid out by Fabric. A modal's children live in the modal window; an
+    // inline sheet's layout fills this view.
+    val width = r - l
+    val height = b - t
+    for (i in 0 until childCount) {
+      val child = getChildAt(i)
+      child.measure(
+        MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+        MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY),
+      )
+      child.layout(0, 0, width, height)
+    }
+    if (changed) onLayoutChange?.invoke()
   }
 
   override fun onAttachedToWindow() {
@@ -45,8 +98,15 @@ class NitroModalHostView(context: ThemedReactContext) : ViewGroup(context) {
     onAttachedChange?.invoke(false)
   }
 
-  // Accessibility for the content is handled inside the modal window.
-  override fun addChildrenForAccessibility(outChildren: ArrayList<View>) = Unit
+  // A modal's content is handled for accessibility inside the modal window.
+  override fun addChildrenForAccessibility(outChildren: ArrayList<View>) {
+    if (isInline) super.addChildrenForAccessibility(outChildren)
+  }
 
-  override fun dispatchPopulateAccessibilityEvent(event: AccessibilityEvent): Boolean = false
+  override fun dispatchPopulateAccessibilityEvent(event: AccessibilityEvent): Boolean =
+    isInline && super.dispatchPopulateAccessibilityEvent(event)
+
+  internal fun addInlineRoot(root: ViewGroup) {
+    addView(root, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+  }
 }