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

package/src/engine/rememberedOptions.ts

@@ -29,9 +29,77 @@ export function rememberMergedOptions(id: string, options: Options): void {
   remembered.set(id, before ? mergeOptions(before, kept) : kept);
 }
 
+/** Takes the options at the paths, such as `['topBar', 'subtitle']`, out of those remembered for the node with the id. */
+export function forgetMergedPaths(id: string, paths: readonly string[][]): void {
+  const own = ownOptions.get(id);
+  if (own) own.options = withoutPaths(own.options, paths);
+  const options = remembered.get(id);
+  if (options) remembered.set(id, withoutPaths(options, paths));
+}
+
+// A copy of the options without the values at the paths.
+function withoutPaths(options: Options, paths: readonly string[][]): Options {
+  const kept = structuredCopy(options);
+  for (const path of paths) {
+    const parent = path
+      .slice(0, -1)
+      .reduce<Record<string, unknown> | undefined>(
+        (group, key) => group?.[key] as Record<string, unknown> | undefined,
+        kept
+      );
+    if (parent) delete parent[path[path.length - 1]!];
+  }
+  return kept as Options;
+}
+
+// A copy of the plain objects of options, the other values shared.
+function structuredCopy(options: Options): Record<string, unknown> {
+  return Object.fromEntries(
+    Object.entries(options).map(([key, value]) => [
+      key,
+      isGroup(value) ? structuredCopy(value as Options) : value,
+    ])
+  );
+}
+
+function isGroup(value: unknown): boolean {
+  return (
+    typeof value === 'object' && value !== null && Object.getPrototypeOf(value) === Object.prototype
+  );
+}
+
 /** Forgets the merged options of a node that went; a node of the last root keeps them until another root goes out. */
 export function forgetMergedOptions(id: string): void {
   if (!lastRoot?.ids.has(id)) remembered.delete(id);
+  ownOptions.delete(id);
+}
+
+// The own options of each screen as JavaScript sent them, in development: those it showed with, and every merge and
+// clear since. An edit of a screen's options (Fast Refresh) changes only what still has the old definition's value.
+const ownOptions = new Map<string, { name: string; options: Options }>();
+
+/** Notes the own options a screen of the name shows with (development). */
+export function noteOwnOptions(id: string, name: string, options: Options): void {
+  if (__DEV__) ownOptions.set(id, { name, options });
+}
+
+/** Notes a merge into a screen's own options (development). */
+export function noteMergedOwnOptions(id: string, options: Options): void {
+  const noted = __DEV__ ? ownOptions.get(id) : undefined;
+  if (noted) noted.options = mergeOptions(noted.options, options);
+}
+
+/** The own options of a screen as JavaScript sent them (development); undefined for a screen it didn't note. */
+export function ownOptionsOf(id: string): Options | undefined {
+  return ownOptions.get(id)?.options;
+}
+
+/**
+ * The ids of the screens of the name the native side has, mounted in React or not yet (a tab not selected yet), as
+ * development notes them.
+ */
+export function notedScreens(name: string): string[] {
+  return [...ownOptions].filter(([, noted]) => noted.name === name).map(([id]) => id);
 }
 
 /** The options merged into the node with the id, as remembered; undefined without any. */
@@ -55,6 +123,8 @@ export function rootGoesOut(nodes: LayoutNode[], again: SentRoot | undefined): v
   const before = lastRoot;
   lastRoot = { nodes, ids: new Set(nodes.flatMap(idsOf)) };
   if (!before) return;
