@apexnative/navigation 1.0.0-alpha.1 → 1.0.0-alpha.10

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/stack/topbar/TopBarPresenter.kt

@@ -7,17 +7,13 @@ import android.app.Activity
 import android.content.Context
 import android.content.pm.ApplicationInfo
 import android.graphics.Color
-import android.graphics.drawable.BitmapDrawable
 import android.graphics.drawable.Drawable
-import android.view.Menu
-import android.view.MenuItem
 import android.view.MotionEvent
 import android.view.View
 import android.view.ViewGroup
 import android.view.animation.LinearInterpolator
 import android.view.animation.PathInterpolator
 import android.widget.FrameLayout
-import android.widget.ImageView
 import androidx.appcompat.content.res.AppCompatResources
 import androidx.core.graphics.drawable.DrawableCompat
 import androidx.core.view.WindowInsetsCompat
@@ -41,7 +37,6 @@ import dev.apexnative.navigation.utils.ImageLoader
 import dev.apexnative.navigation.utils.ImageLoadingListenerAdapter
 import dev.apexnative.navigation.utils.TestIds
 import dev.apexnative.navigation.utils.UiUtils
-import dev.apexnative.navigation.viewcontrollers.component.ScreenReadiness
 import dev.apexnative.navigation.viewcontrollers.navigator.BackCallbackState
 import dev.apexnative.navigation.viewcontrollers.stack.StackDisplay
 import dev.apexnative.navigation.viewcontrollers.stack.StackDisplay.BarMotion
@@ -49,7 +44,9 @@ import dev.apexnative.navigation.viewcontrollers.stack.search.StackSearchPresent
 import dev.apexnative.navigation.viewcontrollers.viewcontroller.IReactView
 import dev.apexnative.navigation.viewcontrollers.viewcontroller.ScrollEventListener
 import dev.apexnative.navigation.viewcontrollers.viewcontroller.ViewController
+import dev.apexnative.navigation.views.animations.AnimationRules
 import dev.apexnative.navigation.views.animations.SideAnimator
+import dev.apexnative.navigation.views.animations.FadeThrough
 import dev.apexnative.navigation.views.animations.SystemTransition
 import dev.apexnative.navigation.views.component.ComponentLayout
 import dev.apexnative.navigation.views.stack.StackLayout
@@ -58,8 +55,10 @@ import dev.apexnative.navigation.views.stack.topbar.TitleBar
 import dev.apexnative.navigation.views.stack.topbar.TopBar
 import dev.apexnative.navigation.views.stack.topbar.TopBarDefaults
 import dev.apexnative.navigation.views.stack.topbar.titlebar.BarButtonComponentCell
+import dev.apexnative.navigation.views.stack.topbar.titlebar.BarMenu
 import dev.apexnative.navigation.views.stack.topbar.titlebar.ButtonBar
 import dev.apexnative.navigation.views.stack.topbar.titlebar.IconBackgroundDrawable
