@ng-native/router 0.2.0 → 0.4.0

package/dist/native-stack-reuse-strategy.d.ts

@@ -10,7 +10,16 @@ import { BaseRouteReuseStrategy, type ActivatedRouteSnapshot, type DetachedRoute
  */
 export declare function reuseScreen<T extends Route>(route: T): T;
 export declare class NativeStackReuseStrategy extends BaseRouteReuseStrategy {
+    /**
+     * The screens kept for each url, oldest first. More than one where the same url is on the stack
+     * twice: a customer, one of its jobs, and the customer again from the job.
+     */
     private readonly handles;
+    /**
+     * For the navigation in flight, read when it is asked for: the router is built from this. Null
+     * where the strategy is made by hand, outside an injector, and every navigation is then plain.
+     */
+    private readonly injector;
     /**
      * Only leaf routes become screens; a parent with children is layout, not a destination.
      *
@@ -24,7 +33,6 @@ export declare class NativeStackReuseStrategy extends BaseRouteReuseStrategy {
      */
     shouldDetach(route: ActivatedRouteSnapshot): boolean;
     store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void;
-    /** Refs whose destruction already drops their handles. */
     private readonly watched;
     /**
      * Drop a screen's handles the moment its component is destroyed.
@@ -46,12 +54,16 @@ export declare class NativeStackReuseStrategy extends BaseRouteReuseStrategy {
      * parent that is only layout is reused as before, so its stack keeps what is in it.
      */
     shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean;
-    shouldAttach(route: ActivatedRouteSnapshot): boolean;
     /**
-     * The router only ever tells the strategy about a screen it detached, never about one the
-     * outlet destroyed on a pop, so a handle can outlive its component. Pushing A, then B, going
-     * back and pushing B again would otherwise attach B's destroyed ref: a screen that renders and
-     * never updates. The ref knows it is dead, so ask it rather than couple the two.
+     * Whether the router goes back to a kept screen for this url. Not for a push: a push to a url
+     * already on the stack is a new screen over it, as a native stack makes one, and Back returns
+     * to where the push came from. Going back to the kept one is a back, or `popTo`.
+     *
+     * Never for a route with no component, which is never kept: the router asks for every route,
+     * and a group at path `''` has the same url as a page at `''` beside it, whose screen it would
+     * otherwise be handed.
      */
+    shouldAttach(route: ActivatedRouteSnapshot): boolean;
+    private pushing;
     retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null;
 }

package/dist/native-stack-reuse-strategy.js

@@ -1,4 +1,17 @@
-import { BaseRouteReuseStrategy, } from '@angular/router';
+/**
+ * The reuse strategy that turns navigation into a stack.
+ *
+ * Angular's default strategy never detaches, so navigating away destroys the component and its
+ * native views, and coming back rebuilds them from scratch: a list is back at the top, a form is
+ * empty. Detaching instead hands the live `ComponentRef` to the outlet, which keeps its screen
+ * mounted. That is the whole reason `RouterOutletContract.detach()` exists.
+ *
+ * No decorators, so tests can import it and so it can be provided with `useClass`.
+ */
+import { Injector, inject } from '@angular/core';
+import { BaseRouteReuseStrategy, Router, } from '@angular/router';
+import { intentOf } from "./native-navigation.js";
+import { PRESENTED } from "./presented-route.js";
 import { isScreenRoute, isTabRoute } from "./tab-routes.js";
 /**
  * Where `reuseScreen` marks a route. On the config's `data` rather than in a set of configs,
@@ -33,8 +46,25 @@ function keyOf(route) {
     }
     return JSON.stringify(levels);
 }
+function injectorHere() {
+    try {
+        return inject(Injector);
+    }
+    catch {
+        return null;
+    }
+}
 export class NativeStackReuseStrategy extends BaseRouteReuseStrategy {
+    /**
+     * The screens kept for each url, oldest first. More than one where the same url is on the stack
+     * twice: a customer, one of its jobs, and the customer again from the job.
+     */
     handles = new Map();
+    /**
+     * For the navigation in flight, read when it is asked for: the router is built from this. Null
+     * where the strategy is made by hand, outside an injector, and every navigation is then plain.
+     */
+    injector = injectorHere();
     /**
      * Only leaf routes become screens; a parent with children is layout, not a destination.
      *
@@ -49,21 +79,28 @@ export class NativeStackReuseStrategy extends BaseRouteReuseStrategy {
     shouldDetach(route) {
         if (route.component === null)
             return false;
+        // A page presented over the tabs is dismissed, not kept: nothing goes back to it.
+        if (route.outlet === PRESENTED)
+            return false;
         return (route.children.length === 0 ||
             isTabRoute(route.routeConfig) ||
             isScreenRoute(route.routeConfig));
     }
     store(route, handle) {
         const key = keyOf(route);
-        // A null handle is the router telling us the screen is gone for good.
+        const kept = this.handles.get(key) ?? [];
         if (handle) {
-            this.handles.set(key, handle);
+            // The same screen stored again takes its place at the end, not a second one.
+            this.handles.set(key, [...kept.filter((one) => one !== handle), handle]);
             this.forgetOnDestroy(handle.componentRef);
+            return;
         }
+        // The router has re-attached the one `retrieve` answered with: the last.
+        if (kept.length > 1)
+            this.handles.set(key, kept.slice(0, -1));
         else
             this.handles.delete(key);
     }
-    /** Refs whose destruction already drops their handles. */
     watched = new WeakSet();
     /**
      * Drop a screen's handles the moment its component is destroyed.
@@ -79,8 +116,11 @@ export class NativeStackReuseStrategy extends BaseRouteReuseStrategy {
             return;
         this.watched.add(ref);
         ref.onDestroy(() => {
-            for (const [key, handle] of this.handles) {
-                if (handle.componentRef === ref)
+            for (const [key, kept] of this.handles) {
+                const left = kept.filter((handle) => handle.componentRef !== ref);
+                if (left.length)
+                    this.handles.set(key, left);
+                else
                     this.handles.delete(key);
             }
         });
@@ -102,25 +142,37 @@ export class NativeStackReuseStrategy extends BaseRouteReuseStrategy {
             return true;
         return keyOf(future) === keyOf(curr);
     }
+    /**
+     * Whether the router goes back to a kept screen for this url. Not for a push: a push to a url
+     * already on the stack is a new screen over it, as a native stack makes one, and Back returns
+     * to where the push came from. Going back to the kept one is a back, or `popTo`.
+     *
+     * Never for a route with no component, which is never kept: the router asks for every route,
+     * and a group at path `''` has the same url as a page at `''` beside it, whose screen it would
+     * otherwise be handed.
+     */
     shouldAttach(route) {
+        if (route.component === null || this.pushing())
+            return false;
         return this.retrieve(route) !== null;
     }
-    /**
-     * The router only ever tells the strategy about a screen it detached, never about one the
-     * outlet destroyed on a pop, so a handle can outlive its component. Pushing A, then B, going
-     * back and pushing B again would otherwise attach B's destroyed ref: a screen that renders and
-     * never updates. The ref knows it is dead, so ask it rather than couple the two.
-     */
+    pushing() {
+        const navigation = this.injector?.get(Router).currentNavigation();
+        // A back restores the state its history entry was pushed with, intent and all: that is the
+        // screen being returned to, not a push.
+        if (!navigation || navigation.trigger === 'popstate')
+            return false;
+        return intentOf(navigation.extras.state)?.stack === 'push';
+    }
     retrieve(route) {
         const key = keyOf(route);
-        const handle = this.handles.get(key);
-        if (!handle)
-            return null;
-        if (handle.componentRef?.hostView.destroyed) {
+        const kept = (this.handles.get(key) ?? []).filter((handle) => !handle.componentRef?.hostView.destroyed);
+        if (kept.length)
+            this.handles.set(key, kept);
+        else
             this.handles.delete(key);
-            return null;
-        }
-        return handle;
+        // The newest: the one a back from the top of the stack returns to.
+        return kept.at(-1) ?? null;
     }
 }
 //# sourceMappingURL=native-stack-reuse-strategy.js.map

