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

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

@@ -1,136 +0,0 @@
-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 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
-                }
-            }
-            onStart {
-                savedProvider = to.outlineProvider
-                savedClip = to.clipToOutline
-                to.outlineProvider = outline
-                to.clipToOutline = true
-                if (fits) to.scaleType = ImageView.ScaleType.MATRIX
-                frame(0f)
-            }
-            onFrame { frame(it) }
-            onEnd {
-                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

@@ -1,86 +0,0 @@
-package dev.apexnative.navigation.views.element.animators
-
-import android.animation.Animator
-import android.view.View
-import android.view.ViewOutlineProvider
-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)
-            }
-            onStart {
-                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)
-            }
-            onFrame { frame(it) }
-            // A cancelled flight ends too: the view goes back whole.
-            onEnd {
-                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

@@ -1,33 +0,0 @@
-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

@@ -1,64 +0,0 @@
-package dev.apexnative.navigation.views.element.animators
-
-import android.animation.Animator
-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()
-            }
-            onStart {
-                savedFade = to.hierarchy.fadeDuration
-                to.hierarchy.fadeDuration = 0
-                to.hierarchy.setActualImageScaleType(scale)
-                frame(0f)
-            }
-            onFrame { frame(it) }
-            onEnd {
-                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/TextChangeAnimator.kt

@@ -1,177 +0,0 @@
-package dev.apexnative.navigation.views.element.animators
-
-import android.animation.Animator
-import android.graphics.Canvas
-import android.graphics.ColorFilter
-import android.graphics.Picture
-import android.graphics.PixelFormat
-import android.graphics.PointF
-import android.graphics.drawable.Drawable
-import android.text.Layout
-import android.view.View
-import android.view.ViewGroup
-import android.widget.TextView
-import com.facebook.react.views.text.ReactTextView
-import dev.apexnative.navigation.options.SharedElementTransitionOptions
-import dev.apexnative.navigation.utils.TextViewUtils
-import dev.apexnative.navigation.utils.ViewUtils
-import kotlin.math.roundToInt
-
-// The text moves as two pictures of itself, of the text that goes away and of the text that comes, the same text or
-// another. Both keep their proportions, scaled by the font size from a point of the first line, and one turns into the
-// other in a quarter of the move: at its start when the text grows, at its end when it shrinks, so the larger picture
-// shows most of the way (as on iOS). The pictures are drawing commands, not pixels: they stay sharp at any scale and
-// keep the colors, emoji and background of the text. They are drawn in the overlay of the transition layer while `to`
-// is hidden.
-class TextChangeAnimator(from: View, to: View) : PropertyAnimatorCreator<ReactTextView>(from, to, ReactTextView::class.java) {
-    private val pictures by lazy { pictures() }
-
-    override fun shouldAnimateProperty(fromChild: ReactTextView, toChild: ReactTextView): Boolean {
-        val fromPlace = ViewUtils.getLocationOnScreen(from)
-        val toPlace = ViewUtils.getLocationOnScreen(to)
-        return (fromChild.text.toString() != toChild.text.toString() ||
-                TextViewUtils.getTextSize(fromChild) != TextViewUtils.getTextSize(toChild) || fromPlace != toPlace
-                ) && pictures != null
-    }
-
-    override fun create(options: SharedElementTransitionOptions): Animator {
-        val (start, end) = checkNotNull(pictures)
-        val layer = to.parent as ViewGroup
-        val drawable = TextMorphDrawable(start, end)
-        // Everything changes between the start and the end of the animation: a cancelled one ends too.
-        return MoveAnimator().apply {
-            onStart {
-                drawable.setBounds(0, 0, layer.width, layer.height)
-                layer.overlay.add(drawable)
-                to.alpha = 0f
-            }
-            onFrame {
-                drawable.update(it, curve.getInterpolation(it))
-                layer.invalidate()
-            }
-            onEnd {
-                layer.overlay.remove(drawable)
-                layer.invalidate()
-                to.alpha = end.alpha
-            }
-        }
-    }
-
-    // `to` is in the transition layer already, at its margins (the coordinates of the other animators); `from` is where
-    // it is on the screen. Texts that line up the same way go from that point of their first lines (the same text lies
-    // over itself); others from the start of the line, as on iOS: a centered text no longer sticks out of a text at the
-    // start.
-    private fun pictures(): Pair<TextPicture, TextPicture>? {
-        if (to.parent !is ViewGroup) return null
-        val toPlace = to.layoutParams as? ViewGroup.MarginLayoutParams ?: return null
-        val fromLayout = (from as TextView).layout ?: return null
-        val toLayout = (to as TextView).layout ?: return null
-        val edge = lineEdge(fromLayout).takeIf { it == lineEdge(toLayout) } ?: LineEdge.START
-        val fromPlace = ViewUtils.getLocationOnScreen(from)
-            .apply { ViewUtils.getLocationOnScreen(to.parent as View).let { offset(-it.x, -it.y) } }
-        val start = TextPicture.of(from, fromPlace.x, fromPlace.y, edge) ?: return null
-        val end = TextPicture.of(to, toPlace.leftMargin, toPlace.topMargin, edge) ?: return null
-        return start to end
-    }
-}
-
-// A text's picture, the point of its first line it is scaled from (in the view) and where that point is in the
-// transition layer, its font size and opacity.
-private class TextPicture(
-    val picture: Picture,
-    val anchor: PointF,
-    val position: PointF,
-    val fontSize: Float,
-    val alpha: Float
-) {
-    companion object {
-        fun of(view: TextView, left: Int, top: Int, edge: LineEdge): TextPicture? {
-            val layout = view.layout ?: return null
-            val fontSize = TextViewUtils.getTextSize(view).takeIf { it > 0 } ?: view.textSize
-            if (view.width <= 0 || view.height <= 0 || layout.lineCount == 0 || fontSize <= 0) return null
-            // Without a picture (recording failed) the text goes to its place at once, as a different text does.
-            val picture = recordPicture(view) ?: return null
-            val anchor = PointF(
-                view.totalPaddingLeft + edgeX(layout, edge),
-                view.totalPaddingTop + layout.getLineBaseline(0).toFloat()
-            )
-            return TextPicture(picture, anchor, PointF(left + anchor.x, top + anchor.y), fontSize, view.alpha)
-        }
-
-        // That point of the first line, in the direction of the text.
-        private fun edgeX(layout: Layout, edge: LineEdge): Float {
-            val left = layout.getLineLeft(0)
-            val right = layout.getLineRight(0)
-            val rightToLeft = layout.getParagraphDirection(0) == Layout.DIR_RIGHT_TO_LEFT
-            return when (edge) {
-                LineEdge.CENTER -> (left + right) / 2
-                LineEdge.START -> if (rightToLeft) right else left
-                LineEdge.END -> if (rightToLeft) left else right
-            }
-        }
-    }
-}
-
-// Where the lines of a text line up: their start, center or end, in the direction of the text.
-private enum class LineEdge { START, CENTER, END }
-
-// ALIGN_LEFT and ALIGN_RIGHT are hidden constants, for Gravity.LEFT and RIGHT.
-private fun lineEdge(layout: Layout): LineEdge {
-    val rightToLeft = layout.getParagraphDirection(0) == Layout.DIR_RIGHT_TO_LEFT
-    return when (layout.getParagraphAlignment(0).name) {
-        "ALIGN_CENTER" -> LineEdge.CENTER
-        "ALIGN_OPPOSITE" -> LineEdge.END
-        "ALIGN_LEFT" -> if (rightToLeft) LineEdge.END else LineEdge.START
-        "ALIGN_RIGHT" -> if (rightToLeft) LineEdge.START else LineEdge.END
-        else -> LineEdge.START
-    }
-}
-
-// Both pictures where the move has brought the text: the font size and the point of the first line go from the start
-// to the end along the transition's curve, the pictures change over by the clock.
-private class TextMorphDrawable(private val start: TextPicture, private val end: TextPicture) : Drawable() {
-    private val grows = end.fontSize >= start.fontSize
-    private var progress = 0f
-    private var changeOver = 0f
-
-    fun update(time: Float, progress: Float) {
-        this.progress = progress
-        val changeOverStart = if (grows) 0f else 1f - CHANGE_OVER
-        changeOver = ((time - changeOverStart) / CHANGE_OVER).coerceIn(0f, 1f)
-    }
-
-    override fun draw(canvas: Canvas) {
-        val x = start.position.x + (end.position.x - start.position.x) * progress
-        val y = start.position.y + (end.position.y - start.position.y) * progress
-        val fontSize = start.fontSize + (end.fontSize - start.fontSize) * progress
-        draw(canvas, start, x, y, fontSize, 1f - changeOver)
-        draw(canvas, end, x, y, fontSize, changeOver)
-    }
-
-    private fun draw(canvas: Canvas, text: TextPicture, x: Float, y: Float, fontSize: Float, shown: Float) {
-        val alpha = (shown * text.alpha * 255).roundToInt().coerceIn(0, 255)
-        if (alpha == 0) return
-        val scale = fontSize / text.fontSize
-        val count = canvas.save()
-        canvas.translate(x, y)
-        canvas.scale(scale, scale)
-        canvas.translate(-text.anchor.x, -text.anchor.y)
-        // The picture fades as a whole: its letters and background don't show through each other.
-        if (alpha < 255) {
-            canvas.saveLayerAlpha(0f, 0f, text.picture.width.toFloat(), text.picture.height.toFloat(), alpha)
-        }
-        canvas.drawPicture(text.picture)
-        canvas.restoreToCount(count)
-    }
-
-    override fun setAlpha(alpha: Int) = Unit
-
-    override fun setColorFilter(colorFilter: ColorFilter?) = Unit
-
-    @Deprecated("Deprecated in Java")
-    override fun getOpacity(): Int = PixelFormat.TRANSLUCENT
-
-    private companion object {
-        const val CHANGE_OVER = 0.25f
-    }
-}

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

@@ -1,137 +0,0 @@
-package dev.apexnative.navigation.views.element.animators
-
-import android.animation.Animator
-import android.graphics.Canvas
-import android.graphics.ColorFilter
-import android.graphics.Paint
-import android.graphics.Picture
-import android.graphics.PixelFormat
-import android.graphics.PorterDuff
-import android.graphics.PorterDuffXfermode
-import android.graphics.RectF
-import android.graphics.drawable.Drawable
-import android.view.View
-import android.view.ViewGroup
-import com.facebook.react.views.view.ReactViewGroup
-import dev.apexnative.navigation.options.SharedElementTransitionOptions
-import dev.apexnative.navigation.utils.ViewUtils
-import dev.apexnative.navigation.utils.borderRadius
-import dev.apexnative.navigation.utils.computeInheritedScale
-import kotlin.math.roundToInt
-
-// A view with children moves as two pictures of itself, as on iOS: of the view that goes away and of the one that
-// comes, each with its children. The copy goes from the place, size and corner radius of the one to those of the other,
-// both pictures fill it, and the picture of the destination shows over the other on the way. The pictures are drawing
-// commands: an avatar's letter grows sharp. They are drawn in the overlay of the transition layer while `to` is hidden,
-// and nothing else moves the pair. A view without children moves itself, its outline growing, as before.
-class ViewChangeAnimator(from: View, to: View) : PropertyAnimatorCreator<ReactViewGroup>(from, to, ReactViewGroup::class.java) {
-    private val pictures by lazy { pictures() }
-
-    override fun shouldAnimateProperty(fromChild: ReactViewGroup, toChild: ReactViewGroup): Boolean =
-            (fromChild.childCount > 0 || toChild.childCount > 0) && pictures != null
-
-    override fun create(options: SharedElementTransitionOptions): Animator {
-        val (start, end) = checkNotNull(pictures)
-        val layer = to.parent as ViewGroup
-        val drawable = ViewMorphDrawable(start, end)
-        // Everything changes between the start and the end of the animation: a cancelled one ends too.
-        return MoveAnimator().apply {
-            onStart {
-                drawable.setBounds(0, 0, layer.width, layer.height)
-                layer.overlay.add(drawable)
-                to.alpha = 0f
-            }
-            onFrame {
-                drawable.progress = curve.getInterpolation(it)
-                layer.invalidate()
-            }
-            onEnd {
-                layer.overlay.remove(drawable)
-                layer.invalidate()
-                to.alpha = end.alpha
-            }
-        }
-    }
-
-    // `to` is in the transition layer already, at its margins (the coordinates of the other animators); `from` is where
-    // it is on the screen, at the scale of its parents.
-    private fun pictures(): Pair<ViewPicture, ViewPicture>? {
-        if (to.parent !is ViewGroup) return null
-        val toPlace = to.layoutParams as? ViewGroup.MarginLayoutParams ?: return null
-        val fromPlace = ViewUtils.getLocationOnScreen(from)
-            .apply { ViewUtils.getLocationOnScreen(to.parent as View).let { offset(-it.x, -it.y) } }
-        val (scaleX, scaleY) = computeInheritedScale(from)
-        val fromRect = RectF(0f, 0f, from.width * scaleX, from.height * scaleY).apply {
-            offset(fromPlace.x.toFloat(), fromPlace.y.toFloat())
-        }
-        val toRect = RectF(0f, 0f, to.width.toFloat(), to.height.toFloat()).apply {
-            offset(toPlace.leftMargin.toFloat(), toPlace.topMargin.toFloat())
-        }
-        val start = ViewPicture.of(from as ReactViewGroup, fromRect, scaleX) ?: return null
-        val end = ViewPicture.of(to as ReactViewGroup, toRect, 1f) ?: return null
-        return start to end
-    }
-}
-
-// A view's picture, its place in the transition layer, its corner radius there and its opacity.
-private class ViewPicture(val picture: Picture, val rect: RectF, val radius: Float, val alpha: Float) {
-    companion object {
-        fun of(view: ReactViewGroup, rect: RectF, scale: Float): ViewPicture? {
-            if (view.width <= 0 || view.height <= 0) return null
-            val picture = recordPicture(view) ?: return null
-            return ViewPicture(picture, rect, view.borderRadius * scale, view.alpha)
-        }
-    }
-}
-
-// The copy where the move has brought it: its place, size and corner radius go from the start to the end along the
-// transition's curve, and so does the picture of the end over the picture of the start.
-private class ViewMorphDrawable(private val start: ViewPicture, private val end: ViewPicture) : Drawable() {
-    var progress = 0f
-    private val rect = RectF()
-    private val maskPaint = Paint(Paint.ANTI_ALIAS_FLAG)
-    // What is drawn over the mask keeps only the mask's pixels: the corners stay smooth (a clip path on the hardware
-    // canvas is not anti-aliased).
-    private val contentPaint = Paint().apply { xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_IN) }
-
-    override fun draw(canvas: Canvas) {
-        rect.set(
-            lerp(start.rect.left, end.rect.left),
-            lerp(start.rect.top, end.rect.top),
-            lerp(start.rect.right, end.rect.right),
-            lerp(start.rect.bottom, end.rect.bottom)
-        )
-        if (rect.isEmpty) return
-        val radius = lerp(start.radius, end.radius)
-        val count = canvas.saveLayer(rect, null)
-        canvas.drawRoundRect(rect, radius, radius, maskPaint)
-        canvas.saveLayer(rect, contentPaint)
-        draw(canvas, start, start.alpha)
-        draw(canvas, end, end.alpha * progress)
-        canvas.restoreToCount(count)
-    }
-
-    // A picture fills the copy, as on iOS.
-    private fun draw(canvas: Canvas, view: ViewPicture, shown: Float) {
-        val alpha = (shown * 255).roundToInt().coerceIn(0, 255)
-        if (alpha == 0) return
-        val width = view.picture.width.toFloat()
-        val height = view.picture.height.toFloat()
-        val count = canvas.save()
-        canvas.translate(rect.left, rect.top)
-        canvas.scale(rect.width() / width, rect.height() / height)
-        // The picture fades as a whole: its children and background don't show through each other.
-        if (alpha < 255) canvas.saveLayerAlpha(0f, 0f, width, height, alpha)
-        canvas.drawPicture(view.picture)
-        canvas.restoreToCount(count)
-    }
-
-    private fun lerp(from: Float, to: Float) = from + (to - from) * progress
-
-    override fun setAlpha(alpha: Int) = Unit
-
-    override fun setColorFilter(colorFilter: ColorFilter?) = Unit
-
-    @Deprecated("Deprecated in Java")
-    override fun getOpacity(): Int = PixelFormat.TRANSLUCENT
-}