+import kotlin.math.roundToInt
 
 /**
  * What the bar of one stack shows: the options of the screen on top of the stack, resolved (a pair's options screen),
@@ -123,8 +122,15 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
     private var largeTitleShown = false
     private var followed: ScrollEventListener? = null
     private var rowTarget: RowTarget? = null
+    // The large title opening with a push from a screen without one; none at rest.
+    private var largeTitleOpening: ValueAnimator? = null
     // The picture of the part under the row in a leaving screen's overlay: the screen and the picture.
     private var underRow: Pair<ViewController<*>, Drawable>? = null
+    // The bar goes with the screens of a transition of the stack's own, and the screen that leaves with its picture.
+    private var travelling = false
+    private var travelLeaving: ViewController<*>? = null
+    // The bar hides as it shows now, and the options of the screen it hides for wait until it is gone.
+    private var waitsForHide = false
 
     private enum class Part { Look, Title, Left, Right, Back, LargeTitle, Visible, TestId }
 
@@ -135,9 +141,9 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
         this.layout = layout
         val bar = layout.topBar
         this.bar = bar
-        leftButtons = ButtonBar(bar.leftButtonBar, true, ::loadIcon, Buttons())
-        rightButtons = ButtonBar(bar.rightButtonBar, false, ::loadIcon, Buttons())
-        visibility = TopBarVisibility(VisibilityTarget(bar) { collapse?.reset() })
+        leftButtons = ButtonBar(bar.leftButtonBar, ::loadIcon, Buttons())
+        rightButtons = ButtonBar(bar.rightButtonBar, ::loadIcon, Buttons())
+        visibility = TopBarVisibility(VisibilityTarget(bar) { collapse?.reset() }, ::hidden)
         rowTransition = BarRowTransition(RowTarget(bar).also { rowTarget = it })
         collapse = TopBarCollapseBehavior(bar)
         bar.leftButtonBar.setNavigationOnClickListener { host.backPressed() }
@@ -160,12 +166,16 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
      * The stack's current child changes to [incoming] ([motion]: the default transition that brings it, none at once):
      * the row's picture is taken before the bar takes the new screen's options. A push from a large title to a screen
      * without one makes the bar lower at once: the part under the row rides with the leaving screen as a picture in its
-     * overlay, and the row's picture holds the row only. So does a pop back to a screen whose large title is collapsed.
+     * overlay, and the row's picture holds the row only. So does a pop or a fade through (`setStackRoot`) to a screen
+     * without a large title or with its large title collapsed: a picture as tall as the large title would hold the bar
+     * at its height to the end. With a transition of the stack's own ([travel]) the bar goes with the screens instead
+     * ([beginTravel]).
      */
     fun beginRowTransition(
         motion: BarMotion?,
         incoming: ViewController<*>?,
         visibility: StackDisplay.BarVisibility = StackDisplay.BarVisibility.AT_ONCE,
+        travel: StackDisplay.BarTravel? = null,
     ) {
         this.motion = motion
         this.visibilityChange = visibility
@@ -174,18 +184,82 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
         val bar = bar
         val leaving = shownEntry
         val lowers = bar != null && bar.isLargeTitleShown && incoming != null && leaving != null &&
+            !hidesMoving(host.resolvedOf(incoming), visibility, travel != null) &&
             lowersBar(motion, incoming, host.resolvedOf(incoming))
         rowTarget?.withLargeTitle = !lowers
         if (lowers) pictureUnderRow(bar, leaving)
         rowTransition?.begin(motion)
+        endTravel()
+        if (travel != null && bar != null && incoming != null) beginTravel(bar, leaving, incoming, travel, visibility)
+    }
+
+    // Whether a screen with [options] hides the bar, shown now, by a move of [change]: a slide, or the transition's
+    // side. The bar then leaves as it shows, its large title too (`applyAll`); while it goes with the screens of a
+    // transition of the stack's own ([travels]) only a side of its own moves it.
+    private fun hidesMoving(options: Options, change: StackDisplay.BarVisibility, travels: Boolean): Boolean {
+        val exit = change.side?.exit
+        return options.topBar.visible.isFalse && !options.topBar.animate.isFalse && change.animated &&
+            !AnimationRules.isTurnedOff(exit) && (!travels || AnimationRules.barSideGiven(exit))
     }
 
     /** The transition that brought the current child ended: the row at rest, the picture under it gone. */
     fun endRowTransition() {
+        // A large title still opening is open now.
+        largeTitleOpening?.let {
+            largeTitleOpening = null
+            it.end()
+        }
         motion = null
         visibilityChange = StackDisplay.BarVisibility.AT_ONCE
         rowTransition?.end()
         dropPictureUnderRow()
+        endTravel()
+    }
+
+    /**
+     * The bar goes with the screens of a transition of the stack's own, as each screen's bar would: a picture of the
+     * bar as it is goes with [leaving], and the bar, which takes [incoming]'s options next, is drawn flat as [incoming]
+     * moves — under [leaving] on a pop ([StackDisplay.BarTravel.Back]) (`StackLayout.barTravels`). No picture when the
+     * bar doesn't show. Nothing travels when the new top hides the bar by a side of its own
+     * (`animations.*.topBar.exit`), which plays instead, or when the bar can't be recorded (a `HARDWARE` bitmap in it
+     * on Android 8): the bar takes the options in its place.
+     */
+    private fun beginTravel(
+        bar: TopBar,
+        leaving: ViewController<*>?,
+        incoming: ViewController<*>,
+        direction: StackDisplay.BarTravel,
+        visibility: StackDisplay.BarVisibility,
+    ) {
+        val layout = layout ?: return
+        val screen = incoming.peekView()?.takeIf(layout::holds) ?: return
+        val leavingView = leaving?.peekView()?.takeIf(layout::holds)
+        // The new top hides the bar by a side of its own: the side plays on the bar in its place instead.
+        if (host.resolvedOf(incoming).topBar.visible.isFalse && AnimationRules.barSideGiven(visibility.side?.exit)) return
+        val shows = bar.visibility == View.VISIBLE && this.visibility?.isHidden != true
+        val picture = if (shows && leavingView != null) pictureOfBar(bar) ?: return else null
+        travelling = true
+        travelLeaving = leaving.takeIf { picture != null }
+        // Flat: with an elevation the renderer would draw the bar over every screen and out of its alpha layer.
+        bar.isFlat = true
+        layout.barTravels(screen, leavingView, picture, direction == StackDisplay.BarTravel.Back)
+    }
+
+    // The bar's picture where the bar is in the stack, its moves counted.
+    private fun pictureOfBar(bar: TopBar): Drawable? {
+        val picture = bar.picture() ?: return null
+        val left = (bar.left + bar.translationX).roundToInt()
+        val top = (bar.top + bar.translationY).roundToInt()
+        return picture.apply { setBounds(left, top, left + intrinsicWidth, top + intrinsicHeight) }
+    }
+
+    // The bar's travel ends: the picture goes, the bar is drawn in its place again with its shadow.
+    private fun endTravel() {
+        if (!travelling) return
+        travelling = false
+        travelLeaving = null
+        bar?.isFlat = false
+        layout?.endBarTravel()
     }
 
     /**
@@ -204,8 +278,9 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
             keys.clear()
         }
         shownEntry = entry
-        // The screen that left with the picture under the row shows again: the picture goes.
+        // The screen that left with the picture under the row, or of the bar, shows again: the picture goes.
         if (underRow?.first === entry) dropPictureUnderRow()
+        if (travelLeaving === entry) endTravel()
         val options = host.resolvedOf(entry)
         applyAll(bar, entry, screen, options, merge = false)
     }
@@ -218,6 +293,8 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
         val bar = bar ?: return
         val screen = host.optionsScreen(entry)
         if (screen !== shownScreen) return apply(entry)
+        // An open menu has the colors of before.
+        if (delta.topBar.menuBackgroundColor.hasValue() || delta.topBar.menuTextColor.hasValue()) closeMenus()
         val options = host.resolvedOf(entry)
         applyAll(bar, entry, screen, options, merge = true, delta = delta)
     }
@@ -227,6 +304,8 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
      * now.
      */
     fun repaint(entry: ViewController<*>?) {
+        // An open menu has the old colors: it closes.
+        closeMenus()
         keys.clear()
         apply(entry)
         val options = entry?.let(host::resolvedOf) ?: return
@@ -239,6 +318,7 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
      * of the bar (the search) applies again.
      */
     fun onInsets() {
+        if (waitsForHide) return
         val bar = bar ?: return
         val entry = shownEntry ?: return
         val screen = shownScreen ?: return
@@ -313,6 +393,12 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
 
     /** [screen] is destroyed: its components and its search go. */
     fun screenDestroyed(screen: ViewController<*>, entryView: View?) {
+        // The bar may still show the components of the screen that goes: it is gone at once, with the options it held
+        // back, before they go; none when they are of the screen that goes.
+        if (waitsForHide) {
+            if (screen === shownScreen) waitsForHide = false
+            visibility?.hide(animated = false)
+        }
         if (screen === shownScreen) {
             shownScreen = null
             shownEntry = null
@@ -333,7 +419,9 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
     /** The stack is destroyed: every component stops. */
     fun destroy() {
         rowTransition?.end()
+        endTravel()
         largeTitleFollower.stop()
+        stopLargeTitleOpening()
         collapse?.disableCollapse()
         components.destroyAll()
         cells.clear()
@@ -369,6 +457,9 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
         )
     }
 
+    /** Whether the bar shows [entry]: its parts are applied, so its place in the layout is [entry]'s. */
+    fun shows(entry: ViewController<*>): Boolean = entry === shownEntry
+
     /** The height of the search under the row of [entry] when it is the screen the bar shows; 0 otherwise. */
     fun searchHeightOf(entry: ViewController<*>): Int =
         if (entry === shownEntry) bar?.searchAreaHeight ?: 0 else 0
@@ -394,6 +485,26 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
         merge: Boolean,
         delta: Options? = null,
     ) {
+        // A screen that hides the bar: the bar leaves as it shows, its look, title and buttons those of the screen
+        // before, and takes this screen's options once it is gone. Taken first, they would paint the leaving bar (the
+        // default color over a bar that was transparent).
+        val waited = waitsForHide
+        waitsForHide = false
+        if (options.topBar.visible.isFalse && (!merge || waited)) {
+            applyVisibility(options, merge)
+            waitsForHide = visibility?.isHiding == true
+            if (waitsForHide) {
+                // The list of the screen before no longer moves the bar: a move of it would stop the hide.
+                collapse?.disableCollapse(reset = false)
+                return
+            }
+        }
+        // Shown again by a merge before it was gone: none of this screen's options are on the bar yet. It shows as a
+        // merge shows it, by `animate`, not by the transition's side.
+        if (merge && waited) {
+            visibilityChange = StackDisplay.BarVisibility(true, null)
+            return applyAll(bar, entry, screen, options, merge = false)
+        }
         applyLook(bar, entry, options)
         applyTitle(bar, screen, options)
         // The search first: its magnifier takes a place among the right buttons. It gets a copy of the group: it
@@ -511,16 +622,15 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
             keys[Part.Left] = leftKey
             reportWithoutId(topBar.buttons.left, "leftButtons")
             leftButtons?.set(
-                left.map { button(screen, it, roots) },
+                ButtonPlaces.line(left, left = true).map { button(screen, it, roots) },
                 emptyList(),
                 null,
                 merge && topBar.animateLeftButtons.isTrue,
             )
         }
         val overflow = topBar.overflowMenu?.takeIf { it.items.isNotEmpty() }
-        val menu = bar.rightButtonBar.menu
         search.applyMagnifier()
-        val taken = (0 until menu.size()).count { menu.getItem(it).itemId != Menu.NONE }
+        val taken = if (bar.rightButtonBar.trailingView != null) 1 else 0
         val configuration = context.resources.configuration
         val plan = ButtonPlaces.plan(
             right.map { ButtonPlaces.Button(ButtonPlaces.priorityOf(it.priority.get(null)), it.pinned.isTrue) },
@@ -541,12 +651,11 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
             keys[Part.Right] = rightKey
             reportWithoutId(topBar.buttons.right, "rightButtons")
             rightButtons?.set(
-                plan.inBar.map { button(screen, right[it], roots) },
+                ButtonPlaces.line(plan.inBar, left = false).map { button(screen, right[it], roots) },
                 plan.inOverflow.map { button(screen, right[it], roots) },
                 overflow,
                 merge && topBar.animateRightButtons.isTrue,
             )
-            search.applyMagnifier()
             rightButtons?.setOverflowColor(overflowColor)
         }
     }
@@ -568,9 +677,9 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
         ).joinToString()
         if (keys[Part.Back] == key) return
         keys[Part.Back] = key
