@apexnative/navigation 0.0.0-stage → 1.0.0-alpha.1

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

@@ -0,0 +1,53 @@
+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
+import dev.apexnative.navigation.viewcontrollers.parent.ParentController
+import dev.apexnative.navigation.viewcontrollers.viewcontroller.ViewController
+import kotlinx.coroutines.android.awaitFrame
+
+/**
+ * Waits, a frame at a time and half a second at most, while [waiting] holds, until the screen a transition brings in
+ * is ready for it, as on iOS: its content is there, and so is every view the transition moves into it (the targets of
+ * the shared elements, and the element transitions found in neither screen yet). That the screen appeared is not
+ * enough: a screen of the new API mounts its safe area view first and its content after, and in one tree it appears
+ * with that first view. Then nothing was found to move and only the fade played.
+ */
+suspend fun awaitTransitionTargets(
+    animation: LayoutAnimation,
+    from: ViewController<*>,
+    to: ViewController<*>,
+    waiting: () -> Boolean
+) {
+    val deadline = SystemClock.uptimeMillis() + DRAW_WAIT_LIMIT
+    var waited = false
+    while (waiting() && !to.isDestroyed && SystemClock.uptimeMillis() < deadline && !areReady(animation, from, to)) {
+        awaitFrame()
+        waited = true
+    }
+    // Found on a frame they mounted on, the views are laid out but not drawn yet: a background gets its bounds as it
+    // draws, and a shared view that moved into an empty one shrank to a point. One frame more, and they are drawn.
+    if (waited && waiting() && !to.isDestroyed) awaitFrame()
+}
+
+private fun areReady(animation: LayoutAnimation, from: ViewController<*>, to: ViewController<*>): Boolean {
+    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) }
+}
+
+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
+    while (controller is ParentController<*>) controller = controller.currentChild ?: break
+    return controller
+}

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

@@ -0,0 +1,46 @@
+package dev.apexnative.navigation.views.element.animators
+
+import android.animation.TimeInterpolator
+import android.animation.ValueAnimator
+import android.graphics.Picture
+import android.util.Log
+import android.view.View
+import android.view.animation.LinearInterpolator
+import dev.apexnative.navigation.utils.NavigationLog
+
+/**
+ * The view's own drawing with its children, as drawing commands: sharp at any scale. Its opacity and place belong to
+ * the parent. Recording can fail (a hardware bitmap in an image on an older Android): the element then moves without
+ * pictures.
+ */
+internal fun recordPicture(view: View): Picture? = try {
+    Picture().also {
+        val canvas = it.beginRecording(view.width, view.height)
+        try {
+            view.draw(canvas)
+        } finally {
+            it.endRecording()
+        }
+    }
+} catch (e: RuntimeException) {
+    Log.w(NavigationLog.TAG, "Element transition: no picture of the element, it moves without one", e)
+    null
+}
+
+// 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.
+internal class MoveAnimator : ValueAnimator() {
+    var curve: TimeInterpolator = LinearInterpolator()
+        private set
+
+    init {
+        setFloatValues(0f, 1f)
+        super.setInterpolator(LinearInterpolator())
+    }
+
+    override fun setInterpolator(value: TimeInterpolator?) {
+        curve = value ?: LinearInterpolator()
+    }
+
+    override fun getInterpolator(): TimeInterpolator = curve
+}

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

