@symbiote-native/navigation 2.2.0 → 4.0.0

package/README.md

@@ -142,9 +142,62 @@ export class AppComponent {
 }
 ```
 
+```svelte
+<!-- Svelte — examples/svelte/App.svelte -->
+<script lang="ts">
+  import { Screen, Stack } from '@symbiote-native/navigation/svelte';
+  import type { INavigatorHandle } from '@symbiote-native/navigation/svelte';
+
+  let stackInstance = $state.raw<INavigatorHandle | null>(null);
+</script>
+
+<Stack bind:this={stackInstance} initialRouteName="Menu">
+  <Screen
+    name="Menu"
+    component={MenuScreen}
+    options={{ title: 'Navigation Demos' }}
+  />
+  <Screen
+    name="Details"
+    component={DetailsScreen}
+    options={{ title: 'Details' }}
+  />
+</Stack>
+```
+
+```tsx
+// Solid — examples/solid/App.tsx
+import { createSignal } from 'solid-js';
+import { Stack } from '@symbiote-native/navigation/solid';
+import type { INavigatorHandle } from '@symbiote-native/navigation/solid';
+
+export default function App() {
+  const [stackHandle, setStackHandle] = createSignal<INavigatorHandle | null>(
+    null,
+  );
+
+  return (
+    <Stack ref={handle => setStackHandle(handle)} initialRouteName="Menu">
+      <Stack.Screen
+        name="Menu"
+        component={MenuScreen}
+        options={{ title: 'Navigation Demos' }}
+      />
+      <Stack.Screen
+        name="Details"
+        component={DetailsScreen}
+        options={{ title: 'Details' }}
+      />
+    </Stack>
+  );
+}
+```
+
 `Stack` itself implements `INavigatorHandle` in Angular — `@ViewChild` gives you the handle
-directly, no separate ref callback. In React/Vue, the ref only attaches during commit — code that
-needs the handle (e.g. `useLinkingIntegration` below) must gate on it being non-null first.
+directly, no separate ref callback. In React/Vue/Svelte/Solid, the ref only attaches during
+commit — code that needs the handle (e.g. `useLinkingIntegration` below) must gate on it being
+non-null first (Svelte's `bind:this` binds during mount, so `$effect`-gate on it; Solid's `ref`
+callback fires during creation, strictly before any effect runs).
 
 ### Tabs, Drawer, hooks, deep linking, and state persistence
 

package/build/angular/drawer/index.js

@@ -88,7 +88,7 @@ let Drawer = (() => {
             changeDetection: ChangeDetectionStrategy.OnPush,
             template: `
     @if (state(); as currentState) {
-      <View [style]="rootStyle()" [symbioteHostProps]="rootPanHandlers()">
+      <view [style]="rootStyle()" [symbioteHostProps]="rootPanHandlers()">
         @for (slot of slotOrder(); track slot) {
           @switch (slot) {
             @case ('content') {
@@ -132,7 +132,7 @@ let Drawer = (() => {
             }
           }
         }
-      </View>
+      </view>
     }
   `,
         })];

package/build/angular/index.js

@@ -3,7 +3,7 @@
 // views' ViewConfigs (../register, a side-effect import of the three codegen specs - never
 // react-native-screens' own React components), then exposes Stack/Tab/Drawer with their Screen
 // directives and navigator handles. Mirrors react/index.ts's barrel shape.
-import '../register';
+import '../register.js';
 export { Stack } from './stack/index.js';
 export { ScreenDirective } from './screen.directive.js';
 export { injectNavigation, injectStackNavigation, injectTabNavigation, injectDrawerNavigation, injectRoute, injectIsFocused, injectFocusEffect, injectNavigationState, } from './injectors/index.js';

package/build/angular/tabs/index.js

@@ -6,7 +6,7 @@
 // implements ITabNavigatorHandle`) - plus the descriptor bridge (`symbiote-descriptor-outlet`,
 // `@symbiote-native/angular`) for the tab-bar leaf, exactly like Stack bridges its header config.
 // 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
+// ordinary `view`/`text` primitives via the shared render fn, so there is no
 // react-native-screens ViewConfig to register - Tab needs no `../register` import. Every tag this
 // template names (`View`, `symbiote-descriptor-outlet`) is a REAL imported Angular component (no
 // raw non-dashed native tag names the way stack.ts needs `NO_ERRORS_SCHEMA` for), so no loosened
@@ -71,8 +71,8 @@ let Tab = (() => {
             ],
             changeDetection: ChangeDetectionStrategy.OnPush,
             template: `
-    <View [style]="rootStyle">
-      <View [style]="contentStyle">
+    <view [style]="rootStyle">
+      <view [style]="contentStyle">
         @if (focusedRoute(); as route) {
           @if (componentForRoute(route); as component) {
             <ng-container
@@ -84,9 +84,9 @@ let Tab = (() => {
             </ng-container>
           }
         }
-      </View>
+      </view>
       <symbiote-descriptor-outlet [node]="tabBarDescriptor()" />
-    </View>
+    </view>
   `,
         })];
     let _classDescriptor;

