@symbiote-native/navigation 3.0.0 → 4.0.1

package/src/solid/drawer/index.ts

@@ -29,13 +29,11 @@ import {
   createEffect,
   createMemo,
   createSignal,
-  mergeProps,
   onCleanup,
   untrack,
 } from 'solid-js';
 import type { Accessor } from 'solid-js';
 import { Animated, createWindowDimensions } from '@symbiote-native/solid';
-import type { IAnimatedComponentProps } from '@symbiote-native/solid';
 import type { JSX } from '@symbiote-native/solid/jsx-runtime';
 // createComponent from solid-js, insert from the renderer - see stack/index.ts's note.
 import { createComponent } from 'solid-js';
@@ -509,25 +507,25 @@ function DrawerImpl(props: IDrawerProps): JSX.Element {
         if (children !== undefined) 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((): IAnimatedComponentProps => ({
-          ...slotDescriptor(slot).props,
-          style: [slotDescriptor(slot).props.style, animatedStyle(slot)],
-          get children(): JSX.Element {
-            return slotChildren(slot);
-          },
-        })),
-      );
+      // 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)],
+      }));
+      // 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,
     }));
@@ -540,7 +538,7 @@ function DrawerImpl(props: IDrawerProps): JSX.Element {
     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, {

package/src/solid/tabs/index.ts

@@ -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:
@@ -305,12 +305,12 @@ function TabImpl(props: ITabProps): JSX.Element {
     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/src/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/src/svelte/registry-host.ts

@@ -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/src/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/src/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/src/vue/drawer/index.ts

@@ -608,7 +608,7 @@ const DrawerImpl = defineComponent<IDrawerProps>(
         .filter((element): element is VNode => element !== null);
 
       return h(
-        'symbiote-view',
+        'view',
         { style: root.props.style, ...panResponder.panHandlers },
         drawerChildren,
       );

package/src/vue/tabs/index.ts

@@ -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 {
@@ -327,9 +327,9 @@ const TabImpl = defineComponent<ITabProps>(
             )
           : null;
 
-      return h('symbiote-view', { style: TAB_ROOT_STYLE }, [
+      return h('view', { style: TAB_ROOT_STYLE }, [
         h(
-          'symbiote-view',
+          'view',
           { style: TAB_CONTENT_STYLE },
           content === null ? [] : [content],
         ),