@apexnative/navigation 1.0.0-alpha.0 → 1.0.0-alpha.10

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

@@ -0,0 +1,49 @@
+package dev.apexnative.navigation.viewcontrollers.bottomtabs
+
+import dev.apexnative.navigation.utils.ImageKey
+
+/**
+ * The last call of each kind for each item of the bar, by which [BottomTabsPresenter.run] skips a call equal to it: an
+ * icon isn't loaded and set again as a screen appears. The badge and the font always go (their defaults are read at
+ * each set). An icon whose load gave no image goes again ([failed]); a `file:` icon compares by its [ImageKey] (the
+ * file's modification time and size, read by [fileKey]), so a file written again at the same path shows. Main thread.
+ */
+internal class AppliedTabCalls(private val fileKey: (String) -> ImageKey) {
+    /** A call that runs: [isChange], the item had a call of its kind before; [image], the key of a `file:` icon. */
+    class Next(val isChange: Boolean, val image: ImageKey?)
+
+    private class Applied(val call: TabItems.Call, val image: ImageKey?, var failed: Boolean = false)
+
+    private val last = HashMap<Pair<Int, Class<*>>, Applied>()
+
+    /** How [call] runs, and it is the last of its kind for its item from now on; none when it is skipped. */
+    fun next(call: TabItems.Call): Next? {
+        val key = call.index to call.javaClass
+        val before = last[key]
+        val image = uriOf(call)?.takeIf { it.startsWith(FILE_SCHEME) }?.let(fileKey)
+        val always = call is TabItems.Call.Badge || call is TabItems.Call.Font
+        if (!always && before != null && before.call == call && !before.failed && before.image == image) return null
+        last[key] = Applied(call, image)
+        return Next(isChange = before != null, image = image)
+    }
+
+    /** The icon of [call] didn't load: the same call goes again. */
+    fun failed(call: TabItems.Call) {
+        last[call.index to call.javaClass]?.takeIf { it.call == call }?.failed = true
+    }
+
+    /** The bar goes: every call goes again. */
+    fun clear() {
+        last.clear()
+    }
+
+    private fun uriOf(call: TabItems.Call): String? = when (call) {
+        is TabItems.Call.Icon -> call.uri
+        is TabItems.Call.SelectedIcon -> call.uri
+        else -> null
+    }
+
+    private companion object {
+        const val FILE_SCHEME = "file:"
+    }
+}

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

@@ -1,5 +1,8 @@
 package dev.apexnative.navigation.viewcontrollers.bottomtabs
 
+import android.animation.Animator
+import android.animation.AnimatorListenerAdapter
+import android.animation.AnimatorSet
 import android.app.Activity
 import android.graphics.Color
 import android.util.Log
@@ -23,16 +26,16 @@ 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
 import dev.apexnative.navigation.views.bottomtabs.CustomBottomTabItemView
@@ -68,6 +71,12 @@ class BottomTabsController(
     private var cells: List<CustomBottomTabItemView> = emptyList()
     // `ANN.BottomTabSelected` of a press that waits for the new tab's screen to appear.
     private var pendingSelected: (() -> Unit)? = null
+    // Ends the fade through of a switch still running, with its events.
+    private var endSwitch: (() -> Unit)? = null
+
+    // The made tabs that didn't show at the last repaint (new default options, a light/dark switch): each is repainted
+    // as it is selected, not while hidden.
+    private val staleTabs = mutableSetOf<ViewController<*>>()
     // The bar goes with a stack's transition: the options of the new top don't move it themselves.
     private var riding = false
     private var restAttached = false
@@ -150,8 +159,11 @@ class BottomTabsController(
         /** The view of [tab] joins, or is there already: [visible], or invisible but laid out. */
         fun attach(tab: ViewController<*>, visible: Boolean)
 
-        /** The view of [shown] becomes visible and that of [hidden] invisible: the switch, at once. */
-        fun switch(shown: ViewController<*>, hidden: ViewController<*>)
+        /**
+         * The view of [shown] becomes visible and that of [hidden] invisible: at once, or with Material's fade through
+         * when [animated]; then [onEnd]. The function returned ends a switch still running at once, [onEnd] included.
+         */
+        fun switch(shown: ViewController<*>, hidden: ViewController<*>, animated: Boolean, onEnd: () -> Unit): () -> Unit
     }
 
     /** The views of the tabs; none before the tabs' view is made. */
@@ -166,9 +178,45 @@ class BottomTabsController(
             tab.view.visibility = if (visible) View.VISIBLE else View.INVISIBLE
         }
 
-        override fun switch(shown: ViewController<*>, hidden: ViewController<*>) {
-            shown.view.visibility = View.VISIBLE
-            hidden.peekView()?.visibility = View.INVISIBLE
+        override fun switch(
+            shown: ViewController<*>,
+            hidden: ViewController<*>,
+            animated: Boolean,
+            onEnd: () -> Unit,
+        ): () -> Unit {
+            val coming = shown.view
+            coming.visibility = View.VISIBLE
+            val going = hidden.peekView()
+            if (!animated || going == null) {
+                going?.visibility = View.INVISIBLE
+                onEnd()
+                return {}
+            }
+            val exit = FadeThrough.exit(going)
+            // Faded out, the tab that goes takes no more touches and no accessibility focus.
+            exit.addListener(object : AnimatorListenerAdapter() {
+                override fun onAnimationEnd(animation: Animator) {
+                    going.visibility = View.INVISIBLE
+                }
+            })
+            val set = AnimatorSet()
+            // 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()
+                    // The tab that went keeps its look for its next selection; only its visibility hides it.
+                    going.visibility = View.INVISIBLE
+                    going.alpha = 1f
+                    coming.alpha = 1f
+                    coming.scaleX = 1f
+                    coming.scaleY = 1f
+                    onEnd()
+                }
+            })
+            set.start()
+            return set::end
         }
     }
 
