@symbiote-native/navigation 2.1.0 → 2.2.0

package/src/angular/index.ts

@@ -15,7 +15,11 @@ export type {
   IScreenOptionsArgs,
   IScreenOptionsResolver,
 } from './screen.directive';
-export type { IScreenOptions, IStackAnimation, IStackPresentation } from '../core';
+export type {
+  IScreenOptions,
+  IStackAnimation,
+  IStackPresentation,
+} from '../core';
 
 export {
   injectNavigation,
@@ -46,7 +50,10 @@ export type { ILinkingConfig, IScreenLinkingConfig } from '../core';
 export { Tab } from './tabs';
 export type { ITabNavigatorHandle } from './tabs';
 export { TabScreenDirective } from './tab-screen.directive';
-export type { ITabScreenOptionsArgs, ITabScreenOptionsResolver } from './tab-screen.directive';
+export type {
+  ITabScreenOptionsArgs,
+  ITabScreenOptionsResolver,
+} from './tab-screen.directive';
 export type { ITabOptions, ITabBarIcon } from '../core';
 
 // Drawer: the swipeable drawer navigator, a PURE-JS UI (PanResponder + Animated, no
@@ -54,10 +61,19 @@ export type { ITabOptions, ITabBarIcon } from '../core';
 // ../register import above). See drawer.ts's header for the feasibility note re:
 // react-native-gesture-handler / react-native-reanimated parity gaps.
 export { Drawer } from './drawer';
-export type { IDrawerNavigatorHandle, IDrawerDescriptorMap, IDrawerContentContext } from './drawer';
+export type {
+  IDrawerNavigatorHandle,
+  IDrawerDescriptorMap,
+  IDrawerContentContext,
+} from './drawer';
 export { DrawerScreenDirective } from './drawer-screen.directive';
 export type {
   IDrawerScreenOptionsArgs,
   IDrawerScreenOptionsResolver,
 } from './drawer-screen.directive';
-export type { IDrawerOptions, IDrawerScreenOptions, IDrawerType, IDrawerPosition } from '../core';
+export type {
+  IDrawerOptions,
+  IDrawerScreenOptions,
+  IDrawerType,
+  IDrawerPosition,
+} from '../core';

package/src/angular/injectors/inject-focus-effect.ts

@@ -26,8 +26,14 @@ export function injectFocusEffect(effect: IFocusEffectCallback): void {
     cleanup = undefined;
   };
 
-  const unsubscribeFocus = context.emitter.addListener(NAVIGATION_EVENT_FOCUS, runEffect);
-  const unsubscribeBlur = context.emitter.addListener(NAVIGATION_EVENT_BLUR, runCleanup);
+  const unsubscribeFocus = context.emitter.addListener(
+    NAVIGATION_EVENT_FOCUS,
+    runEffect,
+  );
+  const unsubscribeBlur = context.emitter.addListener(
+    NAVIGATION_EVENT_BLUR,
+    runCleanup,
+  );
 
   destroyRef.onDestroy(() => {
     unsubscribeFocus();

package/src/angular/injectors/inject-is-focused.ts

@@ -13,11 +13,13 @@ export function injectIsFocused(): Signal<boolean> {
   const destroyRef = inject(DestroyRef);
   const isFocused = signal(false);
 
-  const unsubscribeFocus = context.emitter.addListener(NAVIGATION_EVENT_FOCUS, () =>
-    isFocused.set(true),
+  const unsubscribeFocus = context.emitter.addListener(
+    NAVIGATION_EVENT_FOCUS,
+    () => isFocused.set(true),
   );
-  const unsubscribeBlur = context.emitter.addListener(NAVIGATION_EVENT_BLUR, () =>
-    isFocused.set(false),
+  const unsubscribeBlur = context.emitter.addListener(
+    NAVIGATION_EVENT_BLUR,
+    () => isFocused.set(false),
   );
   destroyRef.onDestroy(() => {
     unsubscribeFocus();

package/src/angular/injectors/inject-navigation-state.ts

@@ -36,10 +36,13 @@ export function injectNavigationState<TResult>(
 
   const result = signal(selector({ routes: [route] }));
 
-  const unsubscribe = context.emitter.addListener(NAVIGATION_EVENT_STATE, (state: unknown) => {
-    if (!isNavigatorState(state)) return;
-    result.set(selector(state));
-  });
+  const unsubscribe = context.emitter.addListener(
+    NAVIGATION_EVENT_STATE,
+    (state: unknown) => {
+      if (!isNavigatorState(state)) return;
+      result.set(selector(state));
+    },
+  );
   destroyRef.onDestroy(unsubscribe);
 
   return result.asReadonly();

package/src/angular/injectors/inject-navigation.ts

@@ -6,11 +6,20 @@
 // surface. All pub/sub logic lives in ../../core/navigation-events; this function only reads
 // NavigationContextService and binds identity.
 
-import type { INavigationEventListener, INavigationEventName } from '../../core';
-import { requireNavigationContext, type IAnyNavigatorHandle } from '../navigation-context.service';
+import type {
+  INavigationEventListener,
+  INavigationEventName,
+} from '../../core';
+import {
+  requireNavigationContext,
+  type IAnyNavigatorHandle,
+} from '../navigation-context.service';
 
 export type INavigationHandle = IAnyNavigatorHandle & {
-  addListener: (event: INavigationEventName, listener: INavigationEventListener) => () => void;
+  addListener: (
+    event: INavigationEventName,
+    listener: INavigationEventListener,
+  ) => () => void;
   // Walks exactly ONE hop up NavigationContextService's `parent` chain to the enclosing
   // navigator's handle (plain immediate-parent walking, no named/targeted ancestor lookup).
   getParent: () => IAnyNavigatorHandle | undefined;

package/src/angular/linking.ts

@@ -22,7 +22,10 @@ export function injectLinkingIntegration(
 ): void {
   const destroyRef = inject(DestroyRef);
 
-  function applyRoute(url: string, dispatch: (name: string, params?: unknown) => void): void {
+  function applyRoute(
+    url: string,
+    dispatch: (name: string, params?: unknown) => void,
+  ): void {
     const route = resolveRouteFromUrl(config, url);
     if (route === null) {
       dlog(`injectLinkingIntegration: no route resolved for "${url}"`);

package/src/angular/navigation-context.service.ts

@@ -38,7 +38,8 @@ export class NavigationContextService {
   // package's zoneless/signals-first convention. `navigation`/`emitter` are stable for a screen's
   // whole lifetime, so they stay plain fields - no reactivity needed there.
   private readonly routeSignal = signal<IRoute<unknown> | undefined>(undefined);
-  readonly route: Signal<IRoute<unknown> | undefined> = this.routeSignal.asReadonly();
+  readonly route: Signal<IRoute<unknown> | undefined> =
+    this.routeSignal.asReadonly();
 
   navigation!: IAnyNavigatorHandle;
   emitter!: INavigationEmitter;
@@ -57,7 +58,9 @@ export class NavigationContextService {
 // identical everywhere instead of six independently-typed copies. Must be called from an
 // injection context, same requirement `inject()` itself has - every call site is the first line
 // of an injectX function, which callers already only invoke from their own injection context.
-export function requireNavigationContext(injectorName: string): NavigationContextService {
+export function requireNavigationContext(
+  injectorName: string,
+): NavigationContextService {
   const context = inject(NavigationContextService, { optional: true });
   if (!context) {
     throw new Error(

package/src/angular/navigation-scope.directive.ts

@@ -9,7 +9,10 @@
 
 import { Directive, Input, inject, type OnChanges } from '@angular/core';
 import type { INavigationEmitter, IRoute } from '../core';
-import { NavigationContextService, type IAnyNavigatorHandle } from './navigation-context.service';
+import {
+  NavigationContextService,
+  type IAnyNavigatorHandle,
+} from './navigation-context.service';
 
 @Directive({
   selector: '[symbioteNavigationScope]',
@@ -17,7 +20,8 @@ import { NavigationContextService, type IAnyNavigatorHandle } from './navigation
   providers: [NavigationContextService],
 })
 export class NavigationScopeDirective implements OnChanges {
-  @Input({ required: true, alias: 'symbioteNavigationScope' }) route!: IRoute<unknown>;
+  @Input({ required: true, alias: 'symbioteNavigationScope' })
+  route!: IRoute<unknown>;
   @Input({ required: true }) navigation!: IAnyNavigatorHandle;
   @Input({ required: true }) emitter!: INavigationEmitter;
 

package/src/angular/screen.directive.ts

@@ -7,7 +7,12 @@
 // independent of whether the template is ever instantiated).
 
 import { Directive, Input, type Type } from '@angular/core';
-import type { ISearchBarCommands, ISearchBarOptions, IScreenOptions, IRoute } from '../core';
+import type {
+  ISearchBarCommands,
+  ISearchBarOptions,
+  IScreenOptions,
+  IRoute,
+} from '../core';
 import type { INavigatorHandle } from '../core';
 
 // The imperative ref (focus/blur/clearText/setText/cancelSearch/toggleCancelButton) carries a
@@ -21,7 +26,10 @@ export type IAngularSearchBarOptions = ISearchBarOptions & {
   ref?: { current: ISearchBarCommands | null };
 };
 
-export type IAngularScreenOptions = Omit<IScreenOptions, 'headerSearchBarOptions'> & {
+export type IAngularScreenOptions = Omit<
+  IScreenOptions,
+  'headerSearchBarOptions'
+> & {
   headerSearchBarOptions?: IAngularSearchBarOptions;
 };
 
@@ -34,7 +42,9 @@ export type IScreenOptionsArgs = {
   navigation: INavigatorHandle;
 };
 
-export type IScreenOptionsResolver = (args: IScreenOptionsArgs) => IAngularScreenOptions;
+export type IScreenOptionsResolver = (
+  args: IScreenOptionsArgs,
+) => IAngularScreenOptions;
 
 @Directive({
   selector: 'ng-template[symbioteScreen]',

package/src/angular/search-bar-ref.directive.ts

@@ -7,7 +7,14 @@
 // needed here: buildSearchBarHandle's own methods are already a LAZY getter over the node,
 // tolerant of the node existing-but-not-yet-committed, same contract every adapter shares).
 
-import { Directive, Input, inject, type OnDestroy, type OnInit, ElementRef } from '@angular/core';
+import {
+  Directive,
+  Input,
+  inject,
+  type OnDestroy,
+  type OnInit,
+  ElementRef,
+} from '@angular/core';
 import { isSymbioteNode, dlog, debugNodeId } from '@symbiote-native/engine';
 import { buildSearchBarHandle } from '../core';
 import type { ISearchBarCommands } from '../core';
@@ -17,7 +24,8 @@ import type { ISearchBarCommands } from '../core';
   standalone: true,
 })
 export class SearchBarRefDirective implements OnInit, OnDestroy {
-  @Input('symbioteSearchBarRef') ref: { current: ISearchBarCommands | null } | undefined;
+  @Input('symbioteSearchBarRef') ref:
+    { current: ISearchBarCommands | null } | undefined;
 
   private readonly elementRef = inject<ElementRef<unknown>>(ElementRef);
 

package/src/angular/stack/index.ts

@@ -91,13 +91,18 @@ import type {
 import { NavigationScopeDirective } from '../navigation-scope.directive';
 import { SearchBarRefDirective } from '../search-bar-ref.directive';
 import { ScreenDirective } from '../screen.directive';
-import type { IAngularScreenOptions, IScreenOptionsArgs } from '../screen.directive';
+import type {
+  IAngularScreenOptions,
+  IScreenOptionsArgs,
+} from '../screen.directive';
 
 export type { INavigatorHandle } from '../../core';
 
 // backTitleVisible defaults to `true` on both platforms per the codegen spec's own default - no
 // ios/android divergence in v1 scope (mirrors react/stack.ts's own constant exactly).
-const NAVIGATOR_PLATFORM: INavigatorPlatform = { defaultHeaderBackTitleVisible: true };
+const NAVIGATOR_PLATFORM: INavigatorPlatform = {
+  defaultHeaderBackTitleVisible: true,
+};
 
 let stackInstanceCounter = 0;
 
@@ -162,7 +167,9 @@ let stackInstanceCounter = 0;
     </ng-template>
 
     <ng-template #headerAndContentTpl let-route let-index="index">
-      <RNSScreenStackHeaderConfig [symbioteHostProps]="headerConfigProps(route, index)">
+      <RNSScreenStackHeaderConfig
+        [symbioteHostProps]="headerConfigProps(route, index)"
+      >
         @if (hasSearchBar(route)) {
           <RNSScreenStackHeaderSubview [symbioteHostProps]="headerSubviewProps">
             <RNSSearchBar
@@ -172,7 +179,9 @@ let stackInstanceCounter = 0;
           </RNSScreenStackHeaderSubview>
         }
       </RNSScreenStackHeaderConfig>
-      <RNSScreenContentWrapper [symbioteHostProps]="contentWrapperProps(route, index)">
+      <RNSScreenContentWrapper
+        [symbioteHostProps]="contentWrapperProps(route, index)"
+      >
         <ng-container
           [symbioteNavigationScope]="route"
           [navigation]="this"
@@ -185,7 +194,8 @@ let stackInstanceCounter = 0;
   `,
 })
 export class Stack implements AfterContentInit, OnDestroy, INavigatorHandle {
-  @ContentChildren(ScreenDirective) private readonly screenChildren!: QueryList<ScreenDirective>;
+  @ContentChildren(ScreenDirective)
+  private readonly screenChildren!: QueryList<ScreenDirective>;
 
   @Input() initialRouteName?: string;
   @Input() screenOptions?: IAngularScreenOptions;
@@ -215,7 +225,8 @@ export class Stack implements AfterContentInit, OnDestroy, INavigatorHandle {
 
   readonly push = (name: string, params?: unknown): void =>
     this.dispatch({ type: 'push', route: this.createRoute(name, params) });
-  readonly pop = (count?: number): void => this.dispatch({ type: 'pop', count });
+  readonly pop = (count?: number): void =>
+    this.dispatch({ type: 'pop', count });
   readonly popToTop = (): void => this.dispatch({ type: 'popToTop' });
   readonly popTo = (key: string): void => this.dispatch({ type: 'popTo', key });
   readonly replace = (name: string, params?: unknown): void =>
@@ -224,14 +235,17 @@ export class Stack implements AfterContentInit, OnDestroy, INavigatorHandle {
     this.dispatch({ type: 'setParams', key, params });
   readonly reset = (nextState: INavigatorState): void =>
     this.dispatch({ type: 'reset', state: nextState });
-  readonly canGoBack = (): boolean => (this.stateSignal()?.routes.length ?? 0) > 1;
+  readonly canGoBack = (): boolean =>
+    (this.stateSignal()?.routes.length ?? 0) > 1;
 
   ngAfterContentInit(): void {
     this.rebuildRegistry();
     this.initializeState();
-    this.screenChildrenSubscription = this.screenChildren.changes.subscribe(() => {
-      this.rebuildRegistry();
-    });
+    this.screenChildrenSubscription = this.screenChildren.changes.subscribe(
+      () => {
+        this.rebuildRegistry();
+      },
+    );
   }
 
   ngOnDestroy(): void {
@@ -261,24 +275,36 @@ export class Stack implements AfterContentInit, OnDestroy, INavigatorHandle {
 
   private initializeState(): void {
     if (this.stateSignal() !== undefined) return;
-    const initialRouteName = this.initialRouteName ?? this.registry.keys().next().value;
+    const initialRouteName =
+      this.initialRouteName ?? this.registry.keys().next().value;
     if (initialRouteName === undefined) {
       dlog('Stack: no <ng-template symbioteScreen> children registered');
       this.stateSignal.set(
-        createInitialNavigatorState({ key: this.routeIdPrefix, name: '', params: undefined }),
+        createInitialNavigatorState({
+          key: this.routeIdPrefix,
+          name: '',
+          params: undefined,
+        }),
       );
       return;
     }
     this.stateSignal.set(
       createInitialNavigatorState(
-        this.createRoute(initialRouteName, this.registry.get(initialRouteName)?.initialParams),
+        this.createRoute(
+          initialRouteName,
+          this.registry.get(initialRouteName)?.initialParams,
+        ),
       ),
     );
   }
 
   private createRoute(name: string, params: unknown): IRoute<unknown> {
     this.routeSequence += 1;
-    return { key: `${this.routeIdPrefix}-${name}-${this.routeSequence}`, name, params };
+    return {
+      key: `${this.routeIdPrefix}-${name}-${this.routeSequence}`,
+      name,
+      params,
+    };
   }
 
   private dispatch(action: INavigatorAction): void {
@@ -361,7 +387,8 @@ export class Stack implements AfterContentInit, OnDestroy, INavigatorHandle {
       isAndroid: Platform.OS === 'android',
       screenPassthrough: {
         [SCREEN_ON_DISMISSED]: () => this.dispatch({ type: 'pop', count: 1 }),
-        [SCREEN_ON_HEADER_BACK_BUTTON_CLICKED]: () => this.dispatch({ type: 'pop', count: 1 }),
+        [SCREEN_ON_HEADER_BACK_BUTTON_CLICKED]: () =>
+          this.dispatch({ type: 'pop', count: 1 }),
         [SCREEN_ON_APPEAR]: () => {
           dlog(`Stack: route "${route.name}" appeared (focus)`);
           this.emitterFor(route.key).emit(NAVIGATION_EVENT_FOCUS);
@@ -380,14 +407,19 @@ export class Stack implements AfterContentInit, OnDestroy, INavigatorHandle {
   }
 
   outerScreenIsModal(route: IRoute<unknown>, index: number): boolean {
-    return this.planFor(route, index).screenViewName === RNS_MODAL_SCREEN_VIEW_NAME;
+    return (
+      this.planFor(route, index).screenViewName === RNS_MODAL_SCREEN_VIEW_NAME
+    );
   }
 
   isInModal(route: IRoute<unknown>, index: number): boolean {
     return this.planFor(route, index).inModal;
   }
 
-  screenHostProps(route: IRoute<unknown>, index: number): Record<string, unknown> {
+  screenHostProps(
+    route: IRoute<unknown>,
+    index: number,
+  ): Record<string, unknown> {
     return this.planFor(route, index).screenProps;
   }
 
@@ -395,16 +427,25 @@ export class Stack implements AfterContentInit, OnDestroy, INavigatorHandle {
     return { style: resolveHeaderInModalStackStyle() };
   }
 
-  innerScreenProps(route: IRoute<unknown>, index: number): Record<string, unknown> {
+  innerScreenProps(
+    route: IRoute<unknown>,
+    index: number,
+  ): Record<string, unknown> {
     const plan = this.planFor(route, index);
     return { style: plan.innerScreenStyle, activityState: plan.activityState };
   }
 
-  contentWrapperProps(route: IRoute<unknown>, index: number): Record<string, unknown> {
+  contentWrapperProps(
+    route: IRoute<unknown>,
+    index: number,
+  ): Record<string, unknown> {
     return this.planFor(route, index).contentWrapperProps;
   }
 
-  headerConfigProps(route: IRoute<unknown>, index: number): Record<string, unknown> {
+  headerConfigProps(
+    route: IRoute<unknown>,
+    index: number,
+  ): Record<string, unknown> {
     return this.planFor(route, index).headerConfig.props;
   }
 
@@ -412,11 +453,16 @@ export class Stack implements AfterContentInit, OnDestroy, INavigatorHandle {
     return this.mergedOptionsFor(route).headerSearchBarOptions !== undefined;
   }
 
-  searchBarRef(route: IRoute<unknown>): { current: ISearchBarCommands | null } | undefined {
+  searchBarRef(
+    route: IRoute<unknown>,
+  ): { current: ISearchBarCommands | null } | undefined {
     return this.mergedOptionsFor(route).headerSearchBarOptions?.ref;
   }
 
-  searchBarProps(route: IRoute<unknown>, index: number): Record<string, unknown> {
+  searchBarProps(
+    route: IRoute<unknown>,
+    index: number,
+  ): Record<string, unknown> {
     return this.planFor(route, index).searchBarProps ?? {};
   }
 }

package/src/angular/tab-screen.directive.ts

@@ -12,7 +12,9 @@ export type ITabScreenOptionsArgs = {
   navigation: ITabNavigatorHandle;
 };
 
-export type ITabScreenOptionsResolver = (props: ITabScreenOptionsArgs) => ITabOptions;
+export type ITabScreenOptionsResolver = (
+  props: ITabScreenOptionsArgs,
+) => ITabOptions;
 
 @Directive({
   selector: 'ng-template[symbioteTabScreen]',

package/src/angular/tabs/index.ts

@@ -66,7 +66,12 @@ let tabInstanceCounter = 0;
 @Component({
   selector: 'Tab',
   standalone: true,
-  imports: [NgComponentOutlet, NavigationScopeDirective, DescriptorOutlet, View],
+  imports: [
+    NgComponentOutlet,
+    NavigationScopeDirective,
+    DescriptorOutlet,
+    View,
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <View [style]="rootStyle">
@@ -101,7 +106,8 @@ export class Tab implements AfterContentInit, OnDestroy, ITabNavigatorHandle {
   // Keyed by name -> the LIVE TabScreenDirective instance - see stack.ts's matching comment for
   // why a snapshot copy would go stale on an in-place `[options]`/`[component]` change.
   private readonly registry = new Map<string, TabScreenDirective>();
-  private tabScreenChildrenSubscription: { unsubscribe: () => void } | undefined;
+  private tabScreenChildrenSubscription:
+    { unsubscribe: () => void } | undefined;
 
   private readonly stateSignal = signal<ITabRouterState | undefined>(undefined);
   readonly state = this.stateSignal.asReadonly();
@@ -116,9 +122,10 @@ export class Tab implements AfterContentInit, OnDestroy, ITabNavigatorHandle {
 
   ngAfterContentInit(): void {
     this.syncRegistry();
-    this.tabScreenChildrenSubscription = this.tabScreenChildren.changes.subscribe(() => {
-      this.syncRegistry();
-    });
+    this.tabScreenChildrenSubscription =
+      this.tabScreenChildren.changes.subscribe(() => {
+        this.syncRegistry();
+      });
   }
 
   ngOnDestroy(): void {
@@ -150,7 +157,8 @@ export class Tab implements AfterContentInit, OnDestroy, ITabNavigatorHandle {
   private syncRegistry(): void {
     this.rebuildRegistry();
     const routes = this.routesFromRegistry();
-    if (routes.length === 0) dlog('Tab: no <ng-template symbioteTabScreen> children registered');
+    if (routes.length === 0)
+      dlog('Tab: no <ng-template symbioteTabScreen> children registered');
     const current = this.stateSignal();
     if (current !== undefined) {
       this.stateSignal.set(reconcileTabRoutes(current, routes));
@@ -168,9 +176,15 @@ export class Tab implements AfterContentInit, OnDestroy, ITabNavigatorHandle {
     this.stateSignal.set(tabRouterReducer(current, action));
   }
 
-  private resolveTabOptions(entry: TabScreenDirective, route: IRoute<unknown>): ITabOptions {
+  private resolveTabOptions(
+    entry: TabScreenDirective,
+    route: IRoute<unknown>,
+  ): ITabOptions {
     const props: ITabScreenOptionsArgs = { route, navigation: this };
-    const own = typeof entry.options === 'function' ? entry.options(props) : entry.options;
+    const own =
+      typeof entry.options === 'function'
+        ? entry.options(props)
+        : entry.options;
     return { ...this.screenOptions, ...own };
   }
 
@@ -207,8 +221,12 @@ export class Tab implements AfterContentInit, OnDestroy, ITabNavigatorHandle {
   focusedRouteEmitter(): INavigationEmitter {
     const key = this.focusedRoute()?.key;
     return untracked(() => {
-      if (key === this.currentEmitterKey && this.currentEmitter) return this.currentEmitter;
-      const { blurKey, focusKey } = diffFocusedRoute(this.currentEmitterKey, key);
+      if (key === this.currentEmitterKey && this.currentEmitter)
+        return this.currentEmitter;
+      const { blurKey, focusKey } = diffFocusedRoute(
+        this.currentEmitterKey,
+        key,
+      );
       if (blurKey !== undefined && this.currentEmitter) {
         dlog('Tab: previous route blurred');
         this.currentEmitter.emit(NAVIGATION_EVENT_BLUR);
@@ -257,12 +275,18 @@ export class Tab implements AfterContentInit, OnDestroy, ITabNavigatorHandle {
     });
 
     const focusedRoute = this.focusedRoute();
-    const focusedEntry = focusedRoute ? this.registry.get(focusedRoute.name) : undefined;
+    const focusedEntry = focusedRoute
+      ? this.registry.get(focusedRoute.name)
+      : undefined;
     const focusedOptions =
       focusedEntry && focusedRoute
         ? this.resolveTabOptions(focusedEntry, focusedRoute)
         : this.screenOptions;
 
-    return renderTabBar({ items, style: focusedOptions?.tabBarStyle, passthrough: {} });
+    return renderTabBar({
+      items,
+      style: focusedOptions?.tabBarStyle,
+      passthrough: {},
+    });
   }
 }

package/src/core/constants.ts

@@ -11,12 +11,14 @@ export const RNS_SCREEN_VIEW_NAME = 'RNSScreen';
 // render-stack.ts for why a formSheet/modal screen MUST use this different Fabric name.
 export const RNS_MODAL_SCREEN_VIEW_NAME = 'RNSModalScreen';
 export const RNS_SCREEN_STACK_VIEW_NAME = 'RNSScreenStack';
-export const RNS_SCREEN_STACK_HEADER_CONFIG_VIEW_NAME = 'RNSScreenStackHeaderConfig';
+export const RNS_SCREEN_STACK_HEADER_CONFIG_VIEW_NAME =
+  'RNSScreenStackHeaderConfig';
 // The header-subview leaf react-native-screens itself uses to host arbitrary framework children
 // (left/right/back/title/center/searchBar) inside the header. Registered here for ground-truth
 // parity, but unconsumed by any fold in v1 scope: renderHeaderConfig's Descriptor never takes
 // framework children (see render-stack.ts), so mounting a subview child is left to the adapter.
-export const RNS_SCREEN_STACK_HEADER_SUBVIEW_VIEW_NAME = 'RNSScreenStackHeaderSubview';
+export const RNS_SCREEN_STACK_HEADER_SUBVIEW_VIEW_NAME =
+  'RNSScreenStackHeaderSubview';
 export const RNS_SEARCH_BAR_VIEW_NAME = 'RNSSearchBar';
 // react-native-screens' own JS layer (ScreenStackItem -> DebugContainer -> ScreenContentWrapper)
 // ALWAYS wraps a screen's content in this native view, `collapsable: false` so Fabric can never
@@ -43,7 +45,8 @@ export const STACK_ON_FINISH_TRANSITIONING = 'onFinishTransitioning';
 // plain bar-button-item press, and a press on a (possibly nested) menu action of a 'menu'-type
 // bar-button item.
 export const HEADER_ON_PRESS_BAR_BUTTON_ITEM = 'onPressHeaderBarButtonItem';
-export const HEADER_ON_PRESS_BAR_BUTTON_MENU_ITEM = 'onPressHeaderBarButtonMenuItem';
+export const HEADER_ON_PRESS_BAR_BUTTON_MENU_ITEM =
+  'onPressHeaderBarButtonMenuItem';
 
 // RNSSearchBar event prop keys (all DirectEventHandler in the codegen spec). onClose/onOpen are
 // Android-only per the codegen spec's own comment.