-        val toolbar = bar.leftButtonBar
+        val row = bar.leftButtonBar
         if (!shown) {
-            toolbar.navigationIcon = null
+            row.navigationIcon = null
             return
         }
         val own = back.icon.get(null)?.let(::loadIcon)?.mutate()
@@ -597,19 +706,13 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
                 dp(background.height.get(0.0)),
             )
         } ?: icon
-        toolbar.navigationIcon = drawable
-        // Taking the icon, the navigation button gives it its own direction, which is stale while the button is new
-        // or the bar's direction has just changed; the toolbar corrects it only after the icon was drawn. So the arrow
-        // gets the bar's direction at once, on the drawable the button shows; a background passes it to the arrow.
-        val held = toolbar.navigationIcon ?: drawable
-        DrawableCompat.setLayoutDirection(held, arrowDirection)
-        if (held !== drawable) DrawableCompat.setLayoutDirection(drawable, arrowDirection)
-        toolbar.navigationContentDescription = label
-        // The toolbar uses its navigation button again from screen to screen: its id is set every time.
-        for (index in 0 until toolbar.childCount) {
-            val child = toolbar.getChildAt(index)
-            if ((child as? ImageView)?.drawable === held) TestIds.apply(child, testId)
-        }
+        row.navigationIcon = drawable
+        // Taking the icon, the back button gives it its own direction, which is stale while the button is new or the
+        // bar's direction has just changed; the button corrects it only once its direction is resolved again. So the
+        // arrow gets the bar's direction at once; a background passes it to the arrow.
+        DrawableCompat.setLayoutDirection(drawable, arrowDirection)
+        row.navigationContentDescription = label
+        row.navigationButton?.let { TestIds.apply(it, testId) }
     }
 
     // The background (`topBar.background.component`).
