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

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/stack/topbar/BarRowTransition.kt

@@ -7,14 +7,15 @@ import dev.apexnative.navigation.viewcontrollers.stack.StackDisplay.BarMotion
  * row and the large title lies over them and the real row turns transparent; then the picture goes with the old screen
  * and the row comes with the new one ([RowTimeline]). Each change of the stack's current child owns the bar: a newer
  * one takes it over (the older picture goes, its animator stops), and only the end of the transition that owns it puts
- * the row back at rest. Without a picture (a `HARDWARE` bitmap in the bar) the old row just hides. Main thread only.
+ * the row back at rest. Without a picture (a `HARDWARE` bitmap in the bar on Android 8) the old row just hides. Main
+ * thread only.
  */
 internal class BarRowTransition(private val target: Target) {
     /** What the transition moves: the bar's views, or the unit tests' fake. */
     interface Target {
         /**
          * Lays a picture of the row and the large title over them, laid out at once and taking the touches; false when
-         * the bar can't be drawn in software (a `HARDWARE` bitmap): no picture then.
+         * the bar can't be recorded (a `HARDWARE` bitmap on Android 8): no picture then.
          */
         fun takeSnapshot(): Boolean
 

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/stack/topbar/ButtonPlaces.kt

@@ -1,11 +1,11 @@
 package dev.apexnative.navigation.viewcontrollers.stack.topbar
 
 /**
- * Where the right buttons of the bar go: the bar has as many places as AppCompat gives a toolbar for the window now
- * ([maxActionButtons]), one less for "⋮" when it shows; the pinned buttons take theirs first, then the buttons with the
- * highest `priority` (ties by the list's order); the rest go into "⋮". The core counts it, not AppCompat: AppCompat
- * would share the places in the menu's order, where the first button of the list is the last, and keep the count of the
- * orientation before a rotation. A pure function.
+ * Where the buttons of the bar go. The right ones: the bar has as many places as AppCompat gives a toolbar for the
+ * window now ([maxActionButtons]), one less for "⋮" when it shows; the pinned buttons take theirs first, then the
+ * buttons with the highest `priority` (ties by the list's order); the rest go into "⋮". In the line ([line]) the left
+ * buttons stand from its start in the list's order, and the right ones toward its end, the first one last. A pure
+ * function.
  */
 internal object ButtonPlaces {
     /** A right button as the count sees it: its `priority` ([HIGH], [STANDARD], [LOW]) and `pinned`. */
@@ -36,6 +36,12 @@ internal object ButtonPlaces {
         else -> 2
     }
 
+    /**
+     * The buttons of a side in the bar, [inBar] in the list's order, in the line's order from its start: the left ones
+     * as they are, the right ones the other way round, so the first right button stands at the end of the line.
+     */
+    fun <T> line(inBar: List<T>, left: Boolean): List<T> = if (left) inBar else inBar.reversed()
+
     /**
      * The plan for [buttons] with [maxPlaces] places, [taken] of them already used by what the core always puts in the
      * bar (the search's magnifier), and [overflowItems] items of `overflowMenu`, which put "⋮" in the bar whatever

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/stack/topbar/TopBarPresenter.kt

@@ -7,17 +7,13 @@ import android.app.Activity
 import android.content.Context
 import android.content.pm.ApplicationInfo
 import android.graphics.Color
-import android.graphics.drawable.BitmapDrawable
 import android.graphics.drawable.Drawable
-import android.view.Menu
-import android.view.MenuItem
 import android.view.MotionEvent
 import android.view.View
 import android.view.ViewGroup
 import android.view.animation.LinearInterpolator
 import android.view.animation.PathInterpolator
 import android.widget.FrameLayout
-import android.widget.ImageView
 import androidx.appcompat.content.res.AppCompatResources
 import androidx.core.graphics.drawable.DrawableCompat
 import androidx.core.view.WindowInsetsCompat
@@ -59,6 +55,7 @@ import dev.apexnative.navigation.views.stack.topbar.TitleBar
 import dev.apexnative.navigation.views.stack.topbar.TopBar
 import dev.apexnative.navigation.views.stack.topbar.TopBarDefaults
 import dev.apexnative.navigation.views.stack.topbar.titlebar.BarButtonComponentCell
+import dev.apexnative.navigation.views.stack.topbar.titlebar.BarMenu
 import dev.apexnative.navigation.views.stack.topbar.titlebar.ButtonBar
 import dev.apexnative.navigation.views.stack.topbar.titlebar.IconBackgroundDrawable
 import kotlin.math.roundToInt
@@ -142,8 +139,8 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
         this.layout = layout
         val bar = layout.topBar
         this.bar = bar
-        leftButtons = ButtonBar(bar.leftButtonBar, true, ::loadIcon, Buttons())
-        rightButtons = ButtonBar(bar.rightButtonBar, false, ::loadIcon, Buttons())
+        leftButtons = ButtonBar(bar.leftButtonBar, ::loadIcon, Buttons())
+        rightButtons = ButtonBar(bar.rightButtonBar, ::loadIcon, Buttons())
         visibility = TopBarVisibility(VisibilityTarget(bar) { collapse?.reset() })
         rowTransition = BarRowTransition(RowTarget(bar).also { rowTarget = it })
         collapse = TopBarCollapseBehavior(bar)
@@ -212,8 +209,8 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
      * bar as it is goes with [leaving], and the bar, which takes [incoming]'s options next, is drawn flat as [incoming]
      * moves — under [leaving] on a pop ([StackDisplay.BarTravel.Back]) (`StackLayout.barTravels`). No picture when the
      * bar doesn't show. Nothing travels when the new top hides the bar by a side of its own
-     * (`animations.*.topBar.exit`), which plays instead, or when the bar can't be drawn in software (a `HARDWARE`
-     * bitmap in it): the bar takes the options in its place.
+     * (`animations.*.topBar.exit`), which plays instead, or when the bar can't be recorded (a `HARDWARE` bitmap in it
+     * on Android 8): the bar takes the options in its place.
      */
     private fun beginTravel(
         bar: TopBar,
@@ -238,10 +235,10 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
 
     // The bar's picture where the bar is in the stack, its moves counted.
     private fun pictureOfBar(bar: TopBar): Drawable? {
-        val bitmap = bar.picture() ?: return null
+        val picture = bar.picture() ?: return null
         val left = (bar.left + bar.translationX).roundToInt()
         val top = (bar.top + bar.translationY).roundToInt()
-        return BitmapDrawable(bar.resources, bitmap).apply { setBounds(left, top, left + bitmap.width, top + bitmap.height) }
+        return picture.apply { setBounds(left, top, left + intrinsicWidth, top + intrinsicHeight) }
     }
 
     // The bar's travel ends: the picture goes, the bar is drawn in its place again with its shadow.
@@ -284,6 +281,8 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
         val bar = bar ?: return
         val screen = host.optionsScreen(entry)
         if (screen !== shownScreen) return apply(entry)
+        // An open menu has the colors of before.
+        if (delta.topBar.menuBackgroundColor.hasValue() || delta.topBar.menuTextColor.hasValue()) closeMenus()
         val options = host.resolvedOf(entry)
         applyAll(bar, entry, screen, options, merge = true, delta = delta)
     }
@@ -293,6 +292,8 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
      * now.
      */
     fun repaint(entry: ViewController<*>?) {
+        // An open menu has the old colors: it closes.
+        closeMenus()
         keys.clear()
         apply(entry)
         val options = entry?.let(host::resolvedOf) ?: return
@@ -582,16 +583,15 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
             keys[Part.Left] = leftKey
             reportWithoutId(topBar.buttons.left, "leftButtons")
             leftButtons?.set(
-                left.map { button(screen, it, roots) },
+                ButtonPlaces.line(left, left = true).map { button(screen, it, roots) },
                 emptyList(),
                 null,
                 merge && topBar.animateLeftButtons.isTrue,
             )
         }
         val overflow = topBar.overflowMenu?.takeIf { it.items.isNotEmpty() }
-        val menu = bar.rightButtonBar.menu
         search.applyMagnifier()
-        val taken = (0 until menu.size()).count { menu.getItem(it).itemId != Menu.NONE }
+        val taken = if (bar.rightButtonBar.trailingView != null) 1 else 0
         val configuration = context.resources.configuration
         val plan = ButtonPlaces.plan(
             right.map { ButtonPlaces.Button(ButtonPlaces.priorityOf(it.priority.get(null)), it.pinned.isTrue) },
@@ -612,12 +612,11 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
             keys[Part.Right] = rightKey
             reportWithoutId(topBar.buttons.right, "rightButtons")
             rightButtons?.set(
-                plan.inBar.map { button(screen, right[it], roots) },
+                ButtonPlaces.line(plan.inBar, left = false).map { button(screen, right[it], roots) },
                 plan.inOverflow.map { button(screen, right[it], roots) },
                 overflow,
                 merge && topBar.animateRightButtons.isTrue,
             )
-            search.applyMagnifier()
             rightButtons?.setOverflowColor(overflowColor)
         }
     }
@@ -639,9 +638,9 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
         ).joinToString()
         if (keys[Part.Back] == key) return
         keys[Part.Back] = key
-        val toolbar = bar.leftButtonBar
+        val row = bar.leftButtonBar
         if (!shown) {
-            toolbar.navigationIcon = null
+            row.navigationIcon = null
             return
         }
         val own = back.icon.get(null)?.let(::loadIcon)?.mutate()
@@ -668,19 +667,13 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
                 dp(background.height.get(0.0)),
             )
         } ?: icon