@@ -0,0 +1,53 @@
+package dev.apexnative.navigation.views.element.animators
+
+import android.graphics.RectF
+import android.view.View
+import android.view.ViewGroup
+import dev.apexnative.navigation.utils.ViewUtils
+import dev.apexnative.navigation.utils.computeInheritedScale
+import dev.apexnative.navigation.views.element.TransitionLayer
+
+/**
+ * Where a shared element flies in its transition's layer: from where `from` is on the screen, at the scale of its
+ * parents, to `to`'s place in the layer (its margins and size). Pixels of the layer.
+ */
+internal class FlightGeometry(
+    /** `from`'s place and size in the layer. */
+    val from: RectF,
+    /** `to`'s place and size in the layer. */
+    val to: RectF,
+    /** The scale `from`'s parents give it along x: its corners shrink with it. */
+    val fromScale: Float,
+) {
+    /** The width and height `to` is laid out at meanwhile: the larger of the two sizes. */
+    val largest: Pair<Int, Int>
+        get() = maxOf(from.width(), to.width()).toInt() to maxOf(from.height(), to.height()).toInt()
+
+    companion object {
+        /** The flight of [from] to [to], which is in [layer] already; none when [to] has no place there. */
+        fun of(from: View, to: View, layer: TransitionLayer): FlightGeometry? {
+            val place = to.layoutParams as? ViewGroup.MarginLayoutParams ?: return null
+            val origin = layer.originOnScreen
+            val onScreen = ViewUtils.getLocationOnScreen(from)
+            val (scaleX, scaleY) = computeInheritedScale(from)
+            val left = (onScreen.x - origin.x).toFloat()
+            val top = (onScreen.y - origin.y).toFloat()
+            val fromRect = RectF(left, top, left + from.width * scaleX, top + from.height * scaleY)
+            val toLeft = place.leftMargin.toFloat()
+            val toTop = place.topMargin.toFloat()
+            val toRect = RectF(toLeft, toTop, toLeft + to.width, toTop + to.height)
+            return FlightGeometry(fromRect, toRect, scaleX)
+        }
+    }
+}
+
+/** An outline of the size and corners a flying view shows meanwhile: its own bounds are larger. */
+internal class FlightOutline : android.view.ViewOutlineProvider() {
+    var width = 0
+    var height = 0
+    var radius = 0f
+
+    override fun getOutline(view: View, outline: android.graphics.Outline) {
+        outline.setRoundRect(0, 0, width, height, radius)
+    }
+}

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

