@apexnative/navigation 0.0.0-stage → 1.0.0-alpha.0

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

@@ -0,0 +1,28 @@
+package dev.apexnative.navigation.viewcontrollers.component
+
+import android.app.Activity
+import android.content.Context
+import com.facebook.react.ReactApplication
+import dev.apexnative.navigation.react.ReactView
+import dev.apexnative.navigation.slots.SlotHost
+import dev.apexnative.navigation.slots.SlotScreenView
+import dev.apexnative.navigation.viewcontrollers.viewcontroller.IReactView
+
+/**
+ * Makes what a screen shows: for a name starting with [SLOT_PREFIX], the slot screen of the slots module, whose content
+ * the app's one React tree renders — making one starts that tree's host; otherwise a React root of its own.
+ */
+object ScreenContentFactory {
+    /** The prefix of the names of slot screens (`slot:<Name>`); events and the navigation state name them without. */
+    const val SLOT_PREFIX = "slot:"
+
+    @JvmStatic
+    fun create(context: Context, componentId: String, componentName: String): IReactView =
+        if (componentName.startsWith(SLOT_PREFIX)) {
+            // The host needs the app's React host; an activity without one (the unit tests) has no tree to start.
+            if ((context as? Activity)?.application is ReactApplication) SlotHost.ensureStarted(context)
+            SlotScreenView(context, componentId, componentName.removePrefix(SLOT_PREFIX))
+        } else {
+            ReactView(context, componentId, componentName)
+        }
+}

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

@@ -0,0 +1,22 @@
+package dev.apexnative.navigation.viewcontrollers.component
+
+import android.app.Activity
+import android.content.Context
+import android.view.inputmethod.InputMethodManager
+
+/**
+ * How a screen with `blurOnUnmount` lets go of the focus as it starts to leave (`blurOnUnmount`): the view that has the
+ * focus of the activity loses it, and the keyboard goes. React Native's text field hides the keyboard only when
+ * JavaScript blurs it (`ReactEditText.clearFocusAndMaybeRefocus`), not on a plain `clearFocus`, so the keyboard is
+ * hidden here. The unit tests put their own [blur] here. Main thread only.
+ */
+internal object ScreenFocus {
+    /** Takes the focus away from what has it in the activity, and hides the keyboard. */
+    var blur: (Activity) -> Unit = { activity ->
+        activity.currentFocus?.let { focused ->
+            focused.clearFocus()
+            (activity.getSystemService(Context.INPUT_METHOD_SERVICE) as? InputMethodManager)
+                ?.hideSoftInputFromWindow(focused.windowToken, 0)
+        }
+    }
+}

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