@@ -632,11 +735,13 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
     }
 
     // Whether [incoming] shows less of the bar under the row than the large title now: a push to a screen without a
-    // large title, or a pop back to one whose large title is collapsed. The lower bar would cut the row's picture.
+    // large title, or a pop or a fade through to one without a large title or with its large title collapsed. The lower
+    // bar would cut the row's picture.
     private fun lowersBar(motion: BarMotion?, incoming: ViewController<*>, options: Options): Boolean = when (motion) {
         BarMotion.Push -> !largeTitleShownFor(incoming, options)
-        BarMotion.Pop -> largeTitleShownFor(incoming, options) && collapseOf(incoming, options) > 0f
-        else -> false
+        BarMotion.Pop, BarMotion.FadeThrough ->
+            !largeTitleShownFor(incoming, options) || collapseOf(incoming, options) > 0f
+        null -> false
     }
 
     // How far [entry]'s large title is collapsed as it shows: by the offset its list had last, unless it doesn't follow
@@ -646,15 +751,14 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
 
     private fun pictureUnderRow(bar: TopBar, leaving: ViewController<*>) {
         val view = leaving.peekView() ?: return
-        val (bitmap, top) = bar.pictureUnderRow() ?: return
+        val (picture, top) = bar.pictureUnderRow() ?: return
         val barPlace = IntArray(2)
         val viewPlace = IntArray(2)
         bar.getLocationInWindow(barPlace)
         view.getLocationInWindow(viewPlace)
-        val picture = BitmapDrawable(bar.resources, bitmap)
         val left = barPlace[0] - viewPlace[0]
         val y = barPlace[1] + top - viewPlace[1]
-        picture.setBounds(left, y, left + bitmap.width, y + bitmap.height)
+        picture.setBounds(left, y, left + picture.intrinsicWidth, y + picture.intrinsicHeight)
         view.overlay.add(picture)
         underRow = leaving to picture
     }