-        toolbar.navigationIcon = drawable
-        // Taking the icon, the navigation button gives it its own direction, which is stale while the button is new
-        // or the bar's direction has just changed; the toolbar corrects it only after the icon was drawn. So the arrow
-        // gets the bar's direction at once, on the drawable the button shows; a background passes it to the arrow.
-        val held = toolbar.navigationIcon ?: drawable
-        DrawableCompat.setLayoutDirection(held, arrowDirection)
-        if (held !== drawable) DrawableCompat.setLayoutDirection(drawable, arrowDirection)
-        toolbar.navigationContentDescription = label
-        // The toolbar uses its navigation button again from screen to screen: its id is set every time.
-        for (index in 0 until toolbar.childCount) {
-            val child = toolbar.getChildAt(index)
-            if ((child as? ImageView)?.drawable === held) TestIds.apply(child, testId)
-        }
+        row.navigationIcon = drawable
+        // Taking the icon, the back button gives it its own direction, which is stale while the button is new or the
+        // bar's direction has just changed; the button corrects it only once its direction is resolved again. So the
+        // arrow gets the bar's direction at once; a background passes it to the arrow.
+        DrawableCompat.setLayoutDirection(drawable, arrowDirection)
+        row.navigationContentDescription = label
+        row.navigationButton?.let { TestIds.apply(it, testId) }
     }
 
     // The background (`topBar.background.component`).