@@ -0,0 +1,138 @@
+package dev.apexnative.navigation.views.element.animators
+
+import android.animation.Animator
+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
+import dev.apexnative.navigation.views.element.TransitionLayer
+import kotlin.math.max
+import kotlin.math.min
+import kotlin.math.roundToInt
+
+/**
+ * A shared image of another kind (an `ImageView` that isn't React Native's): its place by a translation; its image
+ * matrix from `from`'s fit (`centerCrop`, `fitXY`, `fitCenter`, `centerInside`) to its own, the part seen from `from`'s
+ * size to its own, the corner radius of the parent that clips it (`borderRadius` with `overflow: hidden`) by its
+ * outline. Another fit: the pair moves without the change of its matrix, and a line goes to the log. Everything goes
+ * back as it was at the end. Main thread only.
+ */
+internal class ImageMatrixAnimator(
+    private val from: ImageView,
+    private val to: ImageView,
+    private val layer: TransitionLayer,
+    /** The parents the views are clipped by in their screens: [to]'s is the one it had before the layer. */
+    private val fromParent: View?,
+    private val toParent: View?,
+    private val id: String,
+    private val log: (String) -> Unit,
+) {
+    /** The animator; none when [to] has no place in the layer. */
+    fun create(): Animator? {
+        val geometry = FlightGeometry.of(from, to, layer) ?: return null
+        val toRect = geometry.to
+        val fromFit = from.scaleType
+        val toFit = to.scaleType
+        // The image whose matrix changes; none when a fit isn't one of the four or there is no image to fit.
+        val image = to.drawable?.takeIf {
+            fromFit in FITS && toFit in FITS && it.intrinsicWidth > 0 && it.intrinsicHeight > 0
+        }
+        val fits = image != null
+        if (!fits) log("The image '$id' fits by ${fromFit.name} and ${toFit.name}: it moves without a change of fit")
+        val fromRadius = clipRadius(fromParent) * geometry.fromScale
+        val toRadius = clipRadius(toParent)
+        val outline = FlightOutline()
+        var savedProvider: ViewOutlineProvider? = null
+        var savedClip = false
+        val savedMatrix = Matrix(to.imageMatrix)
+        val start = FloatArray(MATRIX)
+        val end = FloatArray(MATRIX)
+        val values = FloatArray(MATRIX)
+        val matrix = Matrix()
+        return MoveAnimator().apply {
+            fun frame(time: Float) {
+                val f = curve.getInterpolation(time)
+                val left = ValueInterpolation.number(geometry.from.left, toRect.left, f, time)
+                val top = ValueInterpolation.number(geometry.from.top, toRect.top, f, time)
+                val width = ValueInterpolation.number(geometry.from.width(), toRect.width(), f, time).roundToInt()
+                val height = ValueInterpolation.number(geometry.from.height(), toRect.height(), f, time).roundToInt()
+                layer.place(to, toRect.left.toInt(), toRect.top.toInt(), width, height)
+                to.translationX = left - toRect.left
+                to.translationY = top - toRect.top
+                outline.width = width
+                outline.height = height
+                outline.radius = ValueInterpolation.number(fromRadius, toRadius, f, time)
+                to.invalidateOutline()
+                if (image != null) {
+                    val imageWidth = image.intrinsicWidth
+                    val imageHeight = image.intrinsicHeight
+                    fitMatrix(fromFit, imageWidth, imageHeight, width, height).getValues(start)
+                    fitMatrix(toFit, imageWidth, imageHeight, width, height).getValues(end)
+                    for (i in 0 until MATRIX) values[i] = ValueInterpolation.number(start[i], end[i], f, time)
+                    matrix.setValues(values)
+                    to.imageMatrix = matrix
+                }
+            }
+            doOnStart {
+                savedProvider = to.outlineProvider
+                savedClip = to.clipToOutline
+                to.outlineProvider = outline
+                to.clipToOutline = true
+                if (fits) to.scaleType = ImageView.ScaleType.MATRIX
+                frame(0f)
+            }
+            addUpdateListener { frame(it.animatedFraction) }
+            doOnEnd {
+                if (fits) {
+                    to.scaleType = toFit
+                    to.imageMatrix = savedMatrix
+                }
+                to.outlineProvider = savedProvider
+                to.clipToOutline = savedClip
+                to.translationX = 0f
+                to.translationY = 0f
+                layer.place(to, toRect.left.toInt(), toRect.top.toInt(), toRect.width().toInt(),
+                    toRect.height().toInt())
+            }
+        }
+    }
+
+    // The radius of a React parent that clips what is in it; 0 for another.
+    private fun clipRadius(parent: View?): Float =
+        (parent as? ReactViewGroup)?.takeIf { it.overflow == HIDDEN }?.borderRadius ?: 0f
+
+    private companion object {
+        const val MATRIX = 9
+        const val HIDDEN = "hidden"
+        val FITS = setOf(
+            ImageView.ScaleType.CENTER_CROP,
+            ImageView.ScaleType.FIT_XY,
+            ImageView.ScaleType.FIT_CENTER,
+            ImageView.ScaleType.CENTER_INSIDE,
+        )
+
+        // The matrix of a fit of an image of [imageWidth] × [imageHeight] into [width] × [height].
+        fun fitMatrix(fit: ImageView.ScaleType, imageWidth: Int, imageHeight: Int, width: Int, height: Int): Matrix {
+            val sx = width.toFloat() / imageWidth
+            val sy = height.toFloat() / imageHeight
+            val matrix = Matrix()
+            if (fit == ImageView.ScaleType.FIT_XY) {
+                matrix.setScale(sx, sy)
+                return matrix
+            }
+            val scale = when (fit) {
+                ImageView.ScaleType.CENTER_CROP -> max(sx, sy)
+                ImageView.ScaleType.CENTER_INSIDE -> min(1f, min(sx, sy))
+                else -> min(sx, sy)
+            }
+            matrix.setScale(scale, scale)
+            matrix.postTranslate((width - imageWidth * scale) / 2f, (height - imageHeight * scale) / 2f)
+            return matrix
+        }
+    }
+}

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