@@ -674,6 +778,11 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
             large.fontSize.get(null), fontKey(large.font), large.collapseOnScroll.get(null), testId).joinToString()
         if (keys[Part.LargeTitle] == key) return
         keys[Part.LargeTitle] = key
+        // The default push or fade through from a screen without a large title opens it with the screens, on a bar that
+        // shows at rest: the bar's show and its hide on scroll move the same translation.
+        val opening = motion.takeIf { it == BarMotion.Push || it == BarMotion.FadeThrough }
+        val opens = shown && !largeTitleShown && bar.visibility == View.VISIBLE && bar.translationY == 0f
+        stopLargeTitleOpening()
         largeTitleShown = shown
         bar.setLargeTitleShown(shown)
         largeTitleFollower.stop()
@@ -691,9 +800,49 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
         // same frame: back to the screen, after light or dark changed, after a merge.
         if (large.collapseOnScroll.isFalse) scrollOf(entry)?.forgetOffset()
         largeTitleFollower.collapse(collapseOf(entry, options))
+        if (opens) opening?.let { openLargeTitle(bar, collapseOf(entry, options), it) }
         if (!large.collapseOnScroll.isFalse) scrollOf(entry)?.let(largeTitleFollower::follow)
     }
 
+    // The bar grows with the screens' [motion], on its curve and in its time, from the row's height to the large title
+    // as the screen's list left it: the large title comes out from under the row as it does when the list scrolls
+    // back. No frame shows the tall bar before the screens move.
+    private fun openLargeTitle(bar: TopBar, offset: Float, motion: BarMotion) {
+        val range = UiUtils.dpToPx(bar.context, LargeTitleView.HEIGHT)
+        val to = LargeTitleCollapse.shift(offset, range)
+        if (to >= range) return
+        bar.setLargeTitleCollapse(range.toInt())
+        largeTitleOpening = ValueAnimator.ofFloat(range, to).apply {
+            duration = if (motion == BarMotion.FadeThrough) FadeThrough.DURATION else SystemTransition.DURATION
+            interpolator = if (motion == BarMotion.FadeThrough) FadeThrough.CURVE else SystemTransition.CURVE
+            addUpdateListener { bar.setLargeTitleCollapse((it.animatedValue as Float).toInt()) }
+            addListener(object : AnimatorListenerAdapter() {
+                override fun onAnimationEnd(animation: Animator) {
+                    if (largeTitleOpening === animation) largeTitleOpening = null
+                }
+            })
+            start()
+        }
+    }
+
+    // Stopped where it is: what applies next sets the large title.
+    private fun stopLargeTitleOpening() {
+        val opening = largeTitleOpening ?: return
+        largeTitleOpening = null
+        opening.removeAllUpdateListeners()
+        opening.cancel()
+    }
+
+    // A hide that held the options back ended: the bar, gone now, takes them.
+    private fun hidden() {
+        if (!waitsForHide) return
+        waitsForHide = false
+        val bar = bar ?: return
+        val entry = shownEntry ?: return
+        val screen = shownScreen ?: return
+        applyAll(bar, entry, screen, host.resolvedOf(entry), merge = false)
+    }
+
     // Shown or hidden: with the transition by its side, or by `animate` in a merge.
     private fun applyVisibility(options: Options, merge: Boolean) {
         val visible = !options.topBar.visible.isFalse
@@ -701,7 +850,10 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
         if (keys[Part.Visible] == key) return
         keys[Part.Visible] = key
         val change = visibilityChange
-        val animated = !options.topBar.animate.isFalse && (merge || change.animated)
+        // While the bar goes with the screens it shows or hides at once, unless its side of its own plays.
+        val travels = !merge && travelling &&
+            !AnimationRules.barSideGiven(if (visible) change.side?.enter else change.side?.exit)
+        val animated = !options.topBar.animate.isFalse && (merge || change.animated) && !travels
         visibility?.apply(visible, animated, if (merge) null else change.side)
     }
 
