@apexnative/navigation 1.0.0-alpha.3 → 1.0.0-alpha.5

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

@@ -288,8 +288,8 @@ internal class StackViews(private val stack: StackController) : StackDisplay {
         screen.whenContentMounted(
             waiting = waiting,
             mounted = {
-                // The frame of the mount: the screen shows transparent and lays out; its transition starts on the
-                // pre-draw of that frame.
+                // The frame of the mount: the screen shows transparent and lays out. The pre-draw of that frame hands
+                // the start to the queue, whose transition begins behind the calls JavaScript made before.
                 screen.peekView()?.let {
                     it.alpha = 0f
                     it.visibility = View.VISIBLE

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

@@ -172,19 +172,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 +206,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")
     }

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

@@ -12,9 +12,7 @@ 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.dp
@@ -138,9 +136,6 @@ class StackSearchPresenter(
         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 +143,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) }
             }
         }
 

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
-        }
-    }
 }

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

@@ -1,16 +1,14 @@
 package dev.apexnative.navigation.viewcontrollers.stack.topbar
 
-import dev.apexnative.navigation.options.ButtonMenuOptions
-import dev.apexnative.navigation.options.ButtonOptions
 import dev.apexnative.navigation.options.Options
-import dev.apexnative.navigation.options.copyMenu
+import dev.apexnative.navigation.options.UserChoices
 import dev.apexnative.navigation.viewcontrollers.viewcontroller.ViewController
 
 /**
- * The check of a single-selection menu the user picked: written through [ViewController.changeOptions] into the
- * screen's own menu, never into a menu other screens share (the stack's, the defaults'). A menu that came from
- * elsewhere is copied into the screen's own options first — for a button, its whole side, as lists of buttons replace
- * whole. The check stays with the screen until new options give the menu. Main thread only.
+ * The check of a single-selection menu the user picked: written into the screen's user layer
+ * ([ViewController.changeChoices]), never into its own options nor into a menu other screens share (the stack's, the
+ * defaults'). It goes over the menu as the screen's options resolve, by the button's id and the item's id, and stays
+ * until the app changes that menu's checks or takes the item away. Main thread only.
  */
 internal object MenuChecks {
     /**
@@ -19,54 +17,13 @@ internal object MenuChecks {
      */
     fun write(screen: ViewController<*>, resolved: Options, buttonId: String?, itemId: String) {
         val topBar = resolved.topBar
-        if (buttonId == null) {
-            val menu = topBar.overflowMenu ?: return
-            if (!checks(menu, itemId)) return
-            screen.changeOptions { own ->
-                val copy = (own.topBar.overflowMenu ?: menu).copyMenu()
-                check(copy, itemId)
-                own.topBar.overflowMenu = copy
-            }
-            return
-        }
-        val left = topBar.buttons.left?.any { it.id.get(null) == buttonId } == true
-        val list = (if (left) topBar.buttons.left else topBar.buttons.right) ?: return
-        val menu = list.firstOrNull { it.id.get(null) == buttonId }?.menu ?: return
-        if (!checks(menu, itemId)) return
-        screen.changeOptions { own ->
-            val ownList = (if (left) own.topBar.buttons.left else own.topBar.buttons.right)
-                ?: list.map(ButtonOptions::copyWithMenu)
-            val button = ownList.firstOrNull { it.id.get(null) == buttonId } ?: return@changeOptions
-            val copy = (button.menu ?: menu).copyMenu()
-            check(copy, itemId)
-            button.menu = copy
-            if (left) own.topBar.buttons.left = ownList else own.topBar.buttons.right = ownList
-        }
-    }
-
-    /** Whether picking [itemId] moves a check: its level has `singleSelection`. */
-    fun checks(menu: ButtonMenuOptions, itemId: String): Boolean = levelOf(menu.items, menu.singleSelection, itemId) == true
-
-    /** Moves the check of [itemId]'s level to it, in [menu] itself. */
-    fun check(menu: ButtonMenuOptions, itemId: String) {
-        mark(menu.items, menu.singleSelection, itemId)
-    }
-
-    // Whether the level holding [itemId] has single selection; null when [itemId] isn't in [elements].
-    private fun levelOf(elements: List<ButtonMenuOptions.Element>, single: Boolean, itemId: String): Boolean? {
-        if (elements.any { it is ButtonMenuOptions.Item && it.id == itemId }) return single
-        for (element in elements) {
-            if (element !is ButtonMenuOptions.Submenu) continue
-            levelOf(element.items, element.singleSelection, itemId)?.let { return it }
-        }
-        return null
-    }
-
-    private fun mark(elements: List<ButtonMenuOptions.Element>, single: Boolean, itemId: String): Boolean {
-        if (elements.any { it is ButtonMenuOptions.Item && it.id == itemId }) {
-            if (single) elements.forEach { if (it is ButtonMenuOptions.Item) it.checked = it.id == itemId }
-            return true
-        }
-        return elements.any { it is ButtonMenuOptions.Submenu && mark(it.items, it.singleSelection, itemId) }
+        val menu = if (buttonId == null) {
+            topBar.overflowMenu
+        } else {
+            (topBar.buttons.left.orEmpty() + topBar.buttons.right.orEmpty()).firstOrNull { it.id.get(null) == buttonId }
+                ?.menu
+        } ?: return
+        if (!UserChoices.checks(menu, itemId)) return
+        screen.changeChoices { it.check(buttonId, menu, itemId) }
     }
 }

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