@@ -0,0 +1,88 @@
+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
+import dev.apexnative.navigation.views.animations.ValueInterpolation
+import dev.apexnative.navigation.views.element.TransitionLayer
+import kotlin.math.roundToInt
+
+/**
+ * A shared React view without children moves itself: from `from`'s place on the screen to its own by a translation; its
+ * size and corner radius by an outline that grows from `from`'s (at the scale of its parents) to its own while it is
+ * laid out at the larger of the two sizes; its own radius taken off meanwhile and put back as it was; its background
+ * color from `from`'s to its own in Lab, ending exactly on its own (`BackgroundStyleApplicator`); its rotation from
+ * `from`'s to its own. Main thread only.
+ */
+internal class PlainViewAnimator(
+    private val from: View,
+    private val to: View,
+    private val layer: TransitionLayer,
+) {
+    /** The animator; none when [to] has no place in the layer. */
+    fun create(): Animator? {
+        val geometry = FlightGeometry.of(from, to, layer) ?: return null
+        val fromRadius = from.borderRadius * geometry.fromScale
+        val toRadius = to.borderRadius
+        val fromColor = BackgroundStyleApplicator.getBackgroundColor(from)
+        val toColor = BackgroundStyleApplicator.getBackgroundColor(to)
+        val fromRotation = from.rotation
+        val toRotation = to.rotation
+        val ownRadius = BackgroundStyleApplicator.getBorderRadius(to, RADIUS)
+        val outline = FlightOutline()
+        var savedProvider: ViewOutlineProvider? = null
+        var savedClip = false
+        val (width, height) = geometry.largest
+        val toRect = geometry.to
+        return MoveAnimator().apply {
+            fun frame(time: Float) {
+                val f = curve.getInterpolation(time)
+                val left = ValueInterpolation.number(geometry.from.left, toRect.left, f, time)
+                val top = ValueInterpolation.number(geometry.from.top, toRect.top, f, time)
+                to.translationX = left - toRect.left
+                to.translationY = top - toRect.top
+                val from = geometry.from
+                outline.width = ValueInterpolation.number(from.width(), toRect.width(), f, time).roundToInt()
+                outline.height = ValueInterpolation.number(from.height(), toRect.height(), f, time).roundToInt()
+                outline.radius = ValueInterpolation.number(fromRadius, toRadius, f, time)
+                to.invalidateOutline()
+                if (fromColor != toColor) {
+                    val color = ValueInterpolation.color(fromColor, toColor, f, time)
+                    BackgroundStyleApplicator.setBackgroundColor(to, color)
+                }
+                to.rotation = ValueInterpolation.number(fromRotation, toRotation, f, time)
+            }
+            doOnStart {
+                savedProvider = to.outlineProvider
+                savedClip = to.clipToOutline
+                if (ownRadius != null) BackgroundStyleApplicator.setBorderRadius(to, RADIUS, null)
+                to.outlineProvider = outline
+                to.clipToOutline = true
+                layer.place(to, toRect.left.toInt(), toRect.top.toInt(), width, height)
+                frame(0f)
+            }
+            addUpdateListener { frame(it.animatedFraction) }
+            // A cancelled flight ends too: the view goes back whole.
+            doOnEnd {
+                to.translationX = 0f
+                to.translationY = 0f
+                to.rotation = toRotation
+                if (fromColor != toColor) BackgroundStyleApplicator.setBackgroundColor(to, toColor)
+                if (ownRadius != null) BackgroundStyleApplicator.setBorderRadius(to, RADIUS, ownRadius)
+                to.outlineProvider = savedProvider
+                to.clipToOutline = savedClip
+                layer.place(to, toRect.left.toInt(), toRect.top.toInt(), toRect.width().toInt(),
+                    toRect.height().toInt())
+            }
+        }
+    }
+
+    private companion object {
+        val RADIUS = BorderRadiusProp.BORDER_RADIUS
+    }
+}

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