package/build/core/render-drawer.js

@@ -68,14 +68,14 @@ function panelBaseStyle(options) {
 }
 export function renderDrawer(view, options) {
     const type = resolveDrawerType(options);
-    const content = el('symbiote-view', { ...view.contentPassthrough, style: CONTENT_STYLE }, []);
-    const panel = el('symbiote-view', {
+    const content = el('view', { ...view.contentPassthrough, style: CONTENT_STYLE }, []);
+    const panel = el('view', {
         ...view.panelPassthrough,
         style: [panelBaseStyle(options), view.drawerStyle],
     }, []);
     const slots = { content, panel };
     if (isDrawerOverlayVisible(options)) {
-        slots.overlay = el('symbiote-view', {
+        slots.overlay = el('view', {
             ...view.overlayPassthrough,
             style: [OVERLAY_BASE_STYLE, { backgroundColor: view.overlayColor }],
         }, []);
@@ -87,5 +87,5 @@ export function renderDrawer(view, options) {
         return acc;
     }, []);
     const rootStyle = type === 'permanent' ? { ...ROOT_STYLE, flexDirection: 'row' } : ROOT_STYLE;
-    return el('symbiote-view', { style: rootStyle }, children);
+    return el('view', { style: rootStyle }, children);
 }

package/build/core/render-tabs.js

@@ -1,6 +1,6 @@
 // TabBar: the render half (framework-agnostic). A bottom-tabs bar is a PURE-JS UI - unlike
 // Stack, which drives real native RNSScreen/RNSScreenStack views, this paints ordinary
-// `symbiote-view`/`symbiote-text` primitives, so it needs no react-native-screens ViewConfig
+// `view`/`text` primitives, so it needs no react-native-screens ViewConfig
 // work at all (see the task brief in packages/navigation's skill notes). Mirrors renderSwitch's
 // shape: pure prop-driven functions building a `Descriptor` tree from pre-resolved view props;
 // the adapter supplies focus state, tint-color resolution inputs, and the press wiring via
@@ -72,7 +72,7 @@ function renderIcon(icon, color) {
 function renderBadge(badge) {
     if (badge === undefined)
         return undefined;
-    return el('symbiote-view', { style: BADGE_STYLE }, [
+    return el('view', { style: BADGE_STYLE }, [
         txt({ style: BADGE_TEXT_STYLE }, [String(badge)]),
     ]);
 }
@@ -87,11 +87,11 @@ export function renderTabBarItem(item) {
         iconChildren.push(badge);
     const children = [];
     if (iconChildren.length > 0)
-        children.push(el('symbiote-view', { style: ICON_WRAPPER_STYLE }, iconChildren));
+        children.push(el('view', { style: ICON_WRAPPER_STYLE }, iconChildren));
     children.push(txt({ style: { color, fontSize: TAB_LABEL_FONT_SIZE } }, [item.label]));
-    return el('symbiote-view', { ...item.passthrough, style: TAB_ITEM_STYLE, accessibilityRole: 'tab' }, children, item.key);
+    return el('view', { ...item.passthrough, style: TAB_ITEM_STYLE, accessibilityRole: 'tab' }, children, item.key);
 }
 export function renderTabBar(view) {
     const items = view.items.map(renderTabBarItem);
-    return el('symbiote-view', { ...view.passthrough, style: [TAB_BAR_STYLE, view.style] }, items);
+    return el('view', { ...view.passthrough, style: [TAB_BAR_STYLE, view.style] }, items);
 }

package/build/react/drawer/index.js

@@ -290,7 +290,7 @@ const DrawerImpl = forwardRef((props, forwardedRef) => {
     const drawerChildren = order
         .map(renderSlot)
         .filter((element) => element !== null);
-    return createElement('symbiote-view', { style: root.props.style, ...panResponder.panHandlers }, ...drawerChildren);
+    return createElement('view', { style: root.props.style, ...panResponder.panHandlers }, ...drawerChildren);
 });
 export const Drawer = Object.assign(DrawerImpl, { Screen: DrawerScreen });
 // --- Explicit gap list vs the real react-native-gesture-handler + react-native-reanimated

package/build/react/index.js

@@ -2,7 +2,7 @@
 // native view primitives. Importing this barrel first registers the native views' ViewConfigs
 // (../register, a side-effect import of the three codegen specs - never react-native-screens' own
 // React components), then exposes Stack (with Stack.Screen attached) and the navigator handle.
-import '../register';
+import '../register.js';
 export { Stack } from './stack/index.js';
 export { Screen } from './screen.js';
 export { useNavigation, useRoute, useIsFocused, useFocusEffect, useNavigationState, } from './hooks/index.js';

package/build/react/tabs/index.js

@@ -4,7 +4,7 @@
 // router state, useId for route-key generation, useImperativeHandle for the jumpTo/setParams
 // handle - plus the descriptor bridge for the tab-bar leaf, exactly like Stack bridges its header
 // config (react/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
+// `view`/`text` primitives via the shared render fn, so there is no
 // react-native-screens ViewConfig to register here - Tab needs no `../register` import.
 import { createElement, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useMemo, useState, } from 'react';
 import { descriptorToReact } from '@symbiote-native/react';
@@ -135,6 +135,6 @@ const TabImpl = forwardRef((props, forwardedRef) => {
             },
         }, createElement(focusedEntry.component))
         : null;
-    return createElement('symbiote-view', { style: TAB_ROOT_STYLE }, createElement('symbiote-view', { style: TAB_CONTENT_STYLE }, content), tabBar);
+    return createElement('view', { style: TAB_ROOT_STYLE }, createElement('view', { style: TAB_CONTENT_STYLE }, content), tabBar);
 });
 export const Tab = Object.assign(TabImpl, { Screen: TabScreen });

package/build/solid/drawer/index.js

@@ -24,7 +24,7 @@
 // value: §4 of the same rules file. A value snapshot would freeze the drawer's own content at the
 // state it was built with, and re-invoking it from inside a tracked scope would replace the whole
 // panel subtree mid-gesture.
-import { createEffect, createMemo, createSignal, mergeProps, onCleanup, untrack, } from 'solid-js';
+import { createEffect, createMemo, createSignal, onCleanup, untrack, } from 'solid-js';
 import { Animated, createWindowDimensions } from '@symbiote-native/solid';
 // createComponent from solid-js, insert from the renderer - see stack/index.ts's note.
 import { createComponent } from 'solid-js';
@@ -342,21 +342,24 @@ function DrawerImpl(props) {
                     insert(node, children);
                 return node;
             }
-            // ONE source, never a spread followed by an explicit prop: mergeProps takes the first
-            // NON-undefined value scanning back-to-front, so a later `undefined` silently loses to an
-            // earlier value (.claude/rules/solid-descriptor-bridge.md §6). Collapsing to a single bag
-            // removes the question. mergeProps still earns its place - it wraps the function source in a
-            // memo and hands Animated.View a reactive proxy, which is what keeps the slot's props live
-            // without rebuilding the node.
-            return createComponent(Animated.View, mergeProps(() => ({
+            // ONE source, never a spread followed by an explicit prop: mergeProps took the first
+            // NON-undefined value scanning back-to-front, so a later `undefined` silently lost to an
+            // earlier one (.claude/rules/solid-descriptor-bridge.md §6). A single bag removes the
+            // question, and the thunk is what keeps the slot's props live without rebuilding the node.
+            //
+            // No Animated.View: the engine resolves an AnimatedNode written into any prop of any host
+            // node, so the interpolation in `animatedStyle` binds from a plain `view`.
+            const animated = hostElement('view', () => ({
                 ...slotDescriptor(slot).props,
                 style: [slotDescriptor(slot).props.style, animatedStyle(slot)],
-                get children() {
-                    return slotChildren(slot);
-                },
-            })));
+            }));
+            // An ACCESSOR, not a value: the slot's children are the focused screen, which mounts after
+            // this node is built. Reading once here yields the pre-mount slot and the screen never
+            // arrives — where the branch above may read eagerly, because its children are already built.
+            insert(animated, () => slotChildren(slot));
+            return animated;
         }
-        const root = hostElement('symbiote-view', () => ({
+        const root = hostElement('view', () => ({
             ...rootDescriptor().props,
             ...panResponder.panHandlers,
         }));
@@ -367,7 +370,7 @@ function DrawerImpl(props) {
         const current = shape();
         return untrack(() => buildDrawer(current));
     });
-    const host = hostElement('symbiote-view', () => ({ style: { flex: 1 } }));
+    const host = hostElement('view', () => ({ style: { flex: 1 } }));
     insert(host, drawer);
     return createComponent(ScreenCollectorProvider, {
         value: collector,

package/build/solid/index.js

@@ -10,7 +10,7 @@
 // signal, an effect or a subscription (createIsFocused / createFocusEffect / createNavigationState
 // / createLinkingIntegration). Same rule the adapter's `createColorScheme` follows; a blanket `use`
 // would read as a foreign ecosystem's convention (<adapter_src_follows_framework_idioms>).
-import '../register';
+import '../register.js';
 export { Stack } from './stack/index.js';
 export { Screen, TabScreen, DrawerScreen } from './screen.js';
 export { useNavigation, useStackNavigation, useTabNavigation, useDrawerNavigation, useRoute, createIsFocused, createFocusEffect, createNavigationState, } from './primitives/index.js';

package/build/solid/tabs/index.js

@@ -3,7 +3,7 @@
 // every other adapter; here Solid supplies the lifecycle - a signal for the dispatched router
 // state, a callback `ref` for the jumpTo/setParams handle - plus the descriptor bridge for the
 // tab-bar leaf. Unlike Stack, a bottom-tabs bar is a PURE-JS UI painting ordinary
-// `symbiote-view`/`symbiote-text` primitives, so there is no react-native-screens ViewConfig to
+// `view`/`text` primitives, so there is no react-native-screens ViewConfig to
 // register here.
 //
 // TWO SOLID-ONLY REBUILD BOUNDARIES, both invisible in every other adapter:
@@ -209,11 +209,11 @@ function TabImpl(props) {
         const found = state().routes.find(route => route.key === routeKey);
         return found ?? { key: routeKey, name: '', params: undefined };
     }
-    const contentHost = hostElement('symbiote-view', () => ({
+    const contentHost = hostElement('view', () => ({
         style: TAB_CONTENT_STYLE,
     }));
     insert(contentHost, content);
-    const root = hostElement('symbiote-view', () => ({ style: TAB_ROOT_STYLE }));
+    const root = hostElement('view', () => ({ style: TAB_ROOT_STYLE }));
     // ONE array insert rather than two: a second `insert` on the same parent would find the first
     // child already there and REPLACE it (solid-js/universal's insertExpression), while an array is
     // reconciled by identity - contentHost keeps its node, only the bar is swapped when it rebuilds.

package/build/svelte/drawer/index.svelte

@@ -35,10 +35,6 @@
     IPanResponderGestureState,
     ISymbioteEvent,
   } from '@symbiote-native/engine';
-  // The ONLY import from the adapter's main barrel: `Animated.View` is a compiled `.svelte`
-  // component, so unlike PanResponder/Dimensions/AnimatedValue (pure engine re-exports, taken
-  // from the engine directly here) it has no `.svelte`-free home to import from.
-  import { Animated } from '@symbiote-native/svelte';
   import {
     DRAWER_DEFAULT_OVERLAY_COLOR,
     NAVIGATION_EVENT_BLUR,
@@ -471,16 +467,18 @@
   {@const descriptor = slotDescriptors.content}
   {#if descriptor !== undefined}
     {#if contentStyle !== undefined}
-      <Animated.View
-        {...descriptor.props}
-        style={[descriptor.props.style, contentStyle]}
+      <view
+        p={{
+          ...descriptor.props,
+          style: [descriptor.props.style, contentStyle],
+        }}
       >
         {@render screenContent()}
-      </Animated.View>
+      </view>
     {:else}
-      <symbiote-view p={descriptor.props}>
+      <view p={descriptor.props}>
         {@render screenContent()}
-      </symbiote-view>
+      </view>
     {/if}
   {/if}
 {/snippet}
@@ -489,12 +487,14 @@
   {@const descriptor = slotDescriptors.overlay}
   {#if descriptor !== undefined}
     {#if overlayStyle !== undefined}
-      <Animated.View
-        {...descriptor.props}
-        style={[descriptor.props.style, overlayStyle]}
+      <view
+        p={{
+          ...descriptor.props,
+          style: [descriptor.props.style, overlayStyle],
+        }}
       />
     {:else}
-      <symbiote-view p={descriptor.props} />
+      <view p={descriptor.props} />
     {/if}
   {/if}
 {/snippet}
@@ -503,32 +503,31 @@
   {@const descriptor = slotDescriptors.panel}
   {#if descriptor !== undefined}
     {#if panelStyle !== undefined}
-      <Animated.View
-        {...descriptor.props}
-        style={[descriptor.props.style, panelStyle]}
+      <view
+        p={{ ...descriptor.props, style: [descriptor.props.style, panelStyle] }}
       >
         {@render drawerContent?.({
           state,
           descriptors,
           navigation: handle,
         })}
-      </Animated.View>
+      </view>
     {:else}
-      <symbiote-view p={descriptor.props}>
+      <view p={descriptor.props}>
         {@render drawerContent?.({
           state,
           descriptors,
           navigation: handle,
         })}
-      </symbiote-view>
+      </view>
     {/if}
   {/if}
 {/snippet}
 
-<symbiote-view p={rootProps}>
-  <symbiote-text p={SCREEN_REGISTRY_HOST_PROPS}>
+<view p={rootProps}>
+  <text p={SCREEN_REGISTRY_HOST_PROPS}>
     {@render children?.()}
-  </symbiote-text>
+  </text>
   {#each order as slot (slot)}
     {#if slot === 'content'}
       {@render contentSlot()}
@@ -538,7 +537,7 @@
       {@render panelSlot()}
     {/if}
   {/each}
-</symbiote-view>
+</view>
 
 <!-- --- Explicit gap list vs the real react-native-gesture-handler + react-native-reanimated
      @react-navigation/drawer (confirmed against its current docs, mirrored verbatim from the

package/build/svelte/index.js

@@ -3,7 +3,7 @@
 // views' ViewConfigs (../register, a side-effect import of the codegen specs - never
 // react-native-screens' own React components), then exposes Stack (with Stack.Screen attached)
 // and the navigator handle. Mirrors vue/index.ts's barrel shape.
-import '../register';
+import '../register.js';
 export { Stack } from './stack/index.js';
 export { default as Screen } from './screen.svelte';
 export { useNavigation, useStackNavigation, useTabNavigation, useDrawerNavigation, useRoute, useIsFocused, useFocusEffect, useNavigationState, } from './runes/index.js';

package/build/svelte/registry-host.js

@@ -12,11 +12,11 @@
 //
 // therefore compiles to `from_tree([marker, ' ', marker])`, and each ' ' becomes an RCTRawText
 // engine node parented to whatever host tag holds the `{@render children?.()}` call. Inside a
-// plain `symbiote-view` that is the invalid "text outside a <Text> component" shape; inside
+// plain `view` that is the invalid "text outside a <text> component" shape; inside
 // RNSScreenStack it is worse, since react-native-screens' native side expects only RNSScreen
 // children there.
 //
-// So the markers are rendered inside a zero-size `symbiote-text` instead: raw text inside an
+// So the markers are rendered inside a zero-size `text` instead: raw text inside an
 // RCTText is LEGAL, which turns the hazard from a device crash into a no-op and makes it
 // structurally impossible rather than a rule app authors have to remember. The cost is one
 // collapsed, non-interactive RCTText per navigator.

package/build/svelte/stack/index.svelte

@@ -15,7 +15,7 @@
   // HOW SCREENS ARE DISCOVERED: not by reading `children`, which Svelte hands over as an opaque
   // Snippet - the markers register themselves through the context collector (../screen-registry.ts)
   // while the snippet renders, and the route list derives from that. The snippet is rendered
-  // inside a collapsed `symbiote-text` (../registry-host.ts) so whitespace between two markers
+  // inside a collapsed `text` (../registry-host.ts) so whitespace between two markers
   // can never become an illegal raw-text child of a native view.
 
   // Route keys must be unique per Stack INSTANCE (Svelte has no useId); a module counter is the
@@ -233,10 +233,10 @@
   }
 </script>
 
-<symbiote-view p={STACK_ROOT_PROPS}>
-  <symbiote-text p={SCREEN_REGISTRY_HOST_PROPS}>
+<view p={STACK_ROOT_PROPS}>
+  <text p={SCREEN_REGISTRY_HOST_PROPS}>
     {@render children?.()}
-  </symbiote-text>
+  </text>
   <svelte:element
     this={RNS_SCREEN_STACK_VIEW_NAME}
     {@attach hostProps(stackProps)}
@@ -258,4 +258,4 @@
       {/if}
     {/each}
   </svelte:element>
-</symbiote-view>
+</view>

package/build/svelte/tabs/index.svelte

@@ -4,8 +4,8 @@
   // with the React/Vue/Angular entries; here Svelte supplies the lifecycle - `$state.raw` for the
   // router (its twin of useReducer), a module counter for route-key generation, `export
   // function`s for the jumpTo/setParams handle - plus the Descriptor bridge for the tab-bar leaf.
-  // 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
+  // Unlike Stack, a bottom-tabs bar is a PURE-JS UI: it paints ordinary `view`/
+  // `text` primitives via the shared render fn, so there is no react-native-screens
   // ViewConfig to register here - Tab needs no `../../register` import.
   //
   // Screens are discovered through the context collector (../screen-registry.ts), not by reading
@@ -253,17 +253,17 @@
   });
 </script>
 
-<symbiote-view p={TAB_ROOT_PROPS}>
-  <symbiote-text p={SCREEN_REGISTRY_HOST_PROPS}>
+<view p={TAB_ROOT_PROPS}>
+  <text p={SCREEN_REGISTRY_HOST_PROPS}>
     {@render children?.()}
-  </symbiote-text>
-  <symbiote-view p={TAB_CONTENT_PROPS}>
+  </text>
+  <view p={TAB_CONTENT_PROPS}>
     {#if focusedScreen !== undefined}
       {@const FocusedComponent = focusedScreen.component}
       <NavigationScope value={focusedScreen.scope}>
         <FocusedComponent />
       </NavigationScope>
     {/if}
-  </symbiote-view>
-  <symbiote-view p={tabBar.props} bind:this={tabBarHost} />
-</symbiote-view>
+  </view>
+  <view p={tabBar.props} bind:this={tabBarHost} />
+</view>

package/build/vue/drawer/index.js

@@ -391,7 +391,7 @@ const DrawerImpl = defineComponent((_props, { attrs: rawAttrs, slots, expose })
         const drawerChildren = order
             .map(renderSlot)
             .filter((element) => element !== null);
-        return h('symbiote-view', { style: root.props.style, ...panResponder.panHandlers }, drawerChildren);
+        return h('view', { style: root.props.style, ...panResponder.panHandlers }, drawerChildren);
     };
 }, { name: 'Drawer', inheritAttrs: false });
 export const Drawer = Object.assign(DrawerImpl, { Screen: DrawerScreen });

package/build/vue/index.js

@@ -2,7 +2,7 @@
 // native view primitives. Importing this barrel first registers the native views' ViewConfigs
 // (../register, a side-effect import of the three codegen specs - never react-native-screens' own
 // React components), then exposes Stack (with Stack.Screen attached) and the navigator handle.
-import '../register';
+import '../register.js';
 export { Stack } from './stack/index.js';
 export { Screen } from './screen.js';
 export { useNavigation, useStackNavigation, useTabNavigation, useDrawerNavigation, useRoute, useIsFocused, useFocusEffect, useNavigationState, } from './composables/index.js';

package/build/vue/tabs/index.js

@@ -4,7 +4,7 @@
 // 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
+// `view`/`text` primitives via the shared render fn, so there is no
 // react-native-screens ViewConfig to register here - Tab needs no `../register` import.
 import { defineComponent, h, nextTick, onUnmounted, shallowRef, useId, } from '@vue/runtime-core';
 import { descriptorToVue, normalizeVueAttrs } from '@symbiote-native/vue';
@@ -226,8 +226,8 @@ const TabImpl = defineComponent((_props, { attrs: rawAttrs, slots, expose }) =>
             // NavigationScope provided just above (useRoute / useTabNavigation).
             () => h(focusedEntry.component))
             : null;
-        return h('symbiote-view', { style: TAB_ROOT_STYLE }, [
-            h('symbiote-view', { style: TAB_CONTENT_STYLE }, content === null ? [] : [content]),
+        return h('view', { style: TAB_ROOT_STYLE }, [
+            h('view', { style: TAB_CONTENT_STYLE }, content === null ? [] : [content]),
             tabBar,
         ]);
     };

package/build-ngc/angular/drawer/index.js

@@ -359,7 +359,7 @@ export class Drawer {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: Drawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: Drawer, isStandalone: true, selector: "Drawer", inputs: { initialRouteName: "initialRouteName", drawerStyle: "drawerStyle", drawerType: "drawerType", drawerPosition: "drawerPosition", drawerWidth: "drawerWidth", overlayColor: "overlayColor", swipeEnabled: "swipeEnabled", swipeEdgeWidth: "swipeEdgeWidth", swipeMinDistance: "swipeMinDistance", swipeMinVelocity: "swipeMinVelocity" }, queries: [{ propertyName: "drawerContentTemplate", first: true, predicate: ["drawerContent"], descendants: true, read: TemplateRef }, { propertyName: "drawerScreenChildren", predicate: DrawerScreenDirective }], usesOnChanges: true, ngImport: i0, template: `
     @if (state(); as currentState) {
-      <View [style]="rootStyle()" [symbioteHostProps]="rootPanHandlers()">
+      <view [style]="rootStyle()" [symbioteHostProps]="rootPanHandlers()">
         @for (slot of slotOrder(); track slot) {
           @switch (slot) {
             @case ('content') {
@@ -403,9 +403,9 @@ export class Drawer {
             }
           }
         }
-      </View>
+      </view>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NavigationScopeDirective, selector: "[symbioteNavigationScope]", inputs: ["symbioteNavigationScope", "navigation", "emitter"] }, { kind: "directive", type: SymbioteHostPropsDirective, selector: "[symbioteHostProps]", inputs: ["symbioteHostProps"], exportAs: ["symbioteHost"] }, { kind: "component", type: View, selector: "symbiote-view, View" }, { kind: "component", type: AnimatedView, selector: "AnimatedView, symbiote-animated-view", inputs: ["style", "animatedProps", "passthroughAnimatedPropExplicitValues"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NavigationScopeDirective, selector: "[symbioteNavigationScope]", inputs: ["symbioteNavigationScope", "navigation", "emitter"] }, { kind: "directive", type: SymbioteHostPropsDirective, selector: "[symbioteHostProps]", inputs: ["symbioteHostProps"], exportAs: ["symbioteHost"] }, { kind: "component", type: View, selector: "view" }, { kind: "component", type: AnimatedView, selector: "AnimatedView, symbiote-animated-view", inputs: ["style", "testID", "animatedProps", "passthroughAnimatedPropExplicitValues"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: Drawer, decorators: [{
             type: Component,
@@ -423,7 +423,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     @if (state(); as currentState) {
-      <View [style]="rootStyle()" [symbioteHostProps]="rootPanHandlers()">
+      <view [style]="rootStyle()" [symbioteHostProps]="rootPanHandlers()">
         @for (slot of slotOrder(); track slot) {
           @switch (slot) {
             @case ('content') {
@@ -467,7 +467,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             }
           }
         }
-      </View>
+      </view>
     }
   `,
                 }]