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

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/stack/fab/FabPresenter.kt

@@ -1,9 +1,16 @@
 package dev.apexnative.navigation.viewcontrollers.stack.fab
 
+import android.animation.Animator
+import android.animation.AnimatorListenerAdapter
+import android.animation.AnimatorSet
+import android.animation.ObjectAnimator
+import android.animation.PropertyValuesHolder
 import android.app.Activity
 import android.view.Gravity
 import android.view.View
 import android.view.ViewGroup
+import android.view.animation.AccelerateDecelerateInterpolator
+import android.view.animation.LinearInterpolator
 import androidx.coordinatorlayout.widget.CoordinatorLayout
 import androidx.core.view.WindowInsetsCompat
 import dev.apexnative.navigation.options.FabOptions
@@ -11,16 +18,20 @@ import dev.apexnative.navigation.react.events.AppearanceDispatcher
 import dev.apexnative.navigation.utils.TestIds
 import dev.apexnative.navigation.viewcontrollers.viewcontroller.ScrollEventListener
 import dev.apexnative.navigation.viewcontrollers.viewcontroller.ViewController
+import dev.apexnative.navigation.views.animations.FadeThrough
+import dev.apexnative.navigation.views.animations.SystemTransition
 import dev.apexnative.navigation.views.stack.StackLayout
 import dev.apexnative.navigation.views.stack.fab.Fab