@@ -719,15 +712,14 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
 
     private fun pictureUnderRow(bar: TopBar, leaving: ViewController<*>) {
         val view = leaving.peekView() ?: return
-        val (bitmap, top) = bar.pictureUnderRow() ?: return
+        val (picture, top) = bar.pictureUnderRow() ?: return
         val barPlace = IntArray(2)
         val viewPlace = IntArray(2)
         bar.getLocationInWindow(barPlace)
         view.getLocationInWindow(viewPlace)
-        val picture = BitmapDrawable(bar.resources, bitmap)
         val left = barPlace[0] - viewPlace[0]
         val y = barPlace[1] + top - viewPlace[1]
-        picture.setBounds(left, y, left + bitmap.width, y + bitmap.height)
+        picture.setBounds(left, y, left + picture.intrinsicWidth, y + picture.intrinsicHeight)
         view.overlay.add(picture)
         underRow = leaving to picture
     }
@@ -1037,11 +1029,16 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
             return (buttons.left.orEmpty() + buttons.right.orEmpty()).firstOrNull { it.id.get(null) == buttonId }?.menu
         }
 
-        // The search's magnifier, the one item of the bar with an id of its own: `<topBar.searchBar.testID>.button`.
-        override fun testIdOf(item: MenuItem): String? {
-            if (item.itemId == Menu.NONE) return null
-            val entry = shownEntry ?: return null
-            return host.resolvedOf(entry).topBar.searchBar.testID.get(null)?.let { "$it.button" }
+        // Read as a menu opens, so they follow light and dark mode: `menuBackgroundColor`, else the bar's color as it
+        // shows (none when it lets something through), and then `menuTextColor` or else the title's color, the pair
+        // the bar shows; with neither, the theme's.
+        override fun menuColors(): BarMenu.Colors {
+            val topBar = shownEntry?.let(host::resolvedOf)?.topBar ?: return BarMenu.Colors(null, null)
+            val context = bar?.context ?: activity
+            val text = topBar.menuTextColor.get(context, null)
+            topBar.menuBackgroundColor.get(context, null)?.let { return BarMenu.Colors(it, text) }
+            val barColor = bar?.barColor?.takeIf { Color.alpha(it) == OPAQUE } ?: return BarMenu.Colors(null, text)
+            return BarMenu.Colors(barColor, text ?: topBar.title.color.get(context, null))
         }
     }
 