package/dist/native-stack-reuse-strategy.js.map

@@ -1 +1 @@
-{"version":3,"file":"native-stack-reuse-strategy.js","sourceRoot":"","sources":["../src/native-stack-reuse-strategy.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * The reuse strategy that turns navigation into a stack.\n *\n * Angular's default strategy never detaches, so navigating away destroys the component and its\n * native views, and coming back rebuilds them from scratch: a list is back at the top, a form is\n * empty. Detaching instead hands the live `ComponentRef` to the outlet, which keeps its screen\n * mounted. That is the whole reason `RouterOutletContract.detach()` exists.\n *\n * No decorators, so tests can import it and so it can be provided with `useClass`.\n */\nimport type { ComponentRef } from '@angular/core';\nimport {\n  BaseRouteReuseStrategy,\n  type ActivatedRouteSnapshot,\n  type DetachedRouteHandle,\n  type Route,\n} from '@angular/router';\nimport { isScreenRoute, isTabRoute } from './tab-routes.ts';\n\n/**\n * Where `reuseScreen` marks a route. On the config's `data` rather than in a set of configs,\n * because the router copies every route config it is given, so the object an app wrote is never\n * the one a snapshot points at.\n */\nconst REUSE_SCREEN = 'ɵreuseScreen';\n\n/**\n * Keep one screen for a route whatever its parameters, updating it in place as Angular's own\n * strategy does, instead of pushing a new screen for each url.\n *\n * `reuseScreen({ path: 'photo/:index', component: Photo })` for a route whose parameter picks\n * what one screen shows - a pager, a step through a list - rather than naming another screen to\n * go to. Everything else stacks: `/user/1` then `/user/2` is two screens, and back returns to the\n * first.\n */\nexport function reuseScreen<T extends Route>(route: T): T {\n  return { ...route, data: { ...route.data, [REUSE_SCREEN]: true } };\n}\n\n/** What the router actually stores: `DetachedRouteHandle` is typed as an opaque object. */\ninterface StoredHandle {\n  readonly componentRef?: ComponentRef<unknown>;\n}\n\n/**\n * Identify a screen by its resolved url rather than its route config, so `/user/1` and `/user/2`\n * are two screens on the stack rather than one that gets reused.\n *\n * One entry per level of the route tree, empty ones included. Flattened to a url, a tab at\n * `/tabs/library` and the list at path `''` beneath it are the same string, and the router, asking\n * for the list, is handed the tab's whole tree and makes the tab its own child.\n */\nfunction keyOf(route: ActivatedRouteSnapshot): string {\n  const levels: string[] = [];\n  for (let current: ActivatedRouteSnapshot | null = route; current; current = current.parent) {\n    levels.unshift(current.url.map((segment) => segment.toString()).join('/'));\n  }\n  return JSON.stringify(levels);\n}\n\nexport class NativeStackReuseStrategy extends BaseRouteReuseStrategy {\n  private readonly handles = new Map<string, DetachedRouteHandle>();\n\n  /**\n   * Only leaf routes become screens; a parent with children is layout, not a destination.\n   *\n   * A tab is the exception, and has to be. Detaching only its leaf would rebuild the tab itself\n   * on every switch, and with it the stack outlet inside: a tab two screens deep would come back\n   * one screen deep, having lost the screens the user could go back to. Detaching the tab keeps\n   * its whole subtree, which is what makes each tab remember where it was.\n   *\n   * So is a parent a native stack put on screen, such as a root stack's tab bar: a sheet presented\n   * over it has to leave it standing (see `markScreenRoute`).\n   */\n  override shouldDetach(route: ActivatedRouteSnapshot): boolean {\n    if (route.component === null) return false;\n    return (\n      route.children.length === 0 ||\n      isTabRoute(route.routeConfig) ||\n      isScreenRoute(route.routeConfig)\n    );\n  }\n\n  override store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {\n    const key = keyOf(route);\n    // A null handle is the router telling us the screen is gone for good.\n    if (handle) {\n      this.handles.set(key, handle);\n      this.forgetOnDestroy((handle as StoredHandle).componentRef);\n    } else this.handles.delete(key);\n  }\n\n  /** Refs whose destruction already drops their handles. */\n  private readonly watched = new WeakSet<ComponentRef<unknown>>();\n\n  /**\n   * Drop a screen's handles the moment its component is destroyed.\n   *\n   * The router stores a handle for every screen it navigates away from, the one being popped\n   * included, and the outlet then destroys that screen. A handle outlives its component, and holds\n   * the component's whole view and every native node in it; `retrieve` notices only when the same\n   * url is asked for again, so a url never revisited kept its last screen for as long as the app\n   * ran.\n   */\n  private forgetOnDestroy(ref: ComponentRef<unknown> | undefined): void {\n    if (!ref || this.watched.has(ref)) return;\n    this.watched.add(ref);\n    ref.onDestroy(() => {\n      for (const [key, handle] of this.handles) {\n        if ((handle as StoredHandle).componentRef === ref) this.handles.delete(key);\n      }\n    });\n  }\n\n  /**\n   * Angular reuses a route whenever its config is the same, so on the web `/user/1` to `/user/2`\n   * keeps the one component and feeds it the new params. On a native stack that turns a push into\n   * an update in place: no push animation, one screen, and back skipping past `/user/1`. A screen\n   * a stack put on screen is reused only when its url is the same too, so a different parameter\n   * is a different screen, which the router detaches and stores as it does any screen pushed\n   * away. A query or fragment change is not part of the url that identifies a screen, and a\n   * parent that is only layout is reused as before, so its stack keeps what is in it.\n   */\n  override shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {\n    if (future.routeConfig !== curr.routeConfig) return false;\n    const config = curr.routeConfig;\n    if (!isScreenRoute(config) || config?.data?.[REUSE_SCREEN] === true) return true;\n    return keyOf(future) === keyOf(curr);\n  }\n\n  override shouldAttach(route: ActivatedRouteSnapshot): boolean {\n    return this.retrieve(route) !== null;\n  }\n\n  /**\n   * The router only ever tells the strategy about a screen it detached, never about one the\n   * outlet destroyed on a pop, so a handle can outlive its component. Pushing A, then B, going\n   * back and pushing B again would otherwise attach B's destroyed ref: a screen that renders and\n   * never updates. The ref knows it is dead, so ask it rather than couple the two.\n   */\n  override retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {\n    const key = keyOf(route);\n    const handle = this.handles.get(key) as StoredHandle | undefined;\n    if (!handle) return null;\n    if (handle.componentRef?.hostView.destroyed) {\n      this.handles.delete(key);\n      return null;\n    }\n    return handle;\n  }\n}\n"]}
+{"version":3,"file":"native-stack-reuse-strategy.js","sourceRoot":"","sources":["../src/native-stack-reuse-strategy.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * The reuse strategy that turns navigation into a stack.\n *\n * Angular's default strategy never detaches, so navigating away destroys the component and its\n * native views, and coming back rebuilds them from scratch: a list is back at the top, a form is\n * empty. Detaching instead hands the live `ComponentRef` to the outlet, which keeps its screen\n * mounted. That is the whole reason `RouterOutletContract.detach()` exists.\n *\n * No decorators, so tests can import it and so it can be provided with `useClass`.\n */\nimport { Injector, inject, type ComponentRef } from '@angular/core';\nimport {\n  BaseRouteReuseStrategy,\n  type ActivatedRouteSnapshot,\n  type DetachedRouteHandle,\n  Router,\n  type Route,\n} from '@angular/router';\nimport { intentOf } from './native-navigation.ts';\nimport { PRESENTED } from './presented-route.ts';\nimport { isScreenRoute, isTabRoute } from './tab-routes.ts';\n\n/**\n * Where `reuseScreen` marks a route. On the config's `data` rather than in a set of configs,\n * because the router copies every route config it is given, so the object an app wrote is never\n * the one a snapshot points at.\n */\nconst REUSE_SCREEN = 'ɵreuseScreen';\n\n/**\n * Keep one screen for a route whatever its parameters, updating it in place as Angular's own\n * strategy does, instead of pushing a new screen for each url.\n *\n * `reuseScreen({ path: 'photo/:index', component: Photo })` for a route whose parameter picks\n * what one screen shows - a pager, a step through a list - rather than naming another screen to\n * go to. Everything else stacks: `/user/1` then `/user/2` is two screens, and back returns to the\n * first.\n */\nexport function reuseScreen<T extends Route>(route: T): T {\n  return { ...route, data: { ...route.data, [REUSE_SCREEN]: true } };\n}\n\n/** What the router actually stores: `DetachedRouteHandle` is typed as an opaque object. */\ninterface StoredHandle {\n  readonly componentRef?: ComponentRef<unknown>;\n}\n\n/**\n * Identify a screen by its resolved url rather than its route config, so `/user/1` and `/user/2`\n * are two screens on the stack rather than one that gets reused.\n *\n * One entry per level of the route tree, empty ones included. Flattened to a url, a tab at\n * `/tabs/library` and the list at path `''` beneath it are the same string, and the router, asking\n * for the list, is handed the tab's whole tree and makes the tab its own child.\n */\nfunction keyOf(route: ActivatedRouteSnapshot): string {\n  const levels: string[] = [];\n  for (let current: ActivatedRouteSnapshot | null = route; current; current = current.parent) {\n    levels.unshift(current.url.map((segment) => segment.toString()).join('/'));\n  }\n  return JSON.stringify(levels);\n}\n\nfunction injectorHere(): Injector | null {\n  try {\n    return inject(Injector);\n  } catch {\n    return null;\n  }\n}\n\nexport class NativeStackReuseStrategy extends BaseRouteReuseStrategy {\n  /**\n   * The screens kept for each url, oldest first. More than one where the same url is on the stack\n   * twice: a customer, one of its jobs, and the customer again from the job.\n   */\n  private readonly handles = new Map<string, DetachedRouteHandle[]>();\n  /**\n   * For the navigation in flight, read when it is asked for: the router is built from this. Null\n   * where the strategy is made by hand, outside an injector, and every navigation is then plain.\n   */\n  private readonly injector = injectorHere();\n\n  /**\n   * Only leaf routes become screens; a parent with children is layout, not a destination.\n   *\n   * A tab is the exception, and has to be. Detaching only its leaf would rebuild the tab itself\n   * on every switch, and with it the stack outlet inside: a tab two screens deep would come back\n   * one screen deep, having lost the screens the user could go back to. Detaching the tab keeps\n   * its whole subtree, which is what makes each tab remember where it was.\n   *\n   * So is a parent a native stack put on screen, such as a root stack's tab bar: a sheet presented\n   * over it has to leave it standing (see `markScreenRoute`).\n   */\n  override shouldDetach(route: ActivatedRouteSnapshot): boolean {\n    if (route.component === null) return false;\n    // A page presented over the tabs is dismissed, not kept: nothing goes back to it.\n    if (route.outlet === PRESENTED) return false;\n    return (\n      route.children.length === 0 ||\n      isTabRoute(route.routeConfig) ||\n      isScreenRoute(route.routeConfig)\n    );\n  }\n\n  override store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {\n    const key = keyOf(route);\n    const kept = this.handles.get(key) ?? [];\n    if (handle) {\n      // The same screen stored again takes its place at the end, not a second one.\n      this.handles.set(key, [...kept.filter((one) => one !== handle), handle]);\n      this.forgetOnDestroy((handle as StoredHandle).componentRef);\n      return;\n    }\n    // The router has re-attached the one `retrieve` answered with: the last.\n    if (kept.length > 1) this.handles.set(key, kept.slice(0, -1));\n    else this.handles.delete(key);\n  }\n\n  private readonly watched = new WeakSet<ComponentRef<unknown>>();\n\n  /**\n   * Drop a screen's handles the moment its component is destroyed.\n   *\n   * The router stores a handle for every screen it navigates away from, the one being popped\n   * included, and the outlet then destroys that screen. A handle outlives its component, and holds\n   * the component's whole view and every native node in it; `retrieve` notices only when the same\n   * url is asked for again, so a url never revisited kept its last screen for as long as the app\n   * ran.\n   */\n  private forgetOnDestroy(ref: ComponentRef<unknown> | undefined): void {\n    if (!ref || this.watched.has(ref)) return;\n    this.watched.add(ref);\n    ref.onDestroy(() => {\n      for (const [key, kept] of this.handles) {\n        const left = kept.filter((handle) => (handle as StoredHandle).componentRef !== ref);\n        if (left.length) this.handles.set(key, left);\n        else this.handles.delete(key);\n      }\n    });\n  }\n\n  /**\n   * Angular reuses a route whenever its config is the same, so on the web `/user/1` to `/user/2`\n   * keeps the one component and feeds it the new params. On a native stack that turns a push into\n   * an update in place: no push animation, one screen, and back skipping past `/user/1`. A screen\n   * a stack put on screen is reused only when its url is the same too, so a different parameter\n   * is a different screen, which the router detaches and stores as it does any screen pushed\n   * away. A query or fragment change is not part of the url that identifies a screen, and a\n   * parent that is only layout is reused as before, so its stack keeps what is in it.\n   */\n  override shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {\n    if (future.routeConfig !== curr.routeConfig) return false;\n    const config = curr.routeConfig;\n    if (!isScreenRoute(config) || config?.data?.[REUSE_SCREEN] === true) return true;\n    return keyOf(future) === keyOf(curr);\n  }\n\n  /**\n   * Whether the router goes back to a kept screen for this url. Not for a push: a push to a url\n   * already on the stack is a new screen over it, as a native stack makes one, and Back returns\n   * to where the push came from. Going back to the kept one is a back, or `popTo`.\n   *\n   * Never for a route with no component, which is never kept: the router asks for every route,\n   * and a group at path `''` has the same url as a page at `''` beside it, whose screen it would\n   * otherwise be handed.\n   */\n  override shouldAttach(route: ActivatedRouteSnapshot): boolean {\n    if (route.component === null || this.pushing()) return false;\n    return this.retrieve(route) !== null;\n  }\n\n  private pushing(): boolean {\n    const navigation = this.injector?.get(Router).currentNavigation();\n    // A back restores the state its history entry was pushed with, intent and all: that is the\n    // screen being returned to, not a push.\n    if (!navigation || navigation.trigger === 'popstate') return false;\n    return intentOf(navigation.extras.state)?.stack === 'push';\n  }\n\n  override retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {\n    const key = keyOf(route);\n    const kept = (this.handles.get(key) ?? []).filter(\n      (handle) => !(handle as StoredHandle).componentRef?.hostView.destroyed,\n    );\n    if (kept.length) this.handles.set(key, kept);\n    else this.handles.delete(key);\n    // The newest: the one a back from the top of the stack returns to.\n    return kept.at(-1) ?? null;\n  }\n}\n"]}