package/ios/Layouts/Screen/ANNScreenInsets.h

@@ -1,30 +0,0 @@
-#import "ANNEventEmitter.h"
-#import <UIKit/UIKit.h>
-
-NS_ASSUME_NONNULL_BEGIN
-
-/// Posted on the main queue when the padding of a screen's safe area view changed; the object is the screen id.
-extern NSNotificationName const ANNScreenSafeAreaPaddingDidChangeNotification;
-
-/// The safe area of each screen: how much of its content the bars and the system cover on each side. The padding is
-/// the part of it the screen's safe area view keeps its content out of: the insets on the edges the screen's options
-/// give. JavaScript gets the rest, what still covers the content (0 on a padded edge): it reads it from its own thread
-/// for a screen's first render, and gets every change as `ANN.ScreenInsetsChanged`. Main queue, but the reads.
-@interface ANNScreenInsets : NSObject
-
-/// Keeps the screen's insets and padding, and tells when they changed.
-+ (void)setInsets:(UIEdgeInsets)insets
-          padding:(UIEdgeInsets)padding
-      forScreenId:(NSString *)screenId
-     eventEmitter:(ANNEventEmitter *)eventEmitter;
-/// The padding of the screen's safe area view; none before the screen was laid out. Main queue.
-+ (UIEdgeInsets)paddingForScreenId:(NSString *)screenId;
-/// `{ top, right, bottom, left }`, or nil before the screen was laid out. Any thread.
-+ (nullable NSDictionary<NSString *, NSNumber *> *)insetsForScreenId:(NSString *)screenId;
-+ (void)removeScreenId:(NSString *)screenId;
-/// Forgets every screen: after a reload the new JavaScript counts its ids anew. Main queue.
-+ (void)removeAll;
-
-@end
-
-NS_ASSUME_NONNULL_END