@ng-native/router 0.15.0 → 0.16.0

package/dist/native-header-item.js

@@ -10,13 +10,27 @@
  * Native bar button items would look truer to the platform and bring menus and system symbols
  * with them, but they are data rather than views; they are a later opt-in.
  */
-import { Component, ElementRef, computed, inject, input } from '@angular/core';
+import { Component, ElementRef, computed, effect, inject, input } from '@angular/core';
+import { HostEngine, nativePlatform } from '@ng-native/fabric';
 import { ownHost } from "./own-host.js";
 import { optionalBoolean } from "./transforms.js";
 import * as i0 from "@angular/core";
+/**
+ * A title item's least size on iOS, under any the app gives it. react-native-screens makes the
+ * item the bar's title view at its Yoga size, and UIKit lays out no title view of 0 by 0, so a
+ * `ui-host` sized to its SwiftUI content, which has no size until it is laid out, stayed 0 by 0.
+ */
+const TITLE_LEAST = { minWidth: 1, minHeight: 1 };
 export class NativeHeaderItem {
     constructor() {
-        ownHost(inject(ElementRef).nativeElement, this.constructor);
+        const node = inject(ElementRef).nativeElement;
+        ownHost(node, this.constructor);
+        const engine = (node.host ?? inject(HostEngine));
+        if (nativePlatform() === 'ios') {
+            effect(() => {
+                engine.setDefaultStyle?.(node, this.slot() === 'center' ? TITLE_LEAST : undefined);
+            });
+        }
     }
     /** Which slot to sit in. Native defaults to `left`. */
     type = input(/* @ts-ignore */

package/dist/native-header-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"native-header-item.js","sourceRoot":"","sources":["../src/native-header-item.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE/E,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;;AAgBlD,MAAM,OAAO,gBAAgB;IAC3B;QACE,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,aAA2B,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAC5E,CAAC;IAED,uDAAuD;IAC9C,IAAI,GAAG,KAAK;wFAAkB,CAAC;IAExC;;;;OAIG;IACgB,IAAI,GAAG,QAAQ,CAAC,GAAG,EAAE;QACtC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;QACzB,OAAO,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;IAC5C,CAAC;6EAAC,CAAC;IACH,+DAA+D;IACtD,qBAAqB,GAAG,KAAK,CAAC,SAAS,6FAAI,SAAS,EAAE,eAAe,GAAG,CAAC;uGAlBvE,gBAAgB;2FAAhB,gBAAgB,udANjB,gBAAgB;;2FAMf,gBAAgB;kBAR5B,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,QAAQ,EAAE,gBAAgB;oBAC1B,IAAI,EAAE;wBACJ,QAAQ,EAAE,QAAQ;wBAClB,yBAAyB,EAAE,yBAAyB;qBACrD;iBACF","sourcesContent":["/**\n * Anything Angular can render, placed in one of the navigation bar's slots.\n *\n * Commits as `RNSScreenStackHeaderSubview`, whose `type` picks the slot. A `right` item is the\n * usual \"Done\" or \"Edit\" button; `back` replaces the chevron, which needs\n * `backButtonInCustomView` on the header; `searchBar` expects a search bar rather than\n * arbitrary content.\n *\n * Press handling is the responder system, so a `pressable` inside one works like anywhere else.\n * Native bar button items would look truer to the platform and bring menus and system symbols\n * with them, but they are data rather than views; they are a later opt-in.\n */\nimport { Component, ElementRef, computed, inject, input } from '@angular/core';\nimport type { EngineNode } from '@ng-native/fabric';\nimport { ownHost } from './own-host.ts';\nimport { optionalBoolean } from './transforms.ts';\n\n/**\n * The bar slots. `title` and `center` are the same place: iOS draws both as the title view, and\n * `title` is committed as `center`, the only spelling Android's header knows.\n */\nexport type HeaderItemType = 'back' | 'left' | 'center' | 'title' | 'right' | 'searchBar';\n\n@Component({\n  selector: 'native-header-item',\n  template: '<ng-content />',\n  host: {\n    '[type]': 'slot()',\n    '[hidesSharedBackground]': 'hidesSharedBackground()',\n  },\n})\nexport class NativeHeaderItem {\n  constructor() {\n    ownHost(inject(ElementRef).nativeElement as EngineNode, this.constructor);\n  }\n\n  /** Which slot to sit in. Native defaults to `left`. */\n  readonly type = input<HeaderItemType>();\n\n  /**\n   * What reaches native. react-native-screens' spec lists `title`, and iOS takes it, but Android's\n   * `ScreenStackHeaderSubviewManager` throws `Unknown type title` while mounting the item, which\n   * takes the screen down with it: a page that worked on iOS crashed on Android as it opened.\n   */\n  protected readonly slot = computed(() => {\n    const type = this.type();\n    return type === 'title' ? 'center' : type;\n  });\n  /** Opt out of the bar's shared background behind this item. */\n  readonly hidesSharedBackground = input(undefined, { transform: optionalBoolean });\n}\n"]}
+{"version":3,"file":"native-header-item.js","sourceRoot":"","sources":["../src/native-header-item.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvF,OAAO,EAAgC,UAAU,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC7F,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;;AAQlD;;;;GAIG;AACH,MAAM,WAAW,GAAG,EAAE,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAW,CAAC;AAU3D,MAAM,OAAO,gBAAgB;IAC3B;QACE,MAAM,IAAI,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,aAA2B,CAAC;QAC5D,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QAChC,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,MAAM,CAAC,UAAU,CAAC,CAAoB,CAAC;QACpE,IAAI,cAAc,EAAE,KAAK,KAAK,EAAE,CAAC;YAC/B,MAAM,CAAC,GAAG,EAAE;gBACV,MAAM,CAAC,eAAe,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;YACrF,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,uDAAuD;IAC9C,IAAI,GAAG,KAAK;wFAAkB,CAAC;IAExC;;;;OAIG;IACgB,IAAI,GAAG,QAAQ,CAAC,GAAG,EAAE;QACtC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;QACzB,OAAO,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;IAC5C,CAAC;6EAAC,CAAC;IACH,+DAA+D;IACtD,qBAAqB,GAAG,KAAK,CAAC,SAAS,6FAAI,SAAS,EAAE,eAAe,GAAG,CAAC;uGAzBvE,gBAAgB;2FAAhB,gBAAgB,udANjB,gBAAgB;;2FAMf,gBAAgB;kBAR5B,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,QAAQ,EAAE,gBAAgB;oBAC1B,IAAI,EAAE;wBACJ,QAAQ,EAAE,QAAQ;wBAClB,yBAAyB,EAAE,yBAAyB;qBACrD;iBACF","sourcesContent":["/**\n * Anything Angular can render, placed in one of the navigation bar's slots.\n *\n * Commits as `RNSScreenStackHeaderSubview`, whose `type` picks the slot. A `right` item is the\n * usual \"Done\" or \"Edit\" button; `back` replaces the chevron, which needs\n * `backButtonInCustomView` on the header; `searchBar` expects a search bar rather than\n * arbitrary content.\n *\n * Press handling is the responder system, so a `pressable` inside one works like anywhere else.\n * Native bar button items would look truer to the platform and bring menus and system symbols\n * with them, but they are data rather than views; they are a later opt-in.\n */\nimport { Component, ElementRef, computed, effect, inject, input } from '@angular/core';\nimport { type Engine, type EngineNode, HostEngine, nativePlatform } from '@ng-native/fabric';\nimport { ownHost } from './own-host.ts';\nimport { optionalBoolean } from './transforms.ts';\n\n/**\n * The bar slots. `title` and `center` are the same place: iOS draws both as the title view, and\n * `title` is committed as `center`, the only spelling Android's header knows.\n */\nexport type HeaderItemType = 'back' | 'left' | 'center' | 'title' | 'right' | 'searchBar';\n\n/**\n * A title item's least size on iOS, under any the app gives it. react-native-screens makes the\n * item the bar's title view at its Yoga size, and UIKit lays out no title view of 0 by 0, so a\n * `ui-host` sized to its SwiftUI content, which has no size until it is laid out, stayed 0 by 0.\n */\nconst TITLE_LEAST = { minWidth: 1, minHeight: 1 } as const;\n\n@Component({\n  selector: 'native-header-item',\n  template: '<ng-content />',\n  host: {\n    '[type]': 'slot()',\n    '[hidesSharedBackground]': 'hidesSharedBackground()',\n  },\n})\nexport class NativeHeaderItem {\n  constructor() {\n    const node = inject(ElementRef).nativeElement as EngineNode;\n    ownHost(node, this.constructor);\n    const engine = (node.host ?? inject(HostEngine)) as Partial<Engine>;\n    if (nativePlatform() === 'ios') {\n      effect(() => {\n        engine.setDefaultStyle?.(node, this.slot() === 'center' ? TITLE_LEAST : undefined);\n      });\n    }\n  }\n\n  /** Which slot to sit in. Native defaults to `left`. */\n  readonly type = input<HeaderItemType>();\n\n  /**\n   * What reaches native. react-native-screens' spec lists `title`, and iOS takes it, but Android's\n   * `ScreenStackHeaderSubviewManager` throws `Unknown type title` while mounting the item, which\n   * takes the screen down with it: a page that worked on iOS crashed on Android as it opened.\n   */\n  protected readonly slot = computed(() => {\n    const type = this.type();\n    return type === 'title' ? 'center' : type;\n  });\n  /** Opt out of the bar's shared background behind this item. */\n  readonly hidesSharedBackground = input(undefined, { transform: optionalBoolean });\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-native/router",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "@angular/router over native navigation for Angular Native: stack and tab outlets, native headers and links.",
   "keywords": [
     "angular",
@@ -17,8 +17,8 @@
   "type": "module",
   "main": "dist/index.js",
   "dependencies": {
-    "@ng-native/device": "0.15.0",
-    "@ng-native/fabric": "0.15.0"
+    "@ng-native/device": "0.16.0",
+    "@ng-native/fabric": "0.16.0"
   },
   "peerDependencies": {
     "@angular/common": "^22.0.0",