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

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

@@ -1,8 +1,6 @@
 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
@@ -45,14 +43,14 @@ internal class ReactImageAnimator(
                 to.rotation = ValueInterpolation.number(fromRotation, toRotation, f, time)
                 to.invalidate()
             }
-            doOnStart {
+            onStart {
                 savedFade = to.hierarchy.fadeDuration
                 to.hierarchy.fadeDuration = 0
                 to.hierarchy.setActualImageScaleType(scale)
                 frame(0f)
             }
-            addUpdateListener { frame(it.animatedFraction) }
-            doOnEnd {
+            onFrame { frame(it) }
+            onEnd {
                 to.hierarchy.setActualImageScaleType(toType)
                 to.hierarchy.fadeDuration = savedFade
                 to.translationX = 0f

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

@@ -10,6 +10,7 @@ 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
+import dev.apexnative.navigation.views.element.pairName
 
 /**
  * The animator of a shared element by the kinds of its two views, chosen by explicit classes, never by reflection:
@@ -55,6 +56,7 @@ internal object SharedAnimatorFactory {
             else -> moves(PlainViewAnimator(from, to, layer).create())
         } ?: return null
         val animator = flight.animator
+        (animator as? MoveAnimator)?.element = pairName(options.fromId.get(""), options.toId.get(""))
         val duration = AnimationRules.durationOf(options.duration.get(null), fallbackDuration)
         animator.duration = duration
         animator.startDelay = AnimationRules.delayOf(options.startDelay.get(null))

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

@@ -11,8 +11,6 @@ import android.text.Layout
 import android.view.View
 import android.view.ViewGroup
 import android.widget.TextView
-import androidx.core.animation.doOnEnd
-import androidx.core.animation.doOnStart
 import com.facebook.react.views.text.ReactTextView
 import dev.apexnative.navigation.options.SharedElementTransitionOptions
 import dev.apexnative.navigation.utils.TextViewUtils
@@ -42,16 +40,16 @@ class TextChangeAnimator(from: View, to: View) : PropertyAnimatorCreator<ReactTe
         val drawable = TextMorphDrawable(start, end)
         // Everything changes between the start and the end of the animation: a cancelled one ends too.
         return MoveAnimator().apply {
-            doOnStart {
+            onStart {
                 drawable.setBounds(0, 0, layer.width, layer.height)
                 layer.overlay.add(drawable)
                 to.alpha = 0f
             }
-            addUpdateListener {
-                drawable.update(it.animatedFraction, curve.getInterpolation(it.animatedFraction))
+            onFrame {
+                drawable.update(it, curve.getInterpolation(it))
                 layer.invalidate()
             }
-            doOnEnd {
+            onEnd {
                 layer.overlay.remove(drawable)
                 layer.invalidate()
                 to.alpha = end.alpha

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

@@ -12,8 +12,6 @@ import android.graphics.RectF
 import android.graphics.drawable.Drawable
 import android.view.View
 import android.view.ViewGroup
-import androidx.core.animation.doOnEnd
-import androidx.core.animation.doOnStart
 import com.facebook.react.views.view.ReactViewGroup
 import dev.apexnative.navigation.options.SharedElementTransitionOptions
 import dev.apexnative.navigation.utils.ViewUtils
@@ -38,16 +36,16 @@ class ViewChangeAnimator(from: View, to: View) : PropertyAnimatorCreator<ReactVi
         val drawable = ViewMorphDrawable(start, end)
         // Everything changes between the start and the end of the animation: a cancelled one ends too.
         return MoveAnimator().apply {
-            doOnStart {
+            onStart {
                 drawable.setBounds(0, 0, layer.width, layer.height)
                 layer.overlay.add(drawable)
                 to.alpha = 0f
             }
-            addUpdateListener {
-                drawable.progress = curve.getInterpolation(it.animatedFraction)
+            onFrame {
+                drawable.progress = curve.getInterpolation(it)
                 layer.invalidate()
             }
-            doOnEnd {
+            onEnd {
                 layer.overlay.remove(drawable)
                 layer.invalidate()
                 to.alpha = end.alpha

package/android/src/main/java/dev/apexnative/navigation/views/stack/ScreenEdge.kt

@@ -0,0 +1,15 @@
+package dev.apexnative.navigation.views.stack
+
+import android.graphics.drawable.Drawable
+import android.view.View
+
+/**
+ * What fills the room beside a moving screen in a transition (`StackLayout.extendEdge`), where the system's
+ * transitions between activities stretch a window's edge (`<extend>` of `activity_open_*` and `activity_close_*`): the
+ * screen's own background, which is what its edge shows unless its content covers it. Taken without drawing the
+ * screen, at the start of every push and pop. Main thread only.
+ */
+internal object ScreenEdge {
+    /** A copy of [view]'s background, stretched across the room; none without one. */
+    fun pictureOf(view: View): Drawable? = view.background?.constantState?.newDrawable(view.resources)?.mutate()
+}

package/android/src/main/java/dev/apexnative/navigation/views/stack/StackLayout.kt

@@ -2,6 +2,8 @@ package dev.apexnative.navigation.views.stack
 
 import android.annotation.SuppressLint
 import android.content.Context
+import android.graphics.Canvas
+import android.graphics.drawable.Drawable
 import android.view.Gravity
 import android.view.View
 import android.view.ViewGroup
@@ -18,7 +20,8 @@ import java.util.WeakHashMap
  * moves between its places without leaving it, so it doesn't leave and join the window again; a covered screen that
  * comes back gets the last window insets the stack got before it joins, and nothing asks the window to send them again
  * (CoordinatorLayout asks for insets only as it joins the window itself and only with `fitsSystemWindows`, which this
- * view doesn't set). Main thread only.
+ * view doesn't set). In a transition of the stack's own the bar is drawn with the screen it goes with
+ * ([barTravels]). Main thread only.
  */
 @SuppressLint("ViewConstructor")
 class StackLayout(context: Context) : CoordinatorLayout(context) {
@@ -134,4 +137,137 @@ class StackLayout(context: Context) : CoordinatorLayout(context) {
         requestLayout()
         invalidate()
     }
+
+    // The edges of the screens in a transition: drawn beside each, under it, where it moves and as transparent as it.
+    private val edges = HashMap<View, Edge>()
+
+    private class Edge(val picture: Drawable, val width: Int, val atStart: Boolean)
+
+    /**
+     * [view] extends its start edge ([atStart]) or its end edge by [width] pixels while it moves, as the system's
+     * transitions between activities extend a window: its background fills the room it moves away from, so the screen
+     * under it never shows at its edge. [dropEdge] ends it. Each frame of the move calls [edgesMoved].
+     */
+    fun extendEdge(view: View, atStart: Boolean, width: Int) {
+        val left = atStart != (layoutDirection == LAYOUT_DIRECTION_RTL)
+        val picture = ScreenEdge.pictureOf(view) ?: return
+        edges[view] = Edge(picture, width, left)
+        invalidate()
+    }
+
+    /** [view] moves no more: its edge goes. */
+    fun dropEdge(view: View) {
+        if (edges.remove(view) != null) invalidate()
+    }
+
+    /** A screen with an extended edge moved: the edges are drawn again where the screens are now. */
+    fun edgesMoved() {
+        if (edges.isNotEmpty()) invalidate()
+    }
+
+    // The bar's travel in a transition of the stack's own: the screen the bar goes with, the screen that leaves with the
+    // picture of the bar as it was, and whether that one lies over the bar (a pop).
+    private var barScreen: View? = null
+    private var barLeaving: View? = null
+    private var barPicture: Drawable? = null
+    private var leavingOver = false
+
+    /**
+     * The bar goes with [screen] in a transition of the stack's own: it is drawn as [screen] moves (its translation,
+     * scale and rotation around its pivot, its alpha). [picture], laid where the bar is, goes the same way with
+     * [leaving]: it is drawn right over that screen, outside its bounds too (a screen laid out under the bar). With
+     * [over] the leaving screen and its picture lie over the bar (a pop), else under it. Only the drawing moves: the
+     * bar's views and touches stay in place. [endBarTravel] ends it.
+     */
+    fun barTravels(screen: View, leaving: View?, picture: Drawable?, over: Boolean) {
+        barScreen = screen
+        barLeaving = leaving
+        barPicture = picture
+        leavingOver = over && leaving != null
+        invalidate()
+    }
+
+    /** The bar is drawn in its place again, over the screens; the picture goes. */
+    fun endBarTravel() {
+        if (barScreen == null) return
+        barScreen = null
+        barLeaving = null
+        barPicture = null
+        leavingOver = false
+        invalidate()
+    }
+
+    override fun dispatchDraw(canvas: Canvas) {
+        super.dispatchDraw(canvas)
+        // The screens' animators change only their own properties, which don't draw this view again: each frame of
+        // the bar's travel asks for the next.
+        if (barScreen != null) postInvalidateOnAnimation()
+    }
+
+    override fun drawChild(canvas: Canvas, child: View, drawingTime: Long): Boolean {
+        edges[child]?.let { drawEdge(canvas, child, it) }
+        val screen = barScreen ?: return super.drawChild(canvas, child, drawingTime)
+        // The leaving screen, while it is still here, and its picture; on a pop the bar right under them.
+        val leaving = barLeaving?.takeIf(::holds)
+        val under = leaving.takeIf { leavingOver }
+        if (child === topBar) {
+            if (under != null) return false
+            return drawWith(canvas, screen, topBar.left.toFloat(), topBar.top + topBar.translationY,
+                topBar.right.toFloat(), topBar.bottom + topBar.translationY) {
+                super.drawChild(canvas, topBar, drawingTime)
+            }
+        }
+        if (child === under && topBar.visibility == VISIBLE) {
+            drawWith(canvas, screen, topBar.left.toFloat(), topBar.top + topBar.translationY,
+                topBar.right.toFloat(), topBar.bottom + topBar.translationY) {
+                super.drawChild(canvas, topBar, drawingTime)
+            }
+        }
+        val drawn = super.drawChild(canvas, child, drawingTime)
+        val picture = barPicture
+        if (child === leaving && picture != null) {
+            val bounds = picture.bounds
+            drawWith(canvas, child, bounds.left.toFloat(), bounds.top.toFloat(), bounds.right.toFloat(),
+                bounds.bottom.toFloat()) {
+                picture.draw(canvas)
+                false
+            }
+        }
+        return drawn
+    }
+
+    // Draws with [screen]'s transform and alpha what [draw] draws within the bounds given, in this view's coordinates.
+    private fun drawWith(
+        canvas: Canvas,
+        screen: View,
+        left: Float,
+        top: Float,
+        right: Float,
+        bottom: Float,
+        draw: () -> Boolean,
+    ): Boolean {
+        val alpha = if (screen.visibility == VISIBLE) screen.alpha else 0f
+        if (alpha <= 0f) return false
+        val saved = canvas.save()
+        canvas.translate(screen.left.toFloat(), screen.top.toFloat())
+        canvas.concat(screen.matrix)
+        canvas.translate(-screen.left.toFloat(), -screen.top.toFloat())
+        if (alpha < 1f) canvas.saveLayerAlpha(left, top, right, bottom, (alpha * 255).toInt())
+        val drawn = draw()
+        canvas.restoreToCount(saved)
+        return drawn
+    }
+
+    // At the child's place to the fraction of a pixel, as its own translation draws it, and one pixel under it: no seam
+    // of the screen below shows between them.
+    private fun drawEdge(canvas: Canvas, child: View, edge: Edge) {
+        if (child.visibility != VISIBLE || child.alpha <= 0f) return
+        val x = if (edge.atStart) child.left + child.translationX - edge.width else child.right + child.translationX - 1f
+        val saved = canvas.save()
+        canvas.translate(x, child.top + child.translationY)
+        edge.picture.setBounds(0, 0, edge.width + 1, child.height)
+        edge.picture.alpha = (child.alpha * 255).toInt()
+        edge.picture.draw(canvas)
+        canvas.restoreToCount(saved)
+    }
 }

package/android/src/main/java/dev/apexnative/navigation/views/stack/topbar/TitleBar.kt

@@ -118,6 +118,8 @@ class TitleBar(context: Context) : ViewGroup(context) {
         val height = MeasureSpec.getSize(heightMeasureSpec)
         val inner = max(width - sideInsetsBox[0] - sideInsetsBox[1], 0)
         val exactHeight = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
+        alignButtons(leftButtonBar, height)
+        alignButtons(rightButtonBar, height)
         leftButtonBar.measure(MeasureSpec.makeMeasureSpec(inner, MeasureSpec.AT_MOST), exactHeight)
         val rightRoom = max(inner - leftButtonBar.measuredWidth, 0)
         rightButtonBar.measure(MeasureSpec.makeMeasureSpec(rightRoom, MeasureSpec.AT_MOST), exactHeight)
@@ -192,6 +194,12 @@ class TitleBar(context: Context) : ViewGroup(context) {
         return min(max(middle, startBar), max(inner - endBar - width, startBar))
     }
 
+    // A toolbar stands its back button and its menu at the top of its minimum height, centered in it (`buttonGravity`
+    // is top): with the row's height as that minimum, they stand in the middle of the row, as the title does.
+    private fun alignButtons(toolbar: MaterialToolbar, height: Int) {
+        if (toolbar.minimumHeight != height) toolbar.minimumHeight = height
+    }
+
     // A toolbar that holds only buttons: no insets of its own around them (the row places them).
     private fun plain(toolbar: MaterialToolbar) {
         // Before the toolbar makes its menu, which takes the popup theme once: "⋮" in the current mode.
@@ -200,7 +208,6 @@ class TitleBar(context: Context) : ViewGroup(context) {
         toolbar.contentInsetStartWithNavigation = 0
         toolbar.contentInsetEndWithActions = 0
         toolbar.setPadding(0, 0, 0, 0)
-        toolbar.minimumHeight = 0
     }
 
     private companion object {

package/android/src/main/java/dev/apexnative/navigation/views/stack/topbar/TopBar.kt

@@ -55,6 +55,8 @@ class TopBar(context: Context) : FrameLayout(themed(context)) {
     private var heightChanged = false
     // How far the large title is collapsed, in pixels.
     private var largeTitleShift = 0
+    // `topBar.elevation`, in pixels: the bar's elevation unless it is flat.
+    private var shadow = 0f
 
     /** The toolbar of the right buttons: its menu holds them, the overflow items and the search's magnifier. */
     val rightButtonBar: MaterialToolbar
@@ -187,14 +189,27 @@ class TopBar(context: Context) : FrameLayout(themed(context)) {
      * The shadow of `topBar.elevation`, in pixels: its colors are black (Android 9 and later read them), none at 0.
      */
     fun setShadow(elevation: Float) {
-        if (this.elevation == elevation) return
-        this.elevation = elevation
+        if (shadow == elevation) return
+        shadow = elevation
+        if (!isFlat) this.elevation = elevation
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
             outlineAmbientShadowColor = Color.BLACK
             outlineSpotShadowColor = Color.BLACK
         }
     }
 
+    /**
+     * The bar draws without its shadow, at the level of the screens, in a transition that draws it with a screen: a
+     * screen drawn after it covers it, and an alpha layer around it fades it (with an elevation the renderer would draw
+     * the bar over every screen and out of the layer).
+     */
+    var isFlat = false
+        set(value) {
+            if (field == value) return
+            field = value
+            elevation = if (value) 0f else shadow
+        }
+
     /** The line under the bar: [height] pixels of [color]. */
     fun setBorder(color: Int, height: Int) {
         border.setBackgroundColor(color)
@@ -335,8 +350,15 @@ class TopBar(context: Context) : FrameLayout(themed(context)) {
      * A picture of the bar under its row — the background, the large title, the search, the line — and where it starts
      * in the bar, for a push to a screen without a large title; none when the bar can't be drawn in software.
      */
-    fun pictureUnderRow(): Pair<Bitmap, Int>? {
-        val top = content.top + rowArea.bottom
+    fun pictureUnderRow(): Pair<Bitmap, Int>? = pictureFrom(content.top + rowArea.bottom)
+
+    /**
+     * A picture of the whole bar, for the screen it leaves with in a transition of the stack's own; none when the bar
+     * can't be drawn in software.
+     */
+    fun picture(): Bitmap? = pictureFrom(0)?.first
+
+    private fun pictureFrom(top: Int): Pair<Bitmap, Int>? {
         val width = width
         val height = height - top
         if (width <= 0 || height <= 0) return null

package/android/src/main/java/dev/apexnative/navigation/views/stack/topbar/titlebar/ButtonBar.kt

@@ -37,6 +37,7 @@ import dev.apexnative.navigation.utils.MaterialTheme
 import dev.apexnative.navigation.utils.TestIds
 import dev.apexnative.navigation.utils.UiUtils
 import java.util.WeakHashMap
+import kotlin.math.roundToInt
 
 /**
  * The buttons of one side of the bar in its toolbar: each button a menu item — a text, an icon (on its background), or
@@ -171,7 +172,7 @@ internal class ButtonBar(
                 options.fontSize.get(0.0).toFloat(),
                 context.resources.displayMetrics,
             )
-            spannable.setSpan(AbsoluteSizeSpan(size.toInt()), 0, text.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+            spannable.setSpan(AbsoluteSizeSpan(size.roundToInt()), 0, text.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
         }
         if (options.font.hasValue()) {
             val typeface = options.font.getTypeface(typefaces, Typeface.DEFAULT)
@@ -207,8 +208,8 @@ internal class ButtonBar(
             icon,
             color,
             UiUtils.dpToPx(context, background.cornerRadius.get(0.0).toFloat()),
-            UiUtils.dpToPx(context, background.width.get(0.0).toFloat()).toInt(),
-            UiUtils.dpToPx(context, background.height.get(0.0).toFloat()).toInt(),
+            UiUtils.dpToPx(context, background.width.get(0.0).toFloat()).roundToInt(),
+            UiUtils.dpToPx(context, background.height.get(0.0).toFloat()).roundToInt(),
         )
     }
 

package/cli/app.js

@@ -9,7 +9,7 @@ const { exec } = require('./exec');
 const MINIMUM = [0, 85];
 
 /** The newest React Native the navigation was checked with: `init` makes apps of its newest patch. */
-const TESTED = [0, 87];
+const TESTED = [0, 88];
 
 /** The name the navigation is installed under. */
 const PACKAGE = '@apexnative/navigation';

package/cli/project.js

@@ -8,8 +8,9 @@ const { exec } = require('./exec');
 /**
  * The files of the app the CLI sets up, checks and adds to, where the app has them; `undefined` for one it couldn't
  * find. `styles` is the file of the app's Android theme, `styles.xml` or `themes.xml`; `manifest` its
- * `AndroidManifest.xml`. `xcodeProject` is the app's `project.pbxproj`; `androidPackage` the package of its Kotlin code (the `namespace`
- * of `android/app/build.gradle`), and `androidSources` the folder it is in.
+ * `AndroidManifest.xml`. `sceneDelegate` is the `SceneDelegate.swift` next to `AppDelegate.swift`, which apps made
+ * from React Native 0.88's template have. `xcodeProject` is the app's `project.pbxproj`; `androidPackage` the package
+ * of its Kotlin code (the `namespace` of `android/app/build.gradle`), and `androidSources` the folder it is in.
  * @typedef {{
  *   root: string;
  *   mainApplication?: string;
@@ -17,6 +18,7 @@ const { exec } = require('./exec');
  *   styles?: string;
  *   manifest?: string;
  *   appDelegate?: string;
+ *   sceneDelegate?: string;
  *   infoPlist?: string;
  *   entry?: string;
  *   app?: string;
@@ -64,6 +66,8 @@ function findProject(root, run = exec) {
       existing(path.join(androidMain, 'res', 'values', 'themes.xml')),
     manifest: existing(path.join(androidMain, 'AndroidManifest.xml')),
     appDelegate,
+    sceneDelegate:
+      appDelegate && existing(path.join(path.dirname(appDelegate), 'SceneDelegate.swift')),
     infoPlist: appDelegate && existing(path.join(path.dirname(appDelegate), 'Info.plist')),
     entry: ['index.js', 'index.ts', 'index.tsx']
       .map((name) => path.join(root, name))

package/cli/setup/index.js

@@ -16,6 +16,7 @@ const { planEntry, navigationFile, HOW_TO: ENTRY_HOW_TO } = require('./steps/ent
 const { planEnv, targetOf } = require('./steps/env');
 const { planInfoPlist } = require('./steps/infoPlist');
 const { planMainActivity } = require('./steps/mainActivity');
+const { planSceneDelegate } = require('./steps/sceneDelegate');
 const { planMainApplication } = require('./steps/mainApplication');
 const { planManifest } = require('./steps/manifest');
 const { planStyles } = require('./steps/styles');
@@ -83,6 +84,18 @@ function planProject(project) {
       planAppDelegate,
       notFound('AppDelegate.swift')
     ),
+    // React Native 0.88's template starts React Native in its scene delegate; the earlier templates have none.
+    ...(project.sceneDelegate
+      ? [
+          planFile(
+            'SceneDelegate.swift',
+            'ios',
+            project.sceneDelegate,
+            planSceneDelegate,
+            notFound('SceneDelegate.swift')
+          ),
+        ]
+      : []),
     planFile('Info.plist', 'ios', project.infoPlist, planInfoPlist, notFound('Info.plist')),
     planFile('index.js', 'js', project.entry, planEntry, ENTRY_HOW_TO),
   ];

package/cli/setup/steps/appDelegate.js

@@ -19,7 +19,10 @@ its delegate (the bundle URL) before calling super.
       self.reactNativeDelegate = ReactNativeDelegate()
       return super.application(application, didFinishLaunchingWithOptions: launchOptions)
     }
-  }`;
+  }
+
+ReactNativeDelegate is the app's RCTDefaultReactNativeFactoryDelegate, which gives the bundle URL (bundleURL()); in
+React Native 0.88's template that method is in SceneDelegate.`;
 
 // Lines of the template's launch: ANNAppDelegate does all of it.
 const TEMPLATE_LINES = [
@@ -42,6 +45,20 @@ const LAUNCH_OVERRIDE =
 const DELEGATE = /^([ \t]*)let\s+delegate\s*=\s*ReactNativeDelegate\(\)[ \t]*$/m;
 const RETURN_TRUE = /^([ \t]*)return\s+true[ \t]*$/m;
 
+// React Native 0.88's template starts React Native in its scene delegate: the app delegate only returns true. The
+// bundle URL moves into a delegate of React Native's factory, as the earlier templates had it.
+const REACT_NATIVE_DELEGATE = `class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
+  override func bundleURL() -> URL? {
+    #if DEBUG
+    RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
+    #else
+    Bundle.main.url(forResource: "main", withExtension: "jsbundle")
+    #endif
+  }
+}
+`;
+const RETURN_TRUE_OR_TRUE = /^([ \t]*)(?:return\s+)?true[ \t]*$/m;
+
 /**
  * AppDelegate.swift: the app delegate becomes an ANNAppDelegate.
  * @param {string} text
@@ -55,13 +72,30 @@ function planAppDelegate(text) {
     note: 'changed by hand, see below',
     howTo: HOW_TO,
   });
-  if (!HEADER.test(text) || !LAUNCH.test(text) || !DELEGATE.test(text)) return manual;
+  if (!HEADER.test(text) || !LAUNCH.test(text)) return manual;
+  let next = DELEGATE.test(text) ? fromFactoryLaunch(text) : fromSceneLaunch(text);
+  if (next === undefined) return manual;
 
+  // The dependency provider is ANNAppDelegate's now.
+  if (!/\bRCTAppDependencyProvider\b/.test(next)) {
+    next = next.replace(/^import\s+ReactAppDependencyProvider[ \t]*\n/m, '');
+  }
+  next = addImport(next, 'import ApexNavigation', { sorted: false });
+  return { status: 'change', next, note: 'ANNAppDelegate' };
+}
+
+/**
+ * The app delegate of the templates before React Native 0.88, which makes React Native's factory and window in its
+ * launch; undefined when the launch has code of the app's own that uses them.
+ * @param {string} text
+ * @returns {string | undefined}
+ */
+function fromFactoryLaunch(text) {
   let next = text
     .replace(HEADER, 'class $1: ANNAppDelegate {')
     .replace(LAUNCH, '$1override func$2');
   for (const line of TEMPLATE_LINES) {
-    if (!line.test(next)) return manual;
+    if (!line.test(next)) return undefined;
     next = next.replace(line, '');
   }
   next = next.replace(DELEGATE, '$1self.reactNativeDelegate = ReactNativeDelegate()');
@@ -69,10 +103,10 @@ function planAppDelegate(text) {
   // The launch now ends in super's, which starts React Native.
   const launchAt = next.search(LAUNCH_OVERRIDE);
   const returnAt = next.slice(launchAt).search(RETURN_TRUE);
-  if (returnAt < 0) return manual;
+  if (returnAt < 0) return undefined;
   const body = next.slice(launchAt, launchAt + returnAt).replace(/self\.reactNativeDelegate/g, '');
   // Code of the app's own that used the template's factory, delegate or window: it has to move by hand.
-  if (/\b(factory|delegate|window)\b/.test(body)) return manual;
+  if (/\b(factory|delegate|window)\b/.test(body)) return undefined;
   const rest = next
     .slice(launchAt + returnAt)
     .replace(
@@ -82,17 +116,38 @@ function planAppDelegate(text) {
   next = next.slice(0, launchAt + returnAt) + rest;
 
   // The blank lines the template's launch leaves behind.
-  next = next
+  return next
     .replace(/(class\s+\w+:\s*ANNAppDelegate\s*\{\n)(?:[ \t]*\n)+/, '$1')
     .replace(/(self\.reactNativeDelegate = ReactNativeDelegate\(\)\n)(?:[ \t]*\n)+/, '$1')
     .replace(/\n(?:[ \t]*\n)+([ \t]*return super\.application\()/, '\n$1');
+}
 
-  // The dependency provider is ANNAppDelegate's now.
-  if (!/\bRCTAppDependencyProvider\b/.test(next)) {
-    next = next.replace(/^import\s+ReactAppDependencyProvider[ \t]*\n/m, '');
+/**
+ * The app delegate of React Native 0.88's template, whose launch only returns true; undefined when the app delegate
+ * makes React Native or a window of its own.
+ * @param {string} text
+ * @returns {string | undefined}
+ */
+function fromSceneLaunch(text) {
+  if (/\b(RCTReactNativeFactory|ReactNativeDelegate|window)\b/.test(text)) return undefined;
+  let next = text
+    .replace(HEADER, 'class $1: ANNAppDelegate {')
+    .replace(LAUNCH, '$1override func$2');
+  const launchAt = next.search(LAUNCH_OVERRIDE);
+  const returnAt = next.slice(launchAt).search(RETURN_TRUE_OR_TRUE);
+  if (returnAt < 0) return undefined;
+  const rest = next
+    .slice(launchAt + returnAt)
+    .replace(
+      RETURN_TRUE_OR_TRUE,
+      '$1self.reactNativeDelegate = ReactNativeDelegate()\n' +
+        '$1return super.application(application, didFinishLaunchingWithOptions: launchOptions)'
+    );
+  next = `${next.slice(0, launchAt + returnAt)}${rest.trimEnd()}\n\n${REACT_NATIVE_DELEGATE}`;
+  for (const module of ['React', 'React_RCTAppDelegate']) {
+    next = addImport(next, `import ${module}`, { sorted: false });
   }
-  next = addImport(next, 'import ApexNavigation', { sorted: false });
-  return { status: 'change', next, note: 'ANNAppDelegate' };
+  return next;
 }
 
 module.exports = { planAppDelegate };