@@ -0,0 +1,154 @@
+package dev.apexnative.navigation.viewcontrollers.component
+
+import android.view.View
+import android.view.ViewGroup
+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.viewcontrollers.parent.KeepsStatusBarRoom
+import dev.apexnative.navigation.viewcontrollers.viewcontroller.ViewController
+
+/**
+ * The room a screen's view keeps for the bars, and what the system covers: the room at the top (the status bar, then
+ * what the layouts around give: the header when the screen isn't under it) and at the bottom (the tabs when it isn't
+ * under them) as the margins of the view; the side bars, the navigation bar and the keyboard as its inner padding, from
+ * the window insets the view gets through its own listener. A screen of a pair keeps no room: the pair keeps it for
+ * both, by the same rule ([topRoomOf]), and each time the screen's room would apply it applies the pair's. Used by the
+ * React screen and the native screen. Main thread only.
+ */
+internal class ScreenFrame(
+    private val screen: ViewController<*>,
+    // A native screen's container takes the insets and passes nothing on; a React screen's view lets them go on to its
+    // content as they are.
+    private val consumesInsets: Boolean,
+) {
+    /** The window insets the screen's view got last; none before the first. */
+    var windowInsets: WindowInsetsCompat? = null
+        private set
+
+    /** Runs after each new window insets, once the room and the padding took them (the background's band). */
+    var onInsetsApplied: (() -> Unit)? = null
+
+    /**
+     * The height of the status bar, from the insets the view got, or the window's before them; shown or not: whether
+     * the screen keeps its room is for its own options to say (`statusBar.visible`, `drawBehind`), not for what another
+     * layer did to the status bar.
+     */
+    val statusBarHeight: Int
+        get() = (windowInsets ?: windowInsetsOfActivity())
+            ?.getInsetsIgnoringVisibility(WindowInsetsCompat.Type.statusBars())?.top ?: 0
+
+    /** The screen is a screen of a pair (`KeepsStatusBarRoom`): the pair keeps the room of both. */
+    val isInPair: Boolean
+        get() = screen.parentController is KeepsStatusBarRoom
+
+    /** The screen's view takes the window insets through [view]'s own listener. */
+    fun attach(view: View) {
+        ViewCompat.setOnApplyWindowInsetsListener(view) { target, insets ->
+            windowInsets = insets
+            applyPadding(target, insets)
+            applyRoom()
+            onInsetsApplied?.invoke()
+            if (consumesInsets) WindowInsetsCompat.CONSUMED else insets
+        }
+    }
+
+    /**
+     * The view joined a window: its room applies; it asks for the window insets only when it has none yet, so a
+     * screen that comes back doesn't make the window send them to every view again.
+     */
+    fun onAttached(view: View) {
+        applyRoom()
+        if (windowInsets == null) ViewCompat.requestApplyInsets(view)
+    }
+
+    /** The padding applies again from the insets the view has, or from new ones (`layout.adjustResize`). */
+    fun applyInsetsAgain() {
+        val view = screen.peekView() ?: return
+        val insets = windowInsets
+        if (insets != null) applyPadding(view, insets)
+        ViewCompat.requestApplyInsets(view)
+    }
+
+    /** The room at the top of the screen: the status bar's, then what the layouts around give. */
+    fun topRoom(): Int = if (isInPair) 0 else topRoomOf(screen, resolvedOptions(), statusBarHeight)
+
+    /** The room at the bottom of the screen: what the layouts around give (the tabs). */
+    fun bottomRoom(): Int = if (isInPair) 0 else screen.parentController?.getBottomInset(screen) ?: 0
+
+    /**
+     * The room applies as the margins of the screen's view; nothing changes when they are the same. A screen of a pair
+     * applies the pair's room: its view joining the window, new insets, a merge that changes the room and the tabs'
+     * room reach the pair through its screens.
+     */
+    fun applyRoom() {
+        if (isInPair) {
+            screen.parentController?.applyTopInset()
+            screen.parentController?.applyBottomInset()
+        }
+        val view = screen.peekView() ?: return
+        val params = view.layoutParams as? ViewGroup.MarginLayoutParams ?: return
+        val top = topRoom()
+        val bottom = bottomRoom()
+        if (params.topMargin == top && params.bottomMargin == bottom) return
+        params.topMargin = top
+        params.bottomMargin = bottom
+        view.layoutParams = params
+    }
+
+    // The side bars, the navigation bar unless the screen draws under it, and the keyboard unless the screen keeps
+    // its size; the tabs' room below the screen is already out of the keyboard's way.
+    private fun applyPadding(view: View, insets: WindowInsetsCompat) {
+        val options = resolvedOptions()
+        val bars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
+        val navigationBar = options.navigationBar
+        val padding = ScreenSafeArea.roomPadding(
+            systemBars = ScreenSafeArea.Box(bars.left, bars.top, bars.right, bars.bottom),
+            imeBottom = insets.getInsets(WindowInsetsCompat.Type.ime()).bottom,
+            drawsUnderNavigationBar = ScreenSafeArea.drawsUnderNavigationBar(
+                drawBehind = if (navigationBar.drawBehind.hasValue()) navigationBar.drawBehind.isTrue else null,
+                barColor = navigationBar.backgroundColor.get(screen.activity, null),
+            ),
+            adjustsForKeyboard = !options.layout.adjustResize.isFalse,
+            bottomRoom = roomBelow(),
+        )
+        if (view.paddingLeft == padding.left && view.paddingTop == padding.top && view.paddingRight == padding.right &&
+            view.paddingBottom == padding.bottom
+        ) {
+            return
+        }
+        view.setPadding(padding.left, padding.top, padding.right, padding.bottom)
+    }
+
+    // What the screen, or the pair it is in, keeps below it for the tabs.
+    private fun roomBelow(): Int {
+        val parent = screen.parentController
+        return if (parent is KeepsStatusBarRoom) parent.getBottomInset() else bottomRoom()
+    }
+
+    private fun windowInsetsOfActivity(): WindowInsetsCompat? {
+        val decor = screen.activity.window?.peekDecorView() ?: return null
+        return ViewCompat.getRootWindowInsets(decor)
+    }
+
+    private fun resolvedOptions(): Options = screen.resolveCurrentOptions(DefaultOptions.current)
+
+    companion object {
+        /**
+         * The room at the top of [node], a screen or a pair, shown with [options]: the status bar's ([statusBarHeight],
+         * `ScreenSafeArea.statusBarRoom`), then what the layouts around give.
+         */
+        fun topRoomOf(node: ViewController<*>, options: Options, statusBarHeight: Int): Int {
+            val parent = node.parentController
+            val statusBar = ScreenSafeArea.statusBarRoom(
+                statusBarHeight = statusBarHeight,
+                hiddenOrDrawBehind = options.statusBar.isHiddenOrDrawBehind,
+                inSheet = node.isInSheet,
+                inSideMenu = node.isInSideMenu,
+                keptAround = parent?.keepsStatusBarRoomOf(node) == true,
+            )
+            return statusBar + (parent?.getTopInset(node) ?: 0)
+        }
+    }
+}

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

