@ng-native/router 0.17.0 → 0.18.0

package/dist/native-stack-outlet.d.ts

@@ -19,6 +19,14 @@
 import { type ComponentRef, type EnvironmentInjector, type OnInit } from '@angular/core';
 import { ActivatedRoute, type Data, type RouterOutletContract } from '@angular/router';
 import * as i0 from "@angular/core";
+interface Rewind {
+    navigation: number;
+    steps: number;
+    /** The url the screen gone back to showed when it was covered, if known. */
+    url?: string;
+}
+/** The rewind a router's navigation in flight is waiting to make, if any. Exposed for tests. */
+export declare function pendingRewind(router: object): Rewind | undefined;
 export declare class NativeStackOutlet implements RouterOutletContract, OnInit {
     /**
      * Named outlets work exactly as on the web: `<native-stack-outlet name="list" />` is filled by
@@ -39,6 +47,7 @@ export declare class NativeStackOutlet implements RouterOutletContract, OnInit {
      * `RouterOutletContract` directly, which is how its own tests drive it.
      */
     private readonly router;
+    private readonly routerConfig;
     /** For a refused back to reach the screen as native's own report would. */
     private readonly engine;
     private readonly errors;
@@ -49,6 +58,8 @@ export declare class NativeStackOutlet implements RouterOutletContract, OnInit {
     private held;
     private readonly statusBar;
     private readonly navigationBar;
+    /** iOS 26 and later, where a screen runs under its navigation bar: see `insetContent`. */
+    private readonly underBar;
     /** Both bars' claims, as the screens carry them. */
     private readonly systemBars;
     private readonly entries;
@@ -57,6 +68,11 @@ export declare class NativeStackOutlet implements RouterOutletContract, OnInit {
      * succeeds: one that fails leaves the stack as it was.
      */
     private superseded;
+    /**
+     * The screens a navigation back to `kept`, further down, took off the stack, kept until it
+     * succeeds as superseded ones are: one that fails puts them back, and `kept` as it was.
+     */
+    private popped;
     protected readonly fill: {
         flex: number;
     };
@@ -170,6 +186,35 @@ export declare class NativeStackOutlet implements RouterOutletContract, OnInit {
      * superseded goes at once.
      */
     private supersede;
+    /**
+     * Take `above` off the stack for a navigation back to `kept`: at once when there is no navigation
+     * to wait for, and otherwise once it has succeeded. They stay on the native stack until then, and
+     * the navigation ends before anything commits, so native sees one change or none.
+     */
+    private pop;
+    /** Take out for good what a navigation that succeeded popped. */
+    private dropPopped;
+    /** Put back what a navigation that failed popped, and the screen it went back to as it was. */
+    private unpop;
+    /** The history entries the navigation in flight adds: none where it skips or replaces one. */
+    private entriesAdded;
+    /**
+     * A navigation the history did not drive went back to a screen kept further down, taking
+     * `dropped` screens off: a back has already moved the history, and a navigation that skips the
+     * location change leaves it where it is. `url` is the one the screen gone back to was showing.
+     */
+    private rewindAfter;
+    /**
+     * Back to the kept screen's own entry, when it is the one that far back, with no popstate: the
+     * router is there already. The entry keeps its state, the screen's presentation with it, and
+     * takes the navigation's id, as the router writes one into the entry a back reaches. A stack in
+     * a tab whose history went through another tab has that tab's entry there, and is left as it is.
+     *
+     * A navigation to another page under the kept screen, such as a step in a stack inside it, finds
+     * the url that screen was showing there instead. The page's own entry stays, and the entries of
+     * the screens taken off between the two go.
+     */
+    private rewind;
     /** A navigation succeeded: what it superseded goes, and what it did is no longer undoable. */
     private settle;
     /**
@@ -180,6 +225,12 @@ export declare class NativeStackOutlet implements RouterOutletContract, OnInit {
      * stack inside it. That one goes, with everything in it, and the screen it covered carries on.
      */
     private rollBack;
+    /**
+     * Give the router's context for this outlet back the outlet contexts of the top screen, which the
+     * navigation took when it covered that screen: the next navigation finds the outlets inside the
+     * screen through them.
+     */
+    private recover;
     /**
      * Give the top screen back its change detection when the router covered it for a navigation
      * that is not going to happen: the one given, or the one in progress.
@@ -191,6 +242,22 @@ export declare class NativeStackOutlet implements RouterOutletContract, OnInit {
      * the same merge a page's own host style gets, just asserted last so the stack's layout wins.
      */
     private fillScreen;
+    /**
+     * On iOS 26 and later, the view a page's content commits in, as react-native-screens'
+     * `ScreenStackItem` wraps it in its `SafeAreaView` there. From 4.30 the screen runs under the
+     * navigation bar whether the bar is opaque or not
+     * (`+[RNSScreenStackHeaderConfig screensExtendUnderOpaqueNavigationBar]`), and this view insets
+     * the content below an opaque one. Before 4.30 the screen starts below such a bar, its safe area
+     * is zero at the top, and the view insets by nothing. Null elsewhere: the content commits
+     * straight into the screen.
+     */
+    private insetContent;
+    /**
+     * The top edge while the page's header is shown and not translucent, which a large title on iOS
+     * is, and no edge otherwise, as `getSafeAreaEdges` in `ScreenStackItem` chooses. The view stays
+     * when the header changes, so the content is not made again. Native takes all four edges.
+     */
+    private followHeader;
     private createScreen;
     /**
      * Puts the app's status bar and navigation bar claims on a screen that has no value of its own
@@ -228,6 +295,13 @@ export declare class NativeStackOutlet implements RouterOutletContract, OnInit {
      * way, through the engine, as if native had sent it.
      */
     private refusesButton;
+    /**
+     * Android's header back arrow on `screen`: refused where the screen refuses, as Back is, and
+     * otherwise a step back, or the presented page dismissed when the screen is that page's.
+     * react-native-screens sends the arrow of a stack's first screen on the screen the stack sits
+     * in, which holds the top screen's refusal for it.
+     */
+    private onHeaderBack;
     /** Refuses Android's Back for a screen that sets `preventNativeDismiss`, and tells its page. */
     private refuseBack;
     /**
@@ -256,8 +330,16 @@ export declare class NativeStackOutlet implements RouterOutletContract, OnInit {
      * `popBy` does when a tab's history interleaves.
      */
     private popToEntry;
+    /**
+     * Send the router to `entry` by a navigation that replaces the entry, for a pop the history
+     * behind cannot make. With the same url on the stack twice, the reuse strategy is told which of
+     * the screens at it this is.
+     */
+    private navigateDownTo;
     /** Whether the navigation that happens next succeeds. */
     private nextNavigation;
+    /** The url the app showed before the navigation in flight, as the router writes it. */
+    private previousUrl;
     /** The url a screen was showing when it was covered, rebuilt from its own route snapshot. */
     private urlOf;
     /**
@@ -276,3 +358,4 @@ export declare class NativeStackOutlet implements RouterOutletContract, OnInit {
     static ɵfac: i0.ɵɵFactoryDeclaration<NativeStackOutlet, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NativeStackOutlet, "native-stack-outlet", never, {}, {}, never, never, true, never>;
 }
+export {};

package/dist/native-stack-outlet.js

@@ -17,19 +17,20 @@
  * (tabs), where every screen is mounted at once.
  */
 import { ApplicationRef, Component, DestroyRef, ElementRef, ErrorHandler, HostAttributeToken, InjectionToken, Injector, Renderer2, afterEveryRender, computed, createComponent, effect, inject, signal, untracked, } from '@angular/core';
-import { ActivatedRoute, ChildrenOutletContexts, NavigationCancel, NavigationEnd, NavigationError, PRIMARY_OUTLET, Router, createUrlTreeFromSnapshot, } from '@angular/router';
+import { ActivatedRoute, ChildrenOutletContexts, NavigationCancel, NavigationEnd, NavigationError, PRIMARY_OUTLET, ROUTER_CONFIGURATION, Router, createUrlTreeFromSnapshot, } from '@angular/router';
 import { Location, PlatformLocation } from '@angular/common';
-import { NavigationBar, SCREEN_IN_FRONT, StatusBar } from '@ng-native/device';
+import { NavigationBar, OS_VERSION, SCREEN_IN_FRONT, StatusBar } from '@ng-native/device';
 import { bindRouteInputs } from "./bind-route-inputs.js";
-import { NativeBack, isShowing } from "./native-back.js";
+import { NativeBack, isShowing, restoreSnapshot } from "./native-back.js";
 import { navigationIntent } from "./native-navigation.js";
 import { NativePlatformLocation } from "./native-platform-location.js";
 import { PRESENTED, withoutPresented } from "./presented-route.js";
+import { poppingTo } from "./popping-to.js";
 import { markScreenRoute } from "./tab-routes.js";
 import { IN_TAB } from "./in-tab.js";
 import { ownHost } from "./own-host.js";
 import { SCREEN_HEADER } from "./screen-header.js";
-import { HostEngine } from '@ng-native/fabric';
+import { HostEngine, nativePlatform } from '@ng-native/fabric';
 import { ActivityState } from "./screens.js";
 import * as i0 from "@angular/core";
 /**
@@ -41,6 +42,16 @@ import * as i0 from "@angular/core";
  * push inside that stack must see it as a pushed screen, not one to present over.
  */
 const presented = new WeakMap();
+/**
+ * The history entries, per router, that the navigation in flight took screens off for. A
+ * navigation back to a screen holding a stack of its own drops screens in both stacks, and the
+ * rewind to its entry goes back over all of them, once.
+ */
+const rewinds = new WeakMap();
+/** The rewind a router's navigation in flight is waiting to make, if any. Exposed for tests. */
+export function pendingRewind(router) {
+    return rewinds.get(router);
+}
 /** What every screen needs to fill the stack, the same five keys RNSScreen itself expects. */
 const FILL = { position: 'absolute', left: 0, right: 0, top: 0, bottom: 0 };
 /** A swipe-back area with no limit on any edge. */
@@ -79,6 +90,7 @@ export class NativeStackOutlet {
      * `RouterOutletContract` directly, which is how its own tests drive it.
      */
     router = inject(Router, { optional: true });
+    routerConfig = inject(ROUTER_CONFIGURATION, { optional: true });
     /** For a refused back to reach the screen as native's own report would. */
     engine = inject(HostEngine, { optional: true });
     errors = inject(ErrorHandler);
@@ -89,6 +101,8 @@ export class NativeStackOutlet {
     held = null;
     statusBar = inject(StatusBar);
     navigationBar = inject(NavigationBar);
+    /** iOS 26 and later, where a screen runs under its navigation bar: see `insetContent`. */
+    underBar = nativePlatform() === 'ios' && (inject(OS_VERSION) ?? 0) >= 26;
     /** Both bars' claims, as the screens carry them. */
     systemBars = computed(() => ({
         ...this.statusBar.forScreens(),
@@ -101,6 +115,11 @@ export class NativeStackOutlet {
      * succeeds: one that fails leaves the stack as it was.
      */
     superseded = null;
+    /**
+     * The screens a navigation back to `kept`, further down, took off the stack, kept until it
+     * succeeds as superseded ones are: one that fails puts them back, and `kept` as it was.
+     */
+    popped = null;
     fill = { flex: 1 };
     constructor() {
         ownHost(this.host.nativeElement);
@@ -110,11 +129,8 @@ export class NativeStackOutlet {
         // Android's back button, and `NativeNavigation.back()`. Declining at the bottom of the stack
         // is deliberate: the outlet this one sits in gets its turn, and when none takes it the
         // platform backgrounds the app, which is what a user expects, rather than the app swallowing
-        // the press and appearing stuck.
-        //
-        // Not yet verified on a device: whether react-native-screens' own Android back handling
-        // (`nativeBackButtonDismissalEnabled`) also pops the screen, which would make one press pop
-        // twice. If a back press ever skips a screen on Android, look here first.
+        // the press and appearing stuck. react-native-screens' Android stack leaves the button to JS;
+        // its header's back arrow comes through `onHeaderBack`.
         const back = this.back;
         const unsubscribeBack = back.handle((from) => from === 'button' && this.refusesButton() ? true : this.goBack());
         const unsubscribeStack = back.addStack({
@@ -134,8 +150,10 @@ export class NativeStackOutlet {
         });
         // Optional for the same reason as the router: the outlet's own tests stand one in without it.
         const navigations = this.router?.events?.subscribe((event) => {
-            if (event instanceof NavigationEnd)
+            // A cancel after activation is one the router does not undo: a page it created navigated.
+            if (event instanceof NavigationEnd || event instanceof NavigationCancel) {
                 this.settle(event.id);
+            }
             else if (event instanceof NavigationError)
                 this.rollBack(event.id);
         });
@@ -161,11 +179,12 @@ export class NativeStackOutlet {
             unsubscribeBack();
             unsubscribeStack();
             navigations?.unsubscribe();
-            for (const entry of this.entries) {
+            for (const entry of [...this.entries, ...(this.popped?.entries ?? [])]) {
                 entry.unbind();
                 entry.ref.destroy();
             }
             this.entries.length = 0;
+            this.popped = null;
             // Only while it is this outlet's: a page kept by the reuse strategy takes its outlets'
             // registrations with it, and gets them back as it is attached, before what was over it goes.
             if (this.parentContexts.getContext(this.name)?.outlet === this) {
@@ -360,6 +379,7 @@ export class NativeStackOutlet {
             detached: false,
             unbind,
             presentation,
+            entries: this.entriesAdded(),
             activatedIn: navigation,
             inFront,
         });
@@ -376,13 +396,18 @@ export class NativeStackOutlet {
     createPage(component, route, environmentInjector, screen, inFront, outlet = this.name) {
         let ref;
         let unbind;
+        const header = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+        const content = this.insetContent(screen);
         try {
             ref = createComponent(component, {
                 environmentInjector,
-                elementInjector: this.outletInjector(route, inFront, screen, outlet),
+                elementInjector: this.outletInjector(route, inFront, screen, header, outlet),
                 hostElement: screen,
             });
             this.applicationRef.attachView(ref.hostView);
+            if (content)
+                this.followHeader(content, header, ref.injector);
             // Route params onto inputs before the first change detection, not after: a required input
             // read in the template throws NG0950 if it is still unset when the page first renders.
             unbind = this.bindInputs(ref, route);
@@ -425,6 +450,16 @@ export class NativeStackOutlet {
             throw new Error('[angular-native] outlet is not activated, nothing to detach');
         entry.detached = true;
         entry.detachedIn = this.navigationId();
+        const context = this.parentContexts.getContext(this.name);
+        entry.covered =
+            context && entry.detachedIn !== undefined
+                ? {
+                    navigation: entry.detachedIn,
+                    children: context.children,
+                    snapshot: entry.route.snapshot,
+                    url: this.previousUrl(),
+                }
+                : undefined;
         entry.inFront.set(false);
         // `ChangeDetectorRef.detach`, not `ApplicationRef.detachView`. The latter calls
         // `renderDetachView` and pulls the view's nodes out of the tree, which is exactly what we
@@ -457,12 +492,13 @@ export class NativeStackOutlet {
             this.applicationRef.attachView(ref.hostView);
         }
         else {
-            for (const above of this.entries.splice(index + 1))
-                this.drop(above);
+            const entry = this.entries[index];
+            const above = this.entries.splice(index + 1);
+            if (above.length)
+                this.pop(entry, above);
             if (this.currentIntent()?.stack === 'reset') {
                 this.supersede(this.entries.slice(0, index), this.navigationId());
             }
-            const entry = this.entries[index];
             entry.detached = false;
             entry.inFront.set(true);
             entry.route = route;
@@ -573,13 +609,116 @@ export class NativeStackOutlet {
         }
         this.superseded = { entries, navigation };
     }
+    /**
+     * Take `above` off the stack for a navigation back to `kept`: at once when there is no navigation
+     * to wait for, and otherwise once it has succeeded. They stay on the native stack until then, and
+     * the navigation ends before anything commits, so native sees one change or none.
+     */
+    pop(kept, above) {
+        this.rewindAfter(above, kept.covered?.url);
+        const navigation = this.navigationId();
+        if (navigation === undefined) {
+            for (const entry of above)
+                this.drop(entry);
+            return;
+        }
+        // The router has moved the route on to the navigation's snapshot already.
+        const snapshot = kept.covered?.snapshot ?? kept.route.snapshot;
+        this.popped = { navigation, entries: above, kept, snapshot, detachedIn: kept.detachedIn };
+    }
+    /** Take out for good what a navigation that succeeded popped. */
+    dropPopped(navigation) {
+        if (this.popped?.navigation !== navigation)
+            return;
+        for (const entry of this.popped.entries)
+            this.drop(entry);
+        this.popped = null;
+    }
+    /** Put back what a navigation that failed popped, and the screen it went back to as it was. */
+    unpop(navigation) {
+        const popped = this.popped;
+        if (popped?.navigation !== navigation)
+            return;
+        this.popped = null;
+        const { kept } = popped;
+        restoreSnapshot(kept.route, popped.snapshot);
+        kept.detached = true;
+        kept.detachedIn = popped.detachedIn;
+        kept.inFront.set(false);
+        kept.ref.hostView.detach();
+        this.entries.push(...popped.entries);
+    }
+    /** The history entries the navigation in flight adds: none where it skips or replaces one. */
+    entriesAdded() {
+        const extras = this.router?.getCurrentNavigation()?.extras;
+        return extras?.skipLocationChange || extras?.replaceUrl ? 0 : 1;
+    }
+    /**
+     * A navigation the history did not drive went back to a screen kept further down, taking
+     * `dropped` screens off: a back has already moved the history, and a navigation that skips the
+     * location change leaves it where it is. `url` is the one the screen gone back to was showing.
+     */
+    rewindAfter(dropped, url) {
+        const navigation = this.router?.getCurrentNavigation();
+        if (!navigation || navigation.trigger === 'popstate' || navigation.extras.skipLocationChange) {
+            return;
+        }
+        // A router that resolves a cancelled navigation by computing how far to go in history counts
+        // its own entries, and a rewind it did not make would put that count out of step.
+        if (this.routerConfig?.canceledNavigationResolution === 'computed')
+            return;
+        // A screen restored from another outlet has no count here, and is taken to have added one.
+        const added = dropped.reduce((total, entry) => total + (entry.entries ?? 1), 0);
+        const pending = rewinds.get(this.router);
+        // An outlet inside the screen gone back to activates after the one holding it, so the last
+        // url is the innermost screen's, the one whose entry is furthest back.
+        if (pending?.navigation === navigation.id) {
+            pending.steps += added;
+            pending.url = url;
+        }
+        else {
+            const steps = added + this.entriesAdded();
+            rewinds.set(this.router, { navigation: navigation.id, steps, url });
+        }
+    }
+    /**
+     * Back to the kept screen's own entry, when it is the one that far back, with no popstate: the
+     * router is there already. The entry keeps its state, the screen's presentation with it, and
+     * takes the navigation's id, as the router writes one into the entry a back reaches. A stack in
+     * a tab whose history went through another tab has that tab's entry there, and is left as it is.
+     *
+     * A navigation to another page under the kept screen, such as a step in a stack inside it, finds
+     * the url that screen was showing there instead. The page's own entry stays, and the entries of
+     * the screens taken off between the two go.
+     */
+    rewind({ navigation, steps, url }) {
+        const history = this.history;
+        if (!(history instanceof NativePlatformLocation))
+            return;
+        const behind = this.historyUrl(-steps);
+        if (behind !== this.router.url) {
+            if (url !== undefined && behind === url)
+                history.ɵdropBehind(steps - 1);
+            return;
+        }
+        history.ɵrewind(steps);
+        const state = history.getState();
+        const own = state && typeof state === 'object' ? state : {};
+        history.replaceState({ ...own, navigationId: navigation }, '', history.ɵurlAt(0));
+    }
     /** A navigation succeeded: what it superseded goes, and what it did is no longer undoable. */
     settle(navigation) {
+        const pending = this.router && rewinds.get(this.router);
+        if (pending?.navigation === navigation) {
+            rewinds.delete(this.router);
+            this.rewind(pending);
+        }
         if (this.superseded?.navigation === navigation) {
             for (const entry of this.superseded.entries)
                 this.remove(entry);
             this.superseded = null;
         }
+        this.dropPopped(navigation);
         for (const entry of this.entries) {
             if (entry.activatedIn === navigation)
                 entry.activatedIn = undefined;
@@ -595,12 +734,28 @@ export class NativeStackOutlet {
      * stack inside it. That one goes, with everything in it, and the screen it covered carries on.
      */
     rollBack(navigation) {
+        if (this.router && rewinds.get(this.router)?.navigation === navigation) {
+            rewinds.delete(this.router);
+        }
         if (this.superseded?.navigation === navigation)
             this.superseded = null;
+        this.unpop(navigation);
         for (const entry of this.entries.filter((candidate) => candidate.activatedIn === navigation)) {
             this.remove(entry);
         }
         this.uncover(navigation);
+        this.recover(navigation);
+    }
+    /**
+     * Give the router's context for this outlet back the outlet contexts of the top screen, which the
+     * navigation took when it covered that screen: the next navigation finds the outlets inside the
+     * screen through them.
+     */
+    recover(navigation) {
+        const covered = this.top?.covered;
+        const context = this.parentContexts.getContext(this.name);
+        if (context && covered?.navigation === navigation)
+            context.children = covered.children;
     }
     /**
      * Give the top screen back its change detection when the router covered it for a navigation
@@ -625,6 +780,36 @@ export class NativeStackOutlet {
             this.renderer.setStyle(screen, key, value);
         }
     }
+    /**
+     * On iOS 26 and later, the view a page's content commits in, as react-native-screens'
+     * `ScreenStackItem` wraps it in its `SafeAreaView` there. From 4.30 the screen runs under the
+     * navigation bar whether the bar is opaque or not
+     * (`+[RNSScreenStackHeaderConfig screensExtendUnderOpaqueNavigationBar]`), and this view insets
+     * the content below an opaque one. Before 4.30 the screen starts below such a bar, its safe area
+     * is zero at the top, and the view insets by nothing. Null elsewhere: the content commits
+     * straight into the screen.
+     */
+    insetContent(screen) {
+        if (!this.underBar)
+            return null;
+        const content = ownHost(this.renderer.createElement('screen-content'));
+        this.renderer.appendChild(screen, content);
+        screen.contentView = content;
+        return content;
+    }
+    /**
+     * The top edge while the page's header is shown and not translucent, which a large title on iOS
+     * is, and no edge otherwise, as `getSafeAreaEdges` in `ScreenStackItem` chooses. The view stays
+     * when the header changes, so the content is not made again. Native takes all four edges.
+     */
+    followHeader(content, header, injector) {
+        effect(() => this.renderer.setProperty(content, 'edges', {
+            top: header(),
+            right: false,
+            bottom: false,
+            left: false,
+        }), { injector });
+    }
     createScreen(presentation, dismissed = (count) => this.onNativeDismiss(count)) {
         const screen = ownHost(this.renderer.createElement('screen'));
         // From before the presentation is set, so a value it or the page's host bindings write counts
@@ -637,6 +822,11 @@ export class NativeStackOutlet {
         // Without this the native stack and the router disagree from that moment on: the screen is
         // gone but the URL still points at it, so the next navigation starts from the wrong place.
         this.renderer.listen(screen, 'dismissed', (event) => dismissed(event?.nativeEvent?.dismissCount ?? 1));
+        // Android's header back arrow pops the screen natively unless this is off, and then it ignores
+        // `preventNativeDismiss`, as its Back button does. Off, it is sent here instead, and goes the
+        // way Back does: react-navigation's native stack turns it off for the same reason.
+        this.renderer.setProperty(screen, 'nativeBackButtonDismissalEnabled', false);
+        this.renderer.listen(screen, 'headerBackButtonClicked', () => this.onHeaderBack(screen));
         // Every key is a prop `RNSScreen` already declares, spelled the way the codegen spec spells
         // it, so this forwards rather than translates. Set before the screen joins the stack: the
         // native side reads the presentation as it mounts.
@@ -708,6 +898,24 @@ export class NativeStackOutlet {
             return false;
         return this.refuseBack(this.top.screen);
     }
+    /**
+     * Android's header back arrow on `screen`: refused where the screen refuses, as Back is, and
+     * otherwise a step back, or the presented page dismissed when the screen is that page's.
+     * react-native-screens sends the arrow of a stack's first screen on the screen the stack sits
+     * in, which holds the top screen's refusal for it.
+     */
+    onHeaderBack(screen) {
+        if (screen === this.presentedPage?.screen) {
+            if (!this.refuseBack(screen))
+                this.dismissPresentedPage();
+            return;
+        }
+        // A tab behind keeps its top screen, but nobody can tap its arrow: like Back, it is not asked.
+        if (screen !== this.top?.screen || !this.isShowing())
+            return;
+        if (!this.refuseBack(screen))
+            this.goBack();
+    }
     /** Refuses Android's Back for a screen that sets `preventNativeDismiss`, and tells its page. */
     refuseBack(screen) {
         if (!refuses(screen))
@@ -791,7 +999,7 @@ export class NativeStackOutlet {
             this.location.historyGo(-steps);
             return;
         }
-        void this.router.navigateByUrl(url, { replaceUrl: true });
+        void this.navigateDownTo(below);
     }
     /**
      * Take the router down to the screen at `index`, popping every screen above it together.
@@ -817,7 +1025,20 @@ export class NativeStackOutlet {
             this.location.historyGo(-steps);
             return arrived;
         }
-        return this.router.navigateByUrl(url, { replaceUrl: true });
+        return this.navigateDownTo(this.entries[index]);
+    }
+    /**
+     * Send the router to `entry` by a navigation that replaces the entry, for a pop the history
+     * behind cannot make. With the same url on the stack twice, the reuse strategy is told which of
+     * the screens at it this is.
+     */
+    navigateDownTo(entry) {
+        const router = this.router;
+        poppingTo.set(router, entry.ref);
+        return router.navigateByUrl(this.urlOf(entry), { replaceUrl: true }).finally(() => {
+            if (poppingTo.get(router) === entry.ref)
+                poppingTo.delete(router);
+        });
     }
     /** Whether the navigation that happens next succeeds. */
     nextNavigation() {
@@ -834,6 +1055,11 @@ export class NativeStackOutlet {
             });
         });
     }
+    /** The url the app showed before the navigation in flight, as the router writes it. */
+    previousUrl() {
+        const previous = this.router?.getCurrentNavigation()?.previousNavigation?.finalUrl;
+        return previous && this.router.serializeUrl(previous);
+    }
     /** The url a screen was showing when it was covered, rebuilt from its own route snapshot. */
     urlOf(entry) {
         const snapshot = entry.route.snapshot;
@@ -859,7 +1085,7 @@ export class NativeStackOutlet {
      * register in, and whether its screen is in front - which is this screen's own say and, for a stack inside a
      * screen of another, that screen's too.
      */
-    outletInjector(route, inFront, screen, outlet = this.name) {
+    outletInjector(route, inFront, screen, header, outlet = this.name) {
         const outer = this.injector.get(SCREEN_IN_FRONT);
         return Injector.create({
             parent: this.injector,
@@ -873,7 +1099,7 @@ export class NativeStackOutlet {
                     },
                 },
                 { provide: ActivatedRoute, useValue: route },
-                { provide: SCREEN_HEADER, useValue: signal(false) },
+                { provide: SCREEN_HEADER, useValue: header },
                 {
                     provide: ChildrenOutletContexts,
                     useValue: this.parentContexts.getOrCreateContext(outlet).children,