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

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/bottomtabs/TabItems.kt

@@ -36,7 +36,7 @@ internal class TabItems(private val color: (ThemeColour) -> Int?) {
         ) : Call()
 
         /** The icon's size in dp, width over height. */
-        data class IconSize(override val index: Int, val width: Int?, val height: Int?) : Call()
+        data class IconSize(override val index: Int, val width: Double?, val height: Double?) : Call()
 
         data class Font(override val index: Int, val font: FontOptions) : Call()
 
@@ -86,7 +86,7 @@ internal class TabItems(private val color: (ThemeColour) -> Int?) {
         options.icon.get(null)?.let { Call.Icon(index, it) },
         options.selectedIcon.get(null)?.let { Call.SelectedIcon(index, it) },
         colors(index, options),
-        Call.IconSize(index, options.iconWidth.get(null)?.toInt(), options.iconHeight.get(null)?.toInt()),
+        Call.IconSize(index, options.iconWidth.get(null), options.iconHeight.get(null)),
         Call.Font(index, options.font.copy()),
         Call.FontSizes(index, options.selectedFontSize.get(null)?.toFloat(), options.fontSize.get(null)?.toFloat()),
         Call.TestId(index, options.testID.get(null)),
@@ -110,7 +110,7 @@ internal class TabItems(private val color: (ThemeColour) -> Int?) {
             calls += colors(index, resolved)
         }
         if (merge.iconWidth.hasValue() || merge.iconHeight.hasValue()) {
-            calls += Call.IconSize(index, resolved.iconWidth.get(null)?.toInt(), resolved.iconHeight.get(null)?.toInt())
+            calls += Call.IconSize(index, resolved.iconWidth.get(null), resolved.iconHeight.get(null))
         }
         if (merge.font.hasValue()) calls += Call.Font(index, resolved.font.copy())
         if (merge.fontSize.hasValue() || merge.selectedFontSize.hasValue()) {

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/modal/ModalCoordinator.kt

@@ -147,8 +147,11 @@ internal class ModalCoordinator(
          */
         fun carry(record: ModalRecord, oldRoot: ViewController<*>?)
 
-        /** New [options] (resolved) of the record: its `testID`s, its sheet's `update` ([move]: to its selection). */
-        fun update(record: ModalRecord, options: Options, move: Boolean)
+        /**
+         * New [options] (resolved) of the record: its `testID`s, its sheet's `update`; [merge] is the `mergeOptions`
+         * that brought them, which alone may move the sheet, or null when the shown screen changed.
+         */
+        fun update(record: ModalRecord, options: Options, merge: Options?)
 
         /** The colors of the record's own views again (a light/dark switch). */
         fun repaint(record: ModalRecord) = Unit
@@ -353,13 +356,14 @@ internal class ModalCoordinator(
     // Options.
 
     /**
-     * A `mergeOptions` went into [node] (`mergeOptions` step 5): when it is in a modal, the modal's sheet takes its
-     * options again (it re-reads the resolved ones at any merge) and its `testID`s apply again.
+     * A `mergeOptions` of [merge] went into [node] (`mergeOptions` step 5): when it is in a modal, the modal's sheet
+     * takes its resolved options again, moving only to a `selectedDetent` that [merge] names, and its `testID`s apply
+     * again.
      */
-    fun optionsMergedInto(node: ViewController<*>) {
+    fun optionsMergedInto(node: ViewController<*>, merge: Options) {
         val record = recordOf(node) ?: return
         if (record.root.isDestroyed) return
-        views.update(record, record.root.resolveShownOptions(DefaultOptions.current), move = true)
+        views.update(record, record.root.resolveShownOptions(DefaultOptions.current), merge)
     }
 
     /**
@@ -369,7 +373,7 @@ internal class ModalCoordinator(
     fun visibleScreenChanged(node: ViewController<*>) {
         val record = recordOf(node) ?: return
         if (record.state == State.Waiting || record.root.isDestroyed) return
-        views.update(record, record.root.resolveShownOptions(DefaultOptions.current), move = false)
+        views.update(record, record.root.resolveShownOptions(DefaultOptions.current), merge = null)
     }
 
     /** The colors of the modals' own views again, after a light/dark switch. */
@@ -1230,7 +1234,7 @@ internal class ModalCoordinator(
         val screen = AppearanceDispatcher.visibleNode(record.root)
         if (screen.isDestroyed) return
         screen.mergeOptions(options)
-        optionsMergedInto(screen)
+        optionsMergedInto(screen, options)
     }
 
     private inline fun whileTaking(work: () -> Unit) {

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/modal/ModalSheet.kt

@@ -122,31 +122,32 @@ internal class ModalSheet(
         // where the sheet is laid out.
         layout.addView(container, CoordinatorLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT).also { it.behavior = behavior })
         shown = onShown
-        update(sheetOptions, swipeToDismiss, move = false)
+        update(sheetOptions, swipeToDismiss, merge = null)
+        selected = sheetOptions.selectedDetent?.takeIf { it in detents }
         // Laid out hidden first, so it slides up from the bottom.
         container.post { if (closing == null) behavior.state = stateOf(selected ?: detents.first()) }
     }
 
-    /** New options from mergeOptions: the detents, the look, and the selected detent, which the sheet moves to. */
-    fun update(sheetOptions: SheetOptions, swipeToDismiss: Boolean, move: Boolean = true) {
-        val previous = selected
+    /**
+     * New resolved options: the detents and the look. The sheet moves only as [SheetStops] says, after a `mergeOptions`
+     * of [merge]; without one (the shown screen changed, the show) it stays where it is.
+     */
+    fun update(sheetOptions: SheetOptions, swipeToDismiss: Boolean, merge: SheetOptions?) {
         options = sheetOptions
         this.swipeToDismiss = swipeToDismiss
         detents = sheetOptions.detents?.takeIf { it.isNotEmpty() }?.sortedBy { heightOf(it) } ?: listOf(SheetDetent.Large)
-        selected = sheetOptions.selectedDetent?.takeIf { it in detents }
         grabber.visibility = if (sheetOptions.grabber.isTrue) View.VISIBLE else View.GONE
         behavior.dragAnywhere = sheetOptions.expandsOnScroll.get(true)
         container.invalidateOutline()
         configure()
-        if (!move || closing != null) return
+        if (merge == null || closing != null) return
         val settled = detentOf(behavior.state)
         if (settled != null) behavior.isHideable = swipeToDismiss && settled == detents.first()
-        val target = when {
-            selected != null && selected != previous -> selected
-            settled != null && settled !in detents -> selected ?: detents.first()
-            else -> null
+        val target = SheetStops.target(settled, detents, merge.selectedDetent, sheetOptions.selectedDetent)
+        if (target != null) {
+            selected = target
+            behavior.state = stateOf(target)
         }
-        if (target != null) behavior.state = stateOf(target)
         updateScrim()
     }
 

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/modal/ModalViews.kt

@@ -245,10 +245,10 @@ internal class ModalViews(
         hideEmptyLayer()
     }
 
-    override fun update(record: ModalRecord, options: Options, move: Boolean) {
+    override fun update(record: ModalRecord, options: Options, merge: Options?) {
         val parts = parts[record] ?: return
         applyTestIds(record, parts, options)
-        parts.sheet?.update(options.modal.sheet, swipeToDismissOf(options), move)
+        parts.sheet?.update(options.modal.sheet, swipeToDismissOf(options), merge?.modal?.sheet)
     }
 
     override fun repaint(record: ModalRecord) {

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/modal/SheetStops.kt

@@ -0,0 +1,25 @@
+package dev.apexnative.navigation.viewcontrollers.modal
+
+import dev.apexnative.navigation.options.SheetDetent
+
+/**
+ * Where a shown sheet goes at new options, as on iOS: the sheet keeps the stop it stands at (the user's last drag
+ * included) until a `selectedDetent` arrives in a `mergeOptions`, or until its stop is no longer among the detents.
+ */
+internal object SheetStops {
+    /**
+     * The stop to move to, or null to stay: [arrived] (the `selectedDetent` the merge names) when it is among
+     * [detents]; else, when [settled] (the stop the sheet rests at) is no longer one of them, [selected] (the resolved
+     * `selectedDetent`) when it is, or the lowest.
+     */
+    fun target(
+        settled: SheetDetent?,
+        detents: List<SheetDetent>,
+        arrived: SheetDetent?,
+        selected: SheetDetent?,
+    ): SheetDetent? = when {
+        arrived != null && arrived in detents -> arrived
+        settled != null && settled !in detents -> selected?.takeIf { it in detents } ?: detents.first()
+        else -> null
+    }
+}

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/navigator/Navigator.kt

@@ -214,7 +214,7 @@ class Navigator(
      * it itself, `ComponentPresenter`); the system UI follows (only what changed is written).
      */
     internal fun optionsMerged(node: ViewController<*>, options: Options = Options()) {
-        modals.optionsMergedInto(node)
+        modals.optionsMergedInto(node, options)
         overlays.optionsMergedInto(node)
         val navigationBar = options.navigationBar
         val padding = navigationBar.drawBehind.hasValue() || navigationBar.backgroundColor.hasValue()

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/sidemenu/SideMenuController.kt

@@ -255,9 +255,7 @@ internal class SideMenuController(
         }
 
         // The system UI follows the screen the user sees now, at rest: the open menu's, the center's once a close
-        // ends. The owner reads it before the next frame, when a menu that closed is hidden already. An open without
-        // animation runs this inside `AppearanceDispatcher.withoutWillAppear`: what starts to appear from here would
-        // send no WillAppear.
+        // ends. The owner reads it before the next frame, when a menu that closed is hidden already.
         override fun shownChanged() {
             navigator?.shownScreensChanged(this@SideMenuController)
             navigator?.systemUi?.invalidate()

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/sidemenu/SideMenuMotion.kt

@@ -16,8 +16,8 @@ import dev.apexnative.navigation.viewcontrollers.viewcontroller.ViewController
  *   the drawer calls `onDrawerClosed` only for a drawer that had opened.
  * - The menu screen's events: WillAppear at the side's first movement, DidAppear when it opened, DidDisappear when it
  *   rests closed; only while the side menu has appeared ([Host.appeared]) — otherwise they come with the side menu's
- *   own appearance (its visible children). An open without animation sends DidAppear without WillAppear
- *  (`AppearanceDispatcher.withoutWillAppear`).
+ *   own appearance (its visible children). An open without animation sends both too, WillAppear first, as on iOS:
+ *   the drawer jumps to its open offset before it calls the open.
  * - At each rest: one state update after the menu's events, the back callback, and the layers that follow the shown
  *  screen.
  * - A drawer that doesn't call back (not laid out since it joined the window, or not in one: `DrawerLayout` only
@@ -246,11 +246,8 @@ internal class SideMenuMotion(
     private fun move(side: Side, open: Boolean, animate: Boolean) {
         val drawer = drawer()
         val silent = !drawer.callsBack
-        val run = {
-            if (open) drawer.open(side, animate) else drawer.close(side, animate)
-            if (silent) record(side, open)
-        }
-        if (open && !animate && host.appeared) AppearanceDispatcher.withoutWillAppear(run) else run()
+        if (open) drawer.open(side, animate) else drawer.close(side, animate)
+        if (silent) record(side, open)
     }
 
     private fun record(side: Side, open: Boolean) {

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/sidemenu/SideMenuPresenter.kt

@@ -18,15 +18,14 @@ import dev.apexnative.navigation.views.sidemenu.SideMenuView
  * `testID`s. Each moment applies its part, from the side menu's resolved options
  * (`SideMenuController.resolveShownOptions`: the current part's chain, the center's `sideMenu` over an open menu's) —
  * at creation everything with the heights, at every appearance of a screen inside everything but the heights, at a
- * merge the fields it names, at a repaint the background and the `testID`s. The locks of `enabled` and the command
+ * merge the fields it names (a width or a height at once, an open menu too), at a repaint the background and the
+ * `testID`s. The locks of `enabled` and the command
  * `visible` are the node's ([SideMenuMotion]). Main thread only.
  */
 internal class SideMenuPresenter(activity: Activity) : Presenter(activity, Options()) {
-    /** The side menu's [view] is made, with [options], resolved: the heights, read only now. */
+    /** The side menu's [view] is made, with [options], resolved: the heights too, which only a merge changes after. */
     fun applyOnCreation(view: SideMenuView, options: Options) {
-        for (side in Side.entries) {
-            view.setPartHeight(side, SideMenuRules.height(SideMenuRules.sideOf(options.sideMenu, side), ::toPixels))
-        }
+        applyHeights(view, options.sideMenu)
         applyWidths(view, options.sideMenu)
         applyBackground(view, options)
         applyTestIds(view, options.sideMenu)
@@ -46,14 +45,18 @@ internal class SideMenuPresenter(activity: Activity) : Presenter(activity, Optio
     /**
      * A merge reached the side menu, its own or through a screen inside (`mergeOptions` step 3): the fields [options]
      * name, with the values of the side menu's resolution now, so a screen off what shows changes nothing until it
-     * appears. A width waits for the next appearance, a height for nothing.
+     * appears. A width or a height resizes its menu at once, open or closed, as on iOS.
      */
     override fun mergeOptions(viewController: ViewController<*>, options: Options) {
         val layout = viewController.peekView() as? SideMenuView ?: return
         val touchesBackground = SideMenuRules.touchesBackground(options)
         val touchesTestIds = SideMenuRules.touchesTestIds(options.sideMenu)
-        if (!touchesBackground && !touchesTestIds) return
+        val touchesWidths = SideMenuRules.touchesWidths(options.sideMenu)
+        val touchesHeights = SideMenuRules.touchesHeights(options.sideMenu)
+        if (!touchesBackground && !touchesTestIds && !touchesWidths && !touchesHeights) return
         val shown = viewController.resolveShownOptions(DefaultOptions.current)
+        if (touchesWidths) applyWidths(layout, shown.sideMenu)
+        if (touchesHeights) applyHeights(layout, shown.sideMenu)
         if (touchesBackground) applyBackground(layout, shown)
         if (touchesTestIds) applyTestIds(layout, shown.sideMenu)
     }
@@ -71,6 +74,12 @@ internal class SideMenuPresenter(activity: Activity) : Presenter(activity, Optio
         }
     }
 
+    private fun applyHeights(view: SideMenuView, options: SideMenuOptions) {
+        for (side in Side.entries) {
+            view.setPartHeight(side, SideMenuRules.height(SideMenuRules.sideOf(options, side), ::toPixels))
+        }
+    }
+
     // `layout.backgroundColor` on the drawer, its whole height, under the status bar; unset leaves the view as it is,
     // `'NoColor'` clears it.
     private fun applyBackground(view: View, options: Options) {

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/sidemenu/SideMenuRules.kt

@@ -54,6 +54,13 @@ internal object SideMenuRules {
     fun touchesTestIds(merge: SideMenuOptions): Boolean =
         merge.testID.hasValue() || merge.left.testID.hasValue() || merge.right.testID.hasValue()
 
+    /** A merge names `width` of a side: the menus take their widths again. */
+    fun touchesWidths(merge: SideMenuOptions): Boolean = merge.left.width.hasValue() || merge.right.width.hasValue()
+
+    /** A merge names `height` of a side: the menus take their heights again. */
+    fun touchesHeights(merge: SideMenuOptions): Boolean =
+        merge.left.height.hasValue() || merge.right.height.hasValue()
+
     /** A merge names the background of the side menu (`layout.backgroundColor`). */
     fun touchesBackground(merge: Options): Boolean = merge.layout.backgroundColor.hasValue()
 
@@ -64,7 +71,7 @@ internal object SideMenuRules {
     fun wantedWidth(options: SideMenuSideOptions, toPixels: (Double) -> Int): Int? =
         options.width.get(null)?.let { max(0, toPixels(it)) }
 
-    /** The height of a side, in pixels: `height` (dp) by [toPixels], read at creation only; none: the whole height. */
+    /** The height of a side, in pixels: `height` (dp) by [toPixels]; none: the whole height. */
     fun height(options: SideMenuSideOptions, toPixels: (Double) -> Int): Int? =
         options.height.get(null)?.let { max(0, toPixels(it)) }
 

package/android/src/main/java/dev/apexnative/navigation/viewcontrollers/splitview/SplitViewController.kt

@@ -31,6 +31,7 @@ import dev.apexnative.navigation.viewcontrollers.parent.ShownChildren
 import dev.apexnative.navigation.viewcontrollers.stack.StackController
 import dev.apexnative.navigation.viewcontrollers.viewcontroller.Presenter
 import dev.apexnative.navigation.viewcontrollers.viewcontroller.ViewController
+import kotlin.math.roundToInt
 
 /**
  * A split view: the primary pane beside the secondary one when the width takes both (a tablet, a phone in landscape).
@@ -489,7 +490,7 @@ class SplitViewController(
         root.mergeOptions(options)
     }
 
-    private fun dp(value: Double) = UiUtils.dpToPx(activity, value.toFloat()).toInt()
+    private fun dp(value: Double) = UiUtils.dpToPx(activity, value.toFloat()).roundToInt()
 
     companion object {
         private const val PRIMARY = "primary"

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

@@ -60,6 +60,7 @@ 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.ButtonBar
 import dev.apexnative.navigation.views.stack.topbar.titlebar.IconBackgroundDrawable
+import kotlin.math.roundToInt
 
 /**
  * What the bar of one stack shows: the options of the screen on top of the stack, resolved (a pair's options screen),
@@ -881,7 +882,7 @@ internal class TopBarPresenter(private val activity: Activity, private val host:
         else -> TitleBar.Alignment.Start
     }
 
-    private fun dp(value: Double): Int = UiUtils.dpToPx(activity, value.toFloat()).toInt()
+    private fun dp(value: Double): Int = UiUtils.dpToPx(activity, value.toFloat()).roundToInt()
 
     // What makes a button's look, as a text: the parts that differ make it apply again.
     private fun buttonKey(context: Context, button: ButtonOptions): String = listOf(

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