@@ -1183,6 +1180,7 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
 
     private companion object {
         const val DEFAULT_HEIGHT_DP = 64.0
+        const val OPAQUE = 255
         const val DEFAULT_TITLE_SP = 22.0
         const val DEFAULT_SUBTITLE_SP = 14.0
         const val CENTER = "center"

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

@@ -13,8 +13,8 @@ import java.lang.ref.WeakReference
  * tag) is in the screen, found once per tag —, not the horizontal ones, nor those of a modal, an overlay or another
  * screen; a slot screen's lists are in its container too. While a list is dragged, each follower gets the drag as a
  * translation to follow; when the drag ends, the way to settle; at every scroll event, the drags' and the inertia's,
- * the offset. It listens to React Native's events only while it has followers; without React Native's event dispatcher
- * (around a reload) it waits and listens once there is one. Released with the screen. Main thread only.
+ * the offset. It listens to React Native's scroll views ([ScrollEvents]) only while it has followers and its screen's
+ * view. Released with the screen. Main thread only.
  */
 class ScrollEventListener() {
     /** Follows the content while it is dragged. */
@@ -105,15 +105,12 @@ class ScrollEventListener() {
     }
 
     /**
-     * Listens to React Native's scroll events when followers wait for them and it doesn't yet: after a reload there may
-     * be no event dispatcher at first: then it is asked again once React Native has one, and as the screen joins a
-     * window.
+     * Listens to React Native's scroll views when followers wait for them and it doesn't yet, once it has the screen's
+     * view to tell its own lists by; asked again as the screen joins a window.
      */
     internal fun attachIfNeeded() {
-        if (released || stopListening != null || registrations.isEmpty()) return
-        val context = scope?.get()?.context ?: return
-        stopListening = ScrollEvents.listen(context, ::onScrollEvent)
-        if (stopListening == null) ScrollEvents.waitForDispatcher(this)
+        if (released || stopListening != null || registrations.isEmpty() || scope?.get() == null) return
+        stopListening = ScrollEvents.listen(::onScrollEvent)
     }
 
     /** The screen is destroyed: no follower hears it any more. */

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/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/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/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. */