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

package/android/src/main/java/dev/apexnative/navigation/react/ReactView.kt

@@ -23,11 +23,15 @@ import dev.apexnative.navigation.viewcontrollers.viewcontroller.ScrollEventListe
  * is made with the view, from the app's React host, and fills it; it starts once, as the view joins a window, and stops
  * once, on the main thread, as the view is destroyed.
  *
- * Ready once the safe area view of the screen told [ScreenReadiness] that the content rendered into it; a screen
- * without a safe area view (no view ever told anything of its id) once the root view of its surface has children, read
- * on this view's own layout passes. Ready once, ready for good; what waits for it ([whenReady]) runs then, once.
- * Without either, the limits of what waits decide: the view has no timer of its own. It owns the record of its
- * appearance, which the dispatcher of the appearance events holds until the content is ready (`AppearanceDispatcher`).
+ * Ready once the safe area view of the screen, in this view's own surface, told [ScreenReadiness] that the content
+ * rendered into it: the signal of another root with the same id (an old one, another live root of a bar component)
+ * never makes this one ready. A screen without a safe area view (no view ever told anything of its id) is ready once
+ * the root view of its surface has children, read on this view's own layout passes. A root that renders at once
+ * ([rendersAtOnce]: a component of a bar, a tab's cell) marks its id so from before its surface starts until it stops.
+ * Ready once, ready for good; what waits for it ([whenReady]) runs then, once.
+ * Without a signal or children, the limits of what waits decide: the view has no timer of its own. It owns the
+ * record of its appearance, which the dispatcher of the appearance events holds until the content is ready
+ * (`AppearanceDispatcher`).
  */
 @SuppressLint("ViewConstructor")
 class ReactView @JvmOverloads constructor(
@@ -36,6 +40,8 @@ class ReactView @JvmOverloads constructor(
     override val componentName: String,
     /** Props given by the native side, over `componentId`: the state of a tab's cell. */
     initialProps: Bundle? = null,
+    /** The root renders at once, without waiting for its layout: a component of a bar or a tab's cell. */
+    private val rendersAtOnce: Boolean = false,
 ) : FrameLayout(context), IReactView {
     private val scrollEventListener = ScrollEventListener()
     private var destroyed = false
@@ -44,7 +50,14 @@ class ReactView @JvmOverloads constructor(
     // What waited for the readiness was told; a question of isReady alone tells nothing, so nothing runs inside it.
     private var readyTold = false
     private val readyListeners = mutableListOf<Runnable>()
-    private var readinessListener: ScreenReadiness.Listener? = null
+    private var listening = false
+
+    // What this root hears of its id: only the signals of its own surface.
+    private val readiness = object : ScreenReadiness.Listener {
+        override fun accepts(source: Int): Boolean = ownSource()?.let { it == source } ?: true
+
+        override fun onContentRendered() = checkReadiness()
+    }
 
     // None without the app's host (the unit tests).
     private val surface: ReactSurface?
@@ -59,8 +72,17 @@ class ReactView @JvmOverloads constructor(
      */
     internal var contentChildCount: () -> Int = { (surface?.view as? ViewGroup)?.childCount ?: 0 }
 
+    /**
+     * The id of this root's React surface, which the signals of its safe area view carry: React Native gives it as
+     * the surface starts (none matches before) and never gives it again. Null without a surface: every signal of the
+     * id is its own. The unit tests give their own.
+     */
+    internal var ownSource: () -> Int? = { surface?.surfaceID }
+
     init {
         require(componentId.isNotEmpty()) { "a React root needs the id of its screen" }
+        // Before the surface exists, so its safe area view never asks before the mark is there.
+        if (rendersAtOnce) ScreenReadiness.setRendersAtOnce(componentId, this, true)
         val props = Bundle().apply {
             initialProps?.let(::putAll)
             putString(COMPONENT_ID, componentId)
@@ -103,14 +125,9 @@ class ReactView @JvmOverloads constructor(
         if (readyTold) return listener.run()
         readyListeners += 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)
     }
 
     /**
@@ -126,23 +143,24 @@ class ReactView @JvmOverloads constructor(
         waiting.forEach(Runnable::run)
     }
 
-    // The safe area view said so; without one, the root view of the surface has children.
-    private fun hasRendered(): Boolean = when (ScreenReadiness.isContentRendered(componentId)) {
+    // The safe area view of this root's surface said so; without one, the root view of the surface has children.
+    private fun hasRendered(): Boolean = when (ScreenReadiness.isContentRendered(componentId, readiness)) {
         true -> true
         false -> false
         null -> contentChildCount() > 0
     }
 
     private fun stopListening() {
-        val readiness = readinessListener ?: return
-        readinessListener = null
-        ScreenReadiness.removeListener(componentId, readiness)
+        if (!listening) return
+        listening = false
+        ScreenReadiness.removeListener(componentId, this)
     }
 
     /**
      * Stops the content, once, on the main thread: its appearance ends first (DidDisappear if its WillAppear went,
      * else what is held goes with it), then the surface stops and leaves the host, so a reload doesn't start it again
-     * in the new JavaScript.
+     * in the new JavaScript. A root that renders at once takes its mark away: the last one of its id takes what was
+     * said of the id with it.
      */
     override fun destroy() {
         if (destroyed) return
@@ -150,6 +168,7 @@ class ReactView @JvmOverloads constructor(
         destroyed = true
         readyListeners.clear()
         stopListening()
+        if (rendersAtOnce) ScreenReadiness.setRendersAtOnce(componentId, this, false)
         val surface = surface ?: return
         if (started) surface.stop()
         surface.detach()

package/android/src/main/java/dev/apexnative/navigation/react/ReloadCoordinator.kt

@@ -4,7 +4,7 @@ import com.facebook.react.bridge.ReactContext
 import dev.apexnative.navigation.NavigationActivity
 import dev.apexnative.navigation.nativescreen.NativeScreenCalls
 import dev.apexnative.navigation.react.events.EventEmitter
-import dev.apexnative.navigation.react.events.NavigationStateReporter
+import dev.apexnative.navigation.react.events.NavigationState
 import dev.apexnative.navigation.utils.UiThread
 import dev.apexnative.navigation.viewcontrollers.navigator.BackCallbackState
 import dev.apexnative.navigation.viewcontrollers.navigator.Navigator
@@ -39,7 +39,7 @@ internal object ReloadCoordinator {
     /**
      * The JavaScript goes (a reload, or the host is destroyed). Any thread: the number grows at once; the layouts of
      * every navigation activity go on the main thread, with the "reloading" mark, and so do the listeners of the
-     * JavaScript that went (back, hinge).
+     * JavaScript that went (back, hinge) and the holds of the navigation state its `setRoot` left.
      */
     fun onJavaScriptGoes() {
         advance()
@@ -48,6 +48,7 @@ internal object ReloadCoordinator {
             launches.contextGone()
             try {
                 Navigators.all().forEach { it.onReload() }
+                NavigationState.javaScriptWent()
                 BackCallbackState.setJsListeners(false)
                 Hinge.setEnabled(Navigators.current(), false)
             } finally {
@@ -59,13 +60,15 @@ internal object ReloadCoordinator {
     /**
      * The developer tools of [activity] reload the JavaScript ("R R", the reload broadcast): the number grows first, so
      * the navigation of the activity goes without a word to the JavaScript that goes, then its layers go
-     * ([NavigationActivity.onReload]). The host's own reset follows as the reload destroys it. Main thread.
+     * ([NavigationActivity.onReload]) with the holds of the navigation state. The host's own reset follows as the
+     * reload destroys it. Main thread.
      */
     fun resetForDeveloperReload(activity: NavigationActivity) {
         advance()
         Navigator.setReloading(true)
         try {
             activity.onReload()
+            NavigationState.javaScriptWent()
         } finally {
             Navigator.setReloading(false)
         }
@@ -92,7 +95,7 @@ internal object ReloadCoordinator {
      */
     fun launchIfDue(activity: NavigationActivity) {
         val context = launches.takeDue(activity, activity.isNavigationResumed) ?: return
-        NavigationStateReporter.reset()
+        NavigationState.reset()
         EventEmitter(context).emitAppLaunched()
     }
 }

package/android/src/main/java/dev/apexnative/navigation/react/ScreenInsets.kt

@@ -1,7 +1,5 @@
 package dev.apexnative.navigation.react
 
-import android.content.Context
-import com.facebook.react.ReactApplication
 import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.WritableMap
 import dev.apexnative.navigation.react.events.EventContract
@@ -36,8 +34,11 @@ object ScreenInsets {
         }
     }
 
-    /** Keeps the screen's insets and padding, and tells when they changed. */
-    fun update(context: Context, screenId: String, value: Insets, paddingValue: Insets) {
+    /**
+     * Keeps the screen's insets and padding, and tells when they changed through [emitter], the one of the JavaScript
+     * the screen was made for: silent once it went.
+     */
+    fun update(screenId: String, value: Insets, paddingValue: Insets, emitter: EventEmitter) {
         if (padding.put(screenId, paddingValue) != paddingValue) {
             paddingListeners[screenId]?.toList()?.forEach { it() }
         }
@@ -49,8 +50,7 @@ object ScreenInsets {
             left = (value.left - paddingValue.left).coerceAtLeast(0.0),
         )
         if (insets.put(screenId, uncovered) == uncovered) return
-        val reactContext = (context.applicationContext as? ReactApplication)?.reactHost?.currentReactContext ?: return
-        EventEmitter(reactContext).emitScreenInsetsChanged(screenId, toMap(uncovered))
+        emitter.emitScreenInsetsChanged(screenId, toMap(uncovered))
     }
 
     /** `{ top, right, bottom, left }`, empty before the screen was laid out. Any thread. */

package/android/src/main/java/dev/apexnative/navigation/react/ScreenRegions.kt

@@ -3,7 +3,6 @@ package dev.apexnative.navigation.react
 import android.app.Activity
 import android.graphics.Rect
 import androidx.core.view.WindowInsetsCompat
-import com.facebook.react.ReactApplication
 import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.WritableArray
 import com.facebook.react.bridge.WritableMap
@@ -32,9 +31,16 @@ internal object ScreenRegions {
 
     /**
      * Measures the regions of the screen whose content the layout puts at [content] in the window (pixels), with the
-     * window's [insets] (the camera cutout), and tells JavaScript when they changed. Main thread only.
+     * window's [insets] (the camera cutout), and tells JavaScript when they changed, through [emitter], the one of the
+     * JavaScript the screen was made for: silent once it went. Main thread only.
      */
-    fun update(activity: Activity, screenId: String, content: Rect, insets: WindowInsetsCompat?) {
+    fun update(
+        activity: Activity,
+        screenId: String,
+        content: Rect,
+        insets: WindowInsetsCompat?,
+        emitter: EventEmitter,
+    ) {
         val folds = WindowFolds.of(activity)?.folds.orEmpty()
         val cutouts = insets?.displayCutout?.boundingRects.orEmpty()
         val density = activity.resources.displayMetrics.density
@@ -46,8 +52,7 @@ internal object ScreenRegions {
         val previous = regions.put(screenId, value)
         // None at first is what JavaScript reads before the first layout.
         if (previous == value || (previous == null && value.isEmpty)) return
-        val reactContext = (activity.application as? ReactApplication)?.reactHost?.currentReactContext ?: return
-        EventEmitter(reactContext).emitScreenRegionsChanged(screenId, toMap(value))
+        emitter.emitScreenRegionsChanged(screenId, toMap(value))
     }
 
     /** `{ division, occlusion }`, empty lists for an unknown screen and before its first layout. Any thread. */

package/android/src/main/java/dev/apexnative/navigation/react/events/AppearanceDispatcher.kt

@@ -90,7 +90,7 @@ internal object AppearanceDispatcher {
         val appearanceRecord: ScreenAppearance?
     }
 
-    /** The navigation state (`NavigationStateReporter`): one update in this pass of the main loop, or one now. */
+    /** The navigation state ([NavigationState]): one update in this pass of the main loop, or one now. */
     interface StateUpdates {
         /**
          * Asks for one update in this pass of the main loop: the calls of one pass make one, after a DidAppear or a
@@ -98,7 +98,10 @@ internal object AppearanceDispatcher {
          */
         fun setNeedsUpdate()
 
-        /** Computes the state now and sends it when it changed: before an answer, at the end of a transition. */
+        /**
+         * Computes the state now and sends it when it changed: a command's answer, once
+         * (`CommandAnswer.reportStateNow`), the end of a user's transition, a tab chosen from code.
+         */
         fun updateNow()
 
         /**
@@ -157,33 +160,6 @@ internal object AppearanceDispatcher {
             EventEmitter.current().emitSheetDetentChanged(componentId, detent)
     }
 
-    /** The state of `NavigationStateReporter`, sent through the JavaScript that runs now, when it can be. */
-    object ReporterState : StateUpdates {
-        private val handler by lazy { Handler(Looper.getMainLooper()) }
-
-        // The one posted update of a pass of the main loop, which checks the hold when it runs.
-        private val held = StateHold(
-            post = { task -> handler.post(task) },
-            generation = { ReloadCoordinator.generation },
-        ) {
-            val emitter = EventEmitter.current()
-            if (emitter.canSend) NavigationStateReporter.updateNow(emitter)
-        }
-
-        override fun setNeedsUpdate() {
-            if (EventEmitter.current().canSend) held.setNeedsUpdate()
-        }
-
-        override fun hold() = held.hold()
-
-        override fun release() = held.release()
-
-        override fun updateNow() {
-            val emitter = EventEmitter.current()
-            if (emitter.canSend) NavigationStateReporter.updateNow(emitter)
-        }
-    }
-
     /** The main thread's loop. */
     object MainScheduler : Scheduler {
         private val handler by lazy { Handler(Looper.getMainLooper()) }
@@ -198,8 +174,8 @@ internal object AppearanceDispatcher {
     /** Where the events go: [EmitterSender]; the tests put a journal here. */
     var sender: Sender = EmitterSender
 
-    /** The navigation state the sent appearance events and transitions update: [ReporterState]; a journal in tests. */
-    var state: StateUpdates = ReporterState
+    /** The navigation state the appearance events and transitions update: [NavigationState]; a journal in tests. */
+    var state: StateUpdates = NavigationState
 
     /** The clock of the hold limit: [MainScheduler]; the tests put a clock that moves when they say. */
     var scheduler: Scheduler = MainScheduler
@@ -337,12 +313,15 @@ internal object AppearanceDispatcher {
     }
 
     /**
-     * A transition ended,: what went disappears ([hiding]), what stands appears ([showing], with its WillAppear first
+     * A transition ended: what went disappears ([hiding]), what stands appears ([showing], with its WillAppear first
      * where it wasn't asked), the navigation state goes when it changed, then [events] (the transition's own:
      * `ANN.ScreenPopped`, `ANN.ModalDismissed`, and what must follow them, like stopping the content of what went),
-     * then [answer] resolves with [value] (the promise, then `ANN.CommandCompleted`). A user's action has no answer. A
-     * state that fails is logged ([log]) and the transition goes on: [events] and the answer always come. Without
-     * [reportsState] the caller sends the state itself, later (a tab switch: after `ANN.BottomTabSelected`).
+     * then [answer] resolves with [value] (the promise, then `ANN.CommandCompleted`; no second state). The state is the
+     * answer's one state step (`CommandAnswer.reportStateNow`), which sends nothing for a JavaScript that went; a
+     * user's action has no answer, and a command answered before its transition ended had its state then: the state
+     * of the end goes all the same, unless its JavaScript went. A state that fails is logged and the transition goes
+     * on: [events] and the answer always come. Without [reportsState] the caller sends the state itself, later (a tab
+     * switch: after `ANN.BottomTabSelected`; a `setRoot` with layers: from its answer).
      */
     fun endTransition(
         hiding: List<ViewController<*>>,
@@ -360,18 +339,30 @@ internal object AppearanceDispatcher {
             holdsState = false
         }
         showing.forEach { it.onViewDidAppear() }
-        if (reportsState) reportState(answer?.commandName)
+        if (reportsState) {
+            // The state before the transition's events, once per answer: the answer's own step before its promise
+            // finds it sent. Without an answer to wait for, the dispatcher sends it; nothing for a JavaScript that
+            // went.
+            when {
+                answer == null -> reportState()
+                answer.isAnswered -> if (ReloadCoordinator.isCurrent(answer.generation)) reportState()
+                else -> answer.reportStateNow()
+            }
+        }
         events?.invoke()
         answer?.resolve(value)
     }
 
-    /** The navigation state now, when it changed; a failure is logged ([log]), nothing else stops for it. */
-    fun reportState(commandName: String? = null) {
+    /**
+     * The navigation state now, when it changed, without a command's answer (a command's goes through its answer,
+     * `CommandAnswer.reportStateNow`); a failure is logged ([log]), nothing else stops for it.
+     */
+    fun reportState() {
         try {
             state.updateNow()
         } catch (e: Throwable) {
             val reason = ErrorTexts.couldNot("report the navigation state", ErrorTexts.reasonOf(e))
-            log("[ApexNavigation] ${commandName ?: "transition"}: $reason")
+            log("[ApexNavigation] transition: $reason")
         }
     }
 

package/android/src/main/java/dev/apexnative/navigation/react/events/EventEmitter.kt

@@ -6,6 +6,7 @@ import com.facebook.react.bridge.ReactContext
 import com.facebook.react.bridge.WritableMap
 import dev.apexnative.navigation.NavigationApplication
 import dev.apexnative.navigation.nativescreen.NativeScreenCalls
+import dev.apexnative.navigation.react.ReloadCoordinator
 import dev.apexnative.navigation.utils.NavigationLog
 import org.json.JSONArray
 
@@ -13,12 +14,26 @@ import org.json.JSONArray
  * Sends the events `ANN.<Name>` to the JavaScript of [reactContext] through React Native's device event emitter, in
  * the order they are sent: sent from the main thread only. Without a context, or when its React instance is gone, an
  * event is dropped with one line in the log. The names and the keys come from [EventContract], made from the types of
- * `src/interfaces/`. The core sends through [current]; modules keep making their own.
+ * `src/interfaces/`.
+ *
+ * An emitter belongs to one JavaScript, as on iOS (`ANNEventEmitter`): it takes the number of the JavaScript
+ * ([generation], `ReloadCoordinator`) when it is made and drops every event silently once that number moved. React
+ * Native keeps one context across a reload (bridgeless), so without it an event of a screen of the JavaScript that
+ * went would reach the new one, which may have a screen with the same id. The core and its modules send through
+ * [current], or [of] with the number of the JavaScript a node was made for.
  */
-class EventEmitter(private val reactContext: ReactContext?) {
-    /** Whether an event sent now reaches JavaScript. */
+class EventEmitter @JvmOverloads constructor(
+    private val reactContext: ReactContext?,
+    /** The number of the JavaScript this emitter sends to: by default the one that runs as it is made. */
+    val generation: Int = ReloadCoordinator.generation,
+) {
+    /** Whether the JavaScript of this emitter still runs: its events go only then. Any thread. */
+    val isCurrent: Boolean
+        get() = ReloadCoordinator.isCurrent(generation)
+
+    /** Whether an event sent now reaches JavaScript: its JavaScript still runs, in a live React instance. */
     val canSend: Boolean
-        get() = reactContext?.hasActiveReactInstance() == true
+        get() = isCurrent && reactContext?.hasActiveReactInstance() == true
 
     fun emitAppLaunched() = emit(EventContract.AppLaunched.EVENT, Arguments.createMap())
 
@@ -167,6 +182,8 @@ class EventEmitter(private val reactContext: ReactContext?) {
         Arguments.createMap().apply { putString(EventContract.ScreenPopped.COMPONENT_ID, componentId) }
 
     private fun emit(name: String, data: WritableMap) {
+        // The JavaScript of this emitter went: the new one never had its screens.
+        if (!isCurrent) return
         val context = reactContext
         if (context == null || !context.hasActiveReactInstance()) {
             Log.w(NavigationLog.TAG, "Could not send event $name. React context is null!")
@@ -176,10 +193,20 @@ class EventEmitter(private val reactContext: ReactContext?) {
     }
 
     companion object {
-        /** The sender to the JavaScript that runs now: the React context of the app's `ReactGateway`. */
+        /**
+         * The sender to the JavaScript that runs now: the React context of the app's `ReactGateway`. It goes silent
+         * once that JavaScript goes (a reload): one kept for later sends nothing to the next.
+         */
         @JvmStatic
-        fun current(): EventEmitter =
-            EventEmitter(NavigationApplication.instanceOrNull?.reactGatewayOrNull?.currentReactContext)
+        fun current(): EventEmitter = of(ReloadCoordinator.generation)
+
+        /**
+         * The sender to the JavaScript [generation] (a node's `jsGeneration`): the React context of the app's
+         * `ReactGateway` while that JavaScript runs, silent once it went, so an event of a screen made for the
+         * JavaScript that went never reaches the new one.
+         */
+        internal fun of(generation: Int): EventEmitter =
+            EventEmitter(NavigationApplication.instanceOrNull?.reactGatewayOrNull?.currentReactContext, generation)
 
         // The names of the events, for modules outside the library; inside it, [EventContract] has them with their
         // keys.

package/android/src/main/java/dev/apexnative/navigation/react/events/NavigationState.kt

@@ -0,0 +1,154 @@
+package dev.apexnative.navigation.react.events
+
+import android.os.Handler
+import android.os.Looper
+import dev.apexnative.navigation.react.ReloadCoordinator
+import dev.apexnative.navigation.viewcontrollers.bottomtabs.BottomTabsController
+import dev.apexnative.navigation.viewcontrollers.navigator.Navigators
+import dev.apexnative.navigation.viewcontrollers.parent.ParentController
+import dev.apexnative.navigation.viewcontrollers.viewcontroller.ViewController
+
+/**
+ * The one place of the navigation state JavaScript hears (`ANN.NavigationStateChanged`): the screen the user sees and
+ * the selected tab, the last state sent, the update posted for a pass of the main loop and its holds. Every change of
+ * the screen the user sees comes with a screen appearing: a push, a pop, a modal, a tab, a menu.
+ *
+ * Two ways ask for it. The dispatcher asks for one update after the events of a pass ([setNeedsUpdate], coalesced and
+ * held while a `setRoot` shows the modals and the overlays of its layout). A command's answer sends it at once
+ * ([updateNow], never held), once per answer (`CommandAnswer.reportStateNow`): at the end of its transition, else
+ * right before its promise. Each goes only when the state differs from the last one sent, through the JavaScript that
+ * runs now. Main thread only.
+ */
+internal object NavigationState : AppearanceDispatcher.StateUpdates {
+    /** What JavaScript hears: the screen the user sees (`null` for none) and the selected tab (`null` out of tabs). */
+    data class State(val screenId: String?, val screenName: String?, val tab: Int?)
+
+    private val handler by lazy { Handler(Looper.getMainLooper()) }
+
+    // The last state sent to the JavaScript that runs now; none before its first.
+    private var sent: State? = null
+
+    // The one posted update of a pass of the main loop, which checks the holds when it runs.
+    private val updates = Updates(
+        post = { task -> handler.post(task) },
+        generation = { ReloadCoordinator.generation },
+        update = ::updateNow,
+    )
+
+    override fun setNeedsUpdate() {
+        if (EventEmitter.current().canSend) updates.setNeedsUpdate()
+    }
+
+    override fun hold() = updates.hold()
+
+    override fun release() = updates.release()
+
+    /**
+     * Sends the state at once when it differs from the last one sent. A command's answer calls it once, at the end of
+     * its transition or right before its promise: the event and the resolution reach JavaScript in that order, so the
+     * state is new when the `await` of the command goes on. The update posted for the pass then finds nothing new.
+     */
+    override fun updateNow() {
+        val emitter = EventEmitter.current()
+        if (!emitter.canSend) return
+        // The navigation of the activity the commands run in (`Navigators.current`).
+        val navigator = Navigators.current()?.navigator ?: return
+        val next = stateOf(navigator.visibleLayout)
+        if (next == sent) return
+        sent = next
+        emitter.emitNavigationStateChanged(next.screenId, next.screenName, next.tab)
+    }
+
+    /** The new JavaScript has no state yet (`ANN.AppLaunched`): the next one goes to it whatever it is. */
+    fun reset() {
+        sent = null
+    }
+
+    /**
+     * The JavaScript went with its layouts: a hold its `setRoot` left, and an update wanted under it, go with it, so
+     * the new JavaScript's updates are never held by the old one's.
+     */
+    fun javaScriptWent() = updates.dropHolds()
+
+    // The top modal, or the root ([layout]), down to the screen the user sees; overlays don't count. The tab is the
+    // selected one of the nearest tabs the screen is in, the last met on the way down, in a modal too: the tabs
+    // `selectTab` acts on from it. None for a screen out of tabs.
+    internal fun stateOf(layout: ViewController<*>?): State {
+        var tab: Int? = null
+        var current = layout ?: return State(null, null, null)
+        while (current is ParentController<*>) {
+            if (current is BottomTabsController) tab = current.selectedIndex
+            current = current.currentChild ?: return State(null, null, null)
+        }
+        return State(current.id, current.currentComponentName, tab)
+    }
+
+    /**
+     * The posted update and its holds. [setNeedsUpdate] posts one update ([post]), coalesced: the asks of one pass of
+     * the main loop make one, which runs [update] in a later pass. While held, an ask, or a posted update that runs
+     * while held (asked before the hold was taken), only marks one as wanted, and the last release posts it. Released
+     * right before the answer, that update finds nothing new: the state before the answer is sent at once, never
+     * held, and an identical state is never sent twice. Every [hold] has one [release]; a release without a hold does
+     * nothing, so the count never goes below zero. An update keeps the JavaScript it was asked for ([generation]): one
+     * asked by a JavaScript that went before it runs is dropped; a newer ask of the new JavaScript still goes.
+     */
+    internal class Updates(
+        private val post: (() -> Unit) -> Unit,
+        private val generation: () -> Int = { 0 },
+        private val update: () -> Unit,
+    ) {
+        /** The holds not released yet. */
+        var count = 0
+            private set
+
+        // An update was asked while held.
+        private var wanted = false
+        // An update is posted and hasn't run yet.
+        private var scheduled = false
+        // The JavaScript the last ask was for.
+        private var askedIn = 0
+
+        /** Asks for one update in a later pass of the main loop; while held, once the last hold is released. */
+        fun setNeedsUpdate() {
+            askedIn = generation()
+            if (count > 0) wanted = true else schedule()
+        }
+
+        /** The updates asked from now on, and those posted that run from now on, wait for as many [release]s. */
+        fun hold() {
+            count++
+        }
+
+        /** One hold ends; with the last, the update asked while held is posted now. */
+        fun release() {
+            if (count == 0) return
+            count--
+            if (count > 0 || !wanted) return
+            wanted = false
+            schedule()
+        }
+
+        /**
+         * The holds and the update wanted under them go, unreleased: the JavaScript that took them went. An update
+         * already posted stays; it runs only for the JavaScript it was asked for.
+         */
+        fun dropHolds() {
+            count = 0
+            wanted = false
+        }
+
+        private fun schedule() {
+            if (scheduled) return
+            scheduled = true
+            post {
+                scheduled = false
+                // A hold taken since it was posted: the update waits for the release. The JavaScript it was asked for
+                // went: nothing goes to the new one, which hears its first state after its own changes.
+                when {
+                    count > 0 -> wanted = true
+                    askedIn == generation() -> update()
+                }
+            }
+        }
+    }
+}

package/android/src/main/java/dev/apexnative/navigation/safearea/SafeAreaView.kt

@@ -95,8 +95,9 @@ class SafeAreaView(reactContext: ThemedReactContext) : ReactViewGroup(reactConte
         val reactContext = context as? ReactContext ?: return
         val dispatcher = UIManagerHelper.getEventDispatcher(reactContext) ?: return
         readySent = true
-        dispatcher.dispatchEvent(SafeAreaReadyEvent(UIManagerHelper.getSurfaceId(this), id))
-        screenId?.let(ScreenReadiness::laidOut)
+        val surfaceId = UIManagerHelper.getSurfaceId(this)
+        dispatcher.dispatchEvent(SafeAreaReadyEvent(surfaceId, id))
+        screenId?.let { ScreenReadiness.laidOut(it, surfaceId) }
     }
 
     // The navigation tells whether this view's screen waits: a component of a bar (title, button, background, tab)
@@ -111,12 +112,13 @@ class SafeAreaView(reactContext: ThemedReactContext) : ReactViewGroup(reactConte
     }
 
     // Once, by the screen's id: the container asks the screen's view for the layout React mounts the content without.
-    // On attach too: content added before this view was attached is signalled then.
+    // On attach too: content added before this view was attached is signalled then. The signal names this view's
+    // surface: only the root that shows it takes it as its own.
     private fun signalContent() {
         if (contentSignalled) return
         val id = screenId ?: return
         contentSignalled = true
-        ScreenReadiness.contentRendered(id)
+        ScreenReadiness.contentRendered(id, UIManagerHelper.getSurfaceId(this))
     }
 
     fun drop() {