@@ -824,14 +976,10 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
         return resolved.component
     }
 
-    private fun makeRoot(componentId: String, name: String): IReactView {
-        // A component of the bar renders at once, without waiting for its layout, from before its surface starts.
-        ScreenReadiness.setRendersAtOnce(componentId, true)
-        // Another live root has this id (a component of the stack's options on two screens): what it rendered isn't
-        // this root's, which answers by its own render.
-        if (BarComponents.isLive(componentId)) ScreenReadiness.forgetRender(componentId)
-        return ReactView(activity, componentId, name)
-    }
+    // A component of the bar renders at once, without waiting for its layout. Another live root may show the same id
+    // (a component of the stack's options on two screens): each answers by the render of its own surface.
+    private fun makeRoot(componentId: String, name: String): IReactView =
+        ReactView(activity, componentId, name, rendersAtOnce = true)
 
     private fun loadIcon(uri: String): Drawable? {
         var loaded: Drawable? = null
@@ -881,7 +1029,7 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
         else -> TitleBar.Alignment.Start
     }
 
-    private fun dp(value: Double): Int = UiUtils.dpToPx(activity, value.toFloat()).toInt()
+    private fun dp(value: Double): Int = UiUtils.dpToPx(activity, value.toFloat()).roundToInt()
 
     // What makes a button's look, as a text: the parts that differ make it apply again.
     private fun buttonKey(context: Context, button: ButtonOptions): String = listOf(
@@ -896,8 +1044,16 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
         button.priority.get(null),
     ).joinToString("|")
 