package/dist/native-tab.d.ts

@@ -1,3 +1,32 @@
+/**
+ * One item in a native tab bar, and the screen behind it.
+ *
+ * Declared in the tabs outlet's template, the way a `<native-header>` is declared in a page's:
+ *
+ * ```html
+ * <native-tabs-outlet>
+ *   <native-tab path="library" title="Library" sfSymbol="books.vertical.fill" />
+ *   <native-tab path="inbox" title="Inbox" sfSymbol="tray" [badge]="unread()" />
+ * </native-tabs-outlet>
+ * ```
+ *
+ * `path` names the child route this tab selects, the same way a `routerLink` names one, and is
+ * what native identifies the tab by. Everything else is an ordinary input, which is the point of
+ * declaring tabs here rather than in the route config: a badge is a count that changes, a title
+ * may be translated, and a tab may not exist at all until a feature flag says so. Route data
+ * cannot bind to any of that.
+ *
+ * **A bar item is not a view.** `UITabBarItem` is a model object - a title, an image and a badge
+ * string - and UIKit has no way to put a view in its place; Android's bottom-navigation item is
+ * the same. That is why this takes no content, while `<native-header-item>` does: a navigation
+ * bar really does hold subviews. What customisation exists is here as inputs: images instead of
+ * symbols, a different icon when selected, and the per-state appearance below.
+ *
+ * The host element *is* the `RNSTabsScreen`. The outlet keeps the screen mounted and creates
+ * each activated route's component on a child view, so destroying a route cannot remove this
+ * tab item from the bar.
+ */
+import { type OnInit } from '@angular/core';
 import { type EngineNode } from '@ng-native/fabric';
 import * as i0 from "@angular/core";
 /**
@@ -88,7 +117,7 @@ export declare function tabIconProps(icon: TabIconProps, selectedIcon: TabIconPr
     selectedDrawableIconResourceName?: string;
     selectedImageIconResource?: unknown;
 };
-export declare class NativeTab {
+export declare class NativeTab implements OnInit {
     private readonly engine;
     /** The app's `withTabDefaults`, for an appearance this tab does not bind itself. */
     private readonly defaults;
