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

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/viewcontroller/ViewController.kt

@@ -6,6 +6,7 @@ import android.view.ViewGroup
 import dev.apexnative.navigation.options.DefaultOptions
 import dev.apexnative.navigation.options.Options
 import dev.apexnative.navigation.options.OptionsCache
+import dev.apexnative.navigation.options.UserChoices
 import dev.apexnative.navigation.options.params.Bool
 import dev.apexnative.navigation.options.params.NullBool
 import dev.apexnative.navigation.react.CommandListener
@@ -30,11 +31,11 @@ abstract class ViewController<V : ViewGroup>(
     var initialOptions: Options,
 ) {
     /**
-     * The node's own options: those it was made with, with every `mergeOptions` and every user's choice over them.
-     * Writing them is one of the two places the options change ([OptionsCache]): the setter takes away the one-shot
-     * options, keeps the object (a stripped copy when it has a one-shot option: the caller's object never changes), and
-     * makes every resolved result stale. Don't change the object in place: [changeOptions] or [mergeOptions] write a
-     * changed copy.
+     * The node's own options: those it was made with, with every `mergeOptions` over them; what the user chose in the
+     * native UI is not here but in [choices]. Writing them is one of the places the options change ([OptionsCache]):
+     * the setter takes away the one-shot options, keeps the object (a stripped copy when it has a one-shot option: the
+     * caller's object never changes), and makes every resolved result stale. Don't change the object in place:
+     * [changeOptions] or [mergeOptions] write a changed copy.
      */
     var options: Options = initialOptions.copy().also(Options::clearOneShotOptions)
         set(value) {
@@ -42,6 +43,10 @@ abstract class ViewController<V : ViewGroup>(
             OptionsCache.optionsChanged()
         }
 
+    // The user layer: what the user chose in the native UI (a menu's check, a search scope), over the node's own
+    // options as they resolve ([changeChoices]).
+    private val choices = UserChoices()
+
     /**
      * The JavaScript the node was made for (`ReloadCoordinator`): the events of the node and its screens reach only
      * that one.
@@ -94,6 +99,19 @@ abstract class ViewController<V : ViewGroup>(
     open val isInSheet: Boolean
         get() = shownAsSheet || parent?.isInSheet == true
 
+    /**
+     * The node is the root of an overlay: the overlays set it before the node's view is made, so its screens are drawn
+     * under the status bar from their first layout (`StatusBarOptions.isHiddenOrDrawBehind`).
+     */
+    internal var shownAsOverlay = false
+
+    /**
+     * The node is in an overlay: it covers the whole window, and is drawn under the status bar by default. It holds from
+     * the start of the show, while `OverlayCoordinator.isInOverlay` answers only for the overlays it lists.
+     */
+    open val isInOverlay: Boolean
+        get() = shownAsOverlay || parent?.isInOverlay == true
+
     /**
      * The node is in a side of a side menu (its left or right menu, not its center): the side goes the whole height of
      * the window, and the node keeps no room for the status bar. The layout around answers for it
@@ -143,9 +161,9 @@ abstract class ViewController<V : ViewGroup>(
     }
 
     /**
-     * The node's options over those of the layouts around it, without the default options: the parents' resolution,
-     * then the node's own. A new object at each call, which the caller may change. For a layout of nodes this is not
-     * what it shows with: that is [resolveShownOptions].
+     * The node's options over those of the layouts around it, without the default options and without the user layer
+     * ([changeChoices]): the parents' resolution, then the node's own. A new object at each call, which the caller may
+     * change. For a layout of nodes this is not what it shows with: that is [resolveShownOptions].
      */
     open fun resolveCurrentOptions(): Options {
         val resolved = parent?.resolveChildOptions(this) ?: Options()
@@ -153,21 +171,21 @@ abstract class ViewController<V : ViewGroup>(
     }
 
     /**
-     * The node's options over those of the layouts around it and [defaultOptions]: what it shows with. With the app's
-     * default options ([DefaultOptions.current]) the result is kept and given again while no options changed
-     * ([OptionsCache]) and the layouts around the node and its current children are the same: it is read-only, whoever
-     * changes it copies it first. Main thread only.
+     * The node's options over those of the layouts around it and [defaultOptions], with the user layer over them
+     * ([changeChoices]): what it shows with. With the app's default options ([DefaultOptions.current]) the result is
+     * kept and given again while no options changed ([OptionsCache]) and the layouts around the node and its current
+     * children are the same: it is read-only, whoever changes it copies it first. Main thread only.
      *
      * For a layout of nodes (a stack, tabs, a side menu) it is the layout's own options over those around it, without
      * any child's: not what the layout shows with, which [resolveShownOptions] gives.
      */
     open fun resolveCurrentOptions(defaultOptions: Options): Options {
-        if (defaultOptions !== DefaultOptions.current) return resolveCurrentOptions().withDefaultOptions(defaultOptions)
+        if (defaultOptions !== DefaultOptions.current) return withChoices(defaultOptions)
         val generation = OptionsCache.generation
         val along = resolvedAlong()
         val kept = resolved
         if (kept != null && resolvedGeneration == generation && sameNodes(along, resolvedAlong)) return kept
-        val result = resolveCurrentOptions().withDefaultOptions(defaultOptions)
+        val result = withChoices(defaultOptions)
         resolved = result
         resolvedGeneration = generation
         resolvedAlong = along.map(::WeakReference)
@@ -183,6 +201,10 @@ abstract class ViewController<V : ViewGroup>(
      */
     open fun resolveShownOptions(defaultOptions: Options): Options = resolveCurrentOptions(defaultOptions)
 
+    // The resolution in its order: the defaults, the parents, the node's own options, then the user layer over them.
+    private fun withChoices(defaultOptions: Options): Options =
+        choices.applyTo(resolveCurrentOptions().withDefaultOptions(defaultOptions))
+
     // The layouts around this node, nearest first, then its current children down the visible chain.
     private fun resolvedAlong(): List<ViewController<*>> {
         val nodes = ArrayList<ViewController<*>>()
@@ -203,9 +225,9 @@ abstract class ViewController<V : ViewGroup>(
         nodes.size == kept.size && nodes.indices.all { nodes[it] === kept[it].get() }
 
     /**
-     * Changes the node's own options: [change] gets a copy, which is stored ([options]). A presenter or a module that
-     * writes a user's choice into the options (a menu's checkmark, a search scope, tokens, a toggled button) does it
-     * this way; a button menu keeps its own shared `checked` (`ButtonMenuOptions`).
+     * Changes the node's own options: [change] gets a copy, which is stored ([options]). It is for the library's own
+     * bookkeeping of a merge (a side color written into the node's buttons, the back button's visibility); what the
+     * user chose goes through [changeChoices].
      */
     fun changeOptions(change: (Options) -> Unit) {
         val copy = options.copy()
@@ -213,14 +235,40 @@ abstract class ViewController<V : ViewGroup>(
         options = copy
     }
 
+    /**
+     * Changes the node's user layer: what the user chose in the native UI (a single-selection menu's check, a search
+     * scope). It goes over the node's own options as they resolve, by the ids of the buttons, items and scopes, and
+     * stays through an unrelated `mergeOptions`, the same values sent again and `setDefaultOptions`; a merge that
+     * changes the chosen field takes it away ([mergeOwnOptions]). Every resolved result is stale after it
+     * ([OptionsCache]).
+     */
+    internal fun changeChoices(change: (UserChoices) -> Unit) {
+        change(choices)
+        OptionsCache.optionsChanged()
+    }
+
+    /**
+     * [delta] of a `mergeOptions` goes over the node's own options ([options]); a choice of the user layer whose field
+     * the merge changes, or whose button, item or scope it took away, leaves, so the app's value shows
+     * (`UserChoices.yieldTo`). Every `mergeOptions` into a node writes its own options this way.
+     */
+    protected fun mergeOwnOptions(delta: Options) {
+        val own = options
+        val before = if (choices.isEmpty) null else resolveCurrentOptions().withDefaultOptions(DefaultOptions.current)
+        options = own.copy().mergeWith(delta)
+        before ?: return
+        val after = resolveCurrentOptions().withDefaultOptions(DefaultOptions.current)
+        if (choices.yieldTo(delta, own, before, after)) OptionsCache.optionsChanged()
+    }
+
     /**
      * `mergeOptions` with the node's id (`mergeOptions`): [options] go over its own and stay there (one-shot options
-     * not kept); what shows applies them ([applyMergedOptions], when the view shows; otherwise as it appears); the
-     * layouts around it apply their part (`ParentController.mergeChildOptions`, each passes it on). [options] still
-     * carry the one-shot options to them. Containers that hand the merge to a child override it.
+     * not kept, [mergeOwnOptions]); what shows applies them ([applyMergedOptions], when the view shows; otherwise as it
+     * appears); the layouts around it apply their part (`ParentController.mergeChildOptions`, each passes it on).
+     * [options] still carry the one-shot options to them. Containers that hand the merge to a child override it.
      */
     open fun mergeOptions(options: Options) {
-        this.options = this.options.copy().mergeWith(options)
+        mergeOwnOptions(options)
         if (isViewShown) applyMergedOptions(options)
         performOnParentController { it.mergeChildOptions(options, this) }
     }
@@ -265,6 +313,12 @@ abstract class ViewController<V : ViewGroup>(
     /** Whether [handleBack] would go back. */
     open fun canHandleBack(): Boolean = false
 
+    /**
+     * The stack whose top [handleBack] would take away with the default pop, which a back gesture previews; none when
+     * back would do anything else (hold, close a menu or a pane, a pop of its own) or nothing.
+     */
+    internal open fun stackPoppedByBack(): StackController? = null
+
     /** Starts the node's content (a native screen's view, a React screen's surface). */
     open fun start() = Unit
 

package/android/src/main/java/dev/apexnative/navigation/views/animations/AnimationLayer.kt

@@ -0,0 +1,73 @@
+package dev.apexnative.navigation.views.animations
+
+import android.animation.Animator
+import android.animation.AnimatorListenerAdapter
+import android.animation.AnimatorSet
+import android.animation.ObjectAnimator
+import android.view.View
+
+/**
+ * A hardware layer on a view for the time of an animator that fades it. A view whose `alpha` is below 1 and whose
+ * rendering overlaps (any `ViewGroup` by default) is drawn into an offscreen buffer at every frame; through a layer it
+ * is drawn once and the GPU only composites it. The layer is taken as the animator starts and only from
+ * `LAYER_TYPE_NONE` (a layer someone else set stays theirs), and given back as it ends or is cancelled. A pure
+ * translation or scale needs none: RenderThread draws it. The stack's default transition has its own
+ * (`StackViews.dress`). Main thread only.
+ */
+internal object AnimationLayer {
+    private const val ALPHA = "alpha"
+
+    /**
+     * [view] draws through a hardware layer while [animator] plays, when [animator] changes the `alpha` of [view] and
+     * the view's rendering overlaps; [animator] itself, for chaining.
+     */
+    fun during(view: View, animator: Animator): Animator {
+        if (!changesAlpha(animator, view)) return animator
+        val hold = Hold({ view.layerType }, { view.setLayerType(it, null) })
+        animator.addListener(object : AnimatorListenerAdapter() {
+            override fun onAnimationStart(animation: Animator) {
+                hold.take(changesAlpha = true, overlapping = view.hasOverlappingRendering())
+            }
+
+            override fun onAnimationCancel(animation: Animator) = hold.release()
+
+            override fun onAnimationEnd(animation: Animator) = hold.release()
+        })
+        return animator
+    }
+
+    /** Whether an animation takes a layer: it fades, its view's rendering overlaps, and the view has no layer. */
+    fun takes(changesAlpha: Boolean, overlapping: Boolean, layerType: Int): Boolean =
+        changesAlpha && overlapping && layerType == View.LAYER_TYPE_NONE
+
+    /**
+     * The layer one animation took on one view, through [layerType] and [setLayerType]: taken at most once at a time,
+     * given back once, and only while it is still the hardware layer it set.
+     */
+    class Hold(private val layerType: () -> Int, private val setLayerType: (Int) -> Unit) {
+        /** Whether the animation holds the view's layer now. */
+        var isTaken = false
+            private set
+
+        /** The animation starts: the layer, when [takes] says so. */
+        fun take(changesAlpha: Boolean, overlapping: Boolean) {
+            if (isTaken || !takes(changesAlpha, overlapping, layerType())) return
+            setLayerType(View.LAYER_TYPE_HARDWARE)
+            isTaken = true
+        }
+
+        /** The animation ended or stopped: the layer goes, unless someone changed it meanwhile. */
+        fun release() {
+            if (!isTaken) return
+            isTaken = false
+            if (layerType() == View.LAYER_TYPE_HARDWARE) setLayerType(View.LAYER_TYPE_NONE)
+        }
+    }
+
+    // Whether [animator], or an animator in it, writes the alpha of [view].
+    private fun changesAlpha(animator: Animator, view: View): Boolean = when (animator) {
+        is AnimatorSet -> animator.childAnimations.any { changesAlpha(it, view) }
+        is ObjectAnimator -> animator.target === view && animator.values.orEmpty().any { it.propertyName == ALPHA }
+        else -> false
+    }
+}

package/android/src/main/java/dev/apexnative/navigation/views/animations/Curves.kt

@@ -96,6 +96,9 @@ internal object Curves {
      * linear between them — the values of AndroidX's `FastOutSlowInInterpolator`, computed here.
      */
     object FastOutSlowIn : Curve() {
+        // Before the table, which is made from it.
+        private val curve = CubicBezier(0.4, 0.0, 0.2, 1.0)
+
         /** The 201 values. */
         val table: DoubleArray = DoubleArray(TABLE_STEPS + 1) {
             round(bezierAt(it.toDouble() / TABLE_STEPS) * DECIMALS) / DECIMALS
@@ -109,7 +112,25 @@ internal object Curves {
         }
 
         /** y of the Bézier at its x = [x], exactly (to 1e-12). */
-        fun bezierAt(x: Double): Double {
+        fun bezierAt(x: Double): Double = curve.yAt(x)
+
+        private const val DECIMALS = 1e4
+    }
+
+    /**
+     * A cubic Bézier from (0, 0) to (1, 1) with the control points ([x1], [y1]) and ([x2], [y2]), as the framework's
+     * `PathInterpolator` draws it, computed exactly: the system's curves without a framework class.
+     */
+    class CubicBezier(
+        private val x1: Double,
+        private val y1: Double,
+        private val x2: Double,
+        private val y2: Double,
+    ) : Curve() {
+        override fun at(p: Double): Double = yAt(p)
+
+        /** y of the curve at its x = [x], exactly (to 1e-12). */
+        fun yAt(x: Double): Double {
             if (x <= 0.0) return 0.0
             if (x >= 1.0) return 1.0
             // x(t) only grows with t: a bisection finds t, then y(t).
@@ -118,23 +139,20 @@ internal object Curves {
             var t = x
             repeat(BISECTION_STEPS) {
                 t = (low + high) / 2
-                if (bezier(t, X1, X2) < x) low = t else high = t
+                if (coordinate(t, x1, x2) < x) low = t else high = t
             }
-            return bezier(t, Y1, Y2)
+            return coordinate(t, y1, y2)
         }
 
-        // One coordinate of the curve from (0, 0) to (1, 1) with the control points' coordinates [c1], [c2].
-        private fun bezier(t: Double, c1: Double, c2: Double): Double {
+        // One coordinate of the curve with the control points' coordinates [c1], [c2].
+        private fun coordinate(t: Double, c1: Double, c2: Double): Double {
             val u = 1 - t
             return 3 * u * u * t * c1 + 3 * u * t * t * c2 + t * t * t
         }
 
-        private const val X1 = 0.4
-        private const val Y1 = 0.0
-        private const val X2 = 0.2
-        private const val Y2 = 1.0
-        private const val BISECTION_STEPS = 60
-        private const val DECIMALS = 1e4
+        private companion object {
+            const val BISECTION_STEPS = 60
+        }
     }
 
     /**

package/android/src/main/java/dev/apexnative/navigation/views/animations/ValueInterpolation.kt

@@ -18,6 +18,18 @@ internal object ValueInterpolation {
         else -> from + fraction * (to - from)
     }
 
+    /**
+     * An angle in degrees at [fraction] of the way along the shorter arc, as iOS turns a shared element: 0 → 270 turns
+     * back by 90, 170 → −170 turns on by 20; half a turn goes on. At the end of the time exactly [to].
+     */
+    fun angle(from: Float, to: Float, fraction: Float, time: Float = fraction): Float {
+        if (time <= 0f) return from
+        if (time >= 1f) return to
+        val forward = ((to - from) % FULL_TURN + FULL_TURN) % FULL_TURN
+        val turn = if (forward > HALF_TURN) forward - FULL_TURN else forward
+        return from + fraction * turn
+    }
+
     /**
      * A color (an sRGB color int, as React Native keeps a background; none is transparent) at [fraction] of the way
      * from [from] to [to]: L, a and b in Lab (D65), the alpha linear, the result rounded; at the end of the time
@@ -90,4 +102,6 @@ internal object ValueInterpolation {
     private const val WHITE_Z = 108.883
     private const val EPSILON = 0.008856
     private const val KAPPA = 903.3
+    private const val FULL_TURN = 360f
+    private const val HALF_TURN = 180f
 }

package/android/src/main/java/dev/apexnative/navigation/views/bottomtabs/BottomTabs.kt

@@ -98,8 +98,8 @@ class BottomTabs(context: Context) : BottomNavigationView(MaterialTheme.context(
         var iconInactiveColor: Int? = null
         var titleActiveColor: Int? = null
         var titleInactiveColor: Int? = null
-        var iconWidth: Int? = null
-        var iconHeight: Int? = null
+        var iconWidth: Double? = null
+        var iconHeight: Double? = null
         var typeface: Typeface? = null
         var activeTextSize: Float? = null
         var inactiveTextSize: Float? = null
@@ -228,13 +228,15 @@ class BottomTabs(context: Context) : BottomNavigationView(MaterialTheme.context(
         applyLongPressesAgain()
     }
 
-    fun setIcon(index: Int, icon: Drawable) {
+    /** Null: the item has no icon. */
+    fun setIcon(index: Int, icon: Drawable?) {
         val item = items.getOrNull(index) ?: return
         if (item.icon == icon) return
         updateIcon(index, item.copy(icon = icon))
     }
 
-    fun setSelectedIcon(index: Int, icon: Drawable) {
+    /** Null: the item shows its icon when selected too. */
+    fun setSelectedIcon(index: Int, icon: Drawable?) {
         val item = items.getOrNull(index) ?: return
         if (item.selectedIcon == icon) return
         updateIcon(index, item.copy(selectedIcon = icon))
@@ -246,9 +248,9 @@ class BottomTabs(context: Context) : BottomNavigationView(MaterialTheme.context(
 
     fun setTabTestId(index: Int, testId: String?) = updateStyle(index) { it.testId = testId }
 
-    fun setIconWidth(index: Int, width: Int?) = updateStyle(index) { it.iconWidth = width }
+    fun setIconWidth(index: Int, width: Double?) = updateStyle(index) { it.iconWidth = width }
 
-    fun setIconHeight(index: Int, height: Int?) = updateStyle(index) { it.iconHeight = height }
+    fun setIconHeight(index: Int, height: Double?) = updateStyle(index) { it.iconHeight = height }
 
     fun setTitleTypeface(index: Int, typeface: Typeface?) = updateStyle(index) { it.typeface = typeface }
 
@@ -475,7 +477,7 @@ class BottomTabs(context: Context) : BottomNavigationView(MaterialTheme.context(
         view.setIconTintList(tint(style.iconActiveColor, style.iconInactiveColor, itemIconTintList))
         view.setTextColor(tint(style.titleActiveColor, style.titleInactiveColor, itemTextColor))
         val iconSize = style.iconWidth ?: style.iconHeight
-        view.setIconSize(if (iconSize != null) UiUtils.dpToPx(context, iconSize) else itemIconSize)
+        view.setIconSize(if (iconSize != null) UiUtils.dpToPixels(context, iconSize) else itemIconSize)
         view.findViewById<TextView>(MaterialR.id.navigation_bar_item_small_label_view)?.let {
             style.typeface?.let { typeface -> it.typeface = typeface }
             style.inactiveTextSize?.let { size -> it.setTextSize(TypedValue.COMPLEX_UNIT_SP, size) }

package/android/src/main/java/dev/apexnative/navigation/views/bottomtabs/BottomTabsLayout.kt

@@ -10,13 +10,15 @@ import androidx.annotation.RestrictTo
 import androidx.core.view.ViewCompat
 import androidx.core.view.WindowInsetsCompat
 import dev.apexnative.navigation.utils.MaterialTheme
+import dev.apexnative.navigation.viewcontrollers.bottomtabs.CustomTabRowGeometry
 
 /**
  * The view of bottom tabs: the view of each tab made so far fills it, the selected one visible and the others invisible
  * but laid out, so a switch shows a tab at once and its screens render; the bar's [container] lies over them at the
  * bottom, the module's bar ([bar], `R.id.bottomTabs`) in it. The container's distance from the bottom ([barOffset]:
  * `bottomMargin`, and the navigation bar under a compact bar) is this view's own inset, not a layout parameter a root
- * may ignore. The window insets go on to every child as they came. Main thread only.
+ * may ignore. The custom [row], when the tabs have one, lies right after the container and over the bar. The window
+ * insets go on to every child as they came. Main thread only.
  */
 @SuppressLint("ViewConstructor")
 @RestrictTo(RestrictTo.Scope.LIBRARY)
@@ -34,8 +36,25 @@ class BottomTabsLayout(context: Context) : FrameLayout(context) {
     /** The window insets reached this view: the bar's room and the screens' room may have changed. */
     internal var onInsets: (() -> Unit)? = null
 
-    /** The custom row of the tabs, when every tab draws its cell (`bottomTab.component`); the placer puts it. */
+    /**
+     * The custom row of the tabs, when every tab draws its cell (`bottomTab.component`): a child right after the
+     * container, laid out over the bar, going with the container.
+     */
     internal var row: CustomTabRow? = null
+        set(value) {
+            if (field === value) return
+            field?.let {
+                removeView(it)
+                it.container = null
+            }
+            field = value
+            if (value == null) return
+            (value.parent as? ViewGroup)?.removeView(value)
+            value.container = container
+            value.place = null
+            // Its frame is absolute: the layout below puts it in its parameters.
+            addView(value, indexOfChild(container) + 1, LayoutParams(0, 0, Gravity.TOP or Gravity.LEFT))
+        }
 
     /** The container's distance from the bottom, in pixels. */
     internal var barOffset = 0
@@ -59,6 +78,16 @@ class BottomTabsLayout(context: Context) : FrameLayout(context) {
         }
     }
 
+    /**
+     * How far the container goes down to leave the screen whole: from the top of what the bar shows — the container, or
+     * the custom row that rises above it — to this view's bottom, in pixels.
+     */
+    internal val hideDistance: Int
+        get() {
+            val rowTop = row?.takeIf { it.visibility != View.GONE }?.top ?: container.top
+            return (height - minOf(container.top, rowTop)).coerceAtLeast(0)
+        }
+
     /** [view] of a tab joins under the bar, invisible until its tab shows. */
     internal fun addTab(view: View) {
         if (view.parent === this) return
@@ -85,5 +114,35 @@ class BottomTabsLayout(context: Context) : FrameLayout(context) {
     override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
         super.onLayout(changed, left, top, right, bottom)
         if (barOffset != 0) container.offsetTopAndBottom(-barOffset)
+        row?.let(::placeRow)
+    }
+
+    // The row over the bar where the bar rests (its container's motion the row takes before each frame), when its place
+    // changed: laid out there at once, and kept in its parameters, so the next passes measure it and put it there the
+    // same way. A hidden bar keeps the row where it was.
+    private fun placeRow(row: CustomTabRow) {
+        if (container.visibility == View.GONE || bar.width == 0) return
+        val barLeft = container.left + bar.left
+        val barTop = container.top + bar.top
+        val place = row.placeOver(
+            barLeft = barLeft,
+            barRight = barLeft + bar.width,
+            barBottom = barTop + bar.height,
+            barHeight = bar.height,
+            tabsHeight = height,
+            navigationBar = navigationBarInset,
+        )
+        if (!CustomTabRowGeometry.needsPlacing(row.place, place)) return
+        row.place = place
+        val params = row.layoutParams as LayoutParams
+        params.width = place.right - place.left
+        params.height = place.bottom - place.top
+        params.leftMargin = place.left
+        params.topMargin = place.top
+        row.measure(
+            MeasureSpec.makeMeasureSpec(params.width, MeasureSpec.EXACTLY),
+            MeasureSpec.makeMeasureSpec(params.height, MeasureSpec.EXACTLY),
+        )
+        row.layout(place.left, place.top, place.right, place.bottom)
     }
 }

package/android/src/main/java/dev/apexnative/navigation/views/bottomtabs/CustomBottomTabItemView.kt

@@ -22,9 +22,6 @@ open class CustomBottomTabItemView(context: Context) : FrameLayout(context) {
     private var state: TabCellState? = null
     private var destroyed = false
 
-    /** Runs once as the cell stops: what was kept for its content's id goes. */
-    internal var onDestroyed: (() -> Unit)? = null
-
     /** The content the cell shows, filling it, made with [state] as its first props. */
     internal fun show(view: IReactView, state: TabCellState) {
         content = view
@@ -68,8 +65,6 @@ open class CustomBottomTabItemView(context: Context) : FrameLayout(context) {
         didDisappear()
         destroyed = true
         content?.destroy()
-        onDestroyed?.invoke()
-        onDestroyed = null
     }
 
     /** The props of [state] as React Native takes them. */

package/android/src/main/java/dev/apexnative/navigation/views/bottomtabs/CustomTabRow.kt

@@ -11,18 +11,21 @@ import android.view.MotionEvent
 import android.view.View
 import android.view.ViewGroup
 import android.view.ViewOutlineProvider
+import android.view.ViewTreeObserver
 import android.widget.FrameLayout
 import android.widget.LinearLayout
 import dev.apexnative.navigation.customrow.BottomTabsCustomRowOptions
 import dev.apexnative.navigation.utils.TestIds
+import dev.apexnative.navigation.utils.UiUtils
 import dev.apexnative.navigation.viewcontrollers.bottomtabs.CustomTabRowGeometry
 
 /**
- * The custom row of bottom tabs on Android (`bottomTabs.customRow`): a container over the bar, in the window's content,
- * that holds the tabs' cells in one row of equal widths in tab order. It owns its place, its look, its visibility and
- * the touches: each cell's place takes them, the React elements in the cell don't, and a tap or a long press of a place
- * goes to [onPress] or [onLongPress] with the tab's index. Where it lies is the placer's to say (`CustomTabRowPlacer`);
- * what it looks like its tabs'. Main thread only.
+ * The custom row of bottom tabs on Android (`bottomTabs.customRow`): a container over the bar, a child of the tabs'
+ * view right after the bar's container, that holds the tabs' cells in one row of equal widths in tab order. It owns its
+ * look, its visibility and the touches: each cell's place takes them, the React elements in the cell don't, and a tap
+ * or a long press of a place goes to [onPress] or [onLongPress] with the tab's index. The tabs' view lays it out over
+ * the bar ([placeOver]); before each frame it goes with the bar's [container]. What it looks like is its tabs'. Main
+ * thread only.
  */
 @SuppressLint("ViewConstructor")
 internal class CustomTabRow(context: Context) : FrameLayout(context) {
@@ -42,11 +45,23 @@ internal class CustomTabRow(context: Context) : FrameLayout(context) {
     /** A cell's place was long-pressed. */
     var onLongPress: ((Int) -> Unit)? = null
 
-    /** `bottomTabs.customRow` of the tabs, resolved: the placer reads its height and margins. */
+    /** `bottomTabs.customRow` of the tabs, resolved: its height and margins say where the row lies. */
     var options = BottomTabsCustomRowOptions()
 
     /**
-     * Where the placer put the row last, in its parent; none before it did. The frame holds `bottomMargin` below the
+     * The bar's container the row goes with: its motion (a ride, a slide, the hide on scroll), its alpha, its height
+     * over the screens and whether it shows. The tabs' view sets it as the row joins it.
+     */
+    var container: View? = null
+
+    // Before each frame of the window the row is in: it goes with the container.
+    private val following = ViewTreeObserver.OnPreDrawListener {
+        container?.let(::follow)
+        true
+    }
+
+    /**
+     * Where the tabs' view put the row last, in it; none before it did. The frame holds `bottomMargin` below the
      * content: the row draws, clips, casts its shadow, lays its cells and takes touches only over the content, and the
      * margin below lets the touches through to what is under it.
      */
@@ -117,10 +132,57 @@ internal class CustomTabRow(context: Context) : FrameLayout(context) {
         return super.dispatchTouchEvent(event)
     }
 
-    /** Whether the row shows its cells: it hides with the bar. */
-    fun showWith(bar: View) {
-        val wanted = if (bar.visibility != View.GONE) View.VISIBLE else View.GONE
+    /**
+     * Where the row lies over the bar whose edges are [barLeft], [barRight] and [barBottom] and whose height is
+     * [barHeight], in the tabs' view of [tabsHeight] with the navigation bar's [navigationBar] at its bottom: its
+     * height and margins from [options].
+     */
+    fun placeOver(barLeft: Int, barRight: Int, barBottom: Int, barHeight: Int, tabsHeight: Int, navigationBar: Int) =
+        CustomTabRowGeometry.inTabs(
+            barLeft = barLeft,
+            barRight = barRight,
+            barBottom = barBottom,
+            tabsHeight = tabsHeight,
+            navigationBar = navigationBar,
+            margin = UiUtils.dpToPixels(
+                context,
+                options.horizontalMargin.get(CustomTabRowGeometry.HORIZONTAL_MARGIN_DP.toDouble()),
+            ),
+            content = CustomTabRowGeometry.content(
+                barHeight = barHeight,
+                height = options.height.get(null)?.let { UiUtils.dpToPixels(context, it) },
+                extra = UiUtils.dpToPixels(context, CustomTabRowGeometry.EXTRA_HEIGHT_DP.toDouble()),
+            ),
+            bottomMargin = UiUtils.dpToPixels(context, options.bottomMargin.get(0.0)),
+        )
+
+    override fun onAttachedToWindow() {
+        super.onAttachedToWindow()
+        viewTreeObserver.addOnPreDrawListener(following)
+    }
+
+    override fun onDetachedFromWindow() {
+        viewTreeObserver.removeOnPreDrawListener(following)
+        super.onDetachedFromWindow()
+    }
+
+    // The row hides with the bar and takes its motion and its alpha (the tabs' own alpha and motion, and their
+    // parents', the row has as their child); it stands as high as the container, and leaves accessibility while its
+    // tabs wait to show.
+    private fun follow(container: View) {
+        val wanted = if (container.visibility != View.GONE) View.VISIBLE else View.GONE
         if (visibility != wanted) visibility = wanted
+        if (alpha != container.alpha) alpha = container.alpha
+        if (translationX != container.translationX) translationX = container.translationX
+        if (translationY != container.translationY) translationY = container.translationY
+        val lift = CustomTabRowGeometry.lift(container.z, elevation)
+        if (translationZ != lift) translationZ = lift
+        val mode = if (hiddenFromAccessibility()) {
+            View.IMPORTANT_FOR_ACCESSIBILITY_NO_HIDE_DESCENDANTS
+        } else {
+            View.IMPORTANT_FOR_ACCESSIBILITY_AUTO
+        }
+        if (importantForAccessibility != mode) importantForAccessibility = mode
     }
 
     /** Draws [look]; nothing changes when it is the one drawn. */

package/android/src/main/java/dev/apexnative/navigation/views/element/ElementStep.kt

@@ -0,0 +1,31 @@
+package dev.apexnative.navigation.views.element
+
+import dev.apexnative.navigation.utils.DevelopmentLog
+
+/**
+ * The isolation of every element of the transitions: [work], a step of the element named [element] (its `nativeID` in
+ * quotes, or a pair's two), runs; an exception in it skips that element only — one line in the log
+ * ([elementSkipped]), and false — while the rest of the transition plays and its command completes.
+ */
+internal inline fun elementStep(
+    element: String,
+    noinline log: (String) -> Unit = DevelopmentLog::warn,
+    work: () -> Unit,
+): Boolean = try {
+    work()
+    true
+} catch (e: Exception) {
+    elementSkipped(element, e.toString(), log)
+    false
+}
+
+/** The line in the log for the element named [element], skipped for [reason]: it shows and hides with its screen. */
+internal fun elementSkipped(element: String, reason: String, log: (String) -> Unit = DevelopmentLog::warn) =
+    log("[ApexNavigation] the transition's element $element is skipped, it shows and hides with its screen while the " +
+        "rest plays: $reason")
+
+/** The name of an element in the log. */
+internal fun elementName(nativeId: String) = "'$nativeId'"
+
+/** The name of a shared pair in the log. */
+internal fun pairName(fromId: String, toId: String) = "'$fromId' -> '$toId'"