-    private fun menuKey(menu: ButtonMenuOptions): String =
-        menu.items.joinToString("|") { "${it.title}:${it.icon}:${it.testID}" } + menu.testID
+    // What the overflow menu shows, its submenus and checks with it: a check the app moves, or one of the user layer
+    // that leaves, fills the menu again.
+    private fun menuKey(menu: ButtonMenuOptions): String = elementsKey(menu.items) + menu.testID
+
+    private fun elementsKey(elements: List<ButtonMenuOptions.Element>): String = elements.joinToString("|") {
+        "${it.title}:${it.icon}:${it.testID}" + when (it) {
+            is ButtonMenuOptions.Item -> ":${it.checked}:${it.disabled}"
+            is ButtonMenuOptions.Submenu -> "[${elementsKey(it.items)}]"
+        }
+    }
 
     private fun fontKey(font: FontOptions): String =
         listOf(font.fontFamily, font.fontStyle, font.fontWeight).joinToString { it.get(null).toString() }
@@ -922,11 +1078,16 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
             return (buttons.left.orEmpty() + buttons.right.orEmpty()).firstOrNull { it.id.get(null) == buttonId }?.menu
         }
 
-        // The search's magnifier, the one item of the bar with an id of its own: `<topBar.searchBar.testID>.button`.
-        override fun testIdOf(item: MenuItem): String? {
-            if (item.itemId == Menu.NONE) return null
-            val entry = shownEntry ?: return null
-            return host.resolvedOf(entry).topBar.searchBar.testID.get(null)?.let { "$it.button" }
+        // Read as a menu opens, so they follow light and dark mode: `menuBackgroundColor`, else the bar's color as it
+        // shows (none when it lets something through), and then `menuTextColor` or else the title's color, the pair
+        // the bar shows; with neither, the theme's.
+        override fun menuColors(): BarMenu.Colors {
+            val topBar = shownEntry?.let(host::resolvedOf)?.topBar ?: return BarMenu.Colors(null, null)
+            val context = bar?.context ?: activity
+            val text = topBar.menuTextColor.get(context, null)
+            topBar.menuBackgroundColor.get(context, null)?.let { return BarMenu.Colors(it, text) }
+            val barColor = bar?.barColor?.takeIf { Color.alpha(it) == OPAQUE } ?: return BarMenu.Colors(null, text)
+            return BarMenu.Colors(barColor, text ?: topBar.title.color.get(context, null))
         }
     }
 
@@ -959,8 +1120,11 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
                 if (large) View.IMPORTANT_FOR_ACCESSIBILITY_NO else View.IMPORTANT_FOR_ACCESSIBILITY_YES
         }
 
+        // The list scrolled while the large title opens: it follows the list from there.
         override fun onScrollOffset(offsetY: Float) {
-            if (largeTitleShown) collapse(offsetY)
+            if (!largeTitleShown) return
+            stopLargeTitleOpening()
+            collapse(offsetY)
         }
 
         override fun onScrollUp(nextTranslation: Float) = Unit