+  // The screens of the root before go with it, the tabs React never mounted too.
+  for (const id of before.ids) if (!lastRoot.ids.has(id)) ownOptions.delete(id);
   const moved = new Map<string, Options>();
   if (again === before) {
     pairNodes(before.nodes, nodes, (old, node) => {

package/src/engine/screens.tsx

@@ -68,6 +68,29 @@ let unmounted: ((screenId: string) => void) | undefined;
 // bar of every screen that shows it. The id lets its props go only with the last of them. A slot of the app's one tree
 // has no tag: while the one tree shows a screen with the id, no root of that id lets it go.
 const owners = new Map<string, Set<number>>();
+// The screens that show by their ids: the name, and how many roots or slots of the id are mounted (a component of the
+// options has a root in the bar of every screen that shows it).
+const shown = new Map<string, { name: string; mounts: number }>();
+
+/**
+ * Notes a screen as shown, a React root or slot of it or the controller of a native screen, until the function it
+ * gives is called.
+ */
+export function noteShown(componentId: string, name: string): () => void {
+  const entry = shown.get(componentId);
+  if (entry?.name === name) entry.mounts++;
+  else shown.set(componentId, { name, mounts: 1 });
+  return () => {
+    const current = shown.get(componentId);
+    if (current?.name !== name) return;
+    if (--current.mounts === 0) shown.delete(componentId);
+  };
+}
+
+/** The ids of the screens with the name that show now. */
+export function shownScreens(name: string): string[] {
+  return [...shown].filter(([, entry]) => entry.name === name).map(([id]) => id);
+}
 
 /** Whether a React root of the screen with the id is mounted now (a slot of the app's one tree doesn't count). */
 export function hasRoot(componentId: string): boolean {
@@ -235,6 +258,7 @@ export function screenRoot(name: string): ComponentType<NativeRootProps> | undef
         [componentId]
       );
       const props = useSyncExternalStore(watch, () => propsOf(componentId));
+      useEffect(() => noteShown(componentId, name), [componentId]);
       useEffect(() => {
         if (rootTag !== undefined) {
           const tags = owners.get(componentId) ?? new Set<number>();

package/src/interfaces/ComponentEvents.ts

@@ -95,8 +95,8 @@ export interface SheetDetentChangedEvent {
   /** The id of the visible screen of the modal. */
   componentId: string;
   /**
-   * The detent the sheet stopped at: `'medium'`, `'large'`, or a height (points on iOS, dp on Android). `'content'`
-   * is sent on iOS for a detent that fits the content; Android names such a detent `'medium'`.
+   * The detent the sheet stopped at: `'medium'`, `'large'`, `'content'` (the detent that fits the content), or a
+   * height (points on iOS, dp on Android).
    */
   detent: 'medium' | 'large' | 'content' | number;
 }

package/src/interfaces/options/animations.ts

@@ -262,8 +262,8 @@ export type ElementAnimation = AppearingElementAnimation | DisappearingElementAn
  * element's value, and a missing end is that value (a turn read from −180° to 180°, as React Native draws it). `x`
  * and `y` are the position in the parent of the element on both platforms. As on a side of a screen, don't set `x`
  * with `translationX` or `y` with `translationY` on one element: the translation plays and the position doesn't.
- * (Android) A view whose parent is a React view with `removeClippedSubviews` turned on, such as a child of a clipping
- * list, is not moved: it counts as not found.
+ * The element plays where it is, in its screen: it moves with its screen, its parents clip it, and the views drawn
+ * after it in its screen stay over it.
  */
 export interface ElementTransition {
   /** The `nativeID` of the view to animate. */
@@ -294,15 +294,20 @@ export interface ElementTransition {
  * A view that flies from the screen that goes to the screen that comes, changing its place, size, corners and look on
  * the way. A pair whose view is not found on either screen is skipped while the rest plays, and the transition waits
  * until the views are found. A pair that fails on the way (an error in its start or its flight) is skipped too, with a
- * warning in the log: its views show and hide with their screens, and the transition and its command go on. (iOS) So is
- * a pair with a view without a size, or one whose picture can't be taken. Without an animation of the screens of its
- * own, the screen that comes fades in (or the one that goes fades out) in 300 ms around the pair. Text keeps its
- * proportions and changes its picture within a quarter of the flight. A view turned or scaled by its own `transform` or
- * by a parent's flies from where it shows, and its angle goes to the other view's along the shorter arc. The angle is
- * the one React Native draws, from −180° to 180°: `rotate: '270deg'` turns back a quarter, and no pair spins a full
- * turn. (Android) A picture that doesn't load within a second drops out of the transition, and so does a pair with a
- * view whose parent is a React view with `removeClippedSubviews` turned on: it counts as not found. A skew and a tilt
- * (`skewX`, `rotateX`, …) don't fly: the view flies without them and has them again at the end.
+ * warning in the log: its views show and hide with their screens, and the transition and its command go on. So is a
+ * pair with a view without a size, or one whose picture can't be taken. Without an animation of the screens of its
+ * own, the screen that comes fades in (or the one that goes fades out) in 300 ms around the pair. What flies is a copy:
+ * pictures of the two views taken as the transition starts, while the views stay hidden in their places; what changes
+ * in them meanwhile shows when they are back. A view its parents cut (`overflow: hidden`, a scroll view, the edge of
+ * its screen) shows only the part they leave visible, and that part goes to the one of the other view on the way.
+ * Text keeps its proportions, flies whole and changes its picture within a quarter of the flight. A view turned or
+ * scaled by its own `transform` or by a parent's flies from where it shows, and its angle goes to the other view's
+ * along the shorter arc. The angle is the one React Native draws, from −180° to 180°:
+ * `rotate: '270deg'` turns back a quarter, and no pair spins a full turn. (Android) An image without a background or a
+ * border flies as the image of the view that comes, from the part and place the fit (`resizeMode`) shows in one view
+ * to those in the other, and an animated image plays on; images of other proportions fly as pictures. An image that
+ * doesn't load within a second drops out of the transition. A skew and a tilt (`skewX`, `rotateX`, …) don't fly: the
+ * view flies without them and has them again at the end.
  */
 export interface SharedElementTransition {
   /** The `nativeID` of the view on the screen that goes. */
@@ -411,14 +416,27 @@ export interface StackPushAnimationOptions extends StackAnimationOptions {
 }
 
 /**
- * The animation of a pop, read from the screen that goes. As {@link StackAnimationOptions}, with the preview of the
- * back gesture on Android.
+ * The animation of a pop, read from the screen that goes. As {@link StackAnimationOptions}, with the swipe back of iOS
+ * and the preview of the back gesture on Android.
  */
 export interface StackPopAnimationOptions extends StackAnimationOptions {
+  /**
+   * (iOS) Whether the swipe back plays this pop under the finger. Without it, the swipe back plays UIKit's slide, and
+   * the pop's own animation plays only for the back button and `pop`. With `true`, the swipe from the edge plays the
+   * pop's own animation as far as the finger has gone across the screen: the user can stop halfway, and letting go
+   * finishes the pop or puts the screen back, the rest playing faster after a quick flick. It applies only when the pop
+   * has an animation of its own (`content`, `elementTransitions`, `sharedElementTransitions`). The top bar shows the
+   * screen under from the start of the swipe, as UIKit does in a transition of its own, and comes back when the swipe
+   * is given up. On iOS 26 the swipe from the content stays off for a screen with an own pop.
+   * Android ignores it: a pop with an animation of its own plays when the back gesture ends.
+   * @default false
+   */
+  interactive?: boolean;
   /**
    * (Android 14+) Whether the back gesture on a pushed screen previews its pop as the user swipes: the screen shrinks
    * and follows the finger, the screen under it shows behind. `false` pops the screen when the gesture is released,
-   * as on Android 13 and older; back still pops it. iOS ignores it: its swipe back is UIKit's.
+   * as on Android 13 and older; back still pops it. iOS ignores it: its swipe back is UIKit's, or the pop's own
+   * animation with `interactive`.
    * @default true
    */
   preview?: boolean;
@@ -474,6 +492,12 @@ export interface ModalAnimationOptions extends EnterExitAnimationOptions {
  * options of the command. A change by `mergeOptions` is for the next command and animates nothing itself. A theme
  * switch or a rotation does not change an animation. Without a key, the transition is the platform's own.
  *
+ * The system's setting to reduce motion is respected, with no option to turn that off. (iOS) With Reduce Motion on, a
+ * transition of these keys is a fade of the same length: the screen that comes fades in (a push, `setStackRoot`, a
+ * modal's show, `setRoot`), the screen that goes fades out (a pop, a dismissal); no element moves. (Android) With
+ * Remove animations on (or the animator duration scale at 0), the transitions end at once, no element moves and none
+ * is waited for, a side menu opens and closes without its slide, and a sheet shows and closes without it.
+ *
  * ```ts
  * const options: Options = {
  *   animations: {
@@ -489,7 +513,8 @@ export interface AnimationOptions {
   push?: StackPushAnimationOptions;
   /**
    * The pop of a screen, also `popTo` and `popToRoot`, read from the screen that goes. The swipe back of iOS is
-   * UIKit's; the back gesture of Android previews the pop (`preview`).
+   * UIKit's, or the pop's own animation under the finger (`interactive`); the back gesture of Android previews the pop
+   * (`preview`).
    */
   pop?: StackPopAnimationOptions;
   /** The replacing of the screens of a stack, read from the new top screen. */

package/src/interfaces/options/bottomTabs.ts

@@ -199,8 +199,8 @@ export interface OptionsBottomTabs {
    */
   drawBehind?: boolean;
   /**
-   * The background color of the bar; `null` gives the default one. On Android the default is the surface color of the
-   * Material 3 theme. Before iOS 26, and in the compatibility mode (`UIDesignRequiresCompatibility` in Info.plist: iOS 26, and iOS 27
+   * The background color of the bar; `null` gives the default one. On Android the default is the surface container color
+   * (`colorSurfaceContainer`) of the Material 3 theme. Before iOS 26, and in the compatibility mode (`UIDesignRequiresCompatibility` in Info.plist: iOS 26, and iOS 27
    * only for an app built with an SDK before iOS 27), the bar is opaque with the color, or system opaque without it,
    * and a transparent color makes it transparent. On iOS 26 and later with glass the color is ignored
    * with one warning, since the system has no color for glass, while a transparent color gives a transparent bar. The

package/src/interfaces/options/buttons.ts

@@ -159,7 +159,7 @@ export interface OptionsTopBarButtonMenu {
  * A button of the top bar (`leftButtons`, `rightButtons`, `centerButtons`) or of the toolbar (`toolbar.buttons`). The
  * kinds are picked by the fields that are set. On iOS, the first that fits wins: a `component`, then an icon with text
  * and `showText`, then an icon with `iconBackground` or `iconInsets`, then an SF Symbol, an image `icon`, a `text`,
- * a `systemItem`; a button with none of them is not shown. On Android a button is a menu item of the bar: text, icon
+ * a `systemItem`; a button with none of them is not shown. On Android a button is a button of the bar's row: text, icon
  * or a component. Lists of buttons are replaced as a whole and take nothing from the lists of lower layers.
  *
  * Text, icon, color and similar fields are the same in all four places; where a place or a side differs, the field
@@ -204,7 +204,7 @@ export interface OptionsTopBarButton {
   systemItem?: SystemItemIcon;
   /**
    * The text of the button. A button with an icon keeps it as a label for the overflow menu, the customization panel
-   * and VoiceOver (iOS) or as the text of the menu item (Android, where it also shows when there is room).
+   * and VoiceOver (iOS), or for TalkBack, the tooltip of a long press and the overflow menu (Android).
    */
   text?: string;
   /** The text a screen reader says for the button. */

package/src/interfaces/options/modals.ts

@@ -51,8 +51,7 @@ export type OptionsModalTransitionStyle =
  *
  * On iOS `'medium'` and `'large'` are the system stops; a number and `'content'` need iOS 16 and are left out below it
  * with a warning in the log. On Android `'medium'` is half of the window, `'large'` the full height under the status
- * bar, a number is capped at `'large'`, and `'content'` stands in as `'medium'` because the Material sheet has no
- * height by content.
+ * bar, a number is capped at `'large'`, and `'content'` is the height of the content, measured as on iOS.
  */
 export type OptionsModalSheetDetent = 'medium' | 'large' | 'content' | number;
 
@@ -67,11 +66,11 @@ export type OptionsModalSheetDetent = 'medium' | 'large' | 'content' | number;
 export interface OptionsModalSheet {
   /**
    * The stops the sheet can rest on, and the user drags it between, in any order: on both platforms they are sorted by
-   * height and repeats dropped. On iOS `'medium'` counts as half of `'large'` there, and `'content'` takes its place by
-   * the height of the content, again whenever that changes; a list left empty by unsupported values gives
-   * `['large']`. On Android the Material sheet has three resting places at most: the lowest stop of the list, the
-   * highest, and `'medium'` between them when the list has both `'medium'` and `'large'`. A stop without a place is
-   * dropped.
+   * height and repeats dropped. On iOS `'medium'` counts as half of `'large'` there, and on both `'content'` takes its
+   * place by the height of the content, again whenever that changes; on iOS a list left empty by unsupported values
+   * gives `['large']`. On Android the Material sheet has three resting places at most: the lowest stop of the list, the
+   * highest, and one between them, `selectedDetent` when it stands there, else the lowest of the others; the rest are
+   * dropped. Stops of the same height there are one.
    * @default ['large']
    */
   detents?: OptionsModalSheetDetent[];

package/src/interfaces/options/stack.ts

@@ -39,13 +39,18 @@ export interface HardwareBackButtonOptions {
 
 /**
  * (Android) A floating action button over the screen, or an entry of its menu. The button shows while its screen is
- * on top of the stack; without the option there is none. `mergeOptions` and the default options of the app apply, and
- * the colors of the theme are read again when the theme changes.
+ * on top of the stack; without the option there is none. It changes as a push or a pop starts and moves with its
+ * screen, as the tab bar does: the new screen's button comes in with it, the old one goes out with the screen it
+ * belongs to, and an open menu closes. With an animation of the screens' own the old button shrinks away and the new
+ * one grows as it starts; during the back gesture the button of the screen under the top shows with that screen.
+ * `mergeOptions` and the default options of the app apply, and the colors of the theme are read again when the theme
+ * changes.
  */
 export interface OptionsFab {
   /**
    * The identifier of the button. A press reports it, and the app finds the `onPress` of the button by it. A button
-   * without an `id` doesn't show. The same `id` on a later show or merge updates the button; another `id` replaces it.
+   * without an `id` doesn't show. The same `id` on a later show or merge updates the button, which stays in place
+   * while the screens move; another `id` replaces it.
    * For an entry of `actions` it is the id of that entry's own press.
    */
   id: string;

package/src/interfaces/options/topBar.ts

@@ -654,6 +654,20 @@ export interface OptionsTopBar {
   centerButtonColor?: Color;
   /** (iOS 16+) The color of the disabled center buttons that have no `disabledColor` of their own. */
   centerButtonDisabledColor?: Color;
+  /**
+   * (Android) The background of the bar's menus: "⋮" and the menus of the buttons, their submenus too. Without it the
+   * bar's color (`background.color`, else the theme's surface), unless the bar lets something through; then the
+   * theme's surface container color. It follows light and dark mode; an open menu closes as the mode switches. iOS
+   * draws its system menus in the system's colors.
+   */
+  menuBackgroundColor?: Color;
+  /**
+   * (Android) The color of the text and the icons of the items of the bar's menus, and of the titles of their
+   * submenus. Without it the title's color (`title.color`) when the menu takes the bar's color, else the theme's
+   * colors. A destructive item stays red, and a button moved into "⋮" keeps its own color or the side's
+   * (`rightButtonColor`). A disabled item is dimmed. An open menu closes when either menu color is merged.
+   */
+  menuTextColor?: Color;
   /**
    * Whether the content of the screen goes under the bar, starting at the top of the screen. The screen goes under the
    * bar by itself in some cases (a large title that may show, `hideOnScroll`, a hidden bar, an explicit translucent

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

@@ -1,31 +0,0 @@
-package dev.apexnative.navigation.views.element
-
-import android.annotation.SuppressLint
-import android.content.Context
-import android.graphics.Canvas
-import android.view.MotionEvent
-import android.view.View
-
-/**
- * The empty view that stands in an element's place in its parent while the element is in the transition layer: the same
- * id at the same index with the same layout, so Fabric finds the parent's children as it left them; React removing it
- * removes the element for good. It has no `nativeID`, so no search finds it as the element. It draws nothing and takes
- * no touches. Main thread only.
- */
-@SuppressLint("ViewConstructor")
-internal class ElementStub(context: Context, element: View) : View(context) {
-    init {
-        id = element.id
-        importantForAccessibility = IMPORTANT_FOR_ACCESSIBILITY_NO
-        isClickable = false
-        isFocusable = false
-    }
-
-    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) =
-        setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.getSize(heightMeasureSpec))
-
-    override fun draw(canvas: Canvas) = Unit
-
-    @SuppressLint("ClickableViewAccessibility")
-    override fun onTouchEvent(event: MotionEvent?): Boolean = false
-}

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

@@ -1,134 +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): from where `from` is drawn to where it is
- * drawn in its screen ([FlightGeometry]), unscaled and turned about its middle; 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,
-    /** Where [to] was in its screen: what it flies to. */
-    private val toStandIn: View?,
-    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, toStandIn, layer) ?: return null
-        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.from.scale
-        val toRadius = clipRadius(toParent) * geometry.to.scale
-        val outline = FlightOutline()
-        val moved = MovedProperties(to)
-        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 at = geometry.at(f, time)
-                val width = at.width.roundToInt()
-                val height = at.height.roundToInt()
-                layer.place(to, geometry.toLeft, geometry.toTop, width, height)
-                moved.show(geometry, at, width, height)
-                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
-                moved.end(geometry, landed) { w, h -> layer.place(to, geometry.toLeft, geometry.toTop, w, h) }
-            }
-        }
-    }
-
-    // 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,78 +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 where `from` is drawn to where it is drawn in its screen
- * ([FlightGeometry]); its size and corner radius by an outline that grows from `from`'s (at the scale it is drawn at)
- * to its own while it is laid out at the larger of the two sizes, unscaled and turned about the outline's middle; 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`). Main thread only.
- */
-internal class PlainViewAnimator(
-    private val from: View,
-    private val to: View,
-    /** Where [to] was in its screen: what it flies to. */
-    private val toStandIn: 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, toStandIn, layer) ?: return null
-        val fromRadius = from.borderRadius * geometry.from.scale
-        val toRadius = to.borderRadius * geometry.to.scale
-        val fromColor = BackgroundStyleApplicator.getBackgroundColor(from)
-        val toColor = BackgroundStyleApplicator.getBackgroundColor(to)
-        val ownRadius = BackgroundStyleApplicator.getBorderRadius(to, RADIUS)
-        val outline = FlightOutline()
-        val moved = MovedProperties(to)
-        var savedProvider: ViewOutlineProvider? = null
-        var savedClip = false
-        val (width, height) = geometry.largest
-        return MoveAnimator().apply {
-            fun frame(time: Float) {
-                val f = curve.getInterpolation(time)
-                val at = geometry.at(f, time)
-                outline.width = at.width.roundToInt()
-                outline.height = at.height.roundToInt()
-                outline.radius = ValueInterpolation.number(fromRadius, toRadius, f, time)
-                moved.show(geometry, at, outline.width, outline.height)
-                to.invalidateOutline()
-                if (fromColor != toColor) {
-                    val color = ValueInterpolation.color(fromColor, toColor, f, time)
-                    BackgroundStyleApplicator.setBackgroundColor(to, color)
-                }
-            }
-            onStart {
-                savedProvider = to.outlineProvider
-                savedClip = to.clipToOutline
-                if (ownRadius != null) BackgroundStyleApplicator.setBorderRadius(to, RADIUS, null)
-                to.outlineProvider = outline
-                to.clipToOutline = true
-                layer.place(to, geometry.toLeft, geometry.toTop, width, height)
-                frame(0f)
-            }
-            onFrame { frame(it) }
-            // A cancelled flight ends too: the view goes back whole.
-            onEnd {
-                if (fromColor != toColor) BackgroundStyleApplicator.setBackgroundColor(to, toColor)
-                if (ownRadius != null) BackgroundStyleApplicator.setBorderRadius(to, RADIUS, ownRadius)
-                to.outlineProvider = savedProvider
-                to.clipToOutline = savedClip
-                moved.end(geometry, landed) { w, h -> layer.place(to, geometry.toLeft, geometry.toTop, w, h) }
-            }
-        }
-    }
-
-    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
-}