@@ -0,0 +1,33 @@
+package dev.apexnative.navigation.views.element.animators
+
+import android.animation.Animator
+import android.view.View
+import dev.apexnative.navigation.options.SharedElementTransitionOptions
+
+/**
+ * One animator of a shared element: how [from], on the screen that goes, becomes [to], on the screen that comes, when
+ * both are of [type]. The core picks one by the views' classes (`SharedAnimatorFactory`) and runs it in the
+ * transition's layer.
+ */
+abstract class PropertyAnimatorCreator<T : View>(
+    protected val from: View,
+    protected val to: View,
+    private val type: Class<T>,
+) {
+    /** Whether this animator takes part: both views are of its type and differ in what it animates. */
+    fun shouldAnimate(): Boolean {
+        if (!type.isInstance(from) || !type.isInstance(to)) return false
+        val fromChild = type.cast(from) ?: return false
+        val toChild = type.cast(to) ?: return false
+        return shouldAnimateProperty(fromChild, toChild)
+    }
+
+    /** Whether [fromChild] and [toChild] differ in what this animator animates. */
+    abstract fun shouldAnimateProperty(fromChild: T, toChild: T): Boolean
+
+    /**
+     * The animator of the pair for [options]; the core gives it the pair's duration, delay and curve (each animator
+     * its own, never through a set around it).
+     */
+    abstract fun create(options: SharedElementTransitionOptions): Animator
+}

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

@@ -0,0 +1,66 @@
+package dev.apexnative.navigation.views.element.animators
+
+import android.animation.Animator
+import androidx.core.animation.doOnEnd
+import androidx.core.animation.doOnStart
+import com.facebook.drawee.drawable.ScalingUtils
+import com.facebook.react.views.image.ReactImageView
+import dev.apexnative.navigation.views.animations.ValueInterpolation
+import dev.apexnative.navigation.views.element.TransitionLayer
+import kotlin.math.roundToInt
+
+/**
+ * A shared React image: its place by a translation from `from`'s on the screen; its content by Fresco's scale type
+ * going from `from`'s fit to its own (`ScalingUtils.InterpolatingScaleType`); the part seen from `from`'s size to its
+ * own (it is laid out at the size of each frame); its rotation from `from`'s to its own; Fresco's own fade off
+ * meanwhile. Everything goes back as it was at the end. Main thread only.
+ */
+internal class ReactImageAnimator(
+    private val from: ReactImageView,
+    private val to: ReactImageView,
+    private val layer: TransitionLayer,
+) {
+    /** The animator; none when [to] has no place in the layer or no hierarchy. */
+    fun create(): Animator? {
+        if (!from.hasHierarchy() || !to.hasHierarchy()) return null
+        val geometry = FlightGeometry.of(from, to, layer) ?: return null
+        val toRect = geometry.to
+        val toType = to.hierarchy.actualImageScaleType ?: ScalingUtils.ScaleType.CENTER_CROP
+        val fromType = from.hierarchy.actualImageScaleType ?: ScalingUtils.ScaleType.CENTER_CROP
+        val scale = ScalingUtils.InterpolatingScaleType(fromType, toType)
+        val fromRotation = from.rotation
+        val toRotation = to.rotation
+        var savedFade = 0
+        return MoveAnimator().apply {
+            fun frame(time: Float) {
+                val f = curve.getInterpolation(time)
+                val left = ValueInterpolation.number(geometry.from.left, toRect.left, f, time)
+                val top = ValueInterpolation.number(geometry.from.top, toRect.top, f, time)
+                val width = ValueInterpolation.number(geometry.from.width(), toRect.width(), f, time).roundToInt()
+                val height = ValueInterpolation.number(geometry.from.height(), toRect.height(), f, time).roundToInt()
+                layer.place(to, toRect.left.toInt(), toRect.top.toInt(), width, height)
+                to.translationX = left - toRect.left
+                to.translationY = top - toRect.top
+                scale.setValue(if (time >= 1f) 1f else f)
+                to.rotation = ValueInterpolation.number(fromRotation, toRotation, f, time)
+                to.invalidate()
+            }
+            doOnStart {
+                savedFade = to.hierarchy.fadeDuration
+                to.hierarchy.fadeDuration = 0
+                to.hierarchy.setActualImageScaleType(scale)
+                frame(0f)
+            }
+            addUpdateListener { frame(it.animatedFraction) }
+            doOnEnd {
+                to.hierarchy.setActualImageScaleType(toType)
+                to.hierarchy.fadeDuration = savedFade
+                to.translationX = 0f
+                to.translationY = 0f
+                to.rotation = toRotation
+                layer.place(to, toRect.left.toInt(), toRect.top.toInt(), toRect.width().toInt(),
+                    toRect.height().toInt())
+            }
+        }
+    }
+}

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