@@ -1065,6 +1229,7 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
 
     private companion object {
         const val DEFAULT_HEIGHT_DP = 64.0
+        const val OPAQUE = 255
         const val DEFAULT_TITLE_SP = 22.0
         const val DEFAULT_SUBTITLE_SP = 14.0
         const val CENTER = "center"

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/stack/topbar/TopBarVisibility.kt

@@ -10,9 +10,10 @@ import dev.apexnative.navigation.views.animations.AnimationRules
  * stack its side (`animations.*.topBar`) plays instead — its `exit` hides, its `enter` shows; `enabled: false` shows or
  * hides at once. A show cancels a running hide and a hide a running show, each with its own token, so `visible: false`
  * then `true` leaves the bar shown; a motion cancelled leaves the bar at rest; a bar shown again stands in its place
- * with its row seen (the hide on scroll's shift and fade reset). Main thread only.
+ * with its row seen (the hide on scroll's shift and fade reset). [onHidden] runs once a hide has made the bar `GONE`.
+ * Main thread only.
  */
-internal class TopBarVisibility(private val target: Target) {
+internal class TopBarVisibility(private val target: Target, private val onHidden: () -> Unit = {}) {
     /** What moves: the bar's view, or the unit tests' fake. */
     interface Target {
         /** How far up the bar goes to hide: its height and the room over it, in pixels. */
@@ -45,6 +46,10 @@ internal class TopBarVisibility(private val target: Target) {
     val isHidden: Boolean
         get() = hidden
 
+    /** The bar is on its way out: a hide moves it and it still shows. */
+    val isHiding: Boolean
+        get() = hidden && sliding != null
+
     /** Shows the bar: by [side] when it plays, sliding down when [animated], else at once. */
     fun show(animated: Boolean, side: TopBarAnimationOptions? = null) {
         val wasHidden = hidden
@@ -84,6 +89,7 @@ internal class TopBarVisibility(private val target: Target) {
         if (!moves || target.isGone) {
             target.translationY = 0f
             target.isGone = true
+            onHidden()
             return
         }
         val token = Any()
@@ -93,6 +99,7 @@ internal class TopBarVisibility(private val target: Target) {
                 settle()
                 target.isGone = true
                 target.translationY = 0f
+                onHidden()
             }
         }
         val own = side?.takeIf { AnimationRules.sidePlays(it) }

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/viewcontroller/ScrollEventListener.kt

@@ -13,8 +13,8 @@ import java.lang.ref.WeakReference
  * tag) is in the screen, found once per tag —, not the horizontal ones, nor those of a modal, an overlay or another
  * screen; a slot screen's lists are in its container too. While a list is dragged, each follower gets the drag as a
  * translation to follow; when the drag ends, the way to settle; at every scroll event, the drags' and the inertia's,
- * the offset. It listens to React Native's events only while it has followers; without React Native's event dispatcher
- * (around a reload) it waits and listens once there is one. Released with the screen. Main thread only.
+ * the offset. It listens to React Native's scroll views ([ScrollEvents]) only while it has followers and its screen's
+ * view. Released with the screen. Main thread only.
  */
 class ScrollEventListener() {
     /** Follows the content while it is dragged. */
@@ -105,15 +105,12 @@ class ScrollEventListener() {
     }
 
     /**
-     * Listens to React Native's scroll events when followers wait for them and it doesn't yet: after a reload there may
-     * be no event dispatcher at first: then it is asked again once React Native has one, and as the screen joins a
-     * window.
+     * Listens to React Native's scroll views when followers wait for them and it doesn't yet, once it has the screen's
+     * view to tell its own lists by; asked again as the screen joins a window.
      */
     internal fun attachIfNeeded() {
-        if (released || stopListening != null || registrations.isEmpty()) return
-        val context = scope?.get()?.context ?: return
-        stopListening = ScrollEvents.listen(context, ::onScrollEvent)
-        if (stopListening == null) ScrollEvents.waitForDispatcher(this)
+        if (released || stopListening != null || registrations.isEmpty() || scope?.get() == null) return
+        stopListening = ScrollEvents.listen(::onScrollEvent)
     }
 
     /** The screen is destroyed: no follower hears it any more. */