+import dev.apexnative.navigation.views.stack.fab.FabCopy
 import dev.apexnative.navigation.views.stack.fab.FabMenu
 
 /**
  * The FAB of one stack (`fab.*`), over the module's `Fab` and `FabMenu`: one FAB or one menu at a time, from the
  * resolved `fab` of the screen on top (its options over the stack's, its parents' and the defaults). It follows the top
- * at the end of each transition and the merges of `fab` into it; a press sends `ANN.NavigationButtonPressed` with the
- * screen whose options showed it, an action with its own id. Its views are children of the stack's view, over the
- * screens and the bar. Main thread only.
+ * from the start of each transition, going with the screens by [FabMotion], and the merges of `fab` into it; a press
+ * sends `ANN.NavigationButtonPressed` with the screen whose options showed it, an action with its own id. Its views are
+ * children of the stack's view, over the screens and the bar; a FAB that leaves goes as a copy ([FabCopy]). Main
+ * thread only.
  */
 internal class FabPresenter(
     private val activity: Activity,
@@ -38,38 +49,75 @@ internal class FabPresenter(
     var source: ViewController<*>? = null
         private set
 
+    // The ride of the FAB that shows as it arrives; none at rest.
+    private var ride: Animator? = null
+    // The copies of the FABs that leave, each with its ride.
+    private val copies = LinkedHashMap<FabCopy, Animator>()
+
+    // The top's FAB while a back gesture's preview shows the screen under the top with its own: out of the stack, as
+    // it was (hidden by the scroll, say).
+    private class Aside(
+        val fab: Fab?,
+        val menu: FabMenu?,
+        val shownId: String?,
+        var source: ViewController<*>?,
+        val alignStart: Boolean,
+    )
+
+    private var aside: Aside? = null
+
     private val view: View?
         get() = menu ?: fab
 
+    /** The view of the FAB or of its menu that shows; none. */
+    val shownView: View?
+        get() = view
+
     /**
-     * The screen on top became [source], with its resolved [options]: the same id updates the FAB that shows and grows
-     * it again, another id replaces it, none takes it away; the scroll of [scroll] hides it with `hideOnScroll`.
-     * Nothing when [source] already shows it.
+     * The screen on top became [source], with its resolved [options], in a transition that goes by [move]: the same id
+     * updates the FAB that shows, where it stays as it is, another id replaces it, none takes it away — the new FAB
+     * arrives and a copy of the old one leaves by [move]; the scroll of [scroll] hides it with `hideOnScroll`. An open
+     * menu closes. The copies of an older transition go, and with [FabMotion.Move.AtOnce] a FAB still riding comes to
+     * rest. Nothing when [source] already shows it.
      */
-    fun showFor(layout: StackLayout, source: ViewController<*>?, options: FabOptions, scroll: ScrollEventListener?) {
+    fun showFor(
+        layout: StackLayout,
+        source: ViewController<*>?,
+        options: FabOptions,
+        scroll: ScrollEventListener?,
+        move: FabMotion.Move = FabMotion.Move.Swap,
+    ) {
+        // At once, what still moves comes to rest, also when the top stays (a failed push).
+        if (move == FabMotion.Move.AtOnce) {
+            dropCopies()
+            stopRide(rest = true)
+        }
         if (source === this.source && this.layout === layout) return
         this.layout = layout
-        disableCollapse()
+        dropCopies()
         this.source = source
         when (FabPlan.step(shownId, menu != null, options)) {
             FabPlan.Step.None -> Unit
-            FabPlan.Step.Remove -> remove()
-            FabPlan.Step.Create -> create(layout, options, scroll)
+            FabPlan.Step.Remove -> leave(layout, move)
+            FabPlan.Step.Create -> {
+                create(layout, options, scroll)
+                arrive(move)
+            }
             FabPlan.Step.Replace -> {
-                remove()
+                leave(layout, move)
                 create(layout, options, scroll)
+                arrive(move)
             }
             FabPlan.Step.Update -> {
+                disableCollapse()
+                menu?.close()
                 apply(options, scroll)
                 // A new top whose options don't hide it shows it, even where the screen before hid it.
                 if (!options.visible.isFalse) {
                     fab?.show()
                     menu?.show()
                 }
-                view?.let {
-                    it.bringToFront()
-                    grow(it)
-                }
+                view?.bringToFront()
             }
         }
     }
@@ -83,11 +131,15 @@ internal class FabPresenter(
         this.source = source
         when (FabPlan.step(shownId, menu != null, options)) {
             FabPlan.Step.None -> Unit
-            FabPlan.Step.Remove -> remove()
-            FabPlan.Step.Create -> create(layout, options, scroll)
+            FabPlan.Step.Remove -> leave(layout, FabMotion.Move.Swap)
+            FabPlan.Step.Create -> {
+                create(layout, options, scroll)
+                arrive(FabMotion.Move.Swap)
+            }
             FabPlan.Step.Replace -> {
-                remove()
+                leave(layout, FabMotion.Move.Swap)
                 create(layout, options, scroll)
+                arrive(FabMotion.Move.Swap)
             }
             FabPlan.Step.Update -> apply(options, scroll)
         }
@@ -130,13 +182,57 @@ internal class FabPresenter(
         view.layoutParams = params
     }
 
+    /**
+     * A back gesture's preview shows the screen under the top: the FAB that shows goes aside, out of the stack but as it
+     * is, its menu closing, until [bringBack] or [dropAside]; the screen's own FAB shows next ([showFor]).
+     */
+    fun setAside() {
+        if (aside != null) return
+        dropCopies()
+        stopRide(rest = true)
+        menu?.close()
+        view?.let { (it.parent as? ViewGroup)?.removeView(it) }
+        aside = Aside(fab, menu, shownId, source, alignStart)
+        fab = null
+        menu = null
+        shownId = null
+        source = null
+    }
+
+    /** The gesture was cancelled: the FAB the preview showed goes, and the one set aside is back as it was. */
+    fun bringBack() {
+        val kept = aside ?: return
+        aside = null
+        val layout = layout ?: return discard(kept)
+        leave(layout, FabMotion.Move.AtOnce)
+        fab = kept.fab
+        menu = kept.menu
+        shownId = kept.shownId
+        source = kept.source
+        alignStart = kept.alignStart
+        view?.let { layout.addOverAll(it, it.layoutParams as? CoordinatorLayout.LayoutParams ?: params()) }
+        place()
+    }
+
+    /** The gesture was released: the FAB set aside goes with the top that leaves. */
+    fun dropAside() {
+        val kept = aside ?: return
+        aside = null
+        discard(kept)
+    }
+
     /** [node] was destroyed: a FAB it showed sends nothing more. */
     fun forget(node: ViewController<*>) {
         if (source === node) source = null
+        aside?.let { if (it.source === node) it.source = null }
     }
 
-    /** The stack goes: the FAB and its menu go at once, the scrim first. */
+    /** The stack goes: the FAB and its menu go at once, the scrim first, and the copies that leave. */
     fun destroy() {
+        aside?.let(::discard)
+        aside = null
+        dropCopies()
+        stopRide(rest = false)
         disableCollapse()
         menu?.let {
             it.removeScrim()
@@ -153,7 +249,7 @@ internal class FabPresenter(
     private fun create(layout: StackLayout, options: FabOptions, scroll: ScrollEventListener?) {
         val id = FabPlan.idOf(options) ?: return
         shownId = id
-        val params = CoordinatorLayout.LayoutParams(WRAP, WRAP)
+        val params = params()
         if (FabPlan.isMenu(options)) {
             val menu = FabMenu(activity, id)
             this.menu = menu
@@ -164,7 +260,6 @@ internal class FabPresenter(
             layout.addOverAll(fab, params)
         }
         apply(options, scroll)
-        view?.let(::grow)
     }
 
     // Every option of the FAB that shows; the collapse before the visibility, which `disableCollapse` would undo.
@@ -172,19 +267,20 @@ internal class FabPresenter(
         alignStart = options.alignHorizontally.get("right") == "left"
         val source = source
         fab?.let { fab ->
-            applyButton(fab, options)
+            applyButton(fab, options, mayWait = fab.drawable != null || options.visible.isFalse)
             TestIds.apply(fab, options.testID.takeIf { it.hasValue() }?.get())
             val id = shownId.orEmpty()
             fab.setOnClickListener { press(source, id) }
         }
         menu?.let { menu ->
-            applyButton(menu.main, options)
+            applyButton(menu.main, options, mayWait = menu.main.drawable != null || options.visible.isFalse)
             TestIds.apply(menu.main, options.testID.takeIf { it.hasValue() }?.get())
             menu.scrimColor = options.scrimColor.get(activity, null)
             menu.setActions(options.actions.orEmpty().map { action ->
                 val actionId = action.id.get("")
                 Fab(activity, actionId).also { button ->
-                    applyButton(button, action)
+                    // The actions show only while the menu is open.
+                    applyButton(button, action, mayWait = !menu.isOpen)
                     TestIds.apply(button, action.testID.takeIf { it.hasValue() }?.get())
                     button.setOnClickListener {
                         press(source, actionId)
@@ -205,9 +301,10 @@ internal class FabPresenter(
         place()
     }
 
-    private fun applyButton(button: Fab, options: FabOptions) {
+    // [mayWait]: the button can take its icon when it is ready (it shows one, or it stays hidden), see [Fab.applyIcon].
+    private fun applyButton(button: Fab, options: FabOptions, mayWait: Boolean) {
         val icon = options.icon.takeIf { it.hasValue() }?.get()?.ifEmpty { null }
-        if (icon != null) button.applyIcon(icon, options.iconColor)
+        if (icon != null) button.applyIcon(icon, options.iconColor, mayWait)
         applyColors(button, options)
         button.setMini(options.size.get("regular") == "mini")
     }
@@ -233,43 +330,120 @@ internal class FabPresenter(
         menu?.disableCollapse()
     }
 
-    // The FAB that shows goes: a button shrinks to 0 in 200 ms; a menu goes at once, its scrim first.
-    private fun remove() {
+    // The FAB that shows goes with its screen: a copy of it leaves by [move] while the button, or the menu, goes from the
+    // stack at once; an open menu closes, its scrim fading out by itself. At once nothing leaves, the scrim neither.
+    private fun leave(layout: StackLayout, move: FabMotion.Move) {
+        val view = view ?: return
+        val departure = FabMotion.departure(move, isRtl(layout))
+        val copy = departure?.let { FabCopy.of((view as? FabMenu)?.main ?: view, view, layout) }
+        stopRide(rest = false)
+        disableCollapse()
         menu?.let {
-            it.removeScrim()
+            if (departure != null) it.closeToLeave() else it.removeScrim()
             (it.parent as? ViewGroup)?.removeView(it)
         }
-        fab?.let { fab ->
-            fab.animate().cancel()
-            if (!fab.isAttachedToWindow) {
-                (fab.parent as? ViewGroup)?.removeView(fab)
-            } else {
-                fab.animate().scaleX(0f).scaleY(0f).setDuration(ANIMATION_MILLIS)
-                    .withEndAction { (fab.parent as? ViewGroup)?.removeView(fab) }.start()
-            }
-        }
+        fab?.let { (it.parent as? ViewGroup)?.removeView(it) }
         menu = null
         fab = null
         shownId = null
+        if (copy == null) return
+        copies[copy] = play(copy, departure, fromCurrent = true) { copies.remove(copy)?.let { removeCopy(copy) } }
+    }
+
+    // The new FAB arrives with its screen by [move]; one its options hide (`visible: false`) has nothing to show.
+    private fun arrive(move: FabMotion.Move) {
+        val view = view ?: return
+        if (((view as? FabMenu)?.main ?: view).visibility != View.VISIBLE) return
+        val arrival = FabMotion.arrival(move, layout?.let(::isRtl) ?: false) ?: return
+        ride = play(view, arrival, fromCurrent = false) { animator -> if (ride === animator) ride = null }
+    }
+
+    // A ride stops where it is; [rest]: the FAB is in its place again, opaque and whole.
+    private fun stopRide(rest: Boolean) {
+        val running = ride ?: return
+        ride = null
+        running.cancel()
+        if (!rest) return
+        view?.apply {
+            translationX = 0f
+            alpha = 1f
+            scaleX = 1f
+            scaleY = 1f
+        }
+    }
+
+    // The copies of an older transition go at once.
+    private fun dropCopies() {
+        if (copies.isEmpty()) return
+        val dropped = copies.toList()
+        copies.clear()
+        dropped.forEach { (copy, animator) ->
+            animator.cancel()
+            removeCopy(copy)
+        }
     }
 
-    // It comes to the top and grows from 60 % in 200 ms.
-    private fun grow(view: View) {
-        val target = (view as? FabMenu)?.main ?: view
-        target.animate().cancel()
-        target.scaleX = GROW_FROM
-        target.scaleY = GROW_FROM
-        target.animate().scaleX(1f).scaleY(1f).setDuration(ANIMATION_MILLIS).start()
+    private fun removeCopy(copy: FabCopy) {
+        (copy.parent as? ViewGroup)?.removeView(copy)
     }
 
+    // Plays [ride] on [view], from its start values or [fromCurrent] from where the view is; [end] at its end or stop.
+    private fun play(view: View, ride: FabMotion.Ride, fromCurrent: Boolean, end: (Animator) -> Unit): Animator {
+        val density = activity.resources.displayMetrics.density
+        if (!fromCurrent) {
+            view.translationX = ride.fromX * density
+            view.alpha = ride.fromAlpha
+            view.scaleX = ride.fromScale
+            view.scaleY = ride.fromScale
+        }
+        val move = ObjectAnimator.ofPropertyValuesHolder(
+            view,
+            PropertyValuesHolder.ofFloat(View.TRANSLATION_X, ride.toX * density),
+            PropertyValuesHolder.ofFloat(View.SCALE_X, ride.toScale),
+            PropertyValuesHolder.ofFloat(View.SCALE_Y, ride.toScale),
+        ).apply {
+            duration = ride.duration
+            interpolator = when (ride.curve) {
+                FabMotion.Curve.System -> SystemTransition.CURVE
+                FabMotion.Curve.FadeThrough -> FadeThrough.CURVE
+                FabMotion.Curve.Material -> AccelerateDecelerateInterpolator()
+            }
+        }
+        val animator = AnimatorSet()
+        if (ride.alphaDuration > 0) {
+            val fade = ObjectAnimator.ofFloat(view, View.ALPHA, ride.toAlpha).apply {
+                startDelay = ride.alphaDelay
+                duration = ride.alphaDuration
+                interpolator = LinearInterpolator()
+            }
+            animator.playTogether(move, fade)
+        } else {
+            animator.play(move)
+        }
+        animator.addListener(object : AnimatorListenerAdapter() {
+            override fun onAnimationEnd(animation: Animator) = end(animation)
+        })
+        animator.start()
+        return animator
+    }
+
+    // A FAB set aside that won't come back: it follows no scroll, its scrim goes.
+    private fun discard(kept: Aside) {
+        kept.fab?.disableCollapse()
+        kept.menu?.disableCollapse()
+        kept.menu?.removeScrim()
+    }
+
+    private fun params() = CoordinatorLayout.LayoutParams(WRAP, WRAP)
+
+    private fun isRtl(layout: StackLayout): Boolean = layout.layoutDirection == View.LAYOUT_DIRECTION_RTL
+
     companion object {
         private const val WRAP = ViewGroup.LayoutParams.WRAP_CONTENT
-        private const val ANIMATION_MILLIS = 200L
-        private const val GROW_FROM = 0.6f
 
         /**
          * A press on the FAB, or on an action of its menu, of [source] (EVT-NavigationButtonPressed): nothing once
-         * [source] is destroyed — its FAB still fades for 200 ms.
+         * [source] is destroyed.
          */
         fun press(source: ViewController<*>?, buttonId: String) {
             if (source == null || source.isDestroyed) return

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/stack/search/ScreenSearch.kt

@@ -36,6 +36,8 @@ import dev.apexnative.navigation.views.stack.topbar.search.SuggestionList
 class ScreenSearch(
     private val host: Host,
     private val screenId: String,
+    /** The sender of the JavaScript the screen was made for: silent once it went. */
+    private val emitter: EventEmitter,
     private val context: Context,
     private val loadIcon: (String) -> Drawable?,
     /** A scope the user picks goes into the screen's options, so it stays when they apply again. */
@@ -45,7 +47,6 @@ class ScreenSearch(
         /** The search changed what the bar shows (open or closed, its text): shown again if it is the shown one. */
         fun refresh(search: ScreenSearch)
         fun isShown(search: ScreenSearch): Boolean
-        fun emitter(): EventEmitter?
         fun keyboard(view: View, show: Boolean)
         /** The stack's view: a search view goes over it. */
         fun stackView(): ViewGroup?
@@ -402,7 +403,7 @@ class ScreenSearch(
 
     // A pick sends searchSuggestionPicked with the suggestion's id; the text stays.
     private fun pickSuggestion(suggestionId: String) {
-        host.emitter()?.emitSearchSuggestionPicked(screenId, suggestionId)
+        emitter.emitSearchSuggestionPicked(screenId, suggestionId)
         setSuggestions(emptyList())
     }
 
@@ -426,18 +427,15 @@ class ScreenSearch(
     private fun sendUpdate(
         focused: Boolean = isActive && (panel?.searchView?.editText ?: searchField.editText).hasFocus(),
     ) {
-        val emitter = host.emitter() ?: return
         eventTargets().forEach { emitter.emitSearchBarUpdated(it, text, focused, scope()) }
     }
 
     private fun sendCancel() {
-        val emitter = host.emitter() ?: return
         eventTargets().forEach { emitter.emitSearchBarCancelPressed(it) }
         sendUpdate()
     }
 
     private fun sendSubmit() {
-        val emitter = host.emitter() ?: return
         eventTargets().forEach { emitter.emitSearchBarSubmitted(it, text, scope()) }
     }
 

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/stack/search/StackSearchPresenter.kt

@@ -3,8 +3,6 @@ package dev.apexnative.navigation.viewcontrollers.stack.search
 import android.app.Activity
 import android.content.Context
 import android.graphics.drawable.Drawable
-import android.view.Menu
-import android.view.MenuItem
 import android.view.View
 import android.view.ViewGroup
 import androidx.appcompat.R as AppCompatR
@@ -12,17 +10,17 @@ import androidx.appcompat.content.res.AppCompatResources
 import androidx.coordinatorlayout.widget.CoordinatorLayout
 import androidx.core.view.WindowCompat
 import androidx.core.view.WindowInsetsCompat
-import com.facebook.react.ReactApplication
 import dev.apexnative.navigation.options.SearchBarOptions
-import dev.apexnative.navigation.options.params.Text
 import dev.apexnative.navigation.options.params.ThemeColour
 import dev.apexnative.navigation.react.events.EventEmitter
+import dev.apexnative.navigation.utils.TestIds
 import dev.apexnative.navigation.utils.dp
 import dev.apexnative.navigation.viewcontrollers.parent.OptionsScreen
 import dev.apexnative.navigation.viewcontrollers.viewcontroller.ViewController
 import dev.apexnative.navigation.views.stack.topbar.TopBar
 import dev.apexnative.navigation.views.stack.topbar.TopBarDefaults
 import dev.apexnative.navigation.views.stack.topbar.search.SearchStyle
+import dev.apexnative.navigation.views.stack.topbar.titlebar.BarButtonView
 
 /**
  * The search of the screens of a stack (`topBar.searchBar`): each screen has its own while it is in the stack, and the
@@ -40,6 +38,7 @@ class StackSearchPresenter(
     private var suggestions: View? = null
     private var wasActive = false
     private var onActiveChanged: Runnable? = null
+    private var magnifier: BarButtonView? = null
 
     /** The search of the screen on top opened or closed: the bar's hideOnScroll stops or goes on. */
     fun setOnActiveChanged(listener: Runnable?) {
@@ -51,6 +50,7 @@ class StackSearchPresenter(
 
     fun bindTopBar(topBar: TopBar) {
         this.topBar = topBar
+        magnifier = null
         // The suggestions hang from the bar: they follow its height as the search opens and its scopes show.
         topBar.addOnLayoutChangeListener { _, _, _, _, _, _, _, _, _ -> topBar.post { positionSuggestions(topBar) } }
     }
@@ -93,28 +93,29 @@ class StackSearchPresenter(
         return true
     }
 
-    /** After the right buttons change: the magnifier of an integrated search goes back among them, last. */
+    /**
+     * After the right buttons change: the magnifier of an integrated search stands after them, before "⋮", as a button
+     * of the bar, with the id `<topBar.searchBar.testID>.button`.
+     */
     fun applyMagnifier() {
         val bar = topBar ?: return
-        val menu = bar.rightButtonBar.menu
-        val item = menu.findItem(MAGNIFIER_ID)
-        if (shown?.showsMagnifier != true) {
-            if (item != null) menu.removeItem(MAGNIFIER_ID)
+        val row = bar.rightButtonBar
+        val search = shown
+        if (search?.showsMagnifier != true) {
+            row.setTrailing(null)
             return
         }
-        if (item != null) return
-        val context = styleContext()
-        val label = context.getString(AppCompatR.string.abc_searchview_description_search)
-        menu.add(Menu.NONE, MAGNIFIER_ID, MAGNIFIER_ORDER, label).apply {
-            icon = AppCompatResources.getDrawable(context, AppCompatR.drawable.abc_ic_search_api_material)?.mutate()?.also {
-                it.setTint(TopBarDefaults.overflowIconColor(context))
-            }
-            setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS)
-            setOnMenuItemClickListener {
-                shown?.activate()
-                true
-            }
+        val button = magnifier ?: BarButtonView(row.context).also { button ->
+            val context = styleContext()
+            val icon = AppCompatResources.getDrawable(context, AppCompatR.drawable.abc_ic_search_api_material)?.mutate()
+            icon?.setTint(TopBarDefaults.overflowIconColor(context))
+            val label = context.getString(AppCompatR.string.abc_searchview_description_search)
+            button.show(label, icon, null, true)
+            button.setOnClickListener { shown?.activate() }
+            magnifier = button
         }
+        TestIds.apply(button, search.options.testID.get(null)?.let { "$it.button" })
+        row.setTrailing(button)
     }
 
     override fun refresh(search: ScreenSearch) {
@@ -134,13 +135,12 @@ class StackSearchPresenter(
     fun onConfigurationChanged(tint: ThemeColour) {
         shown?.takeTint(tint)
         searches.values.forEach { it.restyle() }
-        topBar?.rightButtonBar?.menu?.removeItem(MAGNIFIER_ID)
+        // The magnifier is made again in the new mode's colors.
+        magnifier = null
+        topBar?.rightButtonBar?.setTrailing(null)
         refresh()
     }
 
-    override fun emitter(): EventEmitter? =
-        (activity.application as? ReactApplication)?.reactHost?.currentReactContext?.let { EventEmitter(it) }
-
     override fun keyboard(view: View, show: Boolean) {
         val controller = WindowCompat.getInsetsController(activity.window, view)
         if (show) controller.show(WindowInsetsCompat.Type.ime()) else controller.hide(WindowInsetsCompat.Type.ime())
@@ -148,10 +148,12 @@ class StackSearchPresenter(
 
     private fun searchOf(screen: ViewController<*>): ScreenSearch =
         searches.getOrPut(screen.view) {
-            // The search of a pair of screens is its primary's: its events name that screen, which keeps the scope.
+            // The search of a pair of screens is its primary's: its events name that screen, which keeps the scope in
+            // its user layer, where a merge that sends the same options again doesn't take it away.
             val owner = (screen as? OptionsScreen)?.optionsScreen ?: screen
-            ScreenSearch(this, owner.id, styleContext(), loadIcon) { scope ->
-                owner.changeOptions { it.topBar.searchBar.selectedScope = Text(scope) }
+            // Its events go to the JavaScript the screen was made for, and to no other.
+            ScreenSearch(this, owner.id, EventEmitter.of(owner.jsGeneration), styleContext(), loadIcon) { scope ->
+                owner.changeChoices { it.pickScope(scope) }
             }
         }
 
@@ -234,10 +236,4 @@ class StackSearchPresenter(
         lp.topMargin = top
         card.layoutParams = lp
     }
-
-    private companion object {
-        val MAGNIFIER_ID = View.generateViewId()
-        // The highest a menu order goes: after the screen's own buttons.
-        const val MAGNIFIER_ORDER = 0xFFFF
-    }
 }

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

@@ -5,7 +5,6 @@ import dev.apexnative.navigation.options.Options
 import dev.apexnative.navigation.options.TitleComponentOptions
 import dev.apexnative.navigation.options.TopBarBackgroundComponentOptions
 import dev.apexnative.navigation.options.params.Text
-import dev.apexnative.navigation.viewcontrollers.component.ScreenReadiness
 import dev.apexnative.navigation.viewcontrollers.viewcontroller.IReactView
 import dev.apexnative.navigation.viewcontrollers.viewcontroller.ViewController
 
@@ -15,7 +14,8 @@ import dev.apexnative.navigation.viewcontrollers.viewcontroller.ViewController
  * same root, never made again; another replaces it, and the old one stops at once. A background with the same `name`
  * and `componentId` on several screens is one root, shared; it stops when no screen of the stack names it any more. The
  * roots go with their screen ([screenDestroyed]) or the stack ([destroyAll]). Each root renders at once, without
- * waiting for its layout: [makeRoot] marks its id so before its surface starts. Main thread only.
+ * waiting for its layout: [makeRoot] makes it so (`ReactView`'s `rendersAtOnce`), and each answers by its own render
+ * when several live roots show one id (`ScreenReadiness`). Main thread only.
  */
 internal class BarComponents(private val makeRoot: (componentId: String, name: String) -> IReactView) {
     /** A root of the bar: what it renders, and its content. */
@@ -151,18 +151,10 @@ internal class BarComponents(private val makeRoot: (componentId: String, name: S
         backgrounds.remove(key)?.let(::stop)
     }
 
-    // Made first, counted after: the maker asks whether another root with the id lives.
-    private fun make(key: Key): Root {
-        val root = Root(key.name, key.componentId, makeRoot(key.componentId, key.name))
-        LiveIds.add(key.componentId)
-        return root
-    }
+    private fun make(key: Key): Root = Root(key.name, key.componentId, makeRoot(key.componentId, key.name))
 
-    // Stops a root once; what the readiness store kept of its id goes unless another live root holds the id.
-    private fun stop(root: Root) {
-        root.view.destroy()
-        if (LiveIds.remove(root.componentId)) ScreenReadiness.remove(root.componentId)
-    }
+    // Stops a root once; its content takes its mark of rendering at once with it.
+    private fun stop(root: Root) = root.view.destroy()
 
     private fun keyOf(name: Text, componentId: Text, id: Text): Key? {
         val componentName = name.get(null)?.takeIf { it.isNotEmpty() } ?: return null
@@ -170,42 +162,4 @@ internal class BarComponents(private val makeRoot: (componentId: String, name: S
             ?: return null
         return Key(componentName, rootId)
     }
-
-    companion object {
-        /** Whether a bar root with [id] is alive now, in any stack. */
-        fun isLive(id: String): Boolean = LiveIds.has(id)
-
-        /**
-         * Another root that renders at once lives with [id] (a cell of the tabs' custom row): it counts as the bar's
-         * roots do, so a root that stops clears the id's readiness only when it was the last one with it.
-         */
-        internal fun rootMade(id: String) = LiveIds.add(id)
-
-        /** A root of [rootMade] stopped; true when no live root has [id] any more. */
-        internal fun rootStopped(id: String): Boolean = LiveIds.remove(id)
-
-        /** The JavaScript went (a reload): no id counts as held by a live root any more, as `ScreenReadiness.reset`. */
-        fun reset() = LiveIds.clear()
-    }
-
-    // The ids of the bar roots alive now, in every stack: a root that stops clears its id's readiness only when it was
-    // the last one with it.
-    private object LiveIds {
-        private val counts = HashMap<String, Int>()
-
-        fun has(id: String): Boolean = (counts[id] ?: 0) > 0
-
-        fun clear() = counts.clear()
-
-        fun add(id: String) {
-            counts[id] = (counts[id] ?: 0) + 1
-        }
-
-        // True when no root with the id is left.
-        fun remove(id: String): Boolean {
-            val count = (counts[id] ?: return true) - 1
-            if (count <= 0) counts.remove(id) else counts[id] = count
-            return count <= 0
-        }
-    }
 }