@@ -123,6 +152,7 @@ export declare class NativeTab {
     readonly standardAppearance: import("@angular/core").InputSignal<TabAppearance | undefined>;
     /** The same, for when the scroll view behind the bar is at its edge. */
     readonly scrollEdgeAppearance: import("@angular/core").InputSignal<TabAppearance | undefined>;
+    ngOnInit(): void;
     protected readonly standard: import("@angular/core").Signal<object | undefined>;
     protected readonly scrollEdge: import("@angular/core").Signal<object | undefined>;
     protected readonly icons: import("@angular/core").Signal<TabIconProps & {
@@ -131,7 +161,11 @@ export declare class NativeTab {
         selectedDrawableIconResourceName?: string;
         selectedImageIconResource?: unknown;
     }>;
-    /** `sfSymbol` and `drawable` say the same thing as `icon`, in the form most tabs want. */
+    /**
+     * `sfSymbol` and `drawable` say the same thing as `icon`, in the form most tabs want. A tab
+     * names both to have an icon on both platforms, so the running platform's own comes first:
+     * Android reads only a drawable, and iOS only a symbol.
+     */
     private shorthand;
     /**
      * One icon, as the four props native reads it through. A `require()`d asset is an id until the

package/dist/native-tab.js

@@ -57,6 +57,32 @@ export function tabIconProps(icon, selectedIcon) {
         selectedImageIconResource: selectedIcon.imageIconResource,
     };
 }
+/** The paths already warned about, so a tab bar rebuilt by a navigation says it once. */
+const warnedTabs = new Set();
+/**
+ * Says, once per path and in development only, that a tab has no icon on the platform running it
+ * because it names only the other platform's shorthand. A tab written against the iOS simulator
+ * with `sfSymbol` shows a title and nothing above it on Android.
+ */
+function warnIfIconOnOnePlatform(tab) {
+    if (typeof ngDevMode !== 'undefined' && !ngDevMode)
+        return;
+    if (tab.icon() || tab.systemItem())
+        return;
+    const [own, other, missing, platform] = nativePlatform() === 'android'
+        ? [tab.drawable(), tab.sfSymbol(), 'drawable', 'Android']
+        : nativePlatform() === 'ios'
+            ? [tab.sfSymbol(), tab.drawable(), 'sfSymbol', 'iOS']
+            : [];
+    if (own || !other)
+        return;
+    const path = tab.path();
+    if (warnedTabs.has(path))
+        return;
+    warnedTabs.add(path);
+    console.warn(`[angular-native] <native-tab path="${path}"> has no icon on ${platform}: ${platform} reads ` +
+        `only ${missing}. Add ${missing}="...", or bind [icon] for a tab meant for one platform.`);
+}
 export class NativeTab {
     engine = inject(HostEngine);
     /** The app's `withTabDefaults`, for an appearance this tab does not bind itself. */
@@ -105,19 +131,27 @@ export class NativeTab {
     /** The same, for when the scroll view behind the bar is at its edge. */
     scrollEdgeAppearance = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "scrollEdgeAppearance" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        warnIfIconOnOnePlatform(this);
+    }
     standard = computed(() => this.processAppearance(this.standardAppearance() ?? this.defaults().standardAppearance), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "standard" }] : /* istanbul ignore next */ []));
     scrollEdge = computed(() => this.processAppearance(this.scrollEdgeAppearance() ?? this.defaults().scrollEdgeAppearance), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "scrollEdge" }] : /* istanbul ignore next */ []));
     icons = computed(() => tabIconProps(this.iconProps(this.icon() ?? this.shorthand()), this.iconProps(this.selectedIcon())), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "icons" }] : /* istanbul ignore next */ []));
