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

package/android/src/main/java/dev/apexnative/navigation/views/bottomtabs/BottomTabs.kt

@@ -228,13 +228,15 @@ class BottomTabs(context: Context) : BottomNavigationView(MaterialTheme.context(
         applyLongPressesAgain()
     }
 
-    fun setIcon(index: Int, icon: Drawable) {
+    /** Null: the item has no icon. */
+    fun setIcon(index: Int, icon: Drawable?) {
         val item = items.getOrNull(index) ?: return
         if (item.icon == icon) return
         updateIcon(index, item.copy(icon = icon))
     }
 
-    fun setSelectedIcon(index: Int, icon: Drawable) {
+    /** Null: the item shows its icon when selected too. */
+    fun setSelectedIcon(index: Int, icon: Drawable?) {
         val item = items.getOrNull(index) ?: return
         if (item.selectedIcon == icon) return
         updateIcon(index, item.copy(selectedIcon = icon))

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/fab/Fab.kt

@@ -4,12 +4,11 @@ import android.content.Context
 import android.content.res.ColorStateList
 import android.content.res.Configuration
 import android.graphics.Color
-import android.graphics.drawable.Drawable
 import com.google.android.material.floatingactionbutton.FloatingActionButton
 import dev.apexnative.navigation.options.params.ThemeColour
-import dev.apexnative.navigation.utils.ImageLoader
-import dev.apexnative.navigation.utils.ImageLoadingListenerAdapter
+import dev.apexnative.navigation.utils.ImageRequests
 import dev.apexnative.navigation.utils.MaterialTheme
+import dev.apexnative.navigation.utils.OptionImages
 import dev.apexnative.navigation.utils.UiUtils
 import dev.apexnative.navigation.viewcontrollers.viewcontroller.ScrollEventListener
 import androidx.appcompat.R as AppCompatR
@@ -29,6 +28,7 @@ class Fab(context: Context, val fabId: String) : FloatingActionButton(MaterialTh
     // The icon's color of the options: a container color merged later kept the theme's icon color instead.
     private var iconColor: Int? = null
     private var optionRippleColor: Int? = null
+    private val icons = ImageRequests<Unit>(OptionImages.source(this.context))
 
     init {
         // Material's theme overlay of the button is a copy of the theme, made once: it follows a light/dark switch too.
@@ -36,14 +36,18 @@ class Fab(context: Context, val fabId: String) : FloatingActionButton(MaterialTh
         MaterialTheme.followOverlay(this.context)
     }
 
-    fun applyIcon(icon: String, color: ThemeColour) {
+    /**
+     * The icon of the options, with its color. [mayWait]: the button can show it when it is ready (it shows an icon
+     * already, it is hidden with `visible: false`, or it is an action of a closed menu), so an icon the cache doesn't
+     * have loads off the main thread; the last icon asked for wins. Otherwise it loads at once. An icon that doesn't
+     * load leaves the button without an icon.
+     */
+    fun applyIcon(icon: String, color: ThemeColour, mayWait: Boolean) {
         if (color.hasValue()) iconColor = color.get()
-        ImageLoader().loadIcon(context, icon, object : ImageLoadingListenerAdapter() {
-            override fun onComplete(drawable: Drawable) {
-                setImageDrawable(drawable)
-                iconColor?.let { imageTintList = ColorStateList.valueOf(it) }
-            }
-        })
+        icons.request(Unit, icon, mayWait) { drawable ->
+            setImageDrawable(drawable)
+            iconColor?.let { imageTintList = ColorStateList.valueOf(it) }
+        }
     }
 
     /** iconColor alone, without a new icon: it did nothing in a merge. */

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/cli/doctor/checks/app.js

@@ -11,8 +11,10 @@ const {
   reactNativeVersion,
   usesExpo,
 } = require('../../app');
+const { mainActivity } = require('../../links/native');
 const { findProject } = require('../../project');
 const { codeOf } = require('../../setup/source');
+const { loadsReactNativeItself } = require('../../setup/steps/mainApplication');
 const { planCodegen } = require('../../codegen');
 const { readConfig } = require('../../config');
 const { planProject } = require('../../setup');
@@ -27,6 +29,16 @@ const { splashChecks } = require('./splash');
 const SETUP = { label: 'npx apex-navigation setup', run: /** @type {const} */ ('setup') };
 const GENERATED = ['ApexNavigation.generated.swift', 'ApexNavigationGenerated.kt'];
 const CODEGEN = { label: 'npx apex-navigation codegen', run: /** @type {const} */ ('codegen') };
+// The changes the main activity must handle itself; the template's value has them all.
+const CONFIG_CHANGES = [
+  'orientation',
+  'screenSize',
+  'smallestScreenSize',
+  'screenLayout',
+  'uiMode',
+];
+const TEMPLATE_CONFIG_CHANGES =
+  'keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode';
 
 /**
  * React Native, the navigation, and the files setup sets up.
@@ -122,28 +134,64 @@ function appChecks({ root, run }) {
     });
   }
 
+  const configChanges = configChangesCheck(project.manifest);
+  if (configChanges) checks.push(configChanges);
+
   checks.push(...splashChecks(root, project), ...iconChecks(root, project));
 
-  // A second load of React Native crashes the app on start: the most common slip of a setup by hand.
+  // NavigationApplication leaves the load of React Native to the template's call: without it the app closes on start,
+  // and so it does with a second load of the app's own next to it.
   const application = project.mainApplication && fs.readFileSync(project.mainApplication, 'utf8');
-  if (
-    application &&
-    /:\s*NavigationApplication\(\)/.test(application) &&
-    /\bloadReactNative\s*\(/.test(codeOf(application))
-  ) {
-    checks.push({
-      group: 'app',
-      title: 'React Native loads twice',
-      status: 'error',
-      detail: 'MainApplication.kt calls loadReactNative(this), NavigationApplication loads it too',
-      fix: { label: 'Remove loadReactNative(this) from MainApplication.kt' },
-    });
+  if (application && /:\s*NavigationApplication\(/.test(application)) {
+    const loads = /\bloadReactNative\s*\(/.test(codeOf(application));
+    if (!loads) {
+      checks.push({
+        group: 'app',
+        title: 'React Native not loaded',
+        status: 'error',
+        detail: "MainApplication.kt doesn't call loadReactNative(this) in onCreate",
+        fix: SETUP,
+      });
+    } else if (loadsReactNativeItself(application)) {
+      checks.push({
+        group: 'app',
+        title: 'React Native loads twice',
+        status: 'error',
+        detail:
+          'MainApplication.kt loads React Native itself (SoLoader.init or the New Architecture entry point) next to loadReactNative(this)',
+        fix: SETUP,
+      });
+    }
   }
   const generated = generatedCheck(root, run);
   if (generated) checks.push(generated);
   return checks;
 }
 
+/**
+ * Whether the main activity handles the changes of its window itself, as the React Native template has it. Without
+ * one of them Android recreates the activity on a rotation, a resize, a fold or a light/dark switch: every screen goes
+ * with it and the navigation starts again from its root. Nothing without a manifest or a main activity.
+ * @param {string | undefined} manifest
+ * @returns {Check | undefined}
+ */
+function configChangesCheck(manifest) {
+  if (!manifest || !fs.existsSync(manifest)) return undefined;
+  const activity = mainActivity(fs.readFileSync(manifest, 'utf8'));
+  if (!activity) return undefined;
+  const value = /android:configChanges\s*=\s*(?:"([^"]*)"|'([^']*)')/.exec(activity.text);
+  const declared = (value?.[1] ?? value?.[2] ?? '').split('|').map((change) => change.trim());
+  const missing = CONFIG_CHANGES.filter((change) => !declared.includes(change));
+  if (missing.length === 0) return undefined;
+  return {
+    group: 'app',
+    title: 'Config changes',
+    status: 'warn',
+    detail: `the main activity doesn't handle ${missing.join(', ')}: Android recreates it, and every screen with it`,
+    fix: { label: `Set android:configChanges="${TEMPLATE_CONFIG_CHANGES}" on the main activity` },
+  };
+}
+
 /**
  * One line for a few files: set up, or which need setup or a change by hand.
  * @param {string} title

package/cli/migrate/native.js

@@ -3,6 +3,7 @@
 
 const fs = require('node:fs');
 const path = require('node:path');
+const { withReactNativeLoaded } = require('../setup/steps/mainApplication');
 
 /** @typedef {import('../changes').FileChange} FileChange */
 /** @typedef {import('./report').ReportItem} ReportItem */
@@ -158,6 +159,23 @@ function planNative(project) {
     const before = fs.readFileSync(file, 'utf8');
     let next = before;
     for (const [pattern, replacement] of rewrite.rules) next = next.replace(pattern, replacement);
+    // react-native-navigation loaded React Native itself; the navigation's application leaves it to the template's
+    // loadReactNative(this), which such an app doesn't have.
+    if (file === project.mainApplication && /:\s*NavigationApplication\(/.test(next)) {
+      const loaded = withReactNativeLoaded(next);
+      if (loaded !== undefined) next = loaded;
+      else {
+        report.push({
+          file: path.relative(root, file),
+          line: 1,
+          step: 'native',
+          before: 'onCreate',
+          after: 'super.onCreate() then loadReactNative(this), and no load of its own',
+          what: 'React Native loads through loadReactNative(this) in onCreate: add it by hand',
+          docs: `${DOCS}#native`,
+        });
+      }
+    }
     if (next !== before) {
       changes.push({
         name: path.basename(file),

package/cli/setup/source.js

@@ -35,7 +35,8 @@ function removeUnusedImports(text, names) {
   for (const name of names) {
     const line = new RegExp(`^import\\s+${escape(name)}[ \\t]*\\r?\\n`, 'm');
     const simple = name.slice(name.lastIndexOf('.') + 1);
-    const code = result.replace(/^import\s.*$/gm, '');
+    // A name in a comment is no use of the import.
+    const code = codeOf(result).replace(/^import\s.*$/gm, '');
     if (line.test(result) && !new RegExp(`\\b${escape(simple)}\\b`).test(code))
       result = result.replace(line, '');
   }

package/cli/setup/steps/mainApplication.js

@@ -5,24 +5,51 @@ const { addImport, codeOf, removeUnusedImports } = require('../source');
 
 /** @typedef {import('./types').StepResult} StepResult */
 
-const HOW_TO = `Extend NavigationApplication. It loads React Native itself, so loadReactNative(this) goes:
-calling it again crashes the app on start.
+const HOW_TO = `Extend NavigationApplication and keep the template's loadReactNative(this) in onCreate: it loads
+React Native as the app's Gradle files say, and the navigation makes its React host after it.
 
+  import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative
   import dev.apexnative.navigation.NavigationApplication
 
   class MainApplication : NavigationApplication() {
     override val reactHost: ReactHost by lazy { ... }   // as it is
+
+    override fun onCreate() {
+      super.onCreate()
+      loadReactNative(this)
+    }
   }`;
 
+const LOAD_IMPORT = 'import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative';
+
 // Imports of the template that the change leaves unused.
-const TEMPLATE_IMPORTS = [
-  'android.app.Application',
-  'com.facebook.react.ReactApplication',
-  'com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative',
+const TEMPLATE_IMPORTS = ['android.app.Application', 'com.facebook.react.ReactApplication'];
+
+// A load of React Native of the app's own, next to loadReactNative(this) a second one that crashes the app at start:
+// the New Architecture's entry point (react-native-navigation's apps call it in onCreate) and SoLoader.
+// A bare `load()` is the entry point's only where the file imports it. A form these don't take out (`load` with
+// arguments, an `if` without braces) is left to the app's author.
+const OWN_LOAD = [
+  /^[ \t]*if\s*\(\s*BuildConfig\.IS_NEW_ARCHITECTURE_ENABLED\s*\)\s*\{(?:\s*\/\/[^\n]*)*\s*DefaultNewArchitectureEntryPoint\.load\(\)\s*\}[ \t]*\r?\n/gm,
+  /^[ \t]*DefaultNewArchitectureEntryPoint\.load\(\)[ \t]*\r?\n/gm,
+  /^[ \t]*SoLoader\.init\([^\n]*\)[ \t]*\r?\n/gm,
+];
+const BARE_LOAD = [
+  /^[ \t]*if\s*\(\s*BuildConfig\.IS_NEW_ARCHITECTURE_ENABLED\s*\)\s*\{(?:\s*\/\/[^\n]*)*\s*load\(\)\s*\}[ \t]*\r?\n/gm,
+  /^[ \t]*load\(\)[ \t]*\r?\n/gm,
+];
+const BARE_LOAD_IMPORT =
+  /^import\s+com\.facebook\.react\.defaults\.DefaultNewArchitectureEntryPoint\.load\b/m;
+const OWN_LOAD_IMPORTS = [
+  'com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load',
+  'com.facebook.react.defaults.DefaultNewArchitectureEntryPoint',
+  'com.facebook.soloader.SoLoader',
+  'com.facebook.react.soloader.OpenSourceMergedSoMapping',
 ];
 
 /**
- * MainApplication.kt: the application becomes a NavigationApplication.
+ * MainApplication.kt: the application becomes a NavigationApplication, and loads React Native in its onCreate as the
+ * template does.
  * @param {string} text
  * @returns {StepResult}
  */
@@ -32,21 +59,20 @@ function planMainApplication(text) {
     note: 'changed by hand, see below',
     howTo: HOW_TO,
   });
-  if (/:\s*NavigationApplication\(\)/.test(text)) {
-    return /\bloadReactNative\s*\(/.test(codeOf(text))
+  if (/:\s*NavigationApplication\(/.test(text)) {
+    if (loadsReactNative(text) && !loadsReactNativeItself(text)) {
+      return { status: 'done', note: 'already set up' };
+    }
+    const next = withReactNativeLoaded(text);
+    return next === undefined
       ? manual
-      : { status: 'done', note: 'already set up' };
+      : { status: 'change', next, note: 'loadReactNative(this) in onCreate' };
   }
   const header = /class\s+(\w+)\s*:\s*Application\(\)\s*,\s*ReactApplication\b/;
   if (!header.test(text)) return manual;
-  let next = text.replace(header, 'class $1 : NavigationApplication()');
-  // The template's onCreate only loads React Native, so it goes; another one keeps the rest of its code.
-  next = next.replace(
-    /\n\n?[ \t]*override\s+fun\s+onCreate\(\)\s*\{\s*super\.onCreate\(\)\s*loadReactNative\(this\)\s*\}/,
-    ''
-  );
-  next = next.replace(/^[ \t]*loadReactNative\(this\)[ \t]*\r?\n/m, '');
-  if (/\bloadReactNative\s*\(/.test(codeOf(next))) return manual;
+  // The template's onCreate stays: its loadReactNative(this) loads React Native for the navigation too.
+  let next = withReactNativeLoaded(text.replace(header, 'class $1 : NavigationApplication()'));
+  if (next === undefined) return manual;
   // Added first: with the template's imports gone the file would have none to sort it among.
   next = addImport(next, 'import dev.apexnative.navigation.NavigationApplication', {
     sorted: true,
@@ -55,4 +81,93 @@ function planMainApplication(text) {
   return { status: 'change', next, note: 'NavigationApplication' };
 }
 
-module.exports = { planMainApplication };
+/**
+ * Whether the code of the file, not a comment, calls loadReactNative.
+ * @param {string} text
+ */
+function loadsReactNative(text) {
+  return /\bloadReactNative\s*\(/.test(codeOf(text));
+}
+
+/**
+ * Whether the code of the file loads React Native on its own as well: the New Architecture's entry point or SoLoader.
+ * @param {string} text
+ */
+function loadsReactNativeItself(text) {
+  const code = codeOf(text);
+  return (
+    /\bSoLoader\.init\s*\(/.test(code) ||
+    /\bDefaultNewArchitectureEntryPoint\.load\s*\(/.test(code) ||
+    (BARE_LOAD_IMPORT.test(text) && /(?<![\w.])load\s*\(/.test(code))
+  );
+}
+
+/**
+ * The application with `loadReactNative(this)` in its onCreate, after `super.onCreate()`: as it is when it has the
+ * call, with an onCreate of the template's when it has none. Undefined for an onCreate that doesn't call
+ * `super.onCreate()`, whose order only its author knows.
+ * @param {string} text
+ * @returns {string | undefined}
+ */
+function withReactNativeLoaded(text) {
+  let without = text;
+  const patterns = BARE_LOAD_IMPORT.test(text) ? [...OWN_LOAD, ...BARE_LOAD] : OWN_LOAD;
+  for (const pattern of patterns) without = without.replace(pattern, '');
+  without = removeUnusedImports(without, OWN_LOAD_IMPORTS);
+  if (loadsReactNativeItself(without)) return undefined;
+  if (loadsReactNative(without)) return without;
+  return withLoadCall(without);
+}
+
+/**
+ * @param {string} text an application without a load of React Native
+ * @returns {string | undefined}
+ */
+function withLoadCall(text) {
+  let next;
+  const superCall = /^([ \t]*)super\.onCreate\(\)[ \t]*\r?\n/m;
+  if (/\boverride\s+fun\s+onCreate\s*\(/.test(text)) {
+    if (!superCall.test(text)) return undefined;
+    next = text.replace(superCall, (line, indent) => `${line}${indent}loadReactNative(this)\n`);
+  } else {
+    const close = classEnd(text);
+    if (close === undefined) return undefined;
+    const indent = /^([ \t]+)override\b/m.exec(text)?.[1] ?? '  ';
+    const body = text.slice(0, close).replace(/\s*$/, '');
+    const onCreate = [
+      '',
+      `${indent}override fun onCreate() {`,
+      `${indent}${indent}super.onCreate()`,
+      `${indent}${indent}loadReactNative(this)`,
+      `${indent}}`,
+    ].join('\n');
+    next = `${body}\n${onCreate}\n${text.slice(close)}`;
+  }
+  return addImport(next, LOAD_IMPORT, { sorted: true });
+}
+
+/**
+ * The index of the closing brace of the file's application class: its braces counted from the class's own, past any
+ * declaration or comment after it. Undefined when the braces don't close.
+ * @param {string} text
+ * @returns {number | undefined}
+ */
+function classEnd(text) {
+  // The comments and the string and character literals blanked out, so that an index in it is one in the text and a
+  // brace in a literal doesn't count.
+  const blank = (/** @type {string} */ part) => part.replace(/[^\n]/g, ' ');
+  const code = text
+    .replace(/\/\*[\s\S]*?\*\//g, blank)
+    .replace(/\/\/.*$/gm, blank)
+    .replace(/"(?:[^"\\\n]|\\.)*"|'(?:[^'\\\n]|\\.)*'/g, blank);
+  const header = /\bclass\s+\w+\s*:[^{]*\{/.exec(code);
+  if (!header) return undefined;
+  let depth = 0;
+  for (let index = header.index + header[0].length - 1; index < code.length; index++) {
+    if (code[index] === '{') depth++;
+    else if (code[index] === '}' && --depth === 0) return index;
+  }
+  return undefined;
+}
+
+module.exports = { planMainApplication, withReactNativeLoaded, loadsReactNativeItself };