@@ -0,0 +1,70 @@
+package dev.apexnative.navigation.views.element.animators
+
+import android.animation.Animator
+import android.view.View
+import android.widget.ImageView
+import com.facebook.react.views.image.ReactImageView
+import com.facebook.react.views.text.ReactTextView
+import com.facebook.react.views.view.ReactViewGroup
+import dev.apexnative.navigation.options.SharedElementTransitionOptions
+import dev.apexnative.navigation.views.animations.AnimationRules
+import dev.apexnative.navigation.views.animations.Curves
+import dev.apexnative.navigation.views.element.TransitionLayer
+
+/**
+ * The animator of a shared element by the kinds of its two views, chosen by explicit classes, never by reflection:
+ * texts (`TextChangeAnimator`, the module), React views with children (`ViewChangeAnimator`, the module; a failed
+ * picture flies as a view without children), React images ([ReactImageAnimator]), other images ([ImageMatrixAnimator]),
+ * any other view ([PlainViewAnimator]). The animator gets the pair's duration (else the fallback, the screen's fade),
+ * its delay and its curve here, each of its own (a spring in real time); an `AnimatorSet` around it never sets them.
+ * Main thread only.
+ */
+internal object SharedAnimatorFactory {
+    /**
+     * A pair's animator, and how it shows the pair: by pictures in the layer's overlay while `to` is hidden (the
+     * modules), or by moving `to` itself, which shows from the start of the flight.
+     */
+    class Flight(val animator: Animator, val drawsPictures: Boolean)
+
+    /**
+     * The flight of the pair [from] → [to]; [to] is in [layer] at its margins, at its real alpha (the pictures are
+     * taken now). [toParent] is the parent [to] had in its screen. None: the pair doesn't fly (a text that didn't
+     * change, a picture that can't be taken, no place).
+     */
+    fun create(
+        from: View,
+        to: View,
+        toParent: View?,
+        layer: TransitionLayer,
+        options: SharedElementTransitionOptions,
+        fallbackDuration: Long,
+        log: (String) -> Unit,
+    ): Flight? {
+        val flight = when {
+            from is ReactTextView && to is ReactTextView -> pictures(
+                TextChangeAnimator(from, to).takeIf { it.shouldAnimate() }?.create(options),
+            )
+            hasChildren(from) || hasChildren(to) -> pictures(
+                ViewChangeAnimator(from, to).takeIf { it.shouldAnimate() }?.create(options),
+            ) ?: moves(PlainViewAnimator(from, to, layer).create())
+            from is ReactImageView && to is ReactImageView -> moves(ReactImageAnimator(from, to, layer).create())
+            from is ImageView && to is ImageView -> moves(
+                ImageMatrixAnimator(from, to, layer, from.parent as? View, toParent, options.toId.get(""), log)
+                    .create(),
+            )
+            else -> moves(PlainViewAnimator(from, to, layer).create())
+        } ?: return null
+        val animator = flight.animator
+        val duration = AnimationRules.durationOf(options.duration.get(null), fallbackDuration)
+        animator.duration = duration
+        animator.startDelay = AnimationRules.delayOf(options.startDelay.get(null))
+        animator.interpolator = Curves.of(options.interpolation, duration)
+        return flight
+    }
+
+    private fun pictures(animator: Animator?): Flight? = animator?.let { Flight(it, drawsPictures = true) }
+
+    private fun moves(animator: Animator?): Flight? = animator?.let { Flight(it, drawsPictures = false) }
+
+    private fun hasChildren(view: View): Boolean = view is ReactViewGroup && view.childCount > 0
+}