@symbiote-native/navigation 2.2.0 → 4.0.0

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],
         ),