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

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/views/element/ElementTransitions.kt

@@ -2,150 +2,78 @@ package dev.apexnative.navigation.views.element
 
 import android.animation.Animator
 import android.animation.AnimatorListenerAdapter
-import android.graphics.Rect
 import android.os.Build
 import android.util.Log
 import android.view.View
 import android.view.ViewGroup
-import com.facebook.react.views.view.ReactViewGroup
 import dev.apexnative.navigation.options.ElementTransitionOptions
 import dev.apexnative.navigation.options.LayoutAnimation
 import dev.apexnative.navigation.options.SharedElementTransitionOptions
 import dev.apexnative.navigation.react.events.AppearanceDispatcher
 import dev.apexnative.navigation.utils.DevelopmentLog
 import dev.apexnative.navigation.utils.NavigationLog
+import dev.apexnative.navigation.utils.SystemAnimations
 import dev.apexnative.navigation.viewcontrollers.viewcontroller.ViewController
 import dev.apexnative.navigation.views.animations.AnimationLayer
 import dev.apexnative.navigation.views.animations.SideAnimator
 import dev.apexnative.navigation.views.element.animators.SharedAnimatorFactory
+import java.util.Collections
+import java.util.WeakHashMap
 
 /**
- * The elements of one transition: the element transitions and the targets of the shared elements found by their
- * `nativeID` (depth first, the first match) in the whole view of the screen each side shows — an element in the screen
- * that goes first, then in the one that comes; a pair's `fromId` in the screen that goes, its `toId` in the one that
- * comes; each screen is walked once for all of them ([TransitionViews]). What isn't found, what is in another
- * transition's layer and an image that isn't loaded is skipped; so is an element whose start fails ([elementStep]):
- * it goes back at once and the rest plays. Each view found moves into a [TransitionLayer] at its place on the screen,
- * in the order its hierarchy draws it, and an [ElementStub] takes its index in its parent. A pair's `from` stays where
- * it is, hidden while its copy flies. [finish] puts every view back at its index with its layout, its pivot and the
- * values of its properties read before — unless React removed its stub meanwhile: then it is gone for good —, shows
- * the `from`s again and takes the layer away. Main thread only.
+ * The elements of one transition: the element transitions and the shared pairs found by their `nativeID` (depth first,
+ * the first match) in the whole view of the screen each side shows — an element in the screen that goes first, then in
+ * the one that comes; a pair's `fromId` in the screen that goes, its `toId` in the one that comes; each screen is
+ * walked once for all of them ([TransitionViews]). What isn't found, what another transition plays now and an image
+ * that isn't loaded is skipped; so is an element whose start fails ([elementStep]): it gets its values back at once and
+ * the rest plays. No view leaves its parent, as on iOS. An element plays where it is, in its screen: its properties
+ * animate about its center and it moves with its screen. A pair flies as a copy drawn in a [TransitionLayer] over the
+ * screens, the copies in the order their targets are drawn; its `to` is hidden from the start, its `from` from the
+ * start of its flight. [finish] gives every element the values of its properties read before, shows the pairs' views
+ * again and takes the layer away. Main thread only.
  */