@@ -41,7 +41,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
@@ -936,14 +935,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
@@ -1008,8 +1003,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() }

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

@@ -6,6 +6,7 @@ import android.view.ViewGroup
 import dev.apexnative.navigation.options.DefaultOptions
 import dev.apexnative.navigation.options.Options
 import dev.apexnative.navigation.options.OptionsCache
+import dev.apexnative.navigation.options.UserChoices
 import dev.apexnative.navigation.options.params.Bool
 import dev.apexnative.navigation.options.params.NullBool
 import dev.apexnative.navigation.react.CommandListener
@@ -30,11 +31,11 @@ abstract class ViewController<V : ViewGroup>(
     var initialOptions: Options,
 ) {
     /**
-     * The node's own options: those it was made with, with every `mergeOptions` and every user's choice over them.
-     * Writing them is one of the two places the options change ([OptionsCache]): the setter takes away the one-shot
-     * options, keeps the object (a stripped copy when it has a one-shot option: the caller's object never changes), and
-     * makes every resolved result stale. Don't change the object in place: [changeOptions] or [mergeOptions] write a
-     * changed copy.
+     * The node's own options: those it was made with, with every `mergeOptions` over them; what the user chose in the
+     * native UI is not here but in [choices]. Writing them is one of the places the options change ([OptionsCache]):
+     * the setter takes away the one-shot options, keeps the object (a stripped copy when it has a one-shot option: the
+     * caller's object never changes), and makes every resolved result stale. Don't change the object in place:
+     * [changeOptions] or [mergeOptions] write a changed copy.
      */
     var options: Options = initialOptions.copy().also(Options::clearOneShotOptions)
         set(value) {
@@ -42,6 +43,10 @@ abstract class ViewController<V : ViewGroup>(
             OptionsCache.optionsChanged()
         }
 
+    // The user layer: what the user chose in the native UI (a menu's check, a search scope), over the node's own
+    // options as they resolve ([changeChoices]).
+    private val choices = UserChoices()
+
     /**
      * The JavaScript the node was made for (`ReloadCoordinator`): the events of the node and its screens reach only
      * that one.
@@ -156,9 +161,9 @@ abstract class ViewController<V : ViewGroup>(
     }
 
     /**
-     * The node's options over those of the layouts around it, without the default options: the parents' resolution,
-     * then the node's own. A new object at each call, which the caller may change. For a layout of nodes this is not
-     * what it shows with: that is [resolveShownOptions].
+     * The node's options over those of the layouts around it, without the default options and without the user layer
+     * ([changeChoices]): the parents' resolution, then the node's own. A new object at each call, which the caller may
+     * change. For a layout of nodes this is not what it shows with: that is [resolveShownOptions].
      */
     open fun resolveCurrentOptions(): Options {
         val resolved = parent?.resolveChildOptions(this) ?: Options()
@@ -166,21 +171,21 @@ abstract class ViewController<V : ViewGroup>(
     }
 
     /**
-     * The node's options over those of the layouts around it and [defaultOptions]: what it shows with. With the app's
-     * default options ([DefaultOptions.current]) the result is kept and given again while no options changed
-     * ([OptionsCache]) and the layouts around the node and its current children are the same: it is read-only, whoever
-     * changes it copies it first. Main thread only.
+     * The node's options over those of the layouts around it and [defaultOptions], with the user layer over them
+     * ([changeChoices]): what it shows with. With the app's default options ([DefaultOptions.current]) the result is
+     * kept and given again while no options changed ([OptionsCache]) and the layouts around the node and its current
+     * children are the same: it is read-only, whoever changes it copies it first. Main thread only.
      *
      * For a layout of nodes (a stack, tabs, a side menu) it is the layout's own options over those around it, without
      * any child's: not what the layout shows with, which [resolveShownOptions] gives.
      */
     open fun resolveCurrentOptions(defaultOptions: Options): Options {
-        if (defaultOptions !== DefaultOptions.current) return resolveCurrentOptions().withDefaultOptions(defaultOptions)
+        if (defaultOptions !== DefaultOptions.current) return withChoices(defaultOptions)
         val generation = OptionsCache.generation
         val along = resolvedAlong()
         val kept = resolved
         if (kept != null && resolvedGeneration == generation && sameNodes(along, resolvedAlong)) return kept
-        val result = resolveCurrentOptions().withDefaultOptions(defaultOptions)
+        val result = withChoices(defaultOptions)
         resolved = result
         resolvedGeneration = generation
         resolvedAlong = along.map(::WeakReference)
@@ -196,6 +201,10 @@ abstract class ViewController<V : ViewGroup>(
      */
     open fun resolveShownOptions(defaultOptions: Options): Options = resolveCurrentOptions(defaultOptions)
 
+    // The resolution in its order: the defaults, the parents, the node's own options, then the user layer over them.
+    private fun withChoices(defaultOptions: Options): Options =
+        choices.applyTo(resolveCurrentOptions().withDefaultOptions(defaultOptions))
+
     // The layouts around this node, nearest first, then its current children down the visible chain.
     private fun resolvedAlong(): List<ViewController<*>> {
         val nodes = ArrayList<ViewController<*>>()
@@ -216,9 +225,9 @@ abstract class ViewController<V : ViewGroup>(
         nodes.size == kept.size && nodes.indices.all { nodes[it] === kept[it].get() }
 
     /**
-     * Changes the node's own options: [change] gets a copy, which is stored ([options]). A presenter or a module that
-     * writes a user's choice into the options (a menu's checkmark, a search scope, tokens, a toggled button) does it
-     * this way; a button menu keeps its own shared `checked` (`ButtonMenuOptions`).
+     * Changes the node's own options: [change] gets a copy, which is stored ([options]). It is for the library's own
+     * bookkeeping of a merge (a side color written into the node's buttons, the back button's visibility); what the
+     * user chose goes through [changeChoices].
      */
     fun changeOptions(change: (Options) -> Unit) {
         val copy = options.copy()
@@ -226,14 +235,40 @@ abstract class ViewController<V : ViewGroup>(
         options = copy
     }
 
+    /**
+     * Changes the node's user layer: what the user chose in the native UI (a single-selection menu's check, a search
+     * scope). It goes over the node's own options as they resolve, by the ids of the buttons, items and scopes, and
+     * stays through an unrelated `mergeOptions`, the same values sent again and `setDefaultOptions`; a merge that
+     * changes the chosen field takes it away ([mergeOwnOptions]). Every resolved result is stale after it
+     * ([OptionsCache]).
+     */
+    internal fun changeChoices(change: (UserChoices) -> Unit) {
+        change(choices)
+        OptionsCache.optionsChanged()
+    }
+
+    /**
+     * [delta] of a `mergeOptions` goes over the node's own options ([options]); a choice of the user layer whose field
+     * the merge changes, or whose button, item or scope it took away, leaves, so the app's value shows
+     * (`UserChoices.yieldTo`). Every `mergeOptions` into a node writes its own options this way.
+     */
+    protected fun mergeOwnOptions(delta: Options) {
+        val own = options
+        val before = if (choices.isEmpty) null else resolveCurrentOptions().withDefaultOptions(DefaultOptions.current)
+        options = own.copy().mergeWith(delta)
+        before ?: return
+        val after = resolveCurrentOptions().withDefaultOptions(DefaultOptions.current)
+        if (choices.yieldTo(delta, own, before, after)) OptionsCache.optionsChanged()
+    }
+
     /**
      * `mergeOptions` with the node's id (`mergeOptions`): [options] go over its own and stay there (one-shot options
-     * not kept); what shows applies them ([applyMergedOptions], when the view shows; otherwise as it appears); the
-     * layouts around it apply their part (`ParentController.mergeChildOptions`, each passes it on). [options] still
-     * carry the one-shot options to them. Containers that hand the merge to a child override it.
+     * not kept, [mergeOwnOptions]); what shows applies them ([applyMergedOptions], when the view shows; otherwise as it
+     * appears); the layouts around it apply their part (`ParentController.mergeChildOptions`, each passes it on).
+     * [options] still carry the one-shot options to them. Containers that hand the merge to a child override it.
      */
     open fun mergeOptions(options: Options) {
-        this.options = this.options.copy().mergeWith(options)
+        mergeOwnOptions(options)
         if (isViewShown) applyMergedOptions(options)
         performOnParentController { it.mergeChildOptions(options, this) }
     }

package/android/src/main/java/dev/apexnative/navigation/views/bottomtabs/BottomTabs.kt

@@ -228,13 +228,15 @@ class BottomTabs(context: Context) : BottomNavigationView(MaterialTheme.context(
         applyLongPressesAgain()
     }
 
-    fun setIcon(index: Int, icon: Drawable) {
+    /** Null: the item has no icon. */
+    fun setIcon(index: Int, icon: Drawable?) {
         val item = items.getOrNull(index) ?: return
         if (item.icon == icon) return
         updateIcon(index, item.copy(icon = icon))
     }
 
-    fun setSelectedIcon(index: Int, icon: Drawable) {
+    /** Null: the item shows its icon when selected too. */
+    fun setSelectedIcon(index: Int, icon: Drawable?) {
         val item = items.getOrNull(index) ?: return
         if (item.selectedIcon == icon) return
         updateIcon(index, item.copy(selectedIcon = icon))

package/android/src/main/java/dev/apexnative/navigation/views/bottomtabs/CustomBottomTabItemView.kt

@@ -22,9 +22,6 @@ open class CustomBottomTabItemView(context: Context) : FrameLayout(context) {
     private var state: TabCellState? = null
     private var destroyed = false
 
-    /** Runs once as the cell stops: what was kept for its content's id goes. */
-    internal var onDestroyed: (() -> Unit)? = null
-
     /** The content the cell shows, filling it, made with [state] as its first props. */
     internal fun show(view: IReactView, state: TabCellState) {
         content = view
@@ -68,8 +65,6 @@ open class CustomBottomTabItemView(context: Context) : FrameLayout(context) {
         didDisappear()
         destroyed = true
         content?.destroy()
-        onDestroyed?.invoke()
-        onDestroyed = null
     }
 
     /** The props of [state] as React Native takes them. */

package/android/src/main/java/dev/apexnative/navigation/views/stack/fab/Fab.kt

@@ -4,12 +4,11 @@ import android.content.Context
 import android.content.res.ColorStateList
 import android.content.res.Configuration
 import android.graphics.Color
-import android.graphics.drawable.Drawable
 import com.google.android.material.floatingactionbutton.FloatingActionButton
 import dev.apexnative.navigation.options.params.ThemeColour
-import dev.apexnative.navigation.utils.ImageLoader
-import dev.apexnative.navigation.utils.ImageLoadingListenerAdapter
+import dev.apexnative.navigation.utils.ImageRequests
 import dev.apexnative.navigation.utils.MaterialTheme
+import dev.apexnative.navigation.utils.OptionImages
 import dev.apexnative.navigation.utils.UiUtils
 import dev.apexnative.navigation.viewcontrollers.viewcontroller.ScrollEventListener
 import androidx.appcompat.R as AppCompatR
@@ -29,6 +28,7 @@ class Fab(context: Context, val fabId: String) : FloatingActionButton(MaterialTh
     // The icon's color of the options: a container color merged later kept the theme's icon color instead.
     private var iconColor: Int? = null
     private var optionRippleColor: Int? = null
+    private val icons = ImageRequests<Unit>(OptionImages.source(this.context))
 
     init {
         // Material's theme overlay of the button is a copy of the theme, made once: it follows a light/dark switch too.
@@ -36,14 +36,18 @@ class Fab(context: Context, val fabId: String) : FloatingActionButton(MaterialTh
         MaterialTheme.followOverlay(this.context)
     }
 
-    fun applyIcon(icon: String, color: ThemeColour) {
+    /**
+     * The icon of the options, with its color. [mayWait]: the button can show it when it is ready (it shows an icon
+     * already, it is hidden with `visible: false`, or it is an action of a closed menu), so an icon the cache doesn't
+     * have loads off the main thread; the last icon asked for wins. Otherwise it loads at once. An icon that doesn't
+     * load leaves the button without an icon.
+     */
+    fun applyIcon(icon: String, color: ThemeColour, mayWait: Boolean) {
         if (color.hasValue()) iconColor = color.get()
-        ImageLoader().loadIcon(context, icon, object : ImageLoadingListenerAdapter() {
-            override fun onComplete(drawable: Drawable) {
-                setImageDrawable(drawable)
-                iconColor?.let { imageTintList = ColorStateList.valueOf(it) }
-            }
-        })
+        icons.request(Unit, icon, mayWait) { drawable ->
+            setImageDrawable(drawable)
+            iconColor?.let { imageTintList = ColorStateList.valueOf(it) }
+        }
     }
 
     /** iconColor alone, without a new icon: it did nothing in a merge. */