-    /** `sfSymbol` and `drawable` say the same thing as `icon`, in the form most tabs want. */
+    /**
+     * `sfSymbol` and `drawable` say the same thing as `icon`, in the form most tabs want. A tab
+     * names both to have an icon on both platforms, so the running platform's own comes first:
+     * Android reads only a drawable, and iOS only a symbol.
+     */
     shorthand() {
         const symbol = this.sfSymbol();
-        if (symbol)
-            return { sfSymbol: symbol };
         const drawable = this.drawable();
-        return drawable ? { drawable } : undefined;
+        const icons = [symbol && { sfSymbol: symbol }, drawable && { drawable }];
+        if (nativePlatform() === 'android')
+            icons.reverse();
+        return icons.find((icon) => icon) || undefined;
     }
     /**
      * One icon, as the four props native reads it through. A `require()`d asset is an id until the

package/dist/native-tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"native-tab.js","sourceRoot":"","sources":["../src/native-tab.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * One item in a native tab bar, and the screen behind it.\n *\n * Declared in the tabs outlet's template, the way a `<native-header>` is declared in a page's:\n *\n * ```html\n * <native-tabs-outlet>\n *   <native-tab path=\"library\" title=\"Library\" sfSymbol=\"books.vertical.fill\" />\n *   <native-tab path=\"inbox\" title=\"Inbox\" sfSymbol=\"tray\" [badge]=\"unread()\" />\n * </native-tabs-outlet>\n * ```\n *\n * `path` names the child route this tab selects, the same way a `routerLink` names one, and is\n * what native identifies the tab by. Everything else is an ordinary input, which is the point of\n * declaring tabs here rather than in the route config: a badge is a count that changes, a title\n * may be translated, and a tab may not exist at all until a feature flag says so. Route data\n * cannot bind to any of that.\n *\n * **A bar item is not a view.** `UITabBarItem` is a model object - a title, an image and a badge\n * string - and UIKit has no way to put a view in its place; Android's bottom-navigation item is\n * the same. That is why this takes no content, while `<native-header-item>` does: a navigation\n * bar really does hold subviews. What customisation exists is here as inputs: images instead of\n * symbols, a different icon when selected, and the per-state appearance below.\n *\n * The host element *is* the `RNSTabsScreen`. The outlet keeps the screen mounted and creates\n * each activated route's component on a child view, so destroying a route cannot remove this\n * tab item from the bar.\n */\nimport { Component, ElementRef, computed, inject, input } from '@angular/core';\nimport { nativePlatform, type EngineNode, HostEngine } from '@ng-native/fabric';\nimport { NATIVE_TAB_DEFAULTS } from './native-bar-defaults.ts';\nimport { ownHost } from './own-host.ts';\n\n/**\n * Where a tab's picture comes from.\n *\n * `template` is the one worth knowing about: the image is drawn as a mask and tinted to the bar's\n * colour, so it follows selection the way a symbol does. `image` renders as authored, which is\n * what a multi-colour logo wants and what a monochrome icon almost never does.\n */\nexport type TabIcon =\n  | { readonly sfSymbol: string }\n  /** An image in the iOS asset catalogue, by name. */\n  | { readonly xcasset: string }\n  /** A `require()`d asset or a `{ uri }`, drawn as authored. */\n  | { readonly image: unknown }\n  /** The same, drawn as a mask and tinted. */\n  | { readonly template: unknown }\n  /** Android: a drawable resource name. */\n  | { readonly drawable: string };\n\n/** One of Apple's standard items, which brings its own icon and title. */\nexport type TabSystemItem =\n  | 'none'\n  | 'bookmarks'\n  | 'contacts'\n  | 'downloads'\n  | 'favorites'\n  | 'featured'\n  | 'history'\n  | 'more'\n  | 'mostRecent'\n  | 'mostViewed'\n  | 'recents'\n  | 'search'\n  | 'topRated';\n\nexport type TabBarBlurEffect =\n  | 'none'\n  | 'systemDefault'\n  | 'extraLight'\n  | 'light'\n  | 'dark'\n  | 'regular'\n  | 'prominent'\n  | 'systemUltraThinMaterial'\n  | 'systemThinMaterial'\n  | 'systemMaterial'\n  | 'systemThickMaterial'\n  | 'systemChromeMaterial';\n\n/**\n * How an item looks in one state. The names are the native ones, spelled as the codegen spec\n * spells them, so this forwards rather than translates and Apple's own documentation still reads\n * across.\n */\nexport interface TabStateAppearance {\n  tabBarItemTitleFontFamily?: string;\n  tabBarItemTitleFontSize?: number;\n  tabBarItemTitleFontWeight?: string | number;\n  tabBarItemTitleFontStyle?: string;\n  tabBarItemTitleFontColor?: string | number;\n  tabBarItemTitlePositionAdjustment?: { horizontal?: number; vertical?: number };\n  tabBarItemIconColor?: string | number;\n  tabBarItemBadgeBackgroundColor?: string | number;\n}\n\n/** The four states an item can be in. Anything absent falls back to the platform's own. */\nexport interface TabItemAppearance {\n  normal?: TabStateAppearance;\n  selected?: TabStateAppearance;\n  focused?: TabStateAppearance;\n  disabled?: TabStateAppearance;\n}\n\n/**\n * How the bar looks, per layout. `stacked` is the usual icon-over-title item; `inline` and\n * `compactInline` are the side-by-side layouts iPad and a compact height use.\n */\nexport interface TabAppearance {\n  stacked?: TabItemAppearance;\n  inline?: TabItemAppearance;\n  compactInline?: TabItemAppearance;\n  tabBarBackgroundColor?: string | number;\n  tabBarShadowColor?: string | number;\n  tabBarBlurEffect?: TabBarBlurEffect;\n}\n\n/** One icon, as the props native reads it through. */\nexport interface TabIconProps {\n  iconType?: string;\n  iconResourceName?: string;\n  iconImageSource?: unknown;\n  drawableIconResourceName?: string;\n  imageIconResource?: unknown;\n}\n\n/**\n * An icon and its selected counterpart, as one set of props.\n *\n * Native carries a single `iconType` for both states, so the two have to be the same kind of\n * thing: a template image cannot become a symbol when selected. React Native Screens throws on\n * that pairing and so does this, because the alternative - what happened before this checked - is\n * that native quietly keeps the unselected icon and nothing anywhere says why.\n */\nexport function tabIconProps(\n  icon: TabIconProps,\n  selectedIcon: TabIconProps,\n): TabIconProps & {\n  selectedIconResourceName?: string;\n  selectedIconImageSource?: unknown;\n  selectedDrawableIconResourceName?: string;\n  selectedImageIconResource?: unknown;\n} {\n  const hasBase = icon.iconType !== undefined || icon.drawableIconResourceName !== undefined;\n  const hasSelected =\n    selectedIcon.iconType !== undefined || selectedIcon.drawableIconResourceName !== undefined;\n\n  if (hasSelected && !hasBase) {\n    throw new Error('[angular-native] <native-tab> has a selectedIcon but no icon to select from');\n  }\n  if (hasSelected && icon.iconType !== selectedIcon.iconType) {\n    throw new Error(\n      `[angular-native] <native-tab> icon and selectedIcon must be the same kind: native has ` +\n        `one iconType for both, so '${icon.iconType}' and '${selectedIcon.iconType}' cannot pair.`,\n    );\n  }\n\n  return {\n    ...icon,\n    selectedIconResourceName: selectedIcon.iconResourceName,\n    selectedIconImageSource: selectedIcon.iconImageSource,\n    selectedDrawableIconResourceName: selectedIcon.drawableIconResourceName,\n    selectedImageIconResource: selectedIcon.imageIconResource,\n  };\n}\n\n@Component({\n  selector: 'native-tab',\n  template: '',\n  host: {\n    '[screenKey]': 'path()',\n    '[title]': 'title()',\n    '[badgeValue]': 'badge()',\n    '[tabBarItemAccessibilityLabel]': 'accessibilityLabel()',\n    '[systemItem]': 'systemItem()',\n    // `isTitleUndefined` is what `TabsScreen.ios.tsx` derives from the title, and it is not a\n    // synonym for \"no title\": with a title set and this left at its default, the item renders as\n    // an icon with a gap where the label belongs.\n    '[isTitleUndefined]': 'title() === undefined',\n    '[iconType]': 'icons().iconType',\n    '[iconResourceName]': 'icons().iconResourceName',\n    '[iconImageSource]': 'icons().iconImageSource',\n    '[selectedIconResourceName]': 'icons().selectedIconResourceName',\n    '[selectedIconImageSource]': 'icons().selectedIconImageSource',\n    '[drawableIconResourceName]': 'icons().drawableIconResourceName',\n    '[imageIconResource]': 'icons().imageIconResource',\n    '[selectedDrawableIconResourceName]': 'icons().selectedDrawableIconResourceName',\n    '[selectedImageIconResource]': 'icons().selectedImageIconResource',\n    '[standardAppearance]': 'standard()',\n    '[scrollEdgeAppearance]': 'scrollEdge()',\n  },\n})\nexport class NativeTab {\n  private readonly engine = inject(HostEngine);\n  /** The app's `withTabDefaults`, for an appearance this tab does not bind itself. */\n  private readonly defaults = inject(NATIVE_TAB_DEFAULTS);\n\n  /**\n   * The `RNSTabsScreen` this tab is. The outlet creates the activated route's component inside\n   * it, which is why it is public: a tab is a slot as well as a bar item.\n   */\n  readonly screen: EngineNode;\n\n  constructor() {\n    this.screen = ownHost(inject(ElementRef).nativeElement as EngineNode, this.constructor);\n  }\n\n  /**\n   * The child route this tab selects, as a path segment: `library` for `/tabs/library`. Native\n   * identifies the tab by it too, so it must be unique in the bar.\n   */\n  readonly path = input.required<string>();\n\n  /** The label under the icon. Absent gives an icon-only item. */\n  readonly title = input<string>();\n\n  /** iOS: an SF Symbol name, e.g. `books.vertical.fill`. Shorthand for `[icon]`. */\n  readonly sfSymbol = input<string>();\n\n  /** Android: a drawable resource name. Shorthand for `[icon]`. */\n  readonly drawable = input<string>();\n\n  /** Anything a symbol name cannot say: an image, a template image, an asset-catalogue name. */\n  readonly icon = input<TabIcon>();\n\n  /** Shown while this tab is the selected one. Absent leaves the platform to tint `icon`. */\n  readonly selectedIcon = input<TabIcon>();\n\n  /** One of Apple's standard items, which supplies its own icon and title. */\n  readonly systemItem = input<TabSystemItem>();\n\n  /** The badge on the item: a count, or a single character for a dot. */\n  readonly badge = input<string>();\n\n  /** Announced instead of the title. */\n  readonly accessibilityLabel = input<string>();\n\n  /** How the item looks. Colours are processed here, because native never sees the object's keys. */\n  readonly standardAppearance = input<TabAppearance>();\n\n  /** The same, for when the scroll view behind the bar is at its edge. */\n  readonly scrollEdgeAppearance = input<TabAppearance>();\n\n  protected readonly standard = computed(() =>\n    this.processAppearance(this.standardAppearance() ?? this.defaults().standardAppearance),\n  );\n  protected readonly scrollEdge = computed(() =>\n    this.processAppearance(this.scrollEdgeAppearance() ?? this.defaults().scrollEdgeAppearance),\n  );\n\n  protected readonly icons = computed(() =>\n    tabIconProps(\n      this.iconProps(this.icon() ?? this.shorthand()),\n      this.iconProps(this.selectedIcon()),\n    ),\n  );\n\n  /** `sfSymbol` and `drawable` say the same thing as `icon`, in the form most tabs want. */\n  private shorthand(): TabIcon | undefined {\n    const symbol = this.sfSymbol();\n    if (symbol) return { sfSymbol: symbol };\n    const drawable = this.drawable();\n    return drawable ? { drawable } : undefined;\n  }\n\n  /**\n   * One icon, as the four props native reads it through. A `require()`d asset is an id until the\n   * host resolves it, which is the same thing an `<image src>` needs and the engine only does for\n   * props it knows by name.\n   */\n  private iconProps(icon: TabIcon | undefined): TabIconProps {\n    if (!icon) return {};\n    if ('sfSymbol' in icon) return { iconType: 'sfSymbol', iconResourceName: icon.sfSymbol };\n    if ('xcasset' in icon) return { iconType: 'xcasset', iconResourceName: icon.xcasset };\n    if ('drawable' in icon) return { drawableIconResourceName: icon.drawable };\n\n    const source = this.engine.resolveAsset('image' in icon ? icon.image : icon.template);\n    return nativePlatform() === 'android'\n      ? { imageIconResource: source }\n      : { iconType: 'image' in icon ? 'image' : 'template', iconImageSource: source };\n  }\n\n  private processAppearance(appearance: TabAppearance | undefined): object | undefined {\n    if (!appearance) return undefined;\n    return {\n      ...appearance,\n      stacked: this.processItem(appearance.stacked),\n      inline: this.processItem(appearance.inline),\n      compactInline: this.processItem(appearance.compactInline),\n      tabBarBackgroundColor: this.engine.color(appearance.tabBarBackgroundColor),\n      tabBarShadowColor: this.engine.color(appearance.tabBarShadowColor),\n    };\n  }\n\n  private processItem(item: TabItemAppearance | undefined): object | undefined {\n    if (!item) return undefined;\n    return {\n      normal: this.processState(item.normal),\n      selected: this.processState(item.selected),\n      focused: this.processState(item.focused),\n      disabled: this.processState(item.disabled),\n    };\n  }\n\n  private processState(state: TabStateAppearance | undefined): object | undefined {\n    if (!state) return undefined;\n    return {\n      ...state,\n      // Native declares the weight as a string, and `600` is the natural way to write one.\n      tabBarItemTitleFontWeight:\n        state.tabBarItemTitleFontWeight === undefined\n          ? undefined\n          : String(state.tabBarItemTitleFontWeight),\n      tabBarItemTitleFontColor: this.engine.color(state.tabBarItemTitleFontColor),\n      tabBarItemIconColor: this.engine.color(state.tabBarItemIconColor),\n      tabBarItemBadgeBackgroundColor: this.engine.color(state.tabBarItemBadgeBackgroundColor),\n    };\n  }\n}\n"]}
+{"version":3,"file":"native-tab.js","sourceRoot":"","sources":["../src/native-tab.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * One item in a native tab bar, and the screen behind it.\n *\n * Declared in the tabs outlet's template, the way a `<native-header>` is declared in a page's:\n *\n * ```html\n * <native-tabs-outlet>\n *   <native-tab path=\"library\" title=\"Library\" sfSymbol=\"books.vertical.fill\" />\n *   <native-tab path=\"inbox\" title=\"Inbox\" sfSymbol=\"tray\" [badge]=\"unread()\" />\n * </native-tabs-outlet>\n * ```\n *\n * `path` names the child route this tab selects, the same way a `routerLink` names one, and is\n * what native identifies the tab by. Everything else is an ordinary input, which is the point of\n * declaring tabs here rather than in the route config: a badge is a count that changes, a title\n * may be translated, and a tab may not exist at all until a feature flag says so. Route data\n * cannot bind to any of that.\n *\n * **A bar item is not a view.** `UITabBarItem` is a model object - a title, an image and a badge\n * string - and UIKit has no way to put a view in its place; Android's bottom-navigation item is\n * the same. That is why this takes no content, while `<native-header-item>` does: a navigation\n * bar really does hold subviews. What customisation exists is here as inputs: images instead of\n * symbols, a different icon when selected, and the per-state appearance below.\n *\n * The host element *is* the `RNSTabsScreen`. The outlet keeps the screen mounted and creates\n * each activated route's component on a child view, so destroying a route cannot remove this\n * tab item from the bar.\n */\nimport { Component, ElementRef, computed, inject, input, type OnInit } from '@angular/core';\nimport { nativePlatform, type EngineNode, HostEngine } from '@ng-native/fabric';\nimport { NATIVE_TAB_DEFAULTS } from './native-bar-defaults.ts';\nimport { ownHost } from './own-host.ts';\n\n/**\n * Where a tab's picture comes from.\n *\n * `template` is the one worth knowing about: the image is drawn as a mask and tinted to the bar's\n * colour, so it follows selection the way a symbol does. `image` renders as authored, which is\n * what a multi-colour logo wants and what a monochrome icon almost never does.\n */\nexport type TabIcon =\n  | { readonly sfSymbol: string }\n  /** An image in the iOS asset catalogue, by name. */\n  | { readonly xcasset: string }\n  /** A `require()`d asset or a `{ uri }`, drawn as authored. */\n  | { readonly image: unknown }\n  /** The same, drawn as a mask and tinted. */\n  | { readonly template: unknown }\n  /** Android: a drawable resource name. */\n  | { readonly drawable: string };\n\n/** One of Apple's standard items, which brings its own icon and title. */\nexport type TabSystemItem =\n  | 'none'\n  | 'bookmarks'\n  | 'contacts'\n  | 'downloads'\n  | 'favorites'\n  | 'featured'\n  | 'history'\n  | 'more'\n  | 'mostRecent'\n  | 'mostViewed'\n  | 'recents'\n  | 'search'\n  | 'topRated';\n\nexport type TabBarBlurEffect =\n  | 'none'\n  | 'systemDefault'\n  | 'extraLight'\n  | 'light'\n  | 'dark'\n  | 'regular'\n  | 'prominent'\n  | 'systemUltraThinMaterial'\n  | 'systemThinMaterial'\n  | 'systemMaterial'\n  | 'systemThickMaterial'\n  | 'systemChromeMaterial';\n\n/**\n * How an item looks in one state. The names are the native ones, spelled as the codegen spec\n * spells them, so this forwards rather than translates and Apple's own documentation still reads\n * across.\n */\nexport interface TabStateAppearance {\n  tabBarItemTitleFontFamily?: string;\n  tabBarItemTitleFontSize?: number;\n  tabBarItemTitleFontWeight?: string | number;\n  tabBarItemTitleFontStyle?: string;\n  tabBarItemTitleFontColor?: string | number;\n  tabBarItemTitlePositionAdjustment?: { horizontal?: number; vertical?: number };\n  tabBarItemIconColor?: string | number;\n  tabBarItemBadgeBackgroundColor?: string | number;\n}\n\n/** The four states an item can be in. Anything absent falls back to the platform's own. */\nexport interface TabItemAppearance {\n  normal?: TabStateAppearance;\n  selected?: TabStateAppearance;\n  focused?: TabStateAppearance;\n  disabled?: TabStateAppearance;\n}\n\n/**\n * How the bar looks, per layout. `stacked` is the usual icon-over-title item; `inline` and\n * `compactInline` are the side-by-side layouts iPad and a compact height use.\n */\nexport interface TabAppearance {\n  stacked?: TabItemAppearance;\n  inline?: TabItemAppearance;\n  compactInline?: TabItemAppearance;\n  tabBarBackgroundColor?: string | number;\n  tabBarShadowColor?: string | number;\n  tabBarBlurEffect?: TabBarBlurEffect;\n}\n\n/** One icon, as the props native reads it through. */\nexport interface TabIconProps {\n  iconType?: string;\n  iconResourceName?: string;\n  iconImageSource?: unknown;\n  drawableIconResourceName?: string;\n  imageIconResource?: unknown;\n}\n\n/**\n * An icon and its selected counterpart, as one set of props.\n *\n * Native carries a single `iconType` for both states, so the two have to be the same kind of\n * thing: a template image cannot become a symbol when selected. React Native Screens throws on\n * that pairing and so does this, because the alternative - what happened before this checked - is\n * that native quietly keeps the unselected icon and nothing anywhere says why.\n */\nexport function tabIconProps(\n  icon: TabIconProps,\n  selectedIcon: TabIconProps,\n): TabIconProps & {\n  selectedIconResourceName?: string;\n  selectedIconImageSource?: unknown;\n  selectedDrawableIconResourceName?: string;\n  selectedImageIconResource?: unknown;\n} {\n  const hasBase = icon.iconType !== undefined || icon.drawableIconResourceName !== undefined;\n  const hasSelected =\n    selectedIcon.iconType !== undefined || selectedIcon.drawableIconResourceName !== undefined;\n\n  if (hasSelected && !hasBase) {\n    throw new Error('[angular-native] <native-tab> has a selectedIcon but no icon to select from');\n  }\n  if (hasSelected && icon.iconType !== selectedIcon.iconType) {\n    throw new Error(\n      `[angular-native] <native-tab> icon and selectedIcon must be the same kind: native has ` +\n        `one iconType for both, so '${icon.iconType}' and '${selectedIcon.iconType}' cannot pair.`,\n    );\n  }\n\n  return {\n    ...icon,\n    selectedIconResourceName: selectedIcon.iconResourceName,\n    selectedIconImageSource: selectedIcon.iconImageSource,\n    selectedDrawableIconResourceName: selectedIcon.drawableIconResourceName,\n    selectedImageIconResource: selectedIcon.imageIconResource,\n  };\n}\n\ndeclare const ngDevMode: unknown;\n\n/** The paths already warned about, so a tab bar rebuilt by a navigation says it once. */\nconst warnedTabs = new Set<string>();\n\n/**\n * Says, once per path and in development only, that a tab has no icon on the platform running it\n * because it names only the other platform's shorthand. A tab written against the iOS simulator\n * with `sfSymbol` shows a title and nothing above it on Android.\n */\nfunction warnIfIconOnOnePlatform(tab: NativeTab): void {\n  if (typeof ngDevMode !== 'undefined' && !ngDevMode) return;\n  if (tab.icon() || tab.systemItem()) return;\n  const [own, other, missing, platform] =\n    nativePlatform() === 'android'\n      ? [tab.drawable(), tab.sfSymbol(), 'drawable', 'Android']\n      : nativePlatform() === 'ios'\n        ? [tab.sfSymbol(), tab.drawable(), 'sfSymbol', 'iOS']\n        : [];\n  if (own || !other) return;\n  const path = tab.path();\n  if (warnedTabs.has(path)) return;\n  warnedTabs.add(path);\n  console.warn(\n    `[angular-native] <native-tab path=\"${path}\"> has no icon on ${platform}: ${platform} reads ` +\n      `only ${missing}. Add ${missing}=\"...\", or bind [icon] for a tab meant for one platform.`,\n  );\n}\n\n@Component({\n  selector: 'native-tab',\n  template: '',\n  host: {\n    '[screenKey]': 'path()',\n    '[title]': 'title()',\n    '[badgeValue]': 'badge()',\n    '[tabBarItemAccessibilityLabel]': 'accessibilityLabel()',\n    '[systemItem]': 'systemItem()',\n    // `isTitleUndefined` is what `TabsScreen.ios.tsx` derives from the title, and it is not a\n    // synonym for \"no title\": with a title set and this left at its default, the item renders as\n    // an icon with a gap where the label belongs.\n    '[isTitleUndefined]': 'title() === undefined',\n    '[iconType]': 'icons().iconType',\n    '[iconResourceName]': 'icons().iconResourceName',\n    '[iconImageSource]': 'icons().iconImageSource',\n    '[selectedIconResourceName]': 'icons().selectedIconResourceName',\n    '[selectedIconImageSource]': 'icons().selectedIconImageSource',\n    '[drawableIconResourceName]': 'icons().drawableIconResourceName',\n    '[imageIconResource]': 'icons().imageIconResource',\n    '[selectedDrawableIconResourceName]': 'icons().selectedDrawableIconResourceName',\n    '[selectedImageIconResource]': 'icons().selectedImageIconResource',\n    '[standardAppearance]': 'standard()',\n    '[scrollEdgeAppearance]': 'scrollEdge()',\n  },\n})\nexport class NativeTab implements OnInit {\n  private readonly engine = inject(HostEngine);\n  /** The app's `withTabDefaults`, for an appearance this tab does not bind itself. */\n  private readonly defaults = inject(NATIVE_TAB_DEFAULTS);\n\n  /**\n   * The `RNSTabsScreen` this tab is. The outlet creates the activated route's component inside\n   * it, which is why it is public: a tab is a slot as well as a bar item.\n   */\n  readonly screen: EngineNode;\n\n  constructor() {\n    this.screen = ownHost(inject(ElementRef).nativeElement as EngineNode, this.constructor);\n  }\n\n  /**\n   * The child route this tab selects, as a path segment: `library` for `/tabs/library`. Native\n   * identifies the tab by it too, so it must be unique in the bar.\n   */\n  readonly path = input.required<string>();\n\n  /** The label under the icon. Absent gives an icon-only item. */\n  readonly title = input<string>();\n\n  /** iOS: an SF Symbol name, e.g. `books.vertical.fill`. Shorthand for `[icon]`. */\n  readonly sfSymbol = input<string>();\n\n  /** Android: a drawable resource name. Shorthand for `[icon]`. */\n  readonly drawable = input<string>();\n\n  /** Anything a symbol name cannot say: an image, a template image, an asset-catalogue name. */\n  readonly icon = input<TabIcon>();\n\n  /** Shown while this tab is the selected one. Absent leaves the platform to tint `icon`. */\n  readonly selectedIcon = input<TabIcon>();\n\n  /** One of Apple's standard items, which supplies its own icon and title. */\n  readonly systemItem = input<TabSystemItem>();\n\n  /** The badge on the item: a count, or a single character for a dot. */\n  readonly badge = input<string>();\n\n  /** Announced instead of the title. */\n  readonly accessibilityLabel = input<string>();\n\n  /** How the item looks. Colours are processed here, because native never sees the object's keys. */\n  readonly standardAppearance = input<TabAppearance>();\n\n  /** The same, for when the scroll view behind the bar is at its edge. */\n  readonly scrollEdgeAppearance = input<TabAppearance>();\n\n  ngOnInit(): void {\n    warnIfIconOnOnePlatform(this);\n  }\n\n  protected readonly standard = computed(() =>\n    this.processAppearance(this.standardAppearance() ?? this.defaults().standardAppearance),\n  );\n  protected readonly scrollEdge = computed(() =>\n    this.processAppearance(this.scrollEdgeAppearance() ?? this.defaults().scrollEdgeAppearance),\n  );\n\n  protected readonly icons = computed(() =>\n    tabIconProps(\n      this.iconProps(this.icon() ?? this.shorthand()),\n      this.iconProps(this.selectedIcon()),\n    ),\n  );\n\n  /**\n   * `sfSymbol` and `drawable` say the same thing as `icon`, in the form most tabs want. A tab\n   * names both to have an icon on both platforms, so the running platform's own comes first:\n   * Android reads only a drawable, and iOS only a symbol.\n   */\n  private shorthand(): TabIcon | undefined {\n    const symbol = this.sfSymbol();\n    const drawable = this.drawable();\n    const icons = [symbol && { sfSymbol: symbol }, drawable && { drawable }];\n    if (nativePlatform() === 'android') icons.reverse();\n    return icons.find((icon) => icon) || undefined;\n  }\n\n  /**\n   * One icon, as the four props native reads it through. A `require()`d asset is an id until the\n   * host resolves it, which is the same thing an `<image src>` needs and the engine only does for\n   * props it knows by name.\n   */\n  private iconProps(icon: TabIcon | undefined): TabIconProps {\n    if (!icon) return {};\n    if ('sfSymbol' in icon) return { iconType: 'sfSymbol', iconResourceName: icon.sfSymbol };\n    if ('xcasset' in icon) return { iconType: 'xcasset', iconResourceName: icon.xcasset };\n    if ('drawable' in icon) return { drawableIconResourceName: icon.drawable };\n\n    const source = this.engine.resolveAsset('image' in icon ? icon.image : icon.template);\n    return nativePlatform() === 'android'\n      ? { imageIconResource: source }\n      : { iconType: 'image' in icon ? 'image' : 'template', iconImageSource: source };\n  }\n\n  private processAppearance(appearance: TabAppearance | undefined): object | undefined {\n    if (!appearance) return undefined;\n    return {\n      ...appearance,\n      stacked: this.processItem(appearance.stacked),\n      inline: this.processItem(appearance.inline),\n      compactInline: this.processItem(appearance.compactInline),\n      tabBarBackgroundColor: this.engine.color(appearance.tabBarBackgroundColor),\n      tabBarShadowColor: this.engine.color(appearance.tabBarShadowColor),\n    };\n  }\n\n  private processItem(item: TabItemAppearance | undefined): object | undefined {\n    if (!item) return undefined;\n    return {\n      normal: this.processState(item.normal),\n      selected: this.processState(item.selected),\n      focused: this.processState(item.focused),\n      disabled: this.processState(item.disabled),\n    };\n  }\n\n  private processState(state: TabStateAppearance | undefined): object | undefined {\n    if (!state) return undefined;\n    return {\n      ...state,\n      // Native declares the weight as a string, and `600` is the natural way to write one.\n      tabBarItemTitleFontWeight:\n        state.tabBarItemTitleFontWeight === undefined\n          ? undefined\n          : String(state.tabBarItemTitleFontWeight),\n      tabBarItemTitleFontColor: this.engine.color(state.tabBarItemTitleFontColor),\n      tabBarItemIconColor: this.engine.color(state.tabBarItemIconColor),\n      tabBarItemBadgeBackgroundColor: this.engine.color(state.tabBarItemBadgeBackgroundColor),\n    };\n  }\n}\n"]}

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

@@ -34,6 +34,7 @@ export declare class NativeTabsOutlet implements RouterOutletContract, AfterCont
     private readonly parentContexts;
     private readonly renderer;
     private readonly applicationRef;
+    private readonly changeDetector;
     private readonly injector;
     private readonly host;
     private readonly route;
@@ -69,6 +70,12 @@ export declare class NativeTabsOutlet implements RouterOutletContract, AfterCont
     constructor();
     /** A bar nobody has navigated into yet still has to show a selected item. */
     ngAfterContentInit(): void;
+    /**
+     * The route the router is already on, for an outlet created after the navigation that reached
+     * it, as `NativeStackOutlet` takes its own: a tab bar held behind a condition until a session
+     * is ready. Once the tabs are read, since activating one needs to know which they are.
+     */
+    private activateCurrentRoute;
     /** The tabs in the bar, in template order. Exposed for tests. */
     get tabKeys(): string[];
     /** Which tab native is showing. Exposed for tests. */
@@ -115,6 +122,13 @@ export declare class NativeTabsOutlet implements RouterOutletContract, AfterCont
     private goBack;
     /** Keep the tab in front on the url it has reached, as long as the url is still inside it. */
     private follow;
+    /**
+     * The url of the tab `url` is a page inside, when nothing has opened that tab: the tab's own
+     * first screen, which a push into the tab from outside it shows first.
+     */
+    private unopenedTabOf;
+    /** Whether `url` is a tab other than the one in front, or a page inside one. */
+    private behind;
     private request;
     /**
      * Native switched tab. Acknowledge the new state, then navigate: the router is authoritative