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

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

@@ -12,147 +12,159 @@ 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 fields are the contract. The core sends through
- * [current]; modules keep making their own.
+ * 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.
  */
 class EventEmitter(private val reactContext: ReactContext?) {
     /** Whether an event sent now reaches JavaScript. */
     val canSend: Boolean
         get() = reactContext?.hasActiveReactInstance() == true
 
-    fun emitAppLaunched() = emit(APP_LAUNCHED, Arguments.createMap())
+    fun emitAppLaunched() = emit(EventContract.AppLaunched.EVENT, Arguments.createMap())
 
     fun emitCommandCompleted(commandName: String, commandId: String, completionTime: Long) =
-        emit(COMMAND_COMPLETED, Arguments.createMap().apply {
-            putString("commandName", commandName)
-            putString("commandId", commandId)
-            putDouble("completionTime", completionTime.toDouble())
+        emit(EventContract.CommandCompleted.EVENT, Arguments.createMap().apply {
+            putString(EventContract.CommandCompleted.COMMAND_NAME, commandName)
+            putString(EventContract.CommandCompleted.COMMAND_ID, commandId)
+            putDouble(EventContract.CommandCompleted.COMPLETION_TIME, completionTime.toDouble())
         })
 
     fun emitComponentWillAppear(componentId: String, componentName: String, type: ComponentType) =
-        emit(COMPONENT_WILL_APPEAR, component(componentId, componentName, type))
+        emit(EventContract.ComponentWillAppear.EVENT, component(componentId, componentName, type))
 
     fun emitComponentDidAppear(componentId: String, componentName: String, type: ComponentType) =
-        emit(COMPONENT_DID_APPEAR, component(componentId, componentName, type))
+        emit(EventContract.ComponentDidAppear.EVENT, component(componentId, componentName, type))
 
     fun emitComponentDidDisappear(componentId: String, componentName: String, type: ComponentType) =
-        emit(COMPONENT_DID_DISAPPEAR, component(componentId, componentName, type))
+        emit(EventContract.ComponentDidDisappear.EVENT, component(componentId, componentName, type))
 
     /** The screen the user sees (`null` for none) and the selected tab of the tabs it is in (`null` out of tabs). */
     fun emitNavigationStateChanged(screenId: String?, screenName: String?, tab: Int?) =
-        emit(NAVIGATION_STATE_CHANGED, Arguments.createMap().apply {
+        emit(EventContract.NavigationStateChanged.EVENT, Arguments.createMap().apply {
+            val keys = EventContract.NavigationStateChanged
             if (screenId == null) {
-                putNull("screen")
+                putNull(keys.SCREEN)
             } else {
-                putMap("screen", Arguments.createMap().apply {
-                    putString("id", screenId)
-                    putString("name", screenName)
+                putMap(keys.SCREEN, Arguments.createMap().apply {
+                    putString(EventContract.NavigationStateChangedScreen.ID, screenId)
+                    putString(EventContract.NavigationStateChangedScreen.NAME, screenName)
                 })
             }
-            if (tab == null) putNull("tab") else putInt("tab", tab)
+            if (tab == null) putNull(keys.TAB) else putInt(keys.TAB, tab)
         })
 
-    fun emitScreenPopped(componentId: String) = emit(SCREEN_POPPED, withId(componentId))
+    fun emitScreenPopped(componentId: String) = emit(EventContract.ScreenPopped.EVENT, withId(componentId))
 
     fun emitNavigationButtonPressed(componentId: String, buttonId: String) =
-        emit(NAVIGATION_BUTTON_PRESSED, withId(componentId).apply { putString("buttonId", buttonId) })
+        emit(EventContract.NavigationButtonPressed.EVENT, withId(componentId).apply {
+            putString(EventContract.NavigationButtonPressed.BUTTON_ID, buttonId)
+        })
 
     fun emitBottomTabSelected(selectedTabIndex: Int, unselectedTabIndex: Int, bottomTabsId: String) =
-        emit(BOTTOM_TAB_SELECTED, Arguments.createMap().apply {
-            putInt("selectedTabIndex", selectedTabIndex)
-            putInt("unselectedTabIndex", unselectedTabIndex)
-            putString("bottomTabsId", bottomTabsId)
+        emit(EventContract.BottomTabSelected.EVENT, Arguments.createMap().apply {
+            putInt(EventContract.BottomTabSelected.SELECTED_TAB_INDEX, selectedTabIndex)
+            putInt(EventContract.BottomTabSelected.UNSELECTED_TAB_INDEX, unselectedTabIndex)
+            putString(EventContract.BottomTabSelected.BOTTOM_TABS_ID, bottomTabsId)
         })
 
     fun emitBottomTabPressed(tabIndex: Int, bottomTabsId: String, screenId: String?, wasSelected: Boolean) =
-        emit(BOTTOM_TAB_PRESSED, Arguments.createMap().apply {
-            putInt("tabIndex", tabIndex)
-            putString("bottomTabsId", bottomTabsId)
-            screenId?.let { putString("screenId", it) }
-            putBoolean("wasSelected", wasSelected)
+        emit(EventContract.BottomTabPressed.EVENT, Arguments.createMap().apply {
+            putInt(EventContract.BottomTabPressed.TAB_INDEX, tabIndex)
+            putString(EventContract.BottomTabPressed.BOTTOM_TABS_ID, bottomTabsId)
+            screenId?.let { putString(EventContract.BottomTabPressed.SCREEN_ID, it) }
+            putBoolean(EventContract.BottomTabPressed.WAS_SELECTED, wasSelected)
         })
 
     fun emitBottomTabLongPressed(selectedTabIndex: Int, bottomTabsId: String) =
-        emit(BOTTOM_TAB_LONG_PRESSED, Arguments.createMap().apply {
-            putInt("selectedTabIndex", selectedTabIndex)
-            putString("bottomTabsId", bottomTabsId)
+        emit(EventContract.BottomTabLongPressed.EVENT, Arguments.createMap().apply {
+            putInt(EventContract.BottomTabLongPressed.SELECTED_TAB_INDEX, selectedTabIndex)
+            putString(EventContract.BottomTabLongPressed.BOTTOM_TABS_ID, bottomTabsId)
         })
 
     /** The id and the name (without `slot:`) of the screen the modal showed, and how many modals went. */
     fun emitModalDismissed(componentId: String, componentName: String, modalsDismissed: Int) =
-        emit(MODAL_DISMISSED, withId(componentId).apply {
-            putString("componentName", componentName)
-            putInt("modalsDismissed", modalsDismissed)
+        emit(EventContract.ModalDismissed.EVENT, withId(componentId).apply {
+            putString(EventContract.ModalDismissed.COMPONENT_NAME, componentName)
+            putInt(EventContract.ModalDismissed.MODALS_DISMISSED, modalsDismissed)
         })
 
-    fun emitModalAttemptedToDismiss(componentId: String) = emit(MODAL_ATTEMPTED_TO_DISMISS, withId(componentId))
+    fun emitModalAttemptedToDismiss(componentId: String) =
+        emit(EventContract.ModalAttemptedToDismiss.EVENT, withId(componentId))
 
     /** [detent]: `medium`, `large`, or a height in dp. */
     fun emitSheetDetentChanged(componentId: String, detent: Any) =
-        emit(SHEET_DETENT_CHANGED, withId(componentId).apply {
+        emit(EventContract.SheetDetentChanged.EVENT, withId(componentId).apply {
             when (detent) {
-                is Number -> putDouble("detent", detent.toDouble())
-                else -> putString("detent", detent.toString())
+                is Number -> putDouble(EventContract.SheetDetentChanged.DETENT, detent.toDouble())
+                else -> putString(EventContract.SheetDetentChanged.DETENT, detent.toString())
             }
         })
 
     fun emitSearchBarUpdated(componentId: String, text: String, isFocused: Boolean, scope: String?) =
-        emit(SEARCH_BAR_UPDATED, withId(componentId).apply {
-            putString("text", text)
-            putBoolean("isFocused", isFocused)
-            scope?.let { putString("scope", it) }
+        emit(EventContract.SearchBarUpdated.EVENT, withId(componentId).apply {
+            putString(EventContract.SearchBarUpdated.TEXT, text)
+            putBoolean(EventContract.SearchBarUpdated.IS_FOCUSED, isFocused)
+            scope?.let { putString(EventContract.SearchBarUpdated.SCOPE, it) }
         })
 
     fun emitSearchBarSubmitted(componentId: String, text: String, scope: String?) =
-        emit(SEARCH_BAR_SUBMITTED, withId(componentId).apply {
-            putString("text", text)
-            scope?.let { putString("scope", it) }
+        emit(EventContract.SearchBarSubmitted.EVENT, withId(componentId).apply {
+            putString(EventContract.SearchBarSubmitted.TEXT, text)
+            scope?.let { putString(EventContract.SearchBarSubmitted.SCOPE, it) }
         })
 
-    fun emitSearchBarCancelPressed(componentId: String) = emit(SEARCH_BAR_CANCEL_PRESSED, withId(componentId))
+    fun emitSearchBarCancelPressed(componentId: String) =
+        emit(EventContract.SearchBarCancelPressed.EVENT, withId(componentId))
 
     fun emitSearchSuggestionPicked(componentId: String, suggestionId: String) =
-        emit(SEARCH_SUGGESTION_PICKED, withId(componentId).apply { putString("suggestionId", suggestionId) })
+        emit(EventContract.SearchSuggestionPicked.EVENT, withId(componentId).apply {
+            putString(EventContract.SearchSuggestionPicked.SUGGESTION_ID, suggestionId)
+        })
 
     fun emitSplitViewColumnsStacked(componentId: String, stacked: Boolean) =
-        emit(SPLIT_VIEW_COLUMNS_STACKED, withId(componentId).apply { putBoolean("stacked", stacked) })
+        emit(EventContract.SplitViewColumnsStacked.EVENT, withId(componentId).apply {
+            putBoolean(EventContract.SplitViewColumnsStacked.STACKED, stacked)
+        })
 
-    fun emitSlotDestroyed(componentId: String) = emit(SLOT_DESTROYED, withId(componentId))
+    fun emitSlotDestroyed(componentId: String) = emit(EventContract.SlotDestroyed.EVENT, withId(componentId))
 
     /** [insets]: `{ top, right, bottom, left }`. */
     fun emitScreenInsetsChanged(componentId: String, insets: WritableMap) =
-        emit(SCREEN_INSETS_CHANGED, withId(componentId).apply { merge(insets) })
+        emit(EventContract.ScreenInsetsChanged.EVENT, withId(componentId).apply { merge(insets) })
 
     /** [regions]: `{ division, occlusion }`. */
     fun emitScreenRegionsChanged(componentId: String, regions: WritableMap) =
-        emit(SCREEN_REGIONS_CHANGED, withId(componentId).apply { merge(regions) })
+        emit(EventContract.ScreenRegionsChanged.EVENT, withId(componentId).apply { merge(regions) })
 
     /** [state]: `{ placement, layout, front, hidden }`. */
     fun emitArrangementChanged(componentId: String, state: WritableMap) =
-        emit(ARRANGEMENT_CHANGED, withId(componentId).apply { merge(state) })
+        emit(EventContract.ArrangementChanged.EVENT, withId(componentId).apply { merge(state) })
 
     /** [value]: `{ state, angle? }`, or `{}` without a hinge. */
-    fun emitHingeChanged(value: WritableMap) = emit(HINGE_CHANGED, value)
+    fun emitHingeChanged(value: WritableMap) = emit(EventContract.HingeChanged.EVENT, value)
 
     /** [kind]: `function` or `command`; [arguments] as JSON, which JavaScript gets as `args`. */
     fun emitNativeScreenCall(componentId: String, callId: String, kind: String, name: String, arguments: JSONArray) =
-        emit(NATIVE_SCREEN_CALL, withId(componentId).apply {
-            putString("callId", callId)
-            putString("kind", kind)
-            putString("name", name)
-            putArray("args", NativeScreenCalls.toArguments(arguments))
+        emit(EventContract.NativeScreenCall.EVENT, withId(componentId).apply {
+            putString(EventContract.NativeScreenCall.CALL_ID, callId)
+            putString(EventContract.NativeScreenCall.KIND, kind)
+            putString(EventContract.NativeScreenCall.NAME, name)
+            putArray(EventContract.NativeScreenCall.ARGS, NativeScreenCalls.toArguments(arguments))
         })
 
-    fun emitNativeScreenReleased(componentId: String) = emit(NATIVE_SCREEN_RELEASED, withId(componentId))
+    fun emitNativeScreenReleased(componentId: String) =
+        emit(EventContract.NativeScreenReleased.EVENT, withId(componentId))
 
+    // The three appearance events have the same keys.
     private fun component(componentId: String, componentName: String, type: ComponentType): WritableMap =
         withId(componentId).apply {
-            putString("componentName", componentName)
-            putString("componentType", type.jsName)
+            putString(EventContract.ComponentDidAppear.COMPONENT_NAME, componentName)
+            putString(EventContract.ComponentDidAppear.COMPONENT_TYPE, type.jsName)
         }
 
+    // The events of a screen carry its id under the same key.
     private fun withId(componentId: String): WritableMap =
-        Arguments.createMap().apply { putString("componentId", componentId) }
+        Arguments.createMap().apply { putString(EventContract.ScreenPopped.COMPONENT_ID, componentId) }
 
     private fun emit(name: String, data: WritableMap) {
         val context = reactContext
@@ -169,31 +181,33 @@ class EventEmitter(private val reactContext: ReactContext?) {
         fun current(): EventEmitter =
             EventEmitter(NavigationApplication.instanceOrNull?.reactGatewayOrNull?.currentReactContext)
 
-        const val APP_LAUNCHED = "ANN.AppLaunched"
-        const val COMMAND_COMPLETED = "ANN.CommandCompleted"
-        const val COMPONENT_WILL_APPEAR = "ANN.ComponentWillAppear"
-        const val COMPONENT_DID_APPEAR = "ANN.ComponentDidAppear"
-        const val COMPONENT_DID_DISAPPEAR = "ANN.ComponentDidDisappear"
-        const val NAVIGATION_STATE_CHANGED = "ANN.NavigationStateChanged"
-        const val SCREEN_POPPED = "ANN.ScreenPopped"
-        const val NAVIGATION_BUTTON_PRESSED = "ANN.NavigationButtonPressed"
-        const val BOTTOM_TAB_SELECTED = "ANN.BottomTabSelected"
-        const val BOTTOM_TAB_PRESSED = "ANN.BottomTabPressed"
-        const val BOTTOM_TAB_LONG_PRESSED = "ANN.BottomTabLongPressed"
-        const val MODAL_DISMISSED = "ANN.ModalDismissed"
-        const val MODAL_ATTEMPTED_TO_DISMISS = "ANN.ModalAttemptedToDismiss"
-        const val SHEET_DETENT_CHANGED = "ANN.SheetDetentChanged"
-        const val SEARCH_BAR_UPDATED = "ANN.SearchBarUpdated"
-        const val SEARCH_BAR_SUBMITTED = "ANN.SearchBarSubmitted"
-        const val SEARCH_BAR_CANCEL_PRESSED = "ANN.SearchBarCancelPressed"
-        const val SEARCH_SUGGESTION_PICKED = "ANN.SearchSuggestionPicked"
-        const val SPLIT_VIEW_COLUMNS_STACKED = "ANN.SplitViewColumnsStacked"
-        const val SLOT_DESTROYED = "ANN.SlotDestroyed"
-        const val SCREEN_INSETS_CHANGED = "ANN.ScreenInsetsChanged"
-        const val SCREEN_REGIONS_CHANGED = "ANN.ScreenRegionsChanged"
-        const val ARRANGEMENT_CHANGED = "ANN.ArrangementChanged"
-        const val HINGE_CHANGED = "ANN.HingeChanged"
-        const val NATIVE_SCREEN_CALL = "ANN.NativeScreenCall"
-        const val NATIVE_SCREEN_RELEASED = "ANN.NativeScreenReleased"
+        // The names of the events, for modules outside the library; inside it, [EventContract] has them with their
+        // keys.
+        const val APP_LAUNCHED = EventContract.AppLaunched.EVENT
+        const val COMMAND_COMPLETED = EventContract.CommandCompleted.EVENT
+        const val COMPONENT_WILL_APPEAR = EventContract.ComponentWillAppear.EVENT
+        const val COMPONENT_DID_APPEAR = EventContract.ComponentDidAppear.EVENT
+        const val COMPONENT_DID_DISAPPEAR = EventContract.ComponentDidDisappear.EVENT
+        const val NAVIGATION_STATE_CHANGED = EventContract.NavigationStateChanged.EVENT
+        const val SCREEN_POPPED = EventContract.ScreenPopped.EVENT
+        const val NAVIGATION_BUTTON_PRESSED = EventContract.NavigationButtonPressed.EVENT
+        const val BOTTOM_TAB_SELECTED = EventContract.BottomTabSelected.EVENT
+        const val BOTTOM_TAB_PRESSED = EventContract.BottomTabPressed.EVENT
+        const val BOTTOM_TAB_LONG_PRESSED = EventContract.BottomTabLongPressed.EVENT
+        const val MODAL_DISMISSED = EventContract.ModalDismissed.EVENT
+        const val MODAL_ATTEMPTED_TO_DISMISS = EventContract.ModalAttemptedToDismiss.EVENT
+        const val SHEET_DETENT_CHANGED = EventContract.SheetDetentChanged.EVENT
+        const val SEARCH_BAR_UPDATED = EventContract.SearchBarUpdated.EVENT
+        const val SEARCH_BAR_SUBMITTED = EventContract.SearchBarSubmitted.EVENT
+        const val SEARCH_BAR_CANCEL_PRESSED = EventContract.SearchBarCancelPressed.EVENT
+        const val SEARCH_SUGGESTION_PICKED = EventContract.SearchSuggestionPicked.EVENT
+        const val SPLIT_VIEW_COLUMNS_STACKED = EventContract.SplitViewColumnsStacked.EVENT
+        const val SLOT_DESTROYED = EventContract.SlotDestroyed.EVENT
+        const val SCREEN_INSETS_CHANGED = EventContract.ScreenInsetsChanged.EVENT
+        const val SCREEN_REGIONS_CHANGED = EventContract.ScreenRegionsChanged.EVENT
+        const val ARRANGEMENT_CHANGED = EventContract.ArrangementChanged.EVENT
+        const val HINGE_CHANGED = EventContract.HingeChanged.EVENT
+        const val NATIVE_SCREEN_CALL = EventContract.NativeScreenCall.EVENT
+        const val NATIVE_SCREEN_RELEASED = EventContract.NativeScreenReleased.EVENT
     }
 }

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

@@ -45,12 +45,6 @@ internal class ScreenAppearance(
     /** Cancels the hold limit running for [held]; none when nothing is held. */
     internal var cancelLimit: (() -> Unit)? = null
 
-    /**
-     * This appearance started without its WillAppear (`AppearanceDispatcher.withoutWillAppear`: a side menu's drawer
-     * that jumped open); its DidAppear is its first event. Cleared as it is hidden.
-     */
-    internal var skippedWill = false
-
     private var ready = content == null
     private var waitsForContent = false
 

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

@@ -22,8 +22,8 @@ object UiUtils {
     fun pxToDp(context: Context, px: Float): Float = px / context.resources.displayMetrics.density
 
     /**
-     * A size of the options in dp, in whole pixels of the screen of [context]: times `densityDpi / 160`, the fraction
-     * of a pixel dropped; a size of 0 or less is not converted.
+     * A size of the options in dp, in whole pixels of the screen of [context]: times `densityDpi / 160`, rounded to the
+     * nearest pixel only here, as iOS places a size in points on whole pixels; a size of 0 or less is not converted.
      */
     @JvmStatic
     fun dpToPixels(context: Context, dp: Double): Int = dpToPixels(dp, context.resources.displayMetrics.densityDpi)
@@ -31,7 +31,7 @@ object UiUtils {
     /** [dp] in whole pixels at [densityDpi], as [dpToPixels] converts it. */
     @JvmStatic
     fun dpToPixels(dp: Double, densityDpi: Int): Int =
-        if (dp <= 0) dp.toInt() else (dp * densityDpi / BASE_DENSITY_DPI).toInt()
+        if (dp <= 0) dp.toInt() else (dp * densityDpi / BASE_DENSITY_DPI).roundToInt()
 
     /**
      * A font size of the options in sp, in pixels of the screen of [context]: it follows the system's text scale,

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

@@ -2,24 +2,25 @@ package dev.apexnative.navigation.viewcontrollers.arrangement
 
 import android.app.Activity
 import dev.apexnative.navigation.options.Options
+import dev.apexnative.navigation.viewcontrollers.component.ComponentPresenter
 import dev.apexnative.navigation.viewcontrollers.viewcontroller.Presenter
 import dev.apexnative.navigation.viewcontrollers.viewcontroller.ViewController
 
 /**
  * The presenter of the secondary screen of a pair ([ArrangementController]). The status bar, the navigation bar and
- * the orientation are the primary's, as the top bar is: the secondary applies only its background, and brought to the
- * front it gives them back to the primary.
+ * the orientation are the primary's, as the top bar is: the secondary applies only its background (the theme's
+ * without `layout.backgroundColor`, as any React screen), and brought to the front it gives them back to the primary.
  */
 internal class SecondaryScreenPresenter(activity: Activity, defaultOptions: Options) :
     Presenter(activity, defaultOptions) {
 
     override fun applyOptions(view: ViewController<*>, options: Options) =
-        applyBackgroundColor(view, options.copy().withDefaultOptions(defaultOptions))
+        applyBackground(view, options.copy().withDefaultOptions(defaultOptions))
 
     override fun mergeOptions(viewController: ViewController<*>, options: Options) {
         if (!options.layout.backgroundColor.hasValue()) return
         val merged = viewController.resolveCurrentOptions().copy().mergeWith(options)
-        applyBackgroundColor(viewController, merged.withDefaultOptions(defaultOptions))
+        applyBackground(viewController, merged.withDefaultOptions(defaultOptions))
     }
 
     override fun onViewBroughtToFront(viewController: ViewController<*>, options: Options) {
@@ -27,5 +28,12 @@ internal class SecondaryScreenPresenter(activity: Activity, defaultOptions: Opti
     }
 
     override fun onConfigurationChanged(controller: ViewController<*>, options: Options) =
-        applyBackgroundColor(controller, options.copy().withDefaultOptions(defaultOptions))
+        applyBackground(controller, options.copy().withDefaultOptions(defaultOptions))
+
+    // `layout.backgroundColor`, else the theme's background (`ComponentPresenter.themeBackgroundOf`).
+    private fun applyBackground(view: ViewController<*>, options: Options) {
+        if (options.layout.backgroundColor.hasValue()) return applyBackgroundColor(view, options)
+        val color = ComponentPresenter.themeBackgroundOf(activity) ?: return
+        view.peekView()?.setBackgroundColor(color)
+    }
 }

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
@@ -33,6 +36,7 @@ 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.FadeThrough
 import dev.apexnative.navigation.views.bottomtabs.BottomTabItem
 import dev.apexnative.navigation.views.bottomtabs.BottomTabsLayout
 import dev.apexnative.navigation.views.bottomtabs.CustomBottomTabItemView
@@ -68,6 +72,8 @@ 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 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 +156,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 +175,43 @@ 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()
+            set.playTogether(exit, FadeThrough.enter(coming))
+            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
         }
     }
 
@@ -302,10 +345,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 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
@@ -328,10 +370,27 @@ 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)
+        if (views == null) return switched(index, previous, how, onScreen, hasViews = false)
+        endSwitch = views.switch(shown, left, animated = onScreen) {
+            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 at once. [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 +417,10 @@ 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.
+    // 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()
     }
 
@@ -621,6 +682,8 @@ class BottomTabsController(
         if (isDestroyed) return
         pendingSelected = null
         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)

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/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)
+        }
+    }
 }

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

@@ -143,7 +143,7 @@ internal class ScreenFrame(
             val parent = node.parentController
             val statusBar = ScreenSafeArea.statusBarRoom(
                 statusBarHeight = statusBarHeight,
-                hiddenOrDrawBehind = options.statusBar.isHiddenOrDrawBehind,
+                hiddenOrDrawBehind = options.statusBar.isHiddenOrDrawBehind(node.isInOverlay),
                 inSheet = node.isInSheet,
                 inSideMenu = node.isInSideMenu,
                 keptAround = parent?.keepsStatusBarRoomOf(node) == true,