@@ -0,0 +1,104 @@
+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.
+ */
+object ScreenReadiness {
+    /** What a screen's container hears from the safe area view of its screen. */
+    interface Listener {
+        /** The safe area view is laid out in its place, with a size. */
+        fun onLaidOut()
+
+        /** 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>()
+
+    /**
+     * 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.
+     */
+    fun waitsForReadiness(screenId: String): Boolean = screenId !in atOnce
+
+    /** 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 screen [screenId] has a safe area view: it is rendered only once that view says so. */
+    fun wrapped(screenId: String) {
+        wrapped += screenId
+    }
+
+    /** 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 screen [screenId] rendered its content into its safe area view. */
+    fun contentRendered(screenId: String) {
+        if (rendered.add(screenId)) listeners[screenId]?.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).
+     */
+    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
+    }
+
+    /**
+     * [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.
+     */
+    fun removeListener(screenId: String, listener: Listener) {
+        if (listeners[screenId] === listener) listeners.remove(screenId)
+    }
+
+    /**
+     * 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 screen is destroyed: what was kept of it goes, so a later screen with the same id starts anew. */
+    fun remove(screenId: String) {
+        atOnce -= screenId
+        wrapped -= screenId
+        laidOut -= screenId
+        rendered -= screenId
+        listeners -= screenId
+    }
+
+    /**
+     * The JavaScript went (a reload): everything goes, before the new JavaScript renders. It counts the ids anew, and a
+     * "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()
+        listeners.clear()
+    }
+}

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

@@ -0,0 +1,148 @@
+package dev.apexnative.navigation.viewcontrollers.component
+
+import dev.apexnative.navigation.react.ScreenInsets
+
+/**
+ * The arithmetic of a screen's room, safe area and background on Android, without views: the screen nodes read the
+ * views and the options, and give the numbers here. Sizes are pixels unless a function says dp.
+ */
+internal object ScreenSafeArea {
+    /** Four sides: a rectangle (its edges), or how much covers each edge of something. */
+    data class Box(val left: Int, val top: Int, val right: Int, val bottom: Int)
+
+    /** One view on the way from the React root up to the window: its place in its parent, and its parent's scroll. */
+    data class Step(val left: Int, val top: Int, val parentScrollX: Int, val parentScrollY: Int)
+
+    const val TOP = "top"
+    const val RIGHT = "right"
+    const val BOTTOM = "bottom"
+    const val LEFT = "left"
+
+    private val ALL_EDGES = setOf(TOP, RIGHT, BOTTOM, LEFT)
+    private const val OPAQUE = 0xFF
+
+    /**
+     * Whether a screen measures its safe area now: its view shows, no layout is on its way to it or to a view around it
+     * (it isn't in its place yet), and it is the top of its stack or has no safe area yet (two pushes in one frame).
+     */
+    fun measuresNow(shown: Boolean, layoutPending: Boolean, topOfStack: Boolean, hasSafeArea: Boolean): Boolean =
+        shown && !layoutPending && (topOfStack || !hasSafeArea)
+
+    /**
+     * Where a view of [width] × [height] is in the window: the sum of the places up its [steps], each less the scroll
+     * of its parent, without the translations of animations, so a screen coming in counts where it will rest.
+     */
+    fun placeInWindow(steps: List<Step>, width: Int, height: Int): Box {
+        var x = 0
+        var y = 0
+        for (step in steps) {
+            x += step.left - step.parentScrollX
+            y += step.top - step.parentScrollY
+        }
+        return Box(x, y, x + width, y + height)
+    }
+
+    /**
+     * How much of the React root at [root] (in the window) the bars and the system cover, in dp: at the top the larger
+     * of the system's top ([system], status bar and cutout) and the bottom of the header ([headerBottom]); at the
+     * bottom the smaller of the system's bottom and the top of the tabs ([tabsTop]); at the sides the system bars and
+     * the cutout. The root is counted inside the screen view's own padding: what that padding keeps off (an opaque
+     * navigation bar, the keyboard, side bars) isn't counted twice.
+     */
+    fun insets(
+        windowWidth: Int,
+        windowHeight: Int,
+        system: Box,
+        root: Box,
+        headerBottom: Int?,
+        tabsTop: Int?,
+        density: Float,
+    ): ScreenInsets.Insets {
+        val coveredAbove = maxOf(system.top, headerBottom ?: 0)
+        val coveredBelow = minOf(windowHeight - system.bottom, tabsTop ?: windowHeight)
+        return ScreenInsets.Insets(
+            top = dp((coveredAbove - root.top).coerceAtLeast(0), density),
+            right = dp((root.right - (windowWidth - system.right)).coerceAtLeast(0), density),
+            bottom = dp((root.bottom - coveredBelow).coerceAtLeast(0), density),
+            left = dp((system.left - root.left).coerceAtLeast(0), density),
+        )
+    }
+
+    /**
+     * The edges the screen's safe area view keeps its content off: exactly [safeAreaEdges] when the options give them;
+     * else all four, but the top when the stack's header hides on scroll or a large title shows ([topFree]) and the
+     * bottom when the tabs hide on scroll ([bottomFree]).
+     */
+    fun paddedEdges(safeAreaEdges: List<String>?, topFree: Boolean, bottomFree: Boolean): Set<String> {
+        if (safeAreaEdges != null) return safeAreaEdges.filterTo(LinkedHashSet()) { it in ALL_EDGES }
+        val edges = LinkedHashSet(ALL_EDGES)
+        if (topFree) edges -= TOP
+        if (bottomFree) edges -= BOTTOM
+        return edges
+    }
+
+    /** The padding of the safe area view: the [insets] on the [edges] it keeps, 0 on the others. */
+    fun padding(insets: ScreenInsets.Insets, edges: Set<String>): ScreenInsets.Insets = ScreenInsets.Insets(
+        top = if (TOP in edges) insets.top else 0.0,
+        right = if (RIGHT in edges) insets.right else 0.0,
+        bottom = if (BOTTOM in edges) insets.bottom else 0.0,
+        left = if (LEFT in edges) insets.left else 0.0,
+    )
+
+    /**
+     * The inner padding of a screen's view: the side system bars ([systemBars]) at the sides; at the bottom the larger
+     * of the navigation bar (none when the screen draws under it) and the keyboard ([imeBottom]; none with
+     * `layout.adjustResize: false`), less the room the screen keeps below it for the tabs ([bottomRoom]), never below
+     * 0; nothing at the top, which the screen's room gives.
+     */
+    fun roomPadding(
+        systemBars: Box,
+        imeBottom: Int,
+        drawsUnderNavigationBar: Boolean,
+        adjustsForKeyboard: Boolean,
+        bottomRoom: Int,
+    ): Box {
+        val navigationBar = if (drawsUnderNavigationBar) 0 else systemBars.bottom
+        val keyboard = if (adjustsForKeyboard) imeBottom else 0
+        val bottom = (maxOf(navigationBar, keyboard) - bottomRoom).coerceAtLeast(0)
+        return Box(systemBars.left, 0, systemBars.right, bottom)
+    }
+
+    /**
+     * Whether a screen draws under the navigation bar (`navigationBar.drawBehind`): as `navigationBar.drawBehind` says
+     * ([drawBehind]); without it, unless the bar has a color of its own that is opaque ([barColor], ARGB). Without edge
+     * to edge the window ends above the bar, and the bar's insets are 0 anyway.
+     */
+    fun drawsUnderNavigationBar(drawBehind: Boolean?, barColor: Int?): Boolean =
+        drawBehind ?: (barColor == null || (barColor ushr 24) != OPAQUE)
+
+    /**
+     * The room for the status bar a screen keeps at its top: its height, but none when the status bar is hidden or the
+     * screen is drawn under it ([hiddenOrDrawBehind]), in a sheet, in a side menu, or when a layout around keeps it
+     * ([keptAround]).
+     */
+    fun statusBarRoom(
+        statusBarHeight: Int,
+        hiddenOrDrawBehind: Boolean,
+        inSheet: Boolean,
+        inSideMenu: Boolean,
+        keptAround: Boolean,
+    ): Int = if (hiddenOrDrawBehind || inSheet || inSideMenu || keptAround) 0 else statusBarHeight
+
+    /**
+     * How far from the top of the screen's view `layout.backgroundColor` starts: the color stays out of the status
+     * bar's height, but goes up to the top when the screen is drawn under the status bar or it is hidden
+     * ([hiddenOrDrawBehind]), for a screen of a side menu, in a sheet, of a pair (the pair keeps the room), and for a
+     * screen with a room at its top already ([topRoom]: it is below the status bar anyway).
+     */
+    fun backgroundBand(
+        statusBarHeight: Int,
+        hiddenOrDrawBehind: Boolean,
+        inSideMenu: Boolean,
+        inSheet: Boolean,
+        inPair: Boolean,
+        topRoom: Int,
+    ): Int = if (hiddenOrDrawBehind || inSideMenu || inSheet || inPair || topRoom > 0) 0 else statusBarHeight
+
+    private fun dp(px: Int, density: Float): Double = if (density > 0) px / density.toDouble() else px.toDouble()
+}

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/externalcomponent/ExternalComponentCreator.kt

@@ -0,0 +1,18 @@
+package dev.apexnative.navigation.viewcontrollers.externalcomponent
+
+import android.view.View
+import androidx.fragment.app.FragmentActivity
+import org.json.JSONObject
+
+/** What a creator of the 8.x registration made: the view of a native screen. */
+fun interface ExternalComponent {
+    fun asView(): View
+}
+
+/**
+ * A creator of a native screen of the 8.x registration: it gets the props the screen showed with. Apps register
+ * `NativeScreenCreator`; this one only stands behind `NativeScreenCreator.of`.
+ */
+fun interface ExternalComponentCreator {
+    fun create(activity: FragmentActivity, props: JSONObject): ExternalComponent
+}

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/externalcomponent/ExternalComponentViewController.kt

@@ -0,0 +1,187 @@
+package dev.apexnative.navigation.viewcontrollers.externalcomponent
+
+import android.app.Activity
+import android.util.Log
+import android.view.View
+import android.view.ViewGroup
+import androidx.fragment.app.FragmentActivity
+import dev.apexnative.navigation.NavigationApplication
+import dev.apexnative.navigation.layout.LayoutException
+import dev.apexnative.navigation.nativescreen.NativeScreenContext
+import dev.apexnative.navigation.options.DefaultOptions
+import dev.apexnative.navigation.options.Options
+import dev.apexnative.navigation.react.ArrangementStates
+import dev.apexnative.navigation.react.CommandScope
+import dev.apexnative.navigation.react.ErrorTexts
+import dev.apexnative.navigation.react.ScreenInsets
+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.ScreenAppearance
+import dev.apexnative.navigation.system.SystemUiOwner
+import dev.apexnative.navigation.utils.NavigationLog
+import dev.apexnative.navigation.viewcontrollers.child.ChildController
+import dev.apexnative.navigation.viewcontrollers.child.ChildControllersRegistry
+import dev.apexnative.navigation.viewcontrollers.component.ComponentPresenter
+import dev.apexnative.navigation.viewcontrollers.component.ScreenFocus
+import dev.apexnative.navigation.viewcontrollers.component.ScreenFrame
+import dev.apexnative.navigation.viewcontrollers.component.ScreenReadiness
+import dev.apexnative.navigation.viewcontrollers.viewcontroller.Presenter
+import dev.apexnative.navigation.views.externalcomponent.ExternalComponentLayout
+
+/**
+ * A native screen (`ExternalComponent` of the layout): the app's view, made by the creator the app registered under
+ * [name] (`NavigationApplication.registerNativeScreen`), in a container of the navigation. Its [context] is made with
+ * the node, not with its view: props that come before the view (a tab not selected yet) are kept, and
+ * `updateNativeScreenProps` finds it by the node's id. The creator is called as the view is made; when none is
+ * registered or it makes nothing, the command that makes the view rejects (`ErrorTexts.nativeScreenNotRegistered`,
+ * `nativeScreenNotCreated`) and the node sends no `ANN.NativeScreenReleased`; a view made later, when no command can be
+ * answered, stays an empty container with one line in the log.
+ *
+ * It is ready at once: the navigation waits for nothing of it. Its appearance (`ANN.ComponentWillAppear` as it starts
+ * to appear, `ANN.ComponentDidAppear` after the transition, `ANN.ComponentDidDisappear` as it goes) is its own
+ * record's, with its registration name and the type `Component`; it has no safe area: it keeps its edges itself. Its
+ * view keeps the room for the bars as a React screen's does, without the status bar in a side menu and in a sheet. As
+ * it leaves the layout, however it leaves, `ANN.NativeScreenReleased` goes once, and nothing after a reload.
+ */
+class ExternalComponentViewController internal constructor(
+    activity: Activity,
+    childRegistry: ChildControllersRegistry,
+    id: String,
+    /** The name the app registered the screen with (`data.name`). */
+    val name: String,
+    /** What the screen gets from JavaScript, for as long as it is open. */
+    val context: NativeScreenContext,
+    presenter: Presenter,
+    initialOptions: Options,
+    // The creator registered under the name, asked as the view is made (a later registration counts); none when none
+    // is registered. It makes the app's view, or nothing. The unit tests give their own.
+    private val findCreator: () -> ((Activity, NativeScreenContext) -> View?)? = { registeredCreator(name) },
+) : ChildController<ExternalComponentLayout>(activity, childRegistry, id, presenter, initialOptions) {
+    /** The room of the screen's view for the bars and the system; the container takes the insets itself. */
+    internal val frame = ScreenFrame(this, consumesInsets = true)
+
+    /** The appearance of the screen; ready at once. */
+    internal val appearance = ScreenAppearance(id, name, ComponentType.Component, null)
+
+    // The command that made the view rejected it: JavaScript never got the screen and releases it itself.
+    private var notMade = false
+
+    override val currentComponentName: String
+        get() = name
+
+    override fun createView(): ExternalComponentLayout {
+        val layout = ExternalComponentLayout(activity)
+        frame.attach(layout)
+        // New window insets: the status bar's band of the background may have changed.
+        frame.onInsetsApplied = {
+            (presenter as? ComponentPresenter)?.applyBackground(this, resolveCurrentOptions(DefaultOptions.current))
+        }
+        layout.onAttached = { frame.onAttached(layout) }
+        val creator = findCreator()
+        val made = try {
+            creator?.invoke(activity, context)
+        } catch (e: Throwable) {
+            // The command that makes the view rejects with the failure; later, nothing can be answered.
+            if (CommandScope.isRunning) {
+                notMade = true
+                throw e
+            }
+            Log.e(NavigationLog.TAG, "[ApexNavigation] the native screen '$name' failed to make its view", e)
+            null
+        }
+        if (made != null) {
+            layout.setContent(made)
+        } else {
+            val text = if (creator == null) {
+                ErrorTexts.nativeScreenNotRegistered(name)
+            } else {
+                ErrorTexts.nativeScreenNotCreated(name)
+            }
+            if (CommandScope.isRunning) {
+                notMade = true
+                throw LayoutException(text)
+            }
+            Log.e(NavigationLog.TAG, "[ApexNavigation] $text")
+        }
+        return layout
+    }
+
+    // As a React screen's: the layout around takes its part of the options.
+    override fun applyOptions(options: Options) {
+        presenter.applyOptions(this, options)
+        performOnParentController { it.applyChildOptions(options, this) }
+    }
+
+    override fun getTopInset(): Int = frame.topRoom()
+
+    override fun applyTopInset() = frame.applyRoom()
+
+    override fun getBottomInset(): Int = frame.bottomRoom()
+
+    override fun applyBottomInset() = frame.applyRoom()
+
+    // The bar's buttons send ANN.NavigationButtonPressed with the screen's id.
+    override fun sendOnNavigationButtonPressed(buttonId: String) =
+        AppearanceDispatcher.navigationButtonPressed(this, buttonId)
+
+    override fun onViewWillAppear() {
+        if (isDestroyed) return
+        super.onViewWillAppear()
+        if (isViewCreated) applyOptions(resolveCurrentOptions(DefaultOptions.current))
+        AppearanceDispatcher.willAppear(appearance)
+        findParentStack()?.barScreenWillAppear(this)
+    }
+
+    override fun onViewDidAppear() {
+        if (isDestroyed) return
+        AppearanceDispatcher.didAppear(appearance)
+        findParentStack()?.barScreenDidAppear(this)
+        super.onViewDidAppear()
+    }
+
+    // As a React screen's: the system UI follows what is on top now.
+    override fun onViewDisappear() {
+        if (isDestroyed) return
+        AppearanceDispatcher.didDisappear(appearance)
+        findParentStack()?.barScreenDisappeared(this)
+        super.onViewDisappear()
+        SystemUiOwner.of(activity)?.invalidate()
+    }
+
+    /** As a React screen's (`blurOnUnmount`): a field of the app's view loses the focus as the screen leaves. */
+    override fun onLeaveStarted() {
+        if (isDestroyed) return
+        if (resolveCurrentOptions(DefaultOptions.current).blurOnUnmount.isTrue) ScreenFocus.blur(activity)
+    }
+
+    /**
+     * Destroys the screen once: it disappears when it showed, leaves the registry, its view leaves its parent, the
+     * link to its layout breaks, and, unless a later node has the id now (a root set again with the same ids), what is
+     * kept by the id goes and `ANN.NativeScreenReleased` goes, once and only to its own JavaScript: that later node's
+     * screen keeps its hook in JavaScript. A screen whose command rejected because its view wasn't made sends nothing.
+     */
+    override fun destroy() {
+        if (isDestroyed) return
+        onViewDisappear()
+        super.destroy()
+        // The layout it is in lets go of what it kept for it (the components of its bar, its search).
+        performOnParentController { it.onChildDestroyed(this) }
+        peekView()?.let { (it.parent as? ViewGroup)?.removeView(it) }
+        setParentController(null)
+        if (isIdTakenByAnother) return
+        ScreenInsets.remove(id)
+        ScreenRegions.remove(id)
+        ArrangementStates.remove(id)
+        ScreenReadiness.remove(id)
+        if (!notMade) AppearanceDispatcher.nativeScreenReleased(this)
+    }
+
+    private companion object {
+        // The creator the app registered under [name]; none when none is. It needs the activity of the app's views.
+        fun registeredCreator(name: String): ((Activity, NativeScreenContext) -> View?)? {
+            val creator = NavigationApplication.instanceOrNull?.getNativeScreens()?.get(name) ?: return null
+            return { activity, context -> (activity as? FragmentActivity)?.let { creator.create(it, context) } }
+        }
+    }
+}