@symbiote-native/navigation 2.0.3 → 2.2.0

package/src/vue/stack/index.ts

@@ -13,7 +13,12 @@
 import { defineComponent, h, shallowRef, useId } from '@vue/runtime-core';
 import type { VNode } from '@vue/runtime-core';
 import { descriptorToVue, normalizeVueAttrs } from '@symbiote-native/vue';
-import { Platform, debugNodeId, dlog, isSymbioteNode } from '@symbiote-native/engine';
+import {
+  Platform,
+  debugNodeId,
+  dlog,
+  isSymbioteNode,
+} from '@symbiote-native/engine';
 import {
   NAVIGATION_EVENT_BLUR,
   NAVIGATION_EVENT_FOCUS,
@@ -35,6 +40,7 @@ import {
   createNavigationEmitter,
   isRecord,
   navigatorReducer,
+  reconcileStackRoutes,
   resolveScreenRenderPlan,
   resolveStackProps,
 } from '../../core';
@@ -47,7 +53,11 @@ import type {
 } from '../../core';
 import { NavigationScope, injectNavigationScope } from '../navigation-context';
 import { Screen } from '../screen';
-import type { IScreenOptionsArgs, IScreenProps, IVueScreenOptions } from '../screen';
+import type {
+  IScreenOptionsArgs,
+  IScreenProps,
+  IVueScreenOptions,
+} from '../screen';
 
 export type { INavigatorHandle } from '../../core';
 
@@ -61,7 +71,9 @@ export type IStackProps = {
 // backTitleVisible defaults to `true` on both platforms per the codegen spec's own default
 // (CT.WithDefault<boolean, 'true'>) - no ios/android divergence in v1 scope, so a single constant
 // stands in for the per-platform injection point ISliderPlatform-style adapters use elsewhere.
-const NAVIGATOR_PLATFORM: INavigatorPlatform = { defaultHeaderBackTitleVisible: true };
+const NAVIGATOR_PLATFORM: INavigatorPlatform = {
+  defaultHeaderBackTitleVisible: true,
+};
 
 type IScreenRegistryEntry = {
   component: IScreenProps['component'];
@@ -92,7 +104,9 @@ function asScreenOptionsOrResolver(value: unknown): IScreenProps['options'] {
   return asScreenOptions(value);
 }
 
-function collectRegistry(vnodes: readonly VNode[]): Map<string, IScreenRegistryEntry> {
+function collectRegistry(
+  vnodes: readonly VNode[],
+): Map<string, IScreenRegistryEntry> {
   const registry = new Map<string, IScreenRegistryEntry>();
   for (const vnode of vnodes) {
     if (vnode.type !== Screen || !isRecord(vnode.props)) continue;
@@ -114,7 +128,9 @@ function resolveScreenOptions(
   screenOptions: IVueScreenOptions | undefined,
 ): IVueScreenOptions {
   const own =
-    typeof entry.options === 'function' ? entry.options(screenOptionsArgs) : entry.options;
+    typeof entry.options === 'function'
+      ? entry.options(screenOptionsArgs)
+      : entry.options;
   return { ...screenOptions, ...own };
 }
 
@@ -167,25 +183,44 @@ const StackImpl = defineComponent<IStackProps>(
       });
     } else {
       initialState = createInitialNavigatorState(
-        createRoute(initialRouteName, initialRegistry.get(initialRouteName)?.initialParams),
+        createRoute(
+          initialRouteName,
+          initialRegistry.get(initialRouteName)?.initialParams,
+        ),
       );
     }
 
     const state = shallowRef<INavigatorState>(initialState);
 
+    // The screen names the render pass below last saw in the slot. A PLAIN local, not a ref: it is
+    // a cache of what was just rendered, never a reactive source, so refreshing it from inside the
+    // render closure is not a state write during render (which would re-trigger the very render
+    // effect that produced it).
+    let registeredNames: readonly string[] = [];
+
+    // A <Stack.Screen> marker can vanish from the slot while its route is still in the pushed
+    // history, which would leave that entry with nothing to render (reconcileStackRoutes' header).
+    // Reconciling on READ rather than writing the ref keeps the repair out of the render pass; the
+    // dispatch below then persists it, so the next push builds on the pruned history.
+    function currentState(): INavigatorState {
+      return reconcileStackRoutes(state.value, registeredNames);
+    }
+
     function dispatch(action: Parameters<typeof navigatorReducer>[1]): void {
-      state.value = navigatorReducer(state.value, action);
+      state.value = navigatorReducer(currentState(), action);
     }
 
     const handle: INavigatorHandle = {
-      push: (name, params) => dispatch({ type: 'push', route: createRoute(name, params) }),
+      push: (name, params) =>
+        dispatch({ type: 'push', route: createRoute(name, params) }),
       pop: count => dispatch({ type: 'pop', count }),
       popToTop: () => dispatch({ type: 'popToTop' }),
       popTo: key => dispatch({ type: 'popTo', key }),
-      replace: (name, params) => dispatch({ type: 'replace', route: createRoute(name, params) }),
+      replace: (name, params) =>
+        dispatch({ type: 'replace', route: createRoute(name, params) }),
       setParams: (params, key) => dispatch({ type: 'setParams', key, params }),
       reset: nextState => dispatch({ type: 'reset', state: nextState }),
-      canGoBack: () => state.value.routes.length > 1,
+      canGoBack: () => currentState().routes.length > 1,
     };
     expose(handle);
 
@@ -195,18 +230,21 @@ const StackImpl = defineComponent<IStackProps>(
     // useEffect, which must be deferred past render to avoid a descendant setState-during-render):
     // Vue's provide/inject + shallowRef.value writes are safe to perform directly inside the
     // render closure below, so the broadcast happens right there, once per render.
-    function broadcastState(): void {
-      for (const route of state.value.routes) {
-        emitterFor(route.key).emit(NAVIGATION_EVENT_STATE, state.value);
+    function broadcastState(current: INavigatorState): void {
+      for (const route of current.routes) {
+        emitterFor(route.key).emit(NAVIGATION_EVENT_STATE, current);
       }
       for (const routeKey of emitters.keys()) {
-        if (!state.value.routes.some(route => route.key === routeKey)) emitters.delete(routeKey);
+        if (!current.routes.some(route => route.key === routeKey))
+          emitters.delete(routeKey);
       }
     }
 
     return () => {
-      broadcastState();
       const registry = collectRegistry(slots.default?.() ?? []);
+      registeredNames = [...registry.keys()];
+      const current = currentState();
+      broadcastState(current);
       const screenOptions = asScreenOptions(attrs.screenOptions);
 
       // Investigation instrumentation (flicker-on-focus bug): STACK_ON_FINISH_TRANSITIONING is
@@ -221,21 +259,31 @@ const StackImpl = defineComponent<IStackProps>(
         },
       });
 
-      const children = state.value.routes.map((route, index) => {
+      const children = current.routes.map((route, index) => {
         const entry = registry.get(route.name);
         if (entry === undefined) {
           dlog(`Stack: no screen registered for route name "${route.name}"`);
           return null;
         }
 
-        const screenOptionsArgs: IScreenOptionsArgs = { route, navigation: handle };
-        const mergedOptions = resolveScreenOptions(entry, screenOptionsArgs, screenOptions);
-        const activityState = computeActivityState(index, state.value.routes.length);
+        const screenOptionsArgs: IScreenOptionsArgs = {
+          route,
+          navigation: handle,
+        };
+        const mergedOptions = resolveScreenOptions(
+          entry,
+          screenOptionsArgs,
+          screenOptions,
+        );
+        const activityState = computeActivityState(
+          index,
+          current.routes.length,
+        );
         // Investigation instrumentation (flicker-on-focus bug): fires on EVERY Stack render, not
         // just on transitions, so the log stream shows whether a route's activityState/index ever
         // changes outside of a push/pop dispatch. Kept behind DEBUG, never removed.
         dlog(
-          `Stack: render route "${route.name}" index=${index}/${state.value.routes.length - 1} ` +
+          `Stack: render route "${route.name}" index=${index}/${current.routes.length - 1} ` +
             `activityState=${activityState} at t=${Date.now()}`,
         );
 
@@ -245,27 +293,36 @@ const StackImpl = defineComponent<IStackProps>(
         const plan = resolveScreenRenderPlan({
           screenId: route.key,
           index,
-          routeCount: state.value.routes.length,
+          routeCount: current.routes.length,
           options: mergedOptions,
           platform: NAVIGATOR_PLATFORM,
           isAndroid: Platform.OS === 'android',
           screenPassthrough: {
             [SCREEN_ON_DISMISSED]: () => dispatch({ type: 'pop', count: 1 }),
-            [SCREEN_ON_HEADER_BACK_BUTTON_CLICKED]: () => dispatch({ type: 'pop', count: 1 }),
+            [SCREEN_ON_HEADER_BACK_BUTTON_CLICKED]: () =>
+              dispatch({ type: 'pop', count: 1 }),
             // onAppear/onDisappear are the definitive visibility boundary (post-transition-
             // animation), so 'focus'/'blur' fire exactly once per transition; onWillAppear/
             // onWillDisappear fire BEFORE the animation runs, so wiring them to emit() too would
             // double-invoke useFocusEffect per transition - they only get a debug log here.
             [SCREEN_ON_WILL_APPEAR]: () =>
-              dlog(`Stack: route "${route.name}" will appear at t=${Date.now()}`),
+              dlog(
+                `Stack: route "${route.name}" will appear at t=${Date.now()}`,
+              ),
             [SCREEN_ON_APPEAR]: () => {
-              dlog(`Stack: route "${route.name}" appeared (focus) at t=${Date.now()}`);
+              dlog(
+                `Stack: route "${route.name}" appeared (focus) at t=${Date.now()}`,
+              );
               routeEmitter.emit(NAVIGATION_EVENT_FOCUS);
             },
             [SCREEN_ON_WILL_DISAPPEAR]: () =>
-              dlog(`Stack: route "${route.name}" will disappear at t=${Date.now()}`),
+              dlog(
+                `Stack: route "${route.name}" will disappear at t=${Date.now()}`,
+              ),
             [SCREEN_ON_DISAPPEAR]: () => {
-              dlog(`Stack: route "${route.name}" disappeared (blur) at t=${Date.now()}`);
+              dlog(
+                `Stack: route "${route.name}" disappeared (blur) at t=${Date.now()}`,
+              );
               routeEmitter.emit(NAVIGATION_EVENT_BLUR);
             },
           },
@@ -292,7 +349,8 @@ const StackImpl = defineComponent<IStackProps>(
                   );
                   const appRef = searchBarOptions.ref;
                   if (appRef === undefined) return;
-                  appRef.value = node === null ? null : buildSearchBarHandle(() => node);
+                  appRef.value =
+                    node === null ? null : buildSearchBarHandle(() => node);
                 },
               }
             : undefined,
@@ -317,22 +375,26 @@ const StackImpl = defineComponent<IStackProps>(
         // sizing (see RNS_SCREEN_CONTENT_WRAPPER_VIEW_NAME's comment in core/constants.ts). A
         // `push` screen doesn't need it, but a `formSheet` one is otherwise left with no content
         // ever attached natively.
-        const content = h(RNS_SCREEN_CONTENT_WRAPPER_VIEW_NAME, plan.contentWrapperProps, [
-          h(
-            NavigationScope,
-            {
-              value: {
-                route,
-                navigation: handle,
-                emitter: routeEmitter,
-                parent: ambientScopeRef?.value,
+        const content = h(
+          RNS_SCREEN_CONTENT_WRAPPER_VIEW_NAME,
+          plan.contentWrapperProps,
+          [
+            h(
+              NavigationScope,
+              {
+                value: {
+                  route,
+                  navigation: handle,
+                  emitter: routeEmitter,
+                  parent: ambientScopeRef?.value,
+                },
               },
-            },
-            // No route/navigation props: the screen reads both through composables off the
-            // NavigationScope provided just above (useRoute / useStackNavigation).
-            () => h(entry.component),
-          ),
-        ]);
+              // No route/navigation props: the screen reads both through composables off the
+              // NavigationScope provided just above (useRoute / useStackNavigation).
+              () => h(entry.component),
+            ),
+          ],
+        );
 
         // react-native-screens' own Screen.tsx swaps in a DIFFERENT Fabric component
         // ('RNSModalScreen') for a modally-presented screen - its native updateLayoutMetrics:
@@ -356,7 +418,10 @@ const StackImpl = defineComponent<IStackProps>(
                   // RNSScreen.mm treats an unset/inactive nested screen as not yet pushed,
                   // leaving it parked at its pre-push transition position (off past the bottom
                   // edge) instead of its real, presented frame.
-                  { style: plan.innerScreenStyle, activityState: plan.activityState },
+                  {
+                    style: plan.innerScreenStyle,
+                    activityState: plan.activityState,
+                  },
                   [descriptorToVue(plan.headerConfig), content],
                 ),
               ]),

package/src/vue/tab-screen.ts

@@ -14,7 +14,9 @@ export type ITabScreenOptionsArgs = {
   navigation: ITabNavigatorHandle;
 };
 
-export type ITabScreenOptionsResolver = (props: ITabScreenOptionsArgs) => ITabOptions;
+export type ITabScreenOptionsResolver = (
+  props: ITabScreenOptionsArgs,
+) => ITabOptions;
 
 export type ITabScreenProps = {
   name: string;

package/src/vue/tabs/index.ts

@@ -1,8 +1,8 @@
 // Tab, the Vue lifecycle half. The focused-index router (tab-router-state) and the tab-bar
 // Descriptor builder (render-tabs) live in @symbiote-native/navigation core, shared verbatim with
-// the React/Angular adapters; here Vue supplies the lifecycle - a plain ref for the focused index
-// (Vue's twin of useReducer), useId for route-key generation, expose() for the jumpTo/setParams
-// handle - plus the descriptor bridge for the tab-bar leaf, exactly like Stack bridges its header
+// the React/Angular adapters; here Vue supplies the lifecycle - a shallowRef for the dispatched
+// router state (Vue's twin of useReducer), useId for route-key generation, expose() for the
+// jumpTo/setParams handle - plus the descriptor bridge for the tab-bar leaf, like Stack's header
 // config (stack.ts). Unlike Stack, a bottom-tabs bar is a PURE-JS UI: it paints ordinary
 // `symbiote-view`/`symbiote-text` primitives via the shared render fn, so there is no
 // react-native-screens ViewConfig to register here - Tab needs no `../register` import.
@@ -11,11 +11,9 @@ import {
   defineComponent,
   h,
   nextTick,
-  onMounted,
   onUnmounted,
   shallowRef,
   useId,
-  watch,
 } from '@vue/runtime-core';
 import type { VNode } from '@vue/runtime-core';
 import { descriptorToVue, normalizeVueAttrs } from '@symbiote-native/vue';
@@ -28,6 +26,7 @@ import {
   diffFocusedRoute,
   isFocusedRoute,
   isRecord,
+  reconcileTabRoutes,
   renderTabBar,
   tabRouterReducer,
 } from '../../core';
@@ -37,6 +36,8 @@ import type {
   ITabBarItemView,
   ITabNavigatorHandle,
   ITabOptions,
+  ITabRouterAction,
+  ITabRouterState,
 } from '../../core';
 import { NavigationScope, injectNavigationScope } from '../navigation-context';
 import { TabScreen } from '../tab-screen';
@@ -78,7 +79,9 @@ function asTabOptionsOrResolver(value: unknown): ITabScreenProps['options'] {
   return asTabOptions(value);
 }
 
-function collectRegistry(vnodes: readonly VNode[]): Map<string, ITabRegistryEntry> {
+function collectRegistry(
+  vnodes: readonly VNode[],
+): Map<string, ITabRegistryEntry> {
   const registry = new Map<string, ITabRegistryEntry>();
   for (const vnode of vnodes) {
     if (vnode.type !== TabScreen || !isRecord(vnode.props)) continue;
@@ -100,7 +103,9 @@ function resolveTabOptions(
   screenOptions: ITabOptions | undefined,
 ): ITabOptions {
   const own =
-    typeof entry.options === 'function' ? entry.options(screenComponentProps) : entry.options;
+    typeof entry.options === 'function'
+      ? entry.options(screenComponentProps)
+      : entry.options;
   return { ...screenOptions, ...own };
 }
 
@@ -118,7 +123,9 @@ const TabImpl = defineComponent<ITabProps>(
     const ambientScopeRef = injectNavigationScope();
     const routeIdPrefix = useId();
 
-    function buildRoutes(registry: Map<string, ITabRegistryEntry>): IRoute<unknown>[] {
+    function buildRoutes(
+      registry: Map<string, ITabRegistryEntry>,
+    ): IRoute<unknown>[] {
       return Array.from(registry.entries()).map(([name, entry]) => ({
         key: `${routeIdPrefix}-${name}`,
         name,
@@ -128,14 +135,36 @@ const TabImpl = defineComponent<ITabProps>(
 
     const initialRegistry = collectRegistry(slots.default?.() ?? []);
     const initialRoutes = buildRoutes(initialRegistry);
-    if (initialRoutes.length === 0) dlog('Tab: no <Tab.Screen> children registered');
-
-    const state = shallowRef(
-      createInitialTabState(initialRoutes, asString(attrs.initialRouteName)),
-    );
+    if (initialRoutes.length === 0)
+      dlog('Tab: no <Tab.Screen> children registered');
+
+    // A <Tab.Screen> can appear or disappear after mount (a marker behind a v-if, a data-driven
+    // screen list), so the route list is re-collected from the slot on every render and the
+    // DISPATCHED state is reconciled against it (reconcileTabRoutes, core - it preserves each
+    // surviving route's key and accumulated params and keeps focus on the same route NAME) rather
+    // than staying frozen at whatever setup() first saw. Slot vnodes are not reactive state, so
+    // the render fn is the only place that can observe the registry change: the reconciliation
+    // happens there, as a pure local, and never writes back - a state write inside a derivation is
+    // an error in Vue, not a style choice. `null` means nothing has dispatched yet, which is what
+    // keeps initialRouteName honored when the markers arrive after the first render.
+    const dispatchedState = shallowRef<ITabRouterState | null>(null);
+    // Non-reactive cache of the route list the last render derived: dispatch() reduces over the
+    // RECONCILED state, so it needs the same list that paint used. A ref here would be a reactive
+    // write from the render fn, exactly what the comment above rules out.
+    let latestRoutes: readonly IRoute<unknown>[] = initialRoutes;
+
+    function resolveState(routes: readonly IRoute<unknown>[]): ITabRouterState {
+      const dispatched = dispatchedState.value;
+      return dispatched === null
+        ? createInitialTabState(routes, asString(attrs.initialRouteName))
+        : reconcileTabRoutes(dispatched, routes);
+    }
 
-    function dispatch(action: Parameters<typeof tabRouterReducer>[1]): void {
-      state.value = tabRouterReducer(state.value, action);
+    function dispatch(action: ITabRouterAction): void {
+      dispatchedState.value = tabRouterReducer(
+        resolveState(latestRoutes),
+        action,
+      );
     }
 
     const jumpTo = (name: string, params?: unknown): void =>
@@ -146,16 +175,6 @@ const TabImpl = defineComponent<ITabProps>(
     const handle: ITabNavigatorHandle = { jumpTo, setParams };
     expose(handle);
 
-    // Tab paints its own bar in pure JS - there is no native onAppear/onDisappear to hook (unlike
-    // Stack's RNSScreen), so focus/blur is synthesized here: emit 'focus' once the newly-focused
-    // route's content has mounted, 'blur' when it's about to be replaced or Tab itself unmounts.
-    // Keyed on the route KEY (not the route object) so a setParams-only change (new route object,
-    // same key) doesn't spuriously re-fire focus/blur - mirrors tabs.ts's React twin exactly,
-    // just expressed as a `watch` over the focused key instead of a useEffect dependency array.
-    function focusedKeyOf(current: typeof state.value): string | undefined {
-      return current.routes[current.index]?.key;
-    }
-
     // One emitter per route.key, created lazily and cached for the navigator's whole lifetime -
     // mirrors stack.ts's own `emitters` map. This decouples emitter IDENTITY (stable, looked up
     // by key, read by the render closure below when it builds a route's NavigationScope) from
@@ -179,45 +198,42 @@ const TabImpl = defineComponent<ITabProps>(
     // Stack's RNSScreen), so focus/blur is synthesized here: emit 'focus' once the newly-focused
     // route's content has mounted, 'blur' when it's about to be replaced or Tab itself unmounts.
     // Keyed on the route KEY (not the route object) so a setParams-only change (new route object,
-    // same key) doesn't spuriously re-fire focus/blur - mirrors tabs.ts's React twin exactly,
-    // just expressed as a `watch` over the focused key instead of a useEffect dependency array.
-    let focusedRouteKey = focusedKeyOf(state.value);
-
-    onMounted(() => {
-      if (focusedRouteKey !== undefined) {
-        dlog(`Tab: route "${focusedRouteKey}" focused at t=${Date.now()}`);
-        emitterFor(focusedRouteKey).emit(NAVIGATION_EVENT_FOCUS);
-      }
-    });
-
+    // same key) doesn't spuriously re-fire focus/blur.
+    //
+    // Driven from the render pass rather than a `watch` because the focused key follows the
+    // SLOT-collected route list too - a marker disappearing can move focus, and slot vnodes are
+    // not reactive state, so no watcher source can see that; only a render can. The diff therefore
+    // lives where the state is derived, and stays a plain local, never a reactive write.
+    //
     // The bookkeeping (which key is focused) updates immediately so the render closure below
     // always reads the right route; the actual emit is deferred to nextTick(), which resolves
     // only after the CURRENT flush cycle fully drains - including the newly-focused screen's own
-    // onMounted (subscribing its useIsFocused/useFocusEffect listeners). flush:'post' alone is
-    // NOT enough here: it only guarantees this callback runs after THIS component's own render
-    // effect, not after an arbitrary sibling post-flush job (a just-mounted child's onMounted)
-    // that may be queued after it in the same batch - nextTick is the one API that waits for the
-    // WHOLE cycle, not just this watcher's own slot in it.
-    watch(
-      () => focusedKeyOf(state.value),
-      nextKey => {
-        const { blurKey, focusKey } = diffFocusedRoute(focusedRouteKey, nextKey);
-        if (blurKey === undefined && focusKey === undefined) return;
-        focusedRouteKey = nextKey;
-        nextTick(() => {
-          if (blurKey !== undefined) {
-            dlog(`Tab: route "${blurKey}" blurred at t=${Date.now()}`);
-            emitterFor(blurKey).emit(NAVIGATION_EVENT_BLUR);
-          }
-          if (focusKey !== undefined) {
-            dlog(`Tab: route "${focusKey}" focused at t=${Date.now()}`);
-            emitterFor(focusKey).emit(NAVIGATION_EVENT_FOCUS);
-          }
-        });
-      },
-    );
+    // onMounted (subscribing its useIsFocused/useFocusEffect listeners). Emitting inline would
+    // reach zero subscribers; flush:'post' would not have been enough either, since it only
+    // orders a callback after THIS component's own render effect, not after an arbitrary sibling
+    // post-flush job (a just-mounted child's onMounted) queued after it in the same batch.
+    let focusedRouteKey: string | undefined;
+
+    function syncFocus(current: ITabRouterState): void {
+      const nextKey = current.routes[current.index]?.key;
+      const { blurKey, focusKey } = diffFocusedRoute(focusedRouteKey, nextKey);
+      if (blurKey === undefined && focusKey === undefined) return;
+      focusedRouteKey = nextKey;
+      nextTick(() => {
+        if (blurKey !== undefined) {
+          dlog(`Tab: route "${blurKey}" blurred at t=${Date.now()}`);
+          emitterFor(blurKey).emit(NAVIGATION_EVENT_BLUR);
+        }
+        if (focusKey !== undefined) {
+          dlog(`Tab: route "${focusKey}" focused at t=${Date.now()}`);
+          emitterFor(focusKey).emit(NAVIGATION_EVENT_FOCUS);
+        }
+      });
+    }
+
     onUnmounted(() => {
-      if (focusedRouteKey !== undefined) emitterFor(focusedRouteKey).emit(NAVIGATION_EVENT_BLUR);
+      if (focusedRouteKey !== undefined)
+        emitterFor(focusedRouteKey).emit(NAVIGATION_EVENT_BLUR);
     });
 
     return () => {
@@ -226,17 +242,32 @@ const TabImpl = defineComponent<ITabProps>(
 
       if (registry.size === 0) dlog('Tab: no <Tab.Screen> children registered');
 
-      const focusedRoute: IRoute<unknown> | undefined = state.value.routes[state.value.index];
+      const routes = buildRoutes(registry);
+      latestRoutes = routes;
+      const state = resolveState(routes);
+      syncFocus(state);
+
+      const focusedRoute: IRoute<unknown> | undefined =
+        state.routes[state.index];
 
-      const items: ITabBarItemView[] = state.value.routes.map((route, index) => {
+      const items: ITabBarItemView[] = state.routes.map((route, index) => {
         const entry = registry.get(route.name);
-        const focused = isFocusedRoute(index, state.value.index);
+        const focused = isFocusedRoute(index, state.index);
         if (entry === undefined) {
           dlog(`Tab: no screen registered for route name "${route.name}"`);
-          return { key: route.key, focused, label: route.name, passthrough: {} };
+          return {
+            key: route.key,
+            focused,
+            label: route.name,
+            passthrough: {},
+          };
         }
 
-        const options = resolveTabOptions(entry, { route, navigation: handle }, screenOptions);
+        const options = resolveTabOptions(
+          entry,
+          { route, navigation: handle },
+          screenOptions,
+        );
 
         return {
           key: route.key,
@@ -254,7 +285,9 @@ const TabImpl = defineComponent<ITabProps>(
         };
       });
 
-      const focusedEntry = focusedRoute ? registry.get(focusedRoute.name) : undefined;
+      const focusedEntry = focusedRoute
+        ? registry.get(focusedRoute.name)
+        : undefined;
       const focusedOptions: ITabOptions | undefined =
         focusedEntry && focusedRoute
           ? resolveTabOptions(
@@ -265,7 +298,11 @@ const TabImpl = defineComponent<ITabProps>(
           : screenOptions;
 
       const tabBar = descriptorToVue(
-        renderTabBar({ items, style: focusedOptions?.tabBarStyle, passthrough: {} }),
+        renderTabBar({
+          items,
+          style: focusedOptions?.tabBarStyle,
+          passthrough: {},
+        }),
       );
 
       // Only the focused route's screen is ever mounted (unlike Stack, which keeps every pushed
@@ -291,7 +328,11 @@ const TabImpl = defineComponent<ITabProps>(
           : null;
 
       return h('symbiote-view', { style: TAB_ROOT_STYLE }, [
-        h('symbiote-view', { style: TAB_CONTENT_STYLE }, content === null ? [] : [content]),
+        h(
+          'symbiote-view',
+          { style: TAB_CONTENT_STYLE },
+          content === null ? [] : [content],
+        ),
         tabBar,
       ]);
     };