@apexnative/navigation 1.0.0-alpha.4 → 1.0.0-alpha.6

package/android/src/main/java/dev/apexnative/navigation/slots/SlotScreenView.kt

@@ -31,7 +31,12 @@ class SlotScreenView(
     private val whenMounted = mutableListOf<Runnable>()
     private val whenRendered = mutableListOf<Runnable>()
     private val mountedHandlers = LinkedHashMap<String, Runnable>()
-    private var readinessListener: ScreenReadiness.Listener? = null
+    private var listening = false
+
+    // The safe area view of a slot renders in the app's one React tree: every signal of the id is the screen's.
+    private val readiness = object : ScreenReadiness.Listener {
+        override fun onContentRendered() = checkReadiness()
+    }
     private var mounted = false
     private var readyTold = false
     private var destroyed = false
@@ -105,14 +110,9 @@ class SlotScreenView(
         if (readyTold) return listener.run()
         whenRendered += listener
         if (isReady()) return checkReadiness()
-        if (readinessListener != null) return
-        val readiness = object : ScreenReadiness.Listener {
-            override fun onLaidOut() = Unit
-
-            override fun onContentRendered() = checkReadiness()
-        }
-        readinessListener = readiness
-        ScreenReadiness.setListener(componentId, readiness)
+        if (listening) return
+        listening = true
+        ScreenReadiness.addListener(componentId, this, readiness)
     }
 
     override fun whenSlotContentMounted(listener: Runnable) {
@@ -151,8 +151,8 @@ class SlotScreenView(
     }
 
     private fun stopListening() {
-        val readiness = readinessListener ?: return
-        readinessListener = null
-        ScreenReadiness.removeListener(componentId, readiness)
+        if (!listening) return
+        listening = false
+        ScreenReadiness.removeListener(componentId, this)
     }
 }

package/android/src/main/java/dev/apexnative/navigation/utils/ViewExtensions.kt

@@ -26,16 +26,3 @@ val View.borderRadius: Float
  */
 internal fun resolveBorderRadius(radius: LengthPercentage, width: Int, density: Float): Float =
     (radius.resolve(width / density) * density).coerceAtLeast(0f)
-
-/** The scale the parents of [view] give it, along x and along y: a view in a scaled parent shows smaller. */
-fun computeInheritedScale(view: View): Pair<Float, Float> {
-    var scaleX = 1f
-    var scaleY = 1f
-    var parent = view.parent as? View
-    while (parent != null) {
-        scaleX *= parent.scaleX
-        scaleY *= parent.scaleY
-        parent = parent.parent as? View
-    }
-    return scaleX to scaleY
-}

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/arrangement/ArrangementController.kt

@@ -9,7 +9,8 @@ import androidx.window.layout.WindowMetricsCalculator
 import dev.apexnative.navigation.NavigationActivity
 import dev.apexnative.navigation.options.DefaultOptions
 import dev.apexnative.navigation.options.Options
-import dev.apexnative.navigation.react.ArrangementStates
+import dev.apexnative.navigation.react.ScreenEnvironment
+import dev.apexnative.navigation.react.events.EventEmitter
 import dev.apexnative.navigation.utils.SystemUiUtils
 import dev.apexnative.navigation.utils.WindowFolds
 import dev.apexnative.navigation.viewcontrollers.child.ChildController
@@ -145,12 +146,14 @@ class ArrangementController internal constructor(
         val overlay = plan.layout == ArrangementPlan.Layout.OVERLAY
         val single = plan.layout == ArrangementPlan.Layout.SINGLE
         if (primary is ComponentViewController) {
-            val state = ArrangementStates.State(PRIMARY, layout, front = overlay, hidden = false)
-            ArrangementStates.set(activity, primary.id, state, notify)
+            val state = ScreenEnvironment.Arrangement(PRIMARY, layout, front = overlay, hidden = false)
+            val changes = ScreenEnvironment.changesOf(EventEmitter.of(primary.jsGeneration))
+            ScreenEnvironment.setArrangement(primary.id, state, notify, changes)
         }
         if (secondary is ComponentViewController) {
-            val state = ArrangementStates.State(SECONDARY, layout, front = false, hidden = single)
-            ArrangementStates.set(activity, secondary.id, state, notify)
+            val state = ScreenEnvironment.Arrangement(SECONDARY, layout, front = false, hidden = single)
+            val changes = ScreenEnvironment.changesOf(EventEmitter.of(secondary.jsGeneration))
+            ScreenEnvironment.setArrangement(secondary.id, state, notify, changes)
         }
     }
 
@@ -243,9 +246,9 @@ class ArrangementController internal constructor(
         // The stack keeps the bar's title, buttons and search by the view of its screen on top: they go with the pair.
         if (!isDestroyed && peekView() != null) performOnParentController { it.onChildDestroyed(this) }
         folds?.removeListener(onFoldsChanged)
-        ArrangementStates.remove(primary.id)
-        ArrangementStates.remove(secondary.id)
         shownChildren.containerDisappeared()
+        // The screens go with the pair: each clears its own environment, its arrangement too, unless its id is
+        // another's now.
         super.destroy()
     }
 

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/bottomtabs/BottomTabsCollapseBehavior.kt

@@ -2,6 +2,7 @@ package dev.apexnative.navigation.viewcontrollers.bottomtabs
 
 import android.view.View
 import dev.apexnative.navigation.viewcontrollers.viewcontroller.ScrollEventListener
+import dev.apexnative.navigation.views.bottomtabs.BottomTabsLayout
 
 /**
  * bottomTabs.hideOnScroll: the tabs hide after a drag that scrolls the screen's content down and come back after one
@@ -43,9 +44,10 @@ class BottomTabsCollapseBehavior(private val container: () -> View?) :
     override fun onHide() {
         val view = container() ?: return
         hiddenByScroll = true
-        // Out of the screen with what is under it: a compact bar floats over its bottom margin and the navigation bar.
-        val under = ((view.parent as? View)?.let { it.height - view.bottom } ?: 0).coerceAtLeast(0)
-        view.animate().translationY((view.height + under).toFloat()).setDuration(DURATION).start()
+        // Out of the screen with what is under it (a compact bar floats over its bottom margin and the navigation bar)
+        // and the custom row that rises above it.
+        val distance = (view.parent as? BottomTabsLayout)?.hideDistance ?: view.height
+        view.animate().translationY(distance.toFloat()).setDuration(DURATION).start()
     }
 
     private companion object {

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/bottomtabs/BottomTabsController.kt

@@ -26,16 +26,15 @@ import dev.apexnative.navigation.utils.scrollToTop
 import dev.apexnative.navigation.viewcontrollers.child.ChildControllersRegistry
 import dev.apexnative.navigation.viewcontrollers.component.ComponentViewController
 import dev.apexnative.navigation.viewcontrollers.component.RestPlace
-import dev.apexnative.navigation.viewcontrollers.component.ScreenReadiness
 import dev.apexnative.navigation.viewcontrollers.navigator.BackCallbackState
 import dev.apexnative.navigation.viewcontrollers.navigator.Navigator
 import dev.apexnative.navigation.viewcontrollers.parent.ContainerBackground
 import dev.apexnative.navigation.viewcontrollers.parent.ParentController
 import dev.apexnative.navigation.viewcontrollers.stack.StackController
 import dev.apexnative.navigation.viewcontrollers.stack.fab.FabPlacement
-import dev.apexnative.navigation.viewcontrollers.stack.topbar.BarComponents
 import dev.apexnative.navigation.viewcontrollers.viewcontroller.Presenter
 import dev.apexnative.navigation.viewcontrollers.viewcontroller.ViewController
+import dev.apexnative.navigation.views.animations.AnimationLayer
 import dev.apexnative.navigation.views.animations.FadeThrough
 import dev.apexnative.navigation.views.bottomtabs.BottomTabItem
 import dev.apexnative.navigation.views.bottomtabs.BottomTabsLayout
@@ -201,7 +200,9 @@ class BottomTabsController(
                 }
             })
             val set = AnimatorSet()
-            set.playTogether(exit, FadeThrough.enter(coming))
+            // Each tab fades whole through a hardware layer; a switch ended early ([set]'s end) gives them back too.
+            val enter = FadeThrough.enter(coming)
+            set.playTogether(AnimationLayer.during(going, exit), AnimationLayer.during(coming, enter))
             set.addListener(object : AnimatorListenerAdapter() {
                 override fun onAnimationEnd(animation: Animator) {
                     set.removeAllListeners()
@@ -352,8 +353,8 @@ class BottomTabsController(
 
     /**
      * Selects the tab at [index]: the bar shows it at once; on screen the tab it left fades through to it (Material's
-     * fade through), off screen one container becomes invisible and the other visible at once; then [switched]. The
-     * history of back follows.
+     * fade through); off screen, or when the new tab's `bottomTabs.switchAnimation` is `'none'`, one container becomes
+     * invisible and the other visible at once; then [switched]. The history of back follows.
      */
     private fun select(index: Int, how: How) {
         if (index == selectedIndex || index !in tabs.indices || isDestroyed) return
@@ -379,8 +380,11 @@ class BottomTabsController(
         // A layer that waits for the tabs waits for the tab they show now.
         navigator?.shownScreensChanged(this)
         if (onScreen) AppearanceDispatcher.beginTransition(listOf(shown))
+        // From code and by back the state goes at once, as on iOS: `selectTab` resolves on it, and the command after
+        // it must act in this tab, not in the one still fading out.
+        if (how != How.Press) AppearanceDispatcher.reportState()
         if (views == null) return switched(index, previous, how, onScreen, hasViews = false)
-        endSwitch = views.switch(shown, left, animated = onScreen) {
+        endSwitch = views.switch(shown, left, animated = onScreen && fadesThrough(shown)) {
             endSwitch = null
             if (!isDestroyed) switched(index, previous, how, onScreen, hasViews = true)
         }
@@ -390,8 +394,8 @@ class BottomTabsController(
      * The switch to the tab at [index] from [previous] ended: what went disappears, what came appears — unless the tabs
      * stopped showing during the fade (a modal over them): it appears when they show again; then for a press
      * `ANN.BottomTabSelected` right after the new screen's DidAppear and the left tab's `popToRootOnBlur`, with the state
-     * as one update after them; from code and by back, `popToRootOnBlur` and the state at once. [onScreen]: the switch
-     * started on screen.
+     * as one update after them; from code and by back, `popToRootOnBlur` and the state, which went at the start too
+     * ([select]). [onScreen]: the switch started on screen.
      */
     private fun switched(index: Int, previous: Int, how: How, onScreen: Boolean, hasViews: Boolean) {
         val left = tabs[previous]
@@ -426,6 +430,11 @@ class BottomTabsController(
         if (screen == null) finish() else AppearanceDispatcher.afterDidAppear(screen, finish)
     }
 
+    // `bottomTabs.switchAnimation` of the tab that shows, its shown screen's over its own, the tabs' and the defaults:
+    // `'platform'`, the default, fades through; `'none'` switches at once.
+    private fun fadesThrough(tab: ViewController<*>): Boolean =
+        tab.resolveShownOptions(DefaultOptions.current).bottomTabs.switchAnimation.get(null) != "none"
+
     // A switch still running ends at once and a press's `ANN.BottomTabSelected` still waiting goes, before anything
     // newer on these tabs.
     private fun flushPendingSelected() {
@@ -547,9 +556,6 @@ class BottomTabsController(
         return TabsRoom.tabsTop(room(), screenOptions(screen), bottom)
     }
 
-    override fun leavesBottomEdgeFree(child: ViewController<*>, screen: ViewController<*>): Boolean =
-        TabsRoom.leavesBottomEdgeFree(screenOptions(screen)) || super.leavesBottomEdgeFree(child, screen)
-
     override fun tabsAtRestOf(child: ViewController<*>, screen: ViewController<*>): FabPlacement.Tabs? {
         if (peekView() == null) return super.tabsAtRestOf(child, screen)
         return TabsRoom.fabTabs(room(), screenOptions(screen))
@@ -630,7 +636,6 @@ class BottomTabsController(
         layout.row = row
         layout.bar.customRowOptionsListener = { applyRow(row, it) }
         layout.bar.customRowOptions = resolveShownOptions(DefaultOptions.current).bottomTabs.customRow.copy()
-        CustomTabRowPlacer.track(activity)
     }
 
     private fun applyRow(row: CustomTabRow, options: BottomTabsCustomRowOptions) {
@@ -660,15 +665,12 @@ class BottomTabsController(
     private fun makeCell(index: Int): CustomBottomTabItemView {
         val component = itemOptions(index).component
         val componentId = component.componentId.get(null) ?: "$id.$index"
-        ScreenReadiness.setRendersAtOnce(componentId, true)
-        // Another live root has the id (the same layout set again before the old one went): what it rendered isn't
-        // this one's; the id's readiness goes only with its last root (as the bar's roots).
-        if (BarComponents.isLive(componentId)) ScreenReadiness.forgetRender(componentId)
-        BarComponents.rootMade(componentId)
         val cell = CustomBottomTabItemView(activity)
         val state = cellState(index)
-        cell.show(ReactView(activity, componentId, component.name.get(""), cell.bundleOf(state)), state)
-        cell.onDestroyed = { if (BarComponents.rootStopped(componentId)) ScreenReadiness.remove(componentId) }
+        // Another live root may have the id (the same layout set again before the old one went): each answers by the
+        // render of its own surface, and the id's readiness goes with its last root.
+        val root = ReactView(activity, componentId, component.name.get(""), cell.bundleOf(state), rendersAtOnce = true)
+        cell.show(root, state)
         return cell
     }
 
@@ -685,7 +687,7 @@ class BottomTabsController(
 
     /**
      * Destroys the tabs once: every tab and the registry first, then the cells (each stops its root once), the row out
-     * of the window, the scroll it followed. A press's event still waiting goes with them.
+     * of the tabs' view, the scroll it followed. A press's event still waiting goes with them.
      */
     override fun destroy() {
         if (isDestroyed) return
@@ -696,7 +698,6 @@ class BottomTabsController(
         endSwitch?.invoke()
         peekView()?.let { layout ->
             layout.bar.destroyCustomItemViews()
-            layout.row?.let(CustomTabRowPlacer::forget)
             layout.row = null
         }
         cells = emptyList()

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/bottomtabs/CustomTabRowGeometry.kt

@@ -49,6 +49,22 @@ internal object CustomTabRowGeometry {
             content = content,
         )
 
+    /**
+     * The row over the bar as the tabs' view lays it out: the bar's [barLeft], [barRight] and [barBottom] in that
+     * view, whose height is [tabsHeight] and whose bottom [navigationBar] pixels lie under the navigation bar — the
+     * row's bottom never goes over them —, with [margin], [content] and [bottomMargin] as [place] takes them.
+     */
+    fun inTabs(
+        barLeft: Int,
+        barRight: Int,
+        barBottom: Int,
+        tabsHeight: Int,
+        navigationBar: Int,
+        margin: Int,
+        content: Int,
+        bottomMargin: Int,
+    ): Place = place(barLeft, barRight, minOf(barBottom, tabsHeight - navigationBar), margin, content, bottomMargin)
+
     /**
      * The part of the row's frame at [place] below its visible part, in pixels: `bottomMargin`. The row draws and takes
      * touches only above it.
@@ -61,6 +77,12 @@ internal object CustomTabRowGeometry {
      */
     fun needsPlacing(last: Place?, next: Place): Boolean = last != next
 
+    /**
+     * The row's own lift over its [elevation] while the bar's container stands at [barZ]: as high as the container, so
+     * the row, after it in the tabs' view, draws over it and takes the touches first even under a raised bar.
+     */
+    fun lift(barZ: Float, elevation: Float): Float = (barZ - elevation).coerceAtLeast(0f)
+
     /**
      * The row's background: `customRow.backgroundColor` ([color]; `null` and `'NoColor'` are none); without it
      * `backgroundEffect: 'none'` ([effect]) is clear, any other effect or none the theme's `android:colorBackground`

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/bottomtabs/TabsRoom.kt

@@ -58,11 +58,6 @@ internal object TabsRoom {
     fun tabsTop(bar: Bar, screen: Screen, tabsBottom: Int): Int? =
         if (screen.hidden) null else tabsBottom - bar.reach - bar.rowOvershoot
 
-    /**
-     * The safe area of the screen leaves its bottom edge free: the bar hides on scroll and shows for it.
-     */
-    fun leavesBottomEdgeFree(screen: Screen): Boolean = screen.hideOnScroll && !screen.hidden
-
     /**
      * The bar at rest under a stack's FAB: also when the screen is under it (`drawBehind`, `hideOnScroll`); none when
      * the screen hides it.

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/component/ComponentViewController.kt

@@ -8,12 +8,12 @@ import androidx.core.view.ViewCompat
 import androidx.core.view.WindowInsetsCompat
 import dev.apexnative.navigation.options.DefaultOptions
 import dev.apexnative.navigation.options.Options
-import dev.apexnative.navigation.react.ArrangementStates
 import dev.apexnative.navigation.react.ReactView
-import dev.apexnative.navigation.react.ScreenInsets
+import dev.apexnative.navigation.react.ScreenEnvironment
 import dev.apexnative.navigation.react.ScreenRegions
 import dev.apexnative.navigation.react.events.AppearanceDispatcher
 import dev.apexnative.navigation.react.events.ComponentType
+import dev.apexnative.navigation.react.events.EventEmitter
 import dev.apexnative.navigation.slots.SlotScreenView
 import dev.apexnative.navigation.system.SystemUiOwner
 import dev.apexnative.navigation.viewcontrollers.child.ChildController
@@ -156,7 +156,7 @@ class ComponentViewController(
             shown = layout.isShown || prepared,
             layoutPending = !prepared && isLayoutPending(content),
             topOfStack = parent?.isTopOfStack(this) ?: true,
-            hasSafeArea = ScreenInsets.padding(id) != null,
+            hasSafeArea = ScreenEnvironment.padding(id) != null,
         )
         if (!measures) return
         val windowInsets = ViewCompat.getRootWindowInsets(content) ?: return
@@ -175,10 +175,15 @@ class ComponentViewController(
         val edges = ScreenSafeArea.paddedEdges(
             safeAreaEdges = resolveCurrentOptions(DefaultOptions.current).layout.safeAreaEdges,
             topFree = parent?.leavesTopEdgeFree(this) == true,
-            bottomFree = parent?.leavesBottomEdgeFree(this) == true,
+            largeTitle = parent?.showsLargeTitleOver(this) == true,
         )
-        ScreenInsets.update(activity, id, insets, ScreenSafeArea.padding(insets, edges))
-        ScreenRegions.update(activity, id, Rect(place.left, place.top, place.right, place.bottom), windowInsets)
+        // The events of the screen go to the JavaScript it was made for, and to no other.
+        val emitter = EventEmitter.of(jsGeneration)
+        val padding = ScreenSafeArea.padding(insets, edges)
+        val uncovered = ScreenSafeArea.uncovered(insets, padding)
+        ScreenEnvironment.setInsets(id, uncovered, padding, ScreenEnvironment.changesOf(emitter))
+        val area = Rect(place.left, place.top, place.right, place.bottom)
+        ScreenRegions.update(activity, id, area, windowInsets, emitter)
     }
 
     // A layout asked for on the content or on a view around it: it isn't in its place yet.
@@ -241,9 +246,7 @@ class ComponentViewController(
         }
         setParentController(null)
         if (isIdTakenByAnother) return
-        ScreenInsets.remove(id)
-        ScreenRegions.remove(id)
-        ArrangementStates.remove(id)
+        ScreenEnvironment.remove(id)
         ScreenReadiness.remove(id)
     }
 

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/component/ContentReadiness.kt

@@ -5,7 +5,7 @@ import dev.apexnative.navigation.viewcontrollers.viewcontroller.ViewController
 /**
  * Whether a screen's content rendered, which a command waits for before the screen comes in: a new root (`setRoot`),
  * a push (unless `waitForRender: false`), the new top of a `setStackRoot`. A wait never listens to the readiness store
- * itself: the content keeps the one listener of its id and tells every waiter. Main thread only.
+ * itself: the content keeps its own listener of its id and tells every waiter. Main thread only.
  */
 internal interface Readiness {
     /** The content of [screen] rendered; a screen without content to wait for is ready. */

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/component/ScreenReadiness.kt

@@ -1,93 +1,128 @@
 package dev.apexnative.navigation.viewcontrollers.component
 
 /**
- * The readiness of each screen by its id: the safe area view of a screen (`ANNSafeAreaView`) tells it here that it is
- * laid out in its place and that the screen's content rendered into it, and asks whether the screen waits for that at
- * all. The screen's container listens by the screen's id: no view walks up or down the views to find the other. Main
- * thread only.
+ * The readiness of each screen by its id: the safe area view of a screen (`ANNSafeAreaView`) tells it here that it
+ * has one, that it is laid out in its place and that the screen's content rendered into it, and asks whether the
+ * screen waits for that at all. The content of a screen or of a component listens by the id: no view walks up or down
+ * the views to find the other. Main thread only.
+ *
+ * As on iOS (`ANNScreenReadiness`), what a safe area view said is kept: a listener that comes later hears it at once.
+ * Several listeners may wait on one id (the roots of a bar component that several screens show with one id), each
+ * under a key of its own, which removes it. Each signal carries its source, the React surface of the safe area view
+ * that gave it, and a listener hears only the sources it [accepts][Listener.accepts]: React Native never gives a
+ * surface's id twice in a process, so the late signal of another root with the same id (a root of the JavaScript that
+ * went, a destroyed screen, another live root of a bar component) never makes a new root ready.
  */
 object ScreenReadiness {
-    /** What a screen's container hears from the safe area view of its screen. */
+    /** The source of a signal that names none: a listener that accepts every source hears it. */
+    const val NO_SOURCE = -1
+
+    /** What the content of a screen or of a component hears from the safe area view of its id. */
     interface Listener {
+        /**
+         * Whether a signal of [source] (the id of the React surface of the safe area view that gave it) is this
+         * listener's: by default every one is.
+         */
+        fun accepts(source: Int): Boolean = true
+
         /** The safe area view is laid out in its place, with a size. */
-        fun onLaidOut()
+        fun onLaidOut() = Unit
 
         /** The screen rendered its content into its safe area view, also when it renders nothing (`null`). */
         fun onContentRendered()
     }
 
-    private val atOnce = HashSet<String>()
-    private val wrapped = HashSet<String>()
-    private val laidOut = HashSet<String>()
-    private val rendered = HashSet<String>()
-    private val listeners = HashMap<String, Listener>()
+    // What the safe area views of one id said: that one exists, and the sources that are laid out and rendered.
+    private class Entry {
+        var wrapped = false
+        val laidOut = HashSet<Int>()
+        val rendered = HashSet<Int>()
+    }
+
+    private val entries = HashMap<String, Entry>()
+    private val listeners = HashMap<String, LinkedHashMap<Any, Listener>>()
+    // The roots that render at once, by id: an id renders at once while one of them lives.
+    private val atOnce = HashMap<String, MutableSet<Any>>()
 
     /**
      * Whether the screen [screenId] waits for its safe area view to be laid out before its content renders: every
-     * screen does, as on iOS, unless the core marked it as one that renders at once ([setRendersAtOnce]) — a React
-     * component of a bar or a tab item, whose size comes from its content.
+     * screen does, as on iOS, unless a root of the id renders at once ([setRendersAtOnce]) — a React component of a
+     * bar or a tab item, whose size comes from its content.
      */
-    fun waitsForReadiness(screenId: String): Boolean = screenId !in atOnce
+    fun waitsForReadiness(screenId: String): Boolean = atOnce[screenId].isNullOrEmpty()
 
-    /** The core marks a React root it made as one that renders at once (a component of a bar, a tab item), or not. */
-    fun setRendersAtOnce(screenId: String, rendersAtOnce: Boolean) {
-        if (rendersAtOnce) atOnce += screenId else atOnce -= screenId
+    /**
+     * The root [key] of [screenId] renders at once (a component of a bar, a tab item), or stopped. The id renders at
+     * once while a root marks it; when the last one stops, what was said of the id goes too, so a later root with it
+     * starts anew.
+     */
+    fun setRendersAtOnce(screenId: String, key: Any, rendersAtOnce: Boolean) {
+        if (rendersAtOnce) {
+            atOnce.getOrPut(screenId, ::HashSet).add(key)
+            return
+        }
+        val keys = atOnce[screenId] ?: return
+        if (!keys.remove(key) || keys.isNotEmpty()) return
+        atOnce.remove(screenId)
+        entries.remove(screenId)
     }
 
     /** The screen [screenId] has a safe area view: it is rendered only once that view says so. */
     fun wrapped(screenId: String) {
-        wrapped += screenId
+        entryOf(screenId).wrapped = true
     }
 
-    /** The safe area view of [screenId] is laid out in its place, with a size. */
-    fun laidOut(screenId: String) {
-        if (laidOut.add(screenId)) listeners[screenId]?.onLaidOut()
+    /** The safe area view of [screenId], in the React surface [source], is laid out in its place, with a size. */
+    fun laidOut(screenId: String, source: Int = NO_SOURCE) {
+        val entry = entryOf(screenId)
+        entry.wrapped = true
+        if (entry.laidOut.add(source)) tell(screenId, source, Listener::onLaidOut)
     }
 
-    /** The screen [screenId] rendered its content into its safe area view. */
-    fun contentRendered(screenId: String) {
-        if (rendered.add(screenId)) listeners[screenId]?.onContentRendered()
+    /** The screen [screenId] rendered its content into its safe area view, in the React surface [source]. */
+    fun contentRendered(screenId: String, source: Int = NO_SOURCE) {
+        val entry = entryOf(screenId)
+        entry.wrapped = true
+        if (entry.rendered.add(source)) tell(screenId, source, Listener::onContentRendered)
     }
 
     /**
-     * Whether the screen [screenId] rendered its content into its safe area view; null when no safe area view told
-     * anything of it (a screen without one, of the old API: its container decides by its own content).
+     * Whether the screen [screenId] rendered its content into its safe area view, in a source [listener] accepts (any
+     * source without one); null when no safe area view told anything of the id (a screen without one, of the old API:
+     * its content decides by its own children).
      */
-    fun isContentRendered(screenId: String): Boolean? = when (screenId) {
-        in rendered -> true
-        in laidOut, in wrapped -> false
-        else -> null
-    }
-
-    /** [listener] hears the signals of [screenId] from now on; null stops it. */
-    fun setListener(screenId: String, listener: Listener?) {
-        if (listener == null) listeners.remove(screenId) else listeners[screenId] = listener
+    fun isContentRendered(screenId: String, listener: Listener? = null): Boolean? {
+        val entry = entries[screenId] ?: return null
+        return entry.rendered.any { listener?.accepts(it) ?: true }
     }
 
     /**
-     * [listener] stops hearing [screenId], if it is the one that listens: a later screen with the same id (a `setRoot`
-     * makes the new root before the old one goes) keeps its own.
+     * [listener] hears the signals of [screenId] under [key] (its owner) until [removeListener] with the key: a key
+     * has one listener per id, the other keys keep theirs. What the safe area views said before reaches it at once, in
+     * order, for the sources it accepts.
      */
-    fun removeListener(screenId: String, listener: Listener) {
-        if (listeners[screenId] === listener) listeners.remove(screenId)
+    fun addListener(screenId: String, key: Any, listener: Listener) {
+        listeners.getOrPut(screenId, ::LinkedHashMap)[key] = listener
+        val entry = entries[screenId] ?: return
+        if (entry.laidOut.any(listener::accepts) && isListening(screenId, key, listener)) listener.onLaidOut()
+        if (entry.rendered.any(listener::accepts) && isListening(screenId, key, listener)) listener.onContentRendered()
     }
 
-    /**
-     * A new root takes [screenId] while another with it lives (a component of a bar on two screens): what the other
-     * rendered isn't the new one's, which waits for its own render. Its mark of rendering at once stays.
-     */
-    fun forgetRender(screenId: String) {
-        laidOut -= screenId
-        rendered -= screenId
+    /** The listener of [key] stops hearing [screenId]; those of other keys (a later root with the id) keep theirs. */
+    fun removeListener(screenId: String, key: Any) {
+        val keys = listeners[screenId] ?: return
+        keys.remove(key)
+        if (keys.isEmpty()) listeners.remove(screenId)
     }
 
-    /** The screen is destroyed: what was kept of it goes, so a later screen with the same id starts anew. */
+    /**
+     * The screen [screenId] owns the id from now on (made), or went while no other node has it (destroyed): what its
+     * safe area views said and the marks of rendering at once go, so a later screen with the id starts anew. The
+     * listeners stay with their keys, which remove them.
+     */
     fun remove(screenId: String) {
-        atOnce -= screenId
-        wrapped -= screenId
-        laidOut -= screenId
-        rendered -= screenId
-        listeners -= screenId
+        entries.remove(screenId)
+        atOnce.remove(screenId)
     }
 
     /**
@@ -95,10 +130,22 @@ object ScreenReadiness {
      * "rendered" kept for a screen of the old one would make its new screen with the same id ready at once.
      */
     fun reset() {
-        atOnce.clear()
-        wrapped.clear()
-        laidOut.clear()
-        rendered.clear()
+        entries.clear()
         listeners.clear()
+        atOnce.clear()
+    }
+
+    private fun entryOf(screenId: String): Entry = entries.getOrPut(screenId, ::Entry)
+
+    private fun isListening(screenId: String, key: Any, listener: Listener): Boolean =
+        listeners[screenId]?.get(key) === listener
+
+    // Each listener of the id that accepts the source, as they are now: one that a listener before it removed hears
+    // nothing.
+    private fun tell(screenId: String, source: Int, signal: (Listener) -> Unit) {
+        val now = listeners[screenId]?.entries?.toList() ?: return
+        for ((key, listener) in now) {
+            if (isListening(screenId, key, listener) && listener.accepts(source)) signal(listener)
+        }
     }
 }