@@ -204,7 +252,7 @@ class BottomTabsController(
     // `mergeOptions` with the tabs' id: their own options, then what they show, then the layouts around without
     // `bottomTabs`; the one-shot options act once, also while the view isn't shown.
     override fun mergeOptions(options: Options) {
-        this.options = this.options.copy().mergeWith(options)
+        mergeOwnOptions(options)
         applyMerge(options, null)
         performOnParentController { it.mergeChildOptions(withoutBottomTabs(options), this) }
     }
@@ -268,8 +316,10 @@ class BottomTabsController(
     private enum class How { Press, Code, Back }
 
     /**
-     * A tap on the tab at [index], on the bar or on its cell of the custom row: its `ANN.BottomTabPressed` first, then
-     * the selection, the repeat, or nothing, as its resolved options say.
+     * A tap on the tab at [index], on the bar or on its cell of the custom row, the one path of both: a switch still
+     * running ends first, with its `ANN.BottomTabSelected`; then this press's `ANN.BottomTabPressed`, then the
+     * selection (`ANN.BottomTabSelected` after the new screen's DidAppear), the repeat (the pop's own events), or
+     * nothing, as its resolved options say. The same order as `-[ANNBottomTabsController pressTabAtIndex:source:]`.
      */
     internal fun onTabPressed(index: Int) {
         if (isDestroyed || index !in tabs.indices) return
@@ -302,10 +352,9 @@ class BottomTabsController(
     }
 
     /**
-     * Selects the tab at [index]: what it shows appears, the tab it left disappears — at once, one container invisible
-     * and the other visible —, 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. The history of back follows.
+     * 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, 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
@@ -321,6 +370,9 @@ class BottomTabsController(
         }
         selectedIndex = index
         attach(index)
+        // A tab hidden at a repaint takes it now, before its screens appear: its bar's parts, its search's and its
+        // FAB's colors follow the theme and the defaults only through a repaint.
+        if (staleTabs.remove(shown)) Navigator.repaintLayer(shown)
         peekView()?.bar?.let {
             it.setCurrentItem(index, false)
             it.onCustomItemViewSelectionChanged(index)
@@ -328,10 +380,30 @@ 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))
-        views?.switch(shown, left)
+        // 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 && fadesThrough(shown)) {
+            endSwitch = null
+            if (!isDestroyed) switched(index, previous, how, onScreen, hasViews = true)
+        }
+    }
+
+    /**
+     * 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, 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]
+        val shown = tabs[index]
         if (onScreen) {
-            AppearanceDispatcher.endTransition(listOf(left), listOf(shown), null, null, null, reportsState = false)
-        } else if (views != null) {
+            val showing = if (isOnScreen) listOf(shown) else emptyList()
+            AppearanceDispatcher.endTransition(listOf(left), showing, null, null, null, reportsState = false)
+        } else if (hasViews) {
             // Not on screen: the bar takes the new tab's options as they are, without appearance events.
             val options = resolveShownOptions(DefaultOptions.current)
             bar.applyBar(options.bottomTabs, directionOf(options))
@@ -358,8 +430,15 @@ class BottomTabsController(
         if (screen == null) finish() else AppearanceDispatcher.afterDidAppear(screen, finish)
     }
 
-    // A press's `ANN.BottomTabSelected` still waiting goes before anything newer on these tabs.
+    // `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() {
+        endSwitch?.invoke()
         pendingSelected?.invoke()
     }
 
@@ -477,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))
@@ -531,8 +607,8 @@ class BottomTabsController(
         }
     }
 
-    // The repaint: the bar, the items of every tab, the row, then the made tabs that don't show, which the pass over
-    // what shows doesn't reach.
+    // The repaint: the bar, the items of every tab, the row. Only what shows is repainted (the pass over what shows
+    // reaches the selected tab); a made tab that doesn't show is repainted when it is selected ([staleTabs]).
     internal fun repaint(options: Options) {
         if (isDestroyed) return
         ContainerBackground.apply(this, options)
@@ -542,7 +618,7 @@ class BottomTabsController(
             if (usesRow) layout.bar.customRowOptions = options.bottomTabs.customRow.copy()
         }
         cells.forEachIndexed { index, cell -> cell.update(cellState(index)) }
-        tabs.forEach { if (it !== currentChild && it.isViewCreated) Navigator.repaintLayer(it) }
+        tabs.forEach { if (it !== currentChild && it.isViewCreated) staleTabs += it }
     }
 
     // The custom row: the cells first into the bar's external host, then the row holds them; its look follows the tabs'
@@ -560,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) {
@@ -590,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
     }
 
@@ -615,15 +687,17 @@ 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
         pendingSelected = null
+        staleTabs.clear()
         super.destroy()
+        // A switch still running ends with its views at rest, without events: the tabs are gone.
+        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/BottomTabsPresenter.kt

@@ -6,7 +6,6 @@ import android.animation.AnimatorSet
 import android.animation.ObjectAnimator
 import android.app.Activity
 import android.graphics.Color
-import android.graphics.drawable.Drawable
 import android.view.View
 import android.view.animation.LinearInterpolator
 import android.view.animation.PathInterpolator
@@ -20,8 +19,8 @@ import dev.apexnative.navigation.options.params.LayoutDirection
 import dev.apexnative.navigation.options.params.ThemeColour
 import dev.apexnative.navigation.options.parsers.TypefaceLoader
 import dev.apexnative.navigation.system.SystemUiOwner
-import dev.apexnative.navigation.utils.ImageLoader
-import dev.apexnative.navigation.utils.ImageLoadingListenerAdapter
+import dev.apexnative.navigation.utils.ImageRequests
+import dev.apexnative.navigation.utils.OptionImages
 import dev.apexnative.navigation.utils.TestIds
 import dev.apexnative.navigation.utils.UiUtils
 import dev.apexnative.navigation.viewcontrollers.viewcontroller.Presenter
@@ -67,8 +66,9 @@ internal open class BottomTabsPresenter(activity: Activity) : Presenter(activity
 
     private var layout: BottomTabsLayout? = null
     private val typefaces = TypefaceLoader(activity)
-    private val icons = HashMap<String, Drawable>()
-    private val applied = HashMap<Pair<Int, Class<*>>, TabItems.Call>()
+    // The icons of the items by item and kind (selected or not): those of the cache at once, the others as below.
+    private val icons = ImageRequests<Pair<Int, Boolean>>(OptionImages.source(activity))
+    private val applied = AppliedTabCalls(icons::key)
     private var motion: Animator? = null
     private var anyIcon = false
     private var testId: String? = null
@@ -100,25 +100,24 @@ internal open class BottomTabsPresenter(activity: Activity) : Presenter(activity
 
     /**
      * Runs [calls] on the bar's items; a call equal to the last of its kind for its item is skipped (an icon isn't
-     * loaded and set again as a screen appears). The badge always goes: its default colors are read at each set.
+     * loaded and set again as a screen appears), except the badge and the font, an icon that didn't load and a `file:`
+     * icon whose file changed ([AppliedTabCalls]).
      */
     open fun run(calls: List<TabItems.Call>) {
         val bar = layout?.bar ?: return
         for (call in calls) {
             if (call is TabItems.Call.TestId && !itemTestIds) continue
-            val key = call.index to call.javaClass
-            if (call !is TabItems.Call.Badge && call !is TabItems.Call.Font && applied[key] == call) continue
-            applied[key] = call
-            run(bar, call)
+            val next = applied.next(call) ?: continue
+            run(bar, call, next)
         }
     }
 
-    private fun run(bar: BottomTabs, call: TabItems.Call) {
+    private fun run(bar: BottomTabs, call: TabItems.Call, next: AppliedTabCalls.Next) {
         val index = call.index
         when (call) {
             is TabItems.Call.Title -> bar.setText(index, call.text)
-            is TabItems.Call.Icon -> iconOf(call.uri)?.let { bar.setIcon(index, it) }
-            is TabItems.Call.SelectedIcon -> iconOf(call.uri)?.let { bar.setSelectedIcon(index, it) }
+            is TabItems.Call.Icon -> icon(bar, call, call.uri, false, next)
+            is TabItems.Call.SelectedIcon -> icon(bar, call, call.uri, true, next)
             is TabItems.Call.Colors -> {
                 bar.setIconActiveColor(index, call.iconActive)
                 bar.setIconInactiveColor(index, call.iconInactive)
@@ -344,17 +343,19 @@ internal open class BottomTabsPresenter(activity: Activity) : Presenter(activity
 
     private fun colorOf(colour: ThemeColour): Int? = colour.get(activity, null)
 
-    // Icons load as they apply and never throw: an icon that doesn't load leaves the item as it was.
-    private fun iconOf(uri: String): Drawable? {
-        icons[uri]?.let { return it.constantState?.newDrawable()?.mutate() ?: it }
-        var loaded: Drawable? = null
-        ImageLoader().loadIcon(activity, uri, object : ImageLoadingListenerAdapter() {
-            override fun onComplete(drawable: Drawable) {
-                loaded = drawable
-            }
-        })
-        loaded?.let { icons[uri] = it }
-        return loaded
+    // Icons never throw: one that doesn't load leaves the item without it (without its selected icon, the item shows
+    // its icon when selected). An item's first icon loads at once, its tab's first frame shows it; a change of it on
+    // the bar that shows loads off the main thread when it can, and the item takes it when ready, unless a newer icon
+    // of the item came first.
+    // The key of a `file:` icon was built for the comparison: the request takes it, its file read once.
+    private fun icon(bar: BottomTabs, call: TabItems.Call, uri: String, selected: Boolean, next: AppliedTabCalls.Next) {
+        val index = call.index
+        val key = next.image ?: icons.key(uri)
+        icons.request(index to selected, key, mayWait = next.isChange && bar.isAttachedToWindow) { icon ->
+            if (icon == null) applied.failed(call)
+            val shown = layout?.bar ?: return@request
+            if (selected) shown.setSelectedIcon(index, icon) else shown.setIcon(index, icon)
+        }
     }
 
     private companion object {

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/TabItems.kt

@@ -36,7 +36,7 @@ internal class TabItems(private val color: (ThemeColour) -> Int?) {
         ) : Call()
 
         /** The icon's size in dp, width over height. */
-        data class IconSize(override val index: Int, val width: Int?, val height: Int?) : Call()
+        data class IconSize(override val index: Int, val width: Double?, val height: Double?) : Call()
 
         data class Font(override val index: Int, val font: FontOptions) : Call()
 
@@ -86,7 +86,7 @@ internal class TabItems(private val color: (ThemeColour) -> Int?) {
         options.icon.get(null)?.let { Call.Icon(index, it) },
         options.selectedIcon.get(null)?.let { Call.SelectedIcon(index, it) },
         colors(index, options),
-        Call.IconSize(index, options.iconWidth.get(null)?.toInt(), options.iconHeight.get(null)?.toInt()),
+        Call.IconSize(index, options.iconWidth.get(null), options.iconHeight.get(null)),
         Call.Font(index, options.font.copy()),
         Call.FontSizes(index, options.selectedFontSize.get(null)?.toFloat(), options.fontSize.get(null)?.toFloat()),
         Call.TestId(index, options.testID.get(null)),
@@ -110,7 +110,7 @@ internal class TabItems(private val color: (ThemeColour) -> Int?) {
             calls += colors(index, resolved)
         }
         if (merge.iconWidth.hasValue() || merge.iconHeight.hasValue()) {
-            calls += Call.IconSize(index, resolved.iconWidth.get(null)?.toInt(), resolved.iconHeight.get(null)?.toInt())
+            calls += Call.IconSize(index, resolved.iconWidth.get(null), resolved.iconHeight.get(null))
         }
         if (merge.font.hasValue()) calls += Call.Font(index, resolved.font.copy())
         if (merge.fontSize.hasValue() || merge.selectedFontSize.hasValue()) {

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/ComponentPresenter.kt

@@ -6,6 +6,7 @@ import android.graphics.drawable.ColorDrawable
 import android.graphics.drawable.Drawable
 import android.graphics.drawable.LayerDrawable
 import android.view.View
+import com.google.android.material.color.MaterialColors
 import dev.apexnative.navigation.options.DefaultOptions
 import dev.apexnative.navigation.options.Options
 import dev.apexnative.navigation.options.params.ThemeColour
@@ -15,9 +16,9 @@ import dev.apexnative.navigation.viewcontrollers.viewcontroller.Presenter
 import dev.apexnative.navigation.viewcontrollers.viewcontroller.ViewController
 
 /**
- * The presenter of a screen, React or native: its background — the screen's view takes `layout.backgroundColor`, kept
- * out of the status bar's height where the status bar shows over it, and the React content takes
- * `layout.componentBackgroundColor` over it —, its room for the bars, and its safe area again on `mergeOptions`
+ * The presenter of a screen, React or native: its background — the screen's view takes `layout.backgroundColor` (a
+ * React screen without it the theme's background), kept out of the status bar's height where the status bar shows over
+ * it, and the React content takes `layout.componentBackgroundColor` over it —, its room for the bars, and its safe area again on `mergeOptions`
  * (`mergeOptions` step 4). It applies as the screen appears, on `mergeOptions` of what it covers, and again with new
  * default options or after a light/dark switch from the resolved options it is given, which it never writes. Each
  * appearance tells the activity's system UI owner, which follows the screen on top. Main thread only.
@@ -49,8 +50,8 @@ open class ComponentPresenter(activity: Activity) : Presenter(activity, DefaultO
         applyBackground(controller, options)
 
     /**
-     * The colors of [screen] from its resolved [options]: `layout.backgroundColor` on the screen's view, none without
-     * it (the window shows); `layout.componentBackgroundColor` on its React content.
+     * The colors of [screen] from its resolved [options]: `layout.backgroundColor` on the screen's view, without it the
+     * theme's background for a React screen ([defaultColorOf]); `layout.componentBackgroundColor` on its React content.
      */
     fun applyBackground(screen: ViewController<*>, options: Options) {
         val view = screen.peekView() ?: return
@@ -59,11 +60,11 @@ open class ComponentPresenter(activity: Activity) : Presenter(activity, DefaultO
     }
 
     private fun screenBackground(screen: ViewController<*>, options: Options): Drawable? {
-        val color = colorOf(options.layout.backgroundColor) ?: return null
+        val color = colorOf(options.layout.backgroundColor) ?: defaultColorOf(screen) ?: return null
         val frame = frameOf(screen) ?: return ColorDrawable(color)
         val band = ScreenSafeArea.backgroundBand(
             statusBarHeight = frame.statusBarHeight,
-            hiddenOrDrawBehind = options.statusBar.isHiddenOrDrawBehind,
+            hiddenOrDrawBehind = options.statusBar.isHiddenOrDrawBehind(screen.isInOverlay),
             inSideMenu = screen.isInSideMenu,
             inSheet = screen.isInSheet,
             inPair = frame.isInPair,
@@ -79,6 +80,15 @@ open class ComponentPresenter(activity: Activity) : Presenter(activity, DefaultO
     private fun colorOf(colour: ThemeColour): Int? =
         if (colour.hasValue()) colour.get(activity, Color.TRANSPARENT) ?: Color.TRANSPARENT else null
 
+    // A React screen is opaque without a color of its own, as iOS gives it the system background: the screen under it
+    // never shows through, also while a push slides it aside. The app theme's `android:colorBackground`, read now, so a
+    // light/dark switch takes the new mode's. A screen of a sheet shows the sheet's surface; a native screen paints its
+    // own view.
+    private fun defaultColorOf(screen: ViewController<*>): Int? {
+        if (screen !is ComponentViewController || screen.isInSheet) return null
+        return themeBackgroundOf(activity)
+    }
+
     private fun frameOf(screen: ViewController<*>): ScreenFrame? = when (screen) {
         is ComponentViewController -> screen.frame
         is ExternalComponentViewController -> screen.frame
@@ -87,4 +97,15 @@ open class ComponentPresenter(activity: Activity) : Presenter(activity, DefaultO
 
     // The view under the React content: the React root, or the container of a slot screen. A native screen has none.
     private fun contentOf(screen: ViewController<*>): View? = (screen as? ComponentViewController)?.content?.asView()
+
+    internal companion object {
+        /**
+         * The background of a React screen without `layout.backgroundColor`: `android:colorBackground` of [activity]'s
+         * theme now. None for an activity without a theme (the unit tests' fakes).
+         */
+        fun themeBackgroundOf(activity: Activity): Int? {
+            if (activity.theme == null) return null
+            return MaterialColors.getColor(activity, android.R.attr.colorBackground, Color.WHITE)
+        }
+    }
 }