-internal class ElementTransition private constructor(private val layer: TransitionLayer) {
-    // A view in the layer: where it came from and what it was.
-    private class Moved(
-        val view: View,
-        val stub: ElementStub,
-        val params: ViewGroup.LayoutParams,
-        val frame: Rect,
-        val values: FloatArray,
-        val pivotSet: Boolean,
-        // Where its parent's origin is in the layer: what `x` and `y` are counted from.
-        val originX: Int,
-        val originY: Int,
-    )
+internal class ElementTransition private constructor(
+    private val layer: TransitionLayer?,
+    // The views of the screens, as far as the parents that cut a pair's views count.
+    private val fromRoot: View?,
+    private val toRoot: View?,
+) {
+    // An element playing where it is: what it was.
+    private class InPlace(val view: View, val values: FloatArray, val pivotSet: Boolean)
 
-    private val moved = ArrayList<Moved>()
-    private val hidden = ArrayList<Pair<View, Float>>()
+    private val inPlace = ArrayList<InPlace>()
+    private val taken = ArrayList<View>()
+    // The views of the pairs hidden while their copies fly, with the alpha each had.
+    private val hidden = LinkedHashMap<View, Float>()
     private var finished = false
 
     /** The animators of the elements and of the shared elements, each with its own time. */
     val animators = ArrayList<Animator>()
 
-    /** Every view back, the `from`s seen, the layer gone; at the end of the transition and at any stop. Once. */
+    /**
+     * Every element's values back, the pairs' views seen, the layer gone; at the end of the transition and at any stop.
+     * Once.
+     */
     fun finish() {
         if (finished) return
         finished = true
-        for ((view, alpha) in hidden) view.alpha = alpha
+        for ((view, alpha) in hidden) show(view, alpha)
         hidden.clear()
-        // Each view goes back on its own: one that can't (its parent gone wrong) doesn't keep the others in the layer.
-        for (item in moved.asReversed()) {
+        // Each element on its own: one that can't get its values back doesn't keep the others from theirs.
+        for (item in inPlace.asReversed()) {
             try {
-                giveBack(item)
+                restore(item.view, item.values, item.pivotSet)
             } catch (e: RuntimeException) {
-                Log.w(NavigationLog.TAG, "[ApexNavigation] An element of a transition couldn't go back", e)
+                Log.w(NavigationLog.TAG, "[ApexNavigation] An element of a transition couldn't get its values back", e)
             }
         }
-        moved.clear()
-        layer.detach()
+        inPlace.clear()
+        playing -= taken.toSet()
+        taken.clear()
+        layer?.detach()
     }
 
-    private fun moveIntoLayer(view: View): Moved? {
-        val parent = view.parent as? ViewGroup ?: return null
-        // A parent that clips its subviews keeps its own list of children, which a stub swapped in would leave
-        // behind: its element stays where it is.
-        if ((parent as? ReactViewGroup)?.removeClippedSubviews == true) return null
-        val index = parent.indexOfChild(view)
-        if (index < 0) return null
-        val onScreen = IntArray(2)
-        parent.getLocationOnScreen(onScreen)
-        val origin = layer.originOnScreen
-        val originX = onScreen[0] - parent.scrollX - origin.x
-        val originY = onScreen[1] - parent.scrollY - origin.y
-        val frame = Rect(view.left, view.top, view.right, view.bottom)
-        val params = view.layoutParams ?: ViewGroup.LayoutParams(view.width, view.height)
-        val pivotSet = Build.VERSION.SDK_INT >= Build.VERSION_CODES.P && view.isPivotSet
-        val values = floatArrayOf(
-            view.alpha, view.translationX, view.translationY, view.scaleX, view.scaleY, view.rotation,
-            view.rotationX, view.rotationY, view.pivotX, view.pivotY,
-        )
-        val stub = ElementStub(view.context, view)
-        try {
-            parent.removeViewAt(index)
-            parent.addView(stub, index, params)
-            stub.layout(frame.left, frame.top, frame.right, frame.bottom)
-            val left = originX + frame.left
-            val top = originY + frame.top
-            layer.put(view, left, top, frame.width(), frame.height())
-        } catch (e: RuntimeException) {
-            putBack(view, stub, parent, index, params, frame)
-            throw e
-        }
-        // Scale and rotations turn about the center.
-        view.pivotX = frame.width() / 2f
-        view.pivotY = frame.height() / 2f
-        return Moved(view, stub, params, frame, values, pivotSet, originX, originY).also { moved += it }
-    }
-
-    // A move that failed half way undone: the view back at its index in its parent, the stub gone.
-    private fun putBack(
-        view: View,
-        stub: ElementStub,
-        parent: ViewGroup,
-        index: Int,
-        params: ViewGroup.LayoutParams,
-        frame: Rect,
-    ) {
-        if (view.parent === layer) layer.removeView(view)
-        val stubIndex = parent.indexOfChild(stub)
-        if (stubIndex >= 0) parent.removeViewAt(stubIndex)
-        if (view.parent == null) {
-            parent.addView(view, index.coerceAtMost(parent.childCount), params)
-            view.layout(frame.left, frame.top, frame.right, frame.bottom)
-        }
-    }
-
-    private fun giveBack(item: Moved) {
-        val view = item.view
-        // A commit of Fabric meanwhile laid it out in its parent's coordinates: the newest such frame holds.
-        val reactFrame = if (view.parent === layer) layer.frameFromReact(view) else null
-        if (view.parent === layer) layer.removeView(view)
-        restore(view, item)
-        val parent = item.stub.parent as? ViewGroup ?: return
-        val index = parent.indexOfChild(item.stub)
-        if (index < 0) return
-        parent.removeViewAt(index)
-        parent.addView(view, index, item.params)
-        val frame = reactFrame ?: item.frame
-        view.measure(
-            View.MeasureSpec.makeMeasureSpec(frame.width(), View.MeasureSpec.EXACTLY),
-            View.MeasureSpec.makeMeasureSpec(frame.height(), View.MeasureSpec.EXACTLY),
-        )
-        view.layout(frame.left, frame.top, frame.right, frame.bottom)
-    }
-
-    private fun restore(view: View, item: Moved) {
-        val values = item.values
+    private fun restore(view: View, values: FloatArray, pivotSet: Boolean) {
         view.alpha = values[ALPHA]
         view.translationX = values[TRANSLATION_X]
         view.translationY = values[TRANSLATION_Y]
@@ -154,7 +82,7 @@ internal class ElementTransition private constructor(private val layer: Transiti
         view.rotation = values[ROTATION]
         view.rotationX = values[ROTATION_X]
         view.rotationY = values[ROTATION_Y]
-        if (!item.pivotSet && Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+        if (!pivotSet && Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
             view.resetPivot()
         } else {
             view.pivotX = values[PIVOT_X]
@@ -165,50 +93,71 @@ internal class ElementTransition private constructor(private val layer: Transiti
     // An element with views in it fades through a hardware layer only where its alpha would draw it into an offscreen
     // buffer at every frame (AnimationLayer: its rendering overlaps). React's views overlap only with
     // `needsOffscreenAlphaCompositing`, so most elements fade without one and nothing they draw outside their bounds (a
-    // box shadow) is clipped. A view without children fades its own drawing at no extra cost.
-    private fun addElement(options: ElementTransitionOptions, item: Moved) {
-        val base = SideAnimator.Base(xOffset = item.originX.toFloat(), yOffset = item.originY.toFloat())
-        val animator = SideAnimator.build(item.view, options, base) ?: return
-        if (item.view is ViewGroup) AnimationLayer.during(item.view, animator)
+    // box shadow) is clipped. A view without children fades its own drawing at no extra cost. Scale and rotations turn
+    // about the element's center; `x` and `y` are its place in its own parent.
+    private fun addElement(options: ElementTransitionOptions, view: View) {
+        inPlace += InPlace(view, valuesOf(view), pivotSetOf(view))
+        view.pivotX = view.width / 2f
+        view.pivotY = view.height / 2f
+        val animator = SideAnimator.build(view, options, SideAnimator.Base()) ?: return
+        if (view is ViewGroup) AnimationLayer.during(view, animator)
         animators += animator
     }
 
-    // The pair's flight: `to` hidden until it starts, `from` hidden from its start; false when it doesn't fly.
+    // An element whose start failed gets its values back now.
+    private fun giveValuesBack(view: View) {
+        val item = inPlace.lastOrNull { it.view === view } ?: return
+        inPlace -= item
+        try {
+            restore(view, item.values, item.pivotSet)
+        } catch (e: RuntimeException) {
+            Log.w(NavigationLog.TAG, "[ApexNavigation] An element of a transition couldn't get its values back", e)
+        }
+    }
+
+    // The pair's flight: `to` hidden from now, `from` from its start, both seen again when it stops or its copy can't
+    // be drawn. Nothing changes when it doesn't fly.
     private fun addPair(
         options: SharedElementTransitionOptions,
         from: View,
-        item: Moved,
-        toParent: View?,
+        to: View,
+        name: String,
         fallbackDuration: Long,
-    ): Boolean {
-        val to = item.view
+    ) {
+        val layer = layer ?: return
         val flight = SharedAnimatorFactory.create(
-            from, to, toParent, item.stub, layer, options, fallbackDuration, DevelopmentLog::warn,
-        ) ?: return false
-        val alpha = item.values[ALPHA]
+            from, to, fromRoot, toRoot, layer, options, fallbackDuration, DevelopmentLog::warn,
+        ) ?: return
         val fromAlpha = from.alpha
-        to.alpha = 0f
-        hidden += from to fromAlpha
+        val seenAgain = {
+            flight.picture.shown = false
+            hidden.remove(from)?.let { show(from, it) }
+            hidden.remove(to)?.let { show(to, it) }
+            layer.invalidate()
+        }
+        flight.picture.onFailed = { e ->
+            elementSkipped(name, e.toString())
+            seenAgain()
+        }
         flight.animator.addListener(object : AnimatorListenerAdapter() {
             private var stopped = false
 
             override fun onAnimationStart(animation: Animator) {
-                if (stopped) return
+                if (stopped || finished) return
+                hidden[from] = fromAlpha
                 from.alpha = 0f
-                if (!flight.drawsPictures) to.alpha = alpha
             }
 
-            // A flight whose start or frame failed stops (`MoveAnimator`), maybe inside its own start: `from` shows
-            // again in its screen, and a `to` that moves itself in its place, as at any stop (a flight of pictures
-            // shows its `to` at its end).
+            // A flight whose start or frame failed stops (`MoveAnimator`), maybe inside its own start.
             override fun onAnimationCancel(animation: Animator) {
                 stopped = true
-                from.alpha = fromAlpha
-                if (!flight.drawsPictures) to.alpha = alpha
+                seenAgain()
             }
         })
+        layer.add(flight.picture)
+        hidden[to] = to.alpha
+        to.alpha = 0f
         animators += flight.animator
-        return true
     }
 
     companion object {
@@ -223,10 +172,26 @@ internal class ElementTransition private constructor(private val layer: Transiti
         private const val PIVOT_X = 8
         private const val PIVOT_Y = 9
 
+        // The views the transitions that run now play: another transition leaves them alone.
+        private val playing: MutableSet<View> = Collections.newSetFromMap(WeakHashMap())
+
+        private fun valuesOf(view: View) = floatArrayOf(
+            view.alpha, view.translationX, view.translationY, view.scaleX, view.scaleY, view.rotation,
+            view.rotationX, view.rotationY, view.pivotX, view.pivotY,
+        )
+
+        private fun pivotSetOf(view: View) = Build.VERSION.SDK_INT >= Build.VERSION_CODES.P && view.isPivotSet
+
+        // A view hidden for a flight shows again with its alpha, unless React gave it another one meanwhile. React
+        // writes the same alpha: an opacity it commits during the flight shows the view beside its copy until the end.
+        private fun show(view: View, alpha: Float) {
+            if (view.alpha == 0f) view.alpha = alpha
+        }
+
         /**
-         * The elements of [animation] from [from] to [to], moved into a layer that joins [host] at [layerIndex] (its
-         * top without one); none when none of them is found. A shared element without a duration takes
-         * [fallbackDuration], the screen's fade.
+         * The elements of [animation] from [from] to [to]; the copies of the pairs in a layer that joins [host] at
+         * [layerIndex] (its top without one). None when none of them is found or the system's animations are off. A
+         * shared element without a duration takes [fallbackDuration], the screen's fade.
          */
         fun start(
             animation: LayoutAnimation,
@@ -236,6 +201,7 @@ internal class ElementTransition private constructor(private val layer: Transiti
             layerIndex: Int?,
             fallbackDuration: Long,
         ): ElementTransition? {
+            if (SystemAnimations.areOff(host.context)) return null
             val fromView = from?.let { AppearanceDispatcher.visibleNode(it).peekView() }
             val toView = AppearanceDispatcher.visibleNode(to).peekView()
             val transitions = animation.elementTransitions.transitions
@@ -245,27 +211,28 @@ internal class ElementTransition private constructor(private val layer: Transiti
             val elements = ArrayList<Pair<ElementTransitionOptions, View>>()
             for (element in transitions) {
                 if (element.id.isEmpty()) continue
-                val view = found(views.leaving(element.id)) ?: found(views.arriving(element.id)) ?: continue
-                if (TransitionLayer.holds(view) || !taken.add(view)) continue
+                val view = views.leaving(element.id) ?: views.arriving(element.id) ?: continue
+                if (view in playing || !taken.add(view)) continue
                 elements += element to view
             }
             val pairs = ArrayList<Triple<SharedElementTransitionOptions, View, View>>()
             for (pair in shared) {
                 val fromId = pair.fromId.get(null) ?: continue
                 val toId = pair.toId.get(null) ?: continue
-                val source = found(views.leaving(fromId)) ?: continue
-                val target = found(views.arriving(toId)) ?: continue
-                if (source === target || TransitionLayer.holds(source) || TransitionLayer.holds(target)) continue
+                val source = views.leaving(fromId) ?: continue
+                val target = views.arriving(toId) ?: continue
+                if (source === target || source in playing || target in playing) continue
                 if (target in taken || source in taken) continue
                 if (!loaded(source, fromId) || !loaded(target, toId)) continue
+                taken += source
                 taken += target
                 pairs += Triple(pair, source, target)
             }
             if (elements.isEmpty() && pairs.isEmpty()) return null
-            val layer = TransitionLayer(host.context)
-            val transition = ElementTransition(layer)
+            val layer = if (pairs.isEmpty()) null else TransitionLayer(host.context)
+            val transition = ElementTransition(layer, fromView, toView)
             try {
-                layer.attachTo(host, layerIndex ?: host.childCount)
+                layer?.attachTo(host, layerIndex ?: host.childCount)
                 transition.fill(host, elements, pairs, fallbackDuration)
             } catch (e: RuntimeException) {
                 transition.finish()
@@ -275,8 +242,8 @@ internal class ElementTransition private constructor(private val layer: Transiti
         }
 
         /**
-         * [start], and when that fails, a line in the log and none: the screens play without their elements; every view
-         * moved is back already.
+         * [start], and when that fails, a line in the log and none: the screens play without their elements; every
+         * element has its values back already.
          */
         fun startOrLog(
             animation: LayoutAnimation,
@@ -292,8 +259,6 @@ internal class ElementTransition private constructor(private val layer: Transiti
             null
         }
 
-        private fun found(view: View?): View? = view?.takeUnless { it is ElementStub }
-
         // An image not loaded drops out of the transition; its wait logged it already, else it is logged now.
         private fun loaded(view: View, id: String): Boolean {
             if (ImageLoads.isLoaded(view)) return true
@@ -302,45 +267,23 @@ internal class ElementTransition private constructor(private val layer: Transiti
         }
     }
 
-    // The views into the layer in the order they are drawn, then their animators; a pair that doesn't fly goes back at
-    // once. Each element's steps run on their own ([elementStep]): one that fails goes back, the others play.
+    // The elements' animators where they are, then the pairs' flights, their copies in the order their targets are
+    // drawn. Each element's steps run on their own ([elementStep]): one that fails is left as it was, the others play.
     private fun fill(
         host: ViewGroup,
         elements: List<Pair<ElementTransitionOptions, View>>,
         pairs: List<Triple<SharedElementTransitionOptions, View, View>>,
         fallbackDuration: Long,
     ) {
-        val names = HashMap<View, String>()
-        for ((options, view) in elements) names[view] = elementName(options.id)
-        for ((options, _, target) in pairs) names[target] = pairName(options.fromId.get(""), options.toId.get(""))
-        val views = elements.map { it.second } + pairs.map { it.third }
-        val parents = views.associateWith { it.parent as? View }
-        val placed = HashMap<View, Moved>()
-        for (view in DrawOrder.sorted(views, host) { it }) {
-            var item: Moved? = null
-            if (elementStep(names.getValue(view)) { item = moveIntoLayer(view) }) item?.let { placed[view] = it }
-        }
+        for ((_, view) in elements) taken += view
+        for ((_, source, target) in pairs) taken += listOf(source, target)
+        playing += taken
         for ((options, view) in elements) {
-            val item = placed[view] ?: continue
-            if (!elementStep(names.getValue(view)) { addElement(options, item) }) goBack(item)
-        }
-        for ((options, source, target) in pairs) {
-            val item = placed[target] ?: continue
-            var flies = false
-            elementStep(names.getValue(target)) {
-                flies = addPair(options, source, item, parents[target], fallbackDuration)
-            }
-            if (!flies) goBack(item)
+            if (!elementStep(elementName(options.id)) { addElement(options, view) }) giveValuesBack(view)
         }
-    }
-
-    // An element that doesn't play leaves the layer now; one that can't go back is logged, the others go on.
-    private fun goBack(item: Moved) {
-        moved -= item
-        try {
-            giveBack(item)
-        } catch (e: RuntimeException) {
-            Log.w(NavigationLog.TAG, "[ApexNavigation] An element of a transition couldn't go back", e)
+        for ((options, source, target) in DrawOrder.sorted(pairs, host) { it.third }) {
+            val name = pairName(options.fromId.get(""), options.toId.get(""))
+            elementStep(name) { addPair(options, source, target, name, fallbackDuration) }
         }
     }
 }