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

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

@@ -94,6 +94,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
@@ -265,6 +278,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/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/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
@@ -246,9 +246,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 +475,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/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'"

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

@@ -7,7 +7,6 @@ import android.os.Build
 import android.util.Log
 import android.view.View
 import android.view.ViewGroup
-import com.facebook.react.uimanager.util.ReactFindViewUtil
 import com.facebook.react.views.view.ReactViewGroup
 import dev.apexnative.navigation.options.ElementTransitionOptions
 import dev.apexnative.navigation.options.LayoutAnimation
@@ -23,12 +22,13 @@ import dev.apexnative.navigation.views.element.animators.SharedAnimatorFactory
  * 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. What isn't found, what is in another transition's layer and an image that isn't loaded is skipped; 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.
+ * 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.
  */
 internal class ElementTransition private constructor(private val layer: TransitionLayer) {
     // A view in the layer: where it came from and what it was.
@@ -89,18 +89,41 @@ internal class ElementTransition private constructor(private val layer: Transiti
             view.rotationX, view.rotationY, view.pivotX, view.pivotY,
         )
         val stub = ElementStub(view.context, view)
-        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())
+        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.
@@ -156,13 +179,26 @@ internal class ElementTransition private constructor(private val layer: Transiti
             from, to, toParent, layer, options, fallbackDuration, DevelopmentLog::warn,
         ) ?: return false
         val alpha = item.values[ALPHA]
+        val fromAlpha = from.alpha
         to.alpha = 0f
-        hidden += from to from.alpha
+        hidden += from to fromAlpha
         flight.animator.addListener(object : AnimatorListenerAdapter() {
+            private var stopped = false
+
             override fun onAnimationStart(animation: Animator) {
+                if (stopped) return
                 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).
+            override fun onAnimationCancel(animation: Animator) {
+                stopped = true
+                from.alpha = fromAlpha
+                if (!flight.drawsPictures) to.alpha = alpha
+            }
         })
         animators += flight.animator
         return true
@@ -195,20 +231,23 @@ internal class ElementTransition private constructor(private val layer: Transiti
         ): ElementTransition? {
             val fromView = from?.let { AppearanceDispatcher.visibleNode(it).peekView() }
             val toView = AppearanceDispatcher.visibleNode(to).peekView()
+            val transitions = animation.elementTransitions.transitions
+            val shared = animation.sharedElements.get()
+            val views = TransitionViews(shared, transitions, fromView, toView)
             val taken = HashSet<View>()
             val elements = ArrayList<Pair<ElementTransitionOptions, View>>()
-            for (element in animation.elementTransitions.transitions) {
+            for (element in transitions) {
                 if (element.id.isEmpty()) continue
-                val view = find(fromView, element.id) ?: find(toView, element.id) ?: continue
+                val view = found(views.leaving(element.id)) ?: found(views.arriving(element.id)) ?: continue
                 if (TransitionLayer.holds(view) || !taken.add(view)) continue
                 elements += element to view
             }
             val pairs = ArrayList<Triple<SharedElementTransitionOptions, View, View>>()
-            for (pair in animation.sharedElements.get()) {
+            for (pair in shared) {
                 val fromId = pair.fromId.get(null) ?: continue
                 val toId = pair.toId.get(null) ?: continue
-                val source = find(fromView, fromId) ?: continue
-                val target = find(toView, toId) ?: 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
                 if (target in taken || source in taken) continue
                 if (!loaded(source, fromId) || !loaded(target, toId)) continue
@@ -246,8 +285,7 @@ internal class ElementTransition private constructor(private val layer: Transiti
             null
         }
 
-        private fun find(root: View?, nativeId: String): View? =
-            root?.let { ReactFindViewUtil.findView(it, nativeId) }?.takeUnless { it is ElementStub }
+        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 {
@@ -258,24 +296,44 @@ 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.
+    // once. Each element's steps run on their own ([elementStep]): one that fails goes back, 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 }) moveIntoLayer(view)?.let { placed[view] = it }
-        for ((options, view) in elements) placed[view]?.let { addElement(options, it) }
+        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 ((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
-            if (!addPair(options, source, item, parents[target], fallbackDuration)) {
-                moved -= item
-                giveBack(item)
+            var flies = false
+            elementStep(names.getValue(target)) {
+                flies = addPair(options, source, item, parents[target], fallbackDuration)
             }
+            if (!flies) goBack(item)
+        }
+    }
+
+    // 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)
         }
     }
 }

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

@@ -3,7 +3,6 @@ package dev.apexnative.navigation.views.element
 import android.util.Log
 import android.view.Choreographer
 import android.view.View
-import com.facebook.react.uimanager.util.ReactFindViewUtil
 import dev.apexnative.navigation.options.LayoutAnimation
 import dev.apexnative.navigation.react.events.AppearanceDispatcher
 import dev.apexnative.navigation.utils.DevelopmentLog
@@ -72,12 +71,14 @@ internal object TargetsWait {
     ): () -> Unit {
         val fromView = from?.let { AppearanceDispatcher.visibleNode(it).peekView() }
         val toView = AppearanceDispatcher.visibleNode(to).peekView()
+        val pairs = animation.sharedElements.get()
+        val views = TransitionViews(pairs, emptyList(), fromView, toView)
         val images = ArrayList<ImageWait.Image?>()
-        for (pair in animation.sharedElements.get()) {
+        for (pair in pairs) {
             val fromId = pair.fromId.get(null) ?: continue
             val toId = pair.toId.get(null) ?: continue
-            val source = fromView?.let { ReactFindViewUtil.findView(it, fromId) } ?: continue
-            val target = toView?.let { ReactFindViewUtil.findView(it, toId) } ?: continue
+            val source = views.leaving(fromId) ?: continue
+            val target = views.arriving(toId) ?: continue
             images += imageOf(source, fromId)
             images += imageOf(target, toId)
         }

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

@@ -2,7 +2,6 @@ package dev.apexnative.navigation.views.element
 
 import android.os.SystemClock
 import android.view.ViewGroup
-import com.facebook.react.uimanager.util.ReactFindViewUtil
 import dev.apexnative.navigation.options.LayoutAnimation
 import dev.apexnative.navigation.utils.DRAW_WAIT_LIMIT
 import dev.apexnative.navigation.viewcontrollers.component.ContentReadiness
@@ -38,13 +37,17 @@ private fun areReady(animation: LayoutAnimation, from: ViewController<*>, to: Vi
     val screen = to.shownScreen()
     val content = screen.view as? ViewGroup
     if (content != null && !ContentReadiness.isReady(screen)) return false
-    val sharedFound = animation.sharedElements.get().all { isIn(to, it.toId.get("")) }
-    return sharedFound && animation.elementTransitions.transitions.all { isIn(to, it.id) || isIn(from, it.id) }
+    // Each screen walked once for all the ids ([TransitionViews.findViews]); an element is looked for in the screen
+    // that goes only when the one that comes doesn't have it.
+    val targets = animation.sharedElements.get().map { it.toId.get("") }.filter { it.isNotEmpty() }
+    val elements = animation.elementTransitions.transitions.map { it.id }.filter { it.isNotEmpty() }
+    if (targets.isEmpty() && elements.isEmpty()) return true
+    val inTo = TransitionViews.findViews(to.view, (targets + elements).toSet())
+    if (!targets.all { it in inTo }) return false
+    val missing = elements.filterNot { it in inTo }.toSet()
+    return missing.isEmpty() || TransitionViews.findViews(from.view, missing).size == missing.size
 }
 
-private fun isIn(screen: ViewController<*>, nativeId: String) =
-    nativeId.isEmpty() || ReactFindViewUtil.findView(screen.view, nativeId) != null
-
 // The screen a layout shows: a modal of a stack shows the screen on its top.
 private fun ViewController<*>.shownScreen(): ViewController<*> {
     var controller: ViewController<*> = this

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

@@ -0,0 +1,100 @@
+package dev.apexnative.navigation.views.element
+
+import android.view.View
+import android.view.ViewGroup
+import com.facebook.react.R as ReactR
+import dev.apexnative.navigation.options.ElementTransitionOptions
+import dev.apexnative.navigation.options.SharedElementTransitionOptions
+
+/**
+ * The views of a transition's elements in its two screens: each screen is walked once, at its first lookup, for the ids
+ * looked for there — the screen that goes ([fromRoot]) for the pairs' `fromId`s and the elements' ids, the one that
+ * comes ([toRoot]) for the pairs' `toId`s and the elements' ids the other doesn't have. A lookup finds what
+ * `ReactFindViewUtil.findView` finds in that screen as it was at its walk (depth first, the first match). Main thread
+ * only.
+ */
+internal class TransitionViews(
+    pairs: List<SharedElementTransitionOptions>,
+    elements: List<ElementTransitionOptions>,
+    private val fromRoot: View?,
+    private val toRoot: View?,
+) {
+    // The ids each screen is walked for: the screen that goes for the sources and the elements, the one that comes for
+    // the targets (and the elements the other screen doesn't have, added at its walk).
+    private val leavingIds = HashSet<String>()
+    private val arrivingIds = HashSet<String>()
+    private val elementIds = ArrayList<String>()
+    private var leavingViews: Map<String, View>? = null
+    private var arrivingViews: Map<String, View>? = null
+
+    init {
+        for (pair in pairs) {
+            pair.fromId.get(null)?.takeIf { it.isNotEmpty() }?.let(leavingIds::add)
+            pair.toId.get(null)?.takeIf { it.isNotEmpty() }?.let(arrivingIds::add)
+        }
+        for (element in elements) {
+            if (element.id.isEmpty()) continue
+            leavingIds += element.id
+            elementIds += element.id
+        }
+    }
+
+    /** The view with [nativeId] in the screen that goes; none when none has it or it isn't one of the transition's. */
+    fun leaving(nativeId: String): View? {
+        val views = leavingViews ?: findViews(fromRoot, leavingIds).also { leavingViews = it }
+        return views[nativeId]
+    }
+
+    /** The view with [nativeId] in the screen that comes; none when none has it or it isn't one of the transition's. */
+    fun arriving(nativeId: String): View? {
+        val views = arrivingViews ?: run {
+            // An element is looked for here only when the screen that goes doesn't have it: the walk stops sooner.
+            for (id in elementIds) if (leaving(id) == null) arrivingIds += id
+            findViews(toRoot, arrivingIds).also { arrivingViews = it }
+        }
+        return views[nativeId]
+    }
+
+    companion object {
+        /** The views with the `nativeID`s of [nativeIds] under [root], in one walk ([firstByKey]). */
+        fun findViews(root: View?, nativeIds: Set<String>): Map<String, View> {
+            if (root == null || nativeIds.isEmpty()) return emptyMap()
+            return firstByKey(
+                root,
+                nativeIds,
+                keyOf = { it.getTag(ReactR.id.view_tag_native_id) as? String },
+                childCount = { (it as? ViewGroup)?.childCount ?: 0 },
+                childAt = { view, index -> (view as ViewGroup).getChildAt(index) },
+            )
+        }
+    }
+}
+
+/**
+ * For each key of [keys], the first node with it in a depth-first walk from [root] (the node, then its children in
+ * order): what a search for that one key finds, for all of them in one walk, which stops once every key is found. A key
+ * no node has is left out. Inline: the walk calls no function objects.
+ */
+internal inline fun <N : Any> firstByKey(
+    root: N,
+    keys: Set<String>,
+    keyOf: (N) -> String?,
+    childCount: (N) -> Int,
+    childAt: (N, Int) -> N,
+): Map<String, N> {
+    val found = HashMap<String, N>()
+    if (keys.isEmpty()) return found
+    // A stack of the nodes still to visit, the next one on top: the order of the recursive search without its depth.
+    val stack = ArrayList<N>()
+    stack.add(root)
+    while (stack.isNotEmpty()) {
+        val node = stack.removeAt(stack.size - 1)
+        val key = keyOf(node)
+        if (key != null && key in keys && key !in found) {
+            found[key] = node
+            if (found.size == keys.size) break
+        }
+        for (index in childCount(node) - 1 downTo 0) stack.add(childAt(node, index))
+    }
+    return found
+}

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

@@ -1,5 +1,7 @@
 package dev.apexnative.navigation.views.element.animators
 
+import android.animation.Animator
+import android.animation.AnimatorListenerAdapter
 import android.animation.TimeInterpolator
 import android.animation.ValueAnimator
 import android.graphics.Picture
@@ -7,6 +9,7 @@ import android.util.Log
 import android.view.View
 import android.view.animation.LinearInterpolator
 import dev.apexnative.navigation.utils.NavigationLog
+import dev.apexnative.navigation.views.element.elementStep
 
 /**
  * The view's own drawing with its children, as drawing commands: sharp at any scale. Its opacity and place belong to
@@ -28,14 +31,55 @@ internal fun recordPicture(view: View): Picture? = try {
 }
 
 // Runs in linear time and keeps the curve it is given for the move: an element moves along the transition's curve,
-// while what has to follow the clock (the pictures of a text changing over) can.
+// while what has to follow the clock (the pictures of a text changing over) can. Its start and its frames each run in
+// [elementStep]: one that fails stops the element — it is cancelled, so its ends put back what it changed and the
+// transition plays on without it.
 internal class MoveAnimator : ValueAnimator() {
     var curve: TimeInterpolator = LinearInterpolator()
         private set
 
+    /** The element's name in the log ([pairName]). */
+    var element = "''"
+
+    private val starts = ArrayList<() -> Unit>()
+    private val frames = ArrayList<(Float) -> Unit>()
+    private val ends = ArrayList<() -> Unit>()
+    private var failed = false
+
     init {
         setFloatValues(0f, 1f)
         super.setInterpolator(LinearInterpolator())
+        addListener(object : AnimatorListenerAdapter() {
+            override fun onAnimationStart(animation: Animator) = guarded { for (start in starts) start() }
+
+            override fun onAnimationEnd(animation: Animator) {
+                for (end in ends) elementStep(element) { end() }
+            }
+        })
+        addUpdateListener { animation ->
+            if (!failed) guarded { for (frame in frames) frame(animation.animatedFraction) }
+        }
+    }
+
+    /** At the start of the flight, after its delay. */
+    fun onStart(action: () -> Unit) {
+        starts += action
+    }
+
+    /** Each frame, with the fraction of the time, linear. */
+    fun onFrame(action: (fraction: Float) -> Unit) {
+        frames += action
+    }
+
+    /** At its end, also when it is cancelled or its start or a frame failed. */
+    fun onEnd(action: () -> Unit) {
+        ends += action
+    }
+
+    private fun guarded(work: () -> Unit) {
+        if (failed || elementStep(element, work = work)) return
+        failed = true
+        cancel()
     }
 
     override fun setInterpolator(value: TimeInterpolator?) {

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

@@ -5,8 +5,6 @@ import android.graphics.Matrix
 import android.view.View
 import android.view.ViewOutlineProvider
 import android.widget.ImageView
-import androidx.core.animation.doOnEnd
-import androidx.core.animation.doOnStart
 import com.facebook.react.views.view.ReactViewGroup
 import dev.apexnative.navigation.utils.borderRadius
 import dev.apexnative.navigation.views.animations.ValueInterpolation
@@ -78,7 +76,7 @@ internal class ImageMatrixAnimator(
                     to.imageMatrix = matrix
                 }
             }
-            doOnStart {
+            onStart {
                 savedProvider = to.outlineProvider
                 savedClip = to.clipToOutline
                 to.outlineProvider = outline
@@ -86,8 +84,8 @@ internal class ImageMatrixAnimator(
                 if (fits) to.scaleType = ImageView.ScaleType.MATRIX
                 frame(0f)
             }
-            addUpdateListener { frame(it.animatedFraction) }
-            doOnEnd {
+            onFrame { frame(it) }
+            onEnd {
                 if (fits) {
                     to.scaleType = toFit
                     to.imageMatrix = savedMatrix

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

@@ -3,8 +3,6 @@ package dev.apexnative.navigation.views.element.animators
 import android.animation.Animator
 import android.view.View
 import android.view.ViewOutlineProvider
-import androidx.core.animation.doOnEnd
-import androidx.core.animation.doOnStart
 import com.facebook.react.uimanager.BackgroundStyleApplicator
 import com.facebook.react.uimanager.style.BorderRadiusProp
 import dev.apexnative.navigation.utils.borderRadius
@@ -57,7 +55,7 @@ internal class PlainViewAnimator(
                 }
                 to.rotation = ValueInterpolation.number(fromRotation, toRotation, f, time)
             }
-            doOnStart {
+            onStart {
                 savedProvider = to.outlineProvider
                 savedClip = to.clipToOutline
                 if (ownRadius != null) BackgroundStyleApplicator.setBorderRadius(to, RADIUS, null)
@@ -66,9 +64,9 @@ internal class PlainViewAnimator(
                 layer.place(to, toRect.left.toInt(), toRect.top.toInt(), width, height)
                 frame(0f)
             }
-            addUpdateListener { frame(it.animatedFraction) }
+            onFrame { frame(it) }
             // A cancelled flight ends too: the view goes back whole.
-            doOnEnd {
+            onEnd {
                 to.translationX = 0f
                 to.translationY = 0f
                 to.rotation = toRotation