@symbiote-native/react 1.0.0 → 2.0.0

package/README.md

@@ -35,21 +35,20 @@ yet, so the Metro config and the `index.js` entry seam below come from
 
 ## Use it
 
-The app is ordinary React — it imports primitives from `@symbiote-native/react`, not `react-native`:
+The app is ordinary React — the native primitives are plain intrinsic tags, no import needed:
 
 ```jsx
 import { useState } from 'react';
-import { View, Text, Pressable } from '@symbiote-native/react';
 
 export default function App() {
   const [count, setCount] = useState(0);
   return (
-    <View style={{ padding: 24 }}>
-      <Text>Taps: {count}</Text>
-      <Pressable onPress={() => setCount(c => c + 1)}>
-        <Text>Tap me</Text>
-      </Pressable>
-    </View>
+    <view style={{ padding: 24 }}>
+      <text>Taps: {count}</text>
+      <pressable onPress={() => setCount(c => c + 1)}>
+        <text>Tap me</text>
+      </pressable>
+    </view>
   );
 }
 ```
@@ -102,9 +101,11 @@ the surface below.
 Every interaction commits through `@symbiote-native/engine` into Fabric, with RN's renderer never in the
 path:
 
-- **Primitives** — `View` · `Text` · `Image` · `ImageBackground` · `ScrollView` · `TextInput` ·
-  `Pressable` · `Touchable*` · `Button` · `Switch` · `Modal` · `ActivityIndicator` ·
-  `SafeAreaView` · `RefreshControl` · `FlatList` · `SectionList` · `VirtualizedList`.
+- **Primitives** — `view` · `text` · `image` · `image-background` · `scroll-view` · `text-input` ·
+  `pressable` · `touchable-opacity` / `touchable-native-feedback` / `touchable-without-feedback` /
+  `touchable-highlight` · `button` · `switch` · `modal` · `activity-indicator` ·
+  `safe-area-view` · `refresh-control` · plus the components `FlatList` · `SectionList` ·
+  `VirtualizedList`.
 - **Runtime modules** — `Platform` · `StyleSheet` (incl. `hairlineWidth`) · `Dimensions` ·
   `Appearance` · `PixelRatio` · `AppState`, plus imperative `Alert` · `ActionSheetIOS` · `Share` ·
   `Linking` · `Vibration` · `Keyboard` · `StatusBar` — each reaching its real native module on the

package/build/components/activity-indicator-props.d.ts

@@ -0,0 +1,4 @@
+import type { IActivityIndicatorProps as IActivityIndicatorBaseProps } from '@symbiote-native/components';
+export type IActivityIndicatorProps = IActivityIndicatorBaseProps & {
+    className?: string;
+};

package/build/components/{button.d.ts → button-props.d.ts}

@@ -1,6 +1,4 @@
-import { type FC } from 'react';
 import type { IButtonProps as IButtonBaseProps } from '@symbiote-native/components';
 export type IButtonProps = IButtonBaseProps & {
     className?: string;
 };
-export declare const Button: FC<IButtonProps>;

package/build/components/button-props.js

@@ -0,0 +1 @@
+export {};

package/build/components/flat-list/index.js

@@ -48,9 +48,9 @@ export function FlatList(props) {
             const key = keyExtractor ? keyExtractor(item, index) : String(index);
             // The row IS the virtualized cell, so every item in it shares the row's separators handle
             // (the divider sits between rows, not columns), like RN's multi-column FlatList.
-            return createElement('symbiote-view', { key, style: { flex: 1 } }, renderItem({ item, index, separators: info.separators }));
+            return createElement('view', { key, style: { flex: 1 } }, renderItem({ item, index, separators: info.separators }));
         });
-        return createElement('symbiote-view', { style: rowStyle }, ...cells);
+        return createElement('view', { style: rowStyle }, ...cells);
     };
     // Viewability over rows expands back to per-item tokens so the caller sees item-level
     // visibility, not row-level (shared expandRowViewability).

package/build/components/image/image-props.d.ts

@@ -0,0 +1,4 @@
+import type { IImageProps as IImageBaseProps } from '@symbiote-native/components';
+export type IImageProps = IImageBaseProps & {
+    className?: string;
+};

package/build/components/image/image-props.js

@@ -0,0 +1 @@
+export {};

package/build/components/image-background-props.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import type { IImageProps } from '@symbiote-native/components';
+import type { IStyleProp, IViewStyle } from '../utils/styles';
+export interface IImageBackgroundProps extends Omit<IImageProps, 'style'> {
+    style?: IStyleProp<IViewStyle>;
+    imageStyle?: IStyleProp<IViewStyle> | string;
+    className?: string;
+    children?: ReactNode;
+}

package/build/components/image-background-props.js

@@ -0,0 +1 @@
+export {};

package/build/components/input-accessory-view-props.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { IAccessibilityProps, IAriaProps } from '@symbiote-native/components';
+import type { IStyleProp, IViewStyle } from '../utils/styles';
+export interface IInputAccessoryViewProps extends IAccessibilityProps, IAriaProps {
+    nativeID?: string;
+    backgroundColor?: string;
+    style?: IStyleProp<IViewStyle>;
+    className?: string;
+    children?: ReactNode;
+}

package/build/components/input-accessory-view-props.js

@@ -0,0 +1 @@
+export {};

package/build/components/keyboard-avoiding-view/index.js

@@ -11,7 +11,7 @@
 import { createElement, useEffect, useRef, useState, } from 'react';
 import { dlog, Keyboard, Platform, } from '@symbiote-native/engine';
 import { computeInset, keyboardAvoidingEventNamesFor, readKeyboardFrame, readLayoutFrame, readPrefersCrossFadeTransitions, resolveKeyboardAvoidingLayout, DEFAULT_VERTICAL_OFFSET, } from '@symbiote-native/components';
-import { View } from '../../components.js';
+import {} from '../../components.js';
 // The two notifications to subscribe to, per host (iOS takes the `will` pair so the view rides
 // up with the keyboard animation; Android has no will-notifications). Resolved ONCE at module
 // scope: Platform.OS is fixed for the process, so recomputing it per render buys nothing.
@@ -86,11 +86,11 @@ export const KeyboardAvoidingView = props => {
     // 'nested' ('position') pushes the content in an inner View by `bottom: inset`; the wrapper
     // modes adjust the single wrapper directly.
     if (layout.kind === 'nested') {
-        return renderWrapper(layout.wrapperStyle, createElement(View, { style: layout.innerStyle }, children));
+        return renderWrapper(layout.wrapperStyle, createElement('view', { style: layout.innerStyle }, children));
     }
     return renderWrapper(layout.wrapperStyle, children);
     // The wrapper carries onLayout. The View FC's public props don't surface it, but
-    // `symbiote-view` routes the base layout event at runtime; widen the props through
+    // `view` routes the base layout event at runtime; widen the props through
     // a typed variable (no inline-literal excess-property check, no `as`) so the
     // onLayout reaches the host without editing View's public type.
     function renderWrapper(wrapStyle, content) {
@@ -100,6 +100,6 @@ export const KeyboardAvoidingView = props => {
             onLayout: handleLayout,
             children: content,
         };
-        return createElement(View, wrapperProps);
+        return createElement('view', wrapperProps);
     }
 };

package/build/components/modal/index.js

@@ -15,11 +15,11 @@ import { createElement, useEffect, useReducer, } from 'react';
 import { dlog } from '@symbiote-native/engine';
 import { createInitialModalState, modalReducer, renderModal, resolveAccessibilityProps, shouldRenderModal, } from '@symbiote-native/components';
 export const Modal = rawProps => {
-    // Modal owns its host element (symbiote-modal), so it folds aria/role here; the resolved fields
+    // Modal owns its host element (modal), so it folds aria/role here; the resolved fields
     // ride the host node via `...passthrough`. The events (onShow/onDismiss/onRequestClose/
     // onOrientationChange) are real ViewConfig DirectEvents, so they too ride passthrough raw.
     // className is pulled out here, like style, and applied to the CONTAINER element below — left in
-    // ...passthrough it would land on the outer symbiote-modal host instead (renderModal composes
+    // ...passthrough it would land on the outer modal host instead (renderModal composes
     // `style` into the container's style, not the host's).
     const { visible, transparent, backdropColor, animationType, presentationStyle, supportedOrientations, hardwareAccelerated, statusBarTranslucent, navigationBarTranslucent, allowSwipeDismissal, style, className, children, ...passthrough } = resolveAccessibilityProps(rawProps);
     // The iOS keep-alive: the effect runs AFTER this render, so a visible→hidden transition keeps the
@@ -47,7 +47,7 @@ export const Modal = rawProps => {
         style,
         passthrough,
     });
-    // root = symbiote-modal > [container]; the user children nest UNDER the container View, never as
+    // root = modal > [container]; the user children nest UNDER the container View, never as
     // a direct sibling of the host (RN's modal content layout).
     const [container] = root.children;
     if (typeof container === 'string')

package/build/components/pressable/{index.d.ts → pressable-props.d.ts}

@@ -1,6 +1,5 @@
-import { type FC, type ReactNode } from 'react';
-import { type IPressState, type IPressHandler, type IRectOffset, type IPressableAndroidRippleConfig } from '@symbiote-native/components';
-import type { IAccessibilityProps, IAriaProps } from '@symbiote-native/components';
+import type { ReactNode } from 'react';
+import type { IAccessibilityProps, IAriaProps, IPressHandler, IPressState, IPressableAndroidRippleConfig, IRectOffset } from '@symbiote-native/components';
 import type { IStyleProp, IViewStyle } from '../../utils/styles';
 export type { IPressState, IPressableAndroidRippleConfig, } from '@symbiote-native/components';
 type IPressableStyle = IStyleProp<IViewStyle> | ((state: IPressState) => IStyleProp<IViewStyle>);
@@ -13,10 +12,12 @@ export interface IPressableProps extends IAccessibilityProps, IAriaProps {
     onLongPress?: IPressHandler;
     delayLongPress?: number;
     disabled?: boolean;
+    focusable?: boolean;
     cancelable?: boolean;
     hitSlop?: IRectOffset;
     pressRetentionOffset?: IRectOffset;
     unstable_pressDelay?: number;
+    minPressDuration?: number;
     android_ripple?: IPressableAndroidRippleConfig;
     android_disableSound?: boolean;
     onHoverIn?: IPressHandler;
@@ -27,5 +28,3 @@ export interface IPressableProps extends IAccessibilityProps, IAriaProps {
     className?: string;
     children?: IChildrenProp;
 }
-export declare const Pressable: FC<IPressableProps>;
-export declare const TouchablePressable: FC<IPressableProps>;

package/build/components/pressable/pressable-props.js

@@ -0,0 +1 @@
+export {};

package/build/components/{refresh-control/index.d.ts → refresh-control-props.d.ts}

@@ -1,7 +1,8 @@
-import { type FC, type ReactNode } from 'react';
-import { type IAccessibilityProps, type IAriaProps } from '@symbiote-native/components';
+import type { ReactNode } from 'react';
+import type { IAccessibilityProps, IAriaProps } from '@symbiote-native/components';
 export interface IRefreshControlProps extends IAccessibilityProps, IAriaProps {
     refreshing: boolean;
+    id?: string;
     onRefresh?: () => void | Promise<void>;
     tintColor?: string;
     title?: string;
@@ -14,4 +15,3 @@ export interface IRefreshControlProps extends IAccessibilityProps, IAriaProps {
     children?: ReactNode;
     className?: string;
 }
-export declare const RefreshControl: FC<IRefreshControlProps>;

package/build/components/refresh-control-props.js

@@ -0,0 +1 @@
+export {};

package/build/components/safe-area-view-props.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { ISymbioteEvent } from '@symbiote-native/engine';
+import type { IAccessibilityProps, IAriaProps } from '@symbiote-native/components';
+import type { IStyleProp, IViewStyle } from '../utils/styles';
+export interface ISafeAreaViewProps extends IAccessibilityProps, IAriaProps {
+    style?: IStyleProp<IViewStyle>;
+    id?: string;
+    className?: string;
+    children?: ReactNode;
+    onLayout?: (event: ISymbioteEvent) => void;
+}

package/build/components/safe-area-view-props.js

@@ -0,0 +1 @@
+export {};

package/build/components/scroll-view/{shared.d.ts → scroll-view-props.d.ts}

@@ -1,12 +1,9 @@
-import { type ReactElement, type ReactNode, type RefObject } from 'react';
-import { AnimatedValue, type ISymbioteEvent, type ISymbioteNode } from '@symbiote-native/engine';
-import { type ISymbioteIntrinsic } from '@symbiote-native/components';
-import { type IAccessibilityProps, type IAriaProps } from '@symbiote-native/components';
+import type { ReactNode } from 'react';
+import type { ISymbioteEvent } from '@symbiote-native/engine';
+import type { IAccessibilityProps, IAriaProps } from '@symbiote-native/components';
 import type { IStyleProp, IViewStyle } from '../../utils/styles';
-import { type IStickyHeaderComponentType } from './sticky-header';
 export type { IScrollViewHandle } from '@symbiote-native/components';
 type IScrollHandler = (event: ISymbioteEvent) => void;
-type ILayoutHandler = (event: ISymbioteEvent) => void;
 export interface IScrollViewProps extends IAccessibilityProps, IAriaProps {
     style?: IStyleProp<IViewStyle>;
     contentContainerStyle?: IStyleProp<IViewStyle> | string;
@@ -28,7 +25,6 @@ export interface IScrollViewProps extends IAccessibilityProps, IAriaProps {
         x: number;
         y: number;
     };
-    refreshControl?: ReactElement<IClonableRefreshControl>;
     removeClippedSubviews?: boolean;
     onContentSizeChange?: (width: number, height: number) => void;
     snapToInterval?: number;
@@ -39,7 +35,6 @@ export interface IScrollViewProps extends IAccessibilityProps, IAriaProps {
     disableIntervalMomentum?: boolean;
     stickyHeaderIndices?: number[];
     invertStickyHeaders?: boolean;
-    StickyHeaderComponent?: IStickyHeaderComponentType;
     keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
     keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
     maintainVisibleContentPosition?: {
@@ -69,7 +64,7 @@ export interface IScrollViewProps extends IAccessibilityProps, IAriaProps {
     fadingEdgeLength?: number;
     persistentScrollbar?: boolean;
     endFillColor?: string;
-    onLayout?: ILayoutHandler;
+    onLayout?: IScrollHandler;
     onScroll?: IScrollHandler;
     onScrollBeginDrag?: IScrollHandler;
     onScrollEndDrag?: IScrollHandler;
@@ -79,20 +74,3 @@ export interface IScrollViewProps extends IAccessibilityProps, IAriaProps {
     children?: ReactNode;
     className?: string;
 }
-export interface IClonableRefreshControl {
-    style?: IStyleProp<IViewStyle>;
-    children?: ReactNode;
-}
-export interface IPreparedScrollView {
-    scrollViewIntrinsic: ISymbioteIntrinsic;
-    scrollViewBaseStyle: IStyleProp<IViewStyle> | undefined;
-    outerProps: Record<string, unknown>;
-    style: IStyleProp<IViewStyle> | undefined;
-    layoutSplitStyle: IStyleProp<IViewStyle>;
-    content: ReactElement;
-    refreshControl: ReactElement<IClonableRefreshControl> | undefined;
-    scrollAnimatedValue: AnimatedValue;
-    nativeStickyAvailable: boolean;
-}
-export declare function usePreparedScrollView(rawProps: IScrollViewProps): IPreparedScrollView;
-export declare function useNativeStickyScrollAttach(scrollNodeRef: RefObject<ISymbioteNode | null>, scrollAnimatedValue: AnimatedValue, enabled: boolean): void;

package/build/components/scroll-view/scroll-view-props.js

@@ -0,0 +1 @@
+export {};

package/build/components/switch/switch-props.d.ts

@@ -0,0 +1,4 @@
+import type { ISwitchProps as ISwitchBaseProps } from '@symbiote-native/components';
+export type ISwitchProps = ISwitchBaseProps & {
+    className?: string;
+};

package/build/components/switch/switch-props.js

@@ -0,0 +1 @@
+export {};

package/build/components/text-input/text-input-props.d.ts

@@ -0,0 +1,4 @@
+import type { ITextInputProps as ITextInputBaseProps } from '@symbiote-native/components';
+export type ITextInputProps = ITextInputBaseProps & {
+    className?: string;
+};

package/build/components/text-input/text-input-props.js

@@ -0,0 +1 @@
+export {};

package/build/components/touchable/touchable-props.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import type { IPressTimingProps } from '@symbiote-native/components';
+import type { IStyleProp, IViewStyle } from '../../utils/styles';
+import type { IPressableProps } from '../pressable/pressable-props';
+export type ITouchableBaseProps = Omit<IPressableProps, 'style' | 'children'> & IPressTimingProps & {
+    style?: IStyleProp<IViewStyle>;
+    children?: ReactNode;
+};
+export interface ITouchableOpacityProps extends ITouchableBaseProps {
+    activeOpacity?: number;
+}
+export interface ITouchableHighlightProps extends ITouchableBaseProps {
+    activeOpacity?: number;
+    underlayColor?: string;
+    onShowUnderlay?: () => void;
+    onHideUnderlay?: () => void;
+}

package/build/components/touchable/touchable-props.js

@@ -0,0 +1 @@
+export {};

package/build/components/touchable-native-feedback/touchable-native-feedback-props.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+import type { INativeFeedbackBackground } from '@symbiote-native/components';
+import type { IPressableProps } from '../pressable/pressable-props';
+export type ITouchableNativeFeedbackProps = Omit<IPressableProps, 'style' | 'children'> & {
+    background?: INativeFeedbackBackground;
+    useForeground?: boolean;
+    children?: ReactNode;
+};

package/build/components/touchable-native-feedback/touchable-native-feedback-props.js

@@ -0,0 +1 @@
+export {};

package/build/components/touchable-without-feedback/touchable-without-feedback-props.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+import type { IPressTimingProps } from '@symbiote-native/components';
+import type { IPressableProps } from '../pressable/pressable-props';
+export type ITouchableWithoutFeedbackProps = Omit<IPressableProps, 'style' | 'children'> & IPressTimingProps & {
+    children?: ReactNode;
+};

package/build/components/touchable-without-feedback/touchable-without-feedback-props.js

@@ -0,0 +1 @@
+export {};

package/build/components/virtualized-list/index.js

@@ -1,4 +1,4 @@
-// VirtualizedList: real windowing over the existing ScrollView. Only the cells
+// VirtualizedList: real windowing over the `scroll-view` TAG. Only the cells
 // whose computed offset falls inside the visible window (plus a leading/trailing
 // buffer) are rendered; everything above and below is collapsed into two spacer
 // Views whose sizes sum to the off-screen extent, so the scroll thumb and total
@@ -14,14 +14,31 @@
 // from a `commit` dispatched in a layout effect (before paint, so MVCP's shift lands without a
 // visible jump). Lists have no Descriptor render fn — the cell content is React's own children.
 //
-// Imperative scrolling resolves to an offset in the reducer and rides the ScrollView's native
-// scrollTo command via its handle ref, animated by default. The `contentOffset` prop is only a
-// fallback for the pre-mount window (handle not yet attached).
+// Imperative scrolling resolves to an offset in the reducer and rides the scroll node's native
+// scrollTo command, animated by default. The `contentOffset` prop is only a fallback for the
+// pre-mount window (the node not yet attached).
+//
+// WHAT IS STILL THIS COMPONENT'S, now that the scroll view is a tag and the engine owns its
+// content node, its sticky seam and its RefreshControl placement — checked rather than assumed,
+// because "the wrapper is gone" and "nothing is left" are different claims:
+//
+//   the WINDOW           `reduceList` decides which indices are in view, and this file is what
+//                        turns that into elements. The output SHAPE is decided in JS from the
+//                        app's own data through `renderItem` — the one disqualifier that no
+//                        engine seam removes (`.claude/rules/host-primitive-tier.md`, tier 3).
+//   the CELL WRAPPERS    a measuring `view` per cell with the inversion counter-flip, the two
+//                        spacers, the header/footer/empty slots, the separator INSIDE the cell.
+//   the LIFECYCLE        native events -> actions, effects run with React primitives (timers, a
+//                        forced re-render, a layout effect for MVCP), one state cell.
+//   the HANDLE           `buildScrollViewHandle` over the node a `ref` hands back, plus the list's
+//                        own imperative surface on top of it.
+//
+// What is NOT: the content node, `contentContainerStyle`'s routing, where a RefreshControl goes
+// per platform, and how a sticky header pins. The list names `sticky-header` on a cell and knows
+// nothing else about it.
 import { createElement, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, } from 'react';
 import { dlog, } from '@symbiote-native/engine';
-import { DEFAULT_END_REACHED_THRESHOLD, DEFAULT_INITIAL_NUM_TO_RENDER, DEFAULT_MAX_TO_RENDER_PER_BATCH, DEFAULT_START_REACHED_THRESHOLD, DEFAULT_UPDATE_CELLS_BATCHING_PERIOD, DEFAULT_WINDOW_SIZE, EMPTY_OFFSET, FIRST_INDEX, INVERTED_X_STYLE, INVERTED_Y_STYLE, buildListPlan, buildViewabilityPairs, createInitialListState, isSeparatorGapInRange, listEffectSignature, readLayoutLength, readLayoutOffset, readScrollOffset, reduceList, resolveItemKey, } from '@symbiote-native/components';
-import { ScrollView, } from '../scroll-view';
-import { RefreshControl } from '../refresh-control/index.js';
+import { DEFAULT_END_REACHED_THRESHOLD, DEFAULT_INITIAL_NUM_TO_RENDER, DEFAULT_MAX_TO_RENDER_PER_BATCH, DEFAULT_START_REACHED_THRESHOLD, DEFAULT_UPDATE_CELLS_BATCHING_PERIOD, DEFAULT_WINDOW_SIZE, EMPTY_OFFSET, FIRST_INDEX, INVERTED_X_STYLE, INVERTED_Y_STYLE, buildListPlan, buildScrollViewHandle, buildViewabilityPairs, createInitialListState, isSeparatorGapInRange, listEffectSignature, readLayoutLength, readLayoutOffset, readScrollOffset, reduceList, resolveItemKey, } from '@symbiote-native/components';
 function resolveElement(component) {
     if (component === undefined)
         return undefined;
@@ -101,7 +118,12 @@ export function VirtualizedList(props) {
     // The offset we are imperatively driving native to (scrollTo* before the handle attaches). Pushed
     // down as the ScrollView's contentOffset prop; fresh object identity each time. undefined = none.
     const [commandedOffset, setCommandedOffset] = useState(undefined);
-    const scrollViewRef = useRef(null);
+    // The engine node of the scroll TAG. A `ref` on an intrinsic hands back the host instance, so
+    // there is no wrapper left to run a `useImperativeHandle` — `buildScrollViewHandle` is what turns
+    // the node into RN's scroll surface, and it is the same function every other adapter feeds from
+    // its own host-instance accessor. Lazy getter: the node is null until commit.
+    const scrollNodeRef = useRef(null);
+    const scrollHandle = useMemo(() => buildScrollViewHandle(() => scrollNodeRef.current), []);
     // Pending minimumViewTime debounce timer / the incremental-fill timer (adapter owns the timers;
     // the reducer only asks for a delay).
     const viewableTimerRef = useRef(null);
@@ -117,9 +139,9 @@ export function VirtualizedList(props) {
         const target = isHorizontal
             ? { x: clamped, y: EMPTY_OFFSET }
             : { x: EMPTY_OFFSET, y: clamped };
-        if (scrollViewRef.current !== null) {
+        if (scrollNodeRef.current !== null) {
             dlog(`VirtualizedList scrollTo offset=${clamped} animated=${animated} (horizontal=${isHorizontal})`);
-            scrollViewRef.current.scrollTo({ x: target.x, y: target.y, animated });
+            scrollHandle.scrollTo({ x: target.x, y: target.y, animated });
             return;
         }
         dlog(`VirtualizedList scrollTo offset=${clamped} pending-ref (horizontal=${isHorizontal})`);
@@ -289,18 +311,20 @@ export function VirtualizedList(props) {
             dispatch({ kind: 'scroll-to-end', animated: params?.animated ?? true });
         },
         flashScrollIndicators: () => {
-            scrollViewRef.current?.flashScrollIndicators?.();
+            scrollHandle.flashScrollIndicators?.();
         },
-        getNativeScrollRef: () => scrollViewRef.current,
-        getScrollableNode: () => scrollViewRef.current,
-        getScrollResponder: () => scrollViewRef.current,
-        getScrollNode: () => scrollViewRef.current?.getScrollNode() ?? null,
+        // Null until the tag commits, so these keep RN's "no scroll view yet" answer rather than
+        // handing back a handle that would silently no-op.
+        getNativeScrollRef: () => scrollNodeRef.current !== null ? scrollHandle : null,
+        getScrollableNode: () => scrollNodeRef.current !== null ? scrollHandle : null,
+        getScrollResponder: () => scrollNodeRef.current !== null ? scrollHandle : null,
+        getScrollNode: () => scrollNodeRef.current,
         // Manual trigger for RN's recordInteraction: flip the interaction flag so
         // waitForInteraction viewability configs start reporting.
         recordInteraction: () => {
             dispatch({ kind: 'record-interaction' });
         },
-    }), [dispatch]);
+    }), [dispatch, scrollHandle]);
     // After-commit pass: run the deferred effects (batch fill, edge-reached, viewability,
     // initial-scroll, MVCP) in a LAYOUT effect so MVCP's shift lands before paint. Re-runs only when
     // the windowing signature changed — the same dedup key every adapter shares.
@@ -328,15 +352,14 @@ export function VirtualizedList(props) {
     const stickySet = stickyHeaderIndices !== undefined
         ? new Set(stickyHeaderIndices)
         : undefined;
-    let renderedStickyIndices = [];
     const header = resolveElement(ListHeaderComponent);
     if (header !== undefined) {
-        children.push(createElement('symbiote-view', { key: 'list-header' }, header));
+        children.push(createElement('view', { key: 'list-header' }, header));
     }
     if (count === FIRST_INDEX) {
         const empty = resolveElement(ListEmptyComponent);
         if (empty !== undefined) {
-            children.push(createElement('symbiote-view', { key: 'list-empty' }, empty));
+            children.push(createElement('view', { key: 'list-empty' }, empty));
         }
     }
     else {
@@ -352,9 +375,14 @@ export function VirtualizedList(props) {
             stickyIndices: stickySet,
             hasHeader: header !== undefined,
         });
-        renderedStickyIndices = plan.stickyChildPositions;
+        // `plan.stickyChildPositions` is deliberately NOT read. It was the input to the wrapper's own
+        // JS sticky pass, and the behavior honours `stickyHeaderIndices` by numbering the OWNER's paint
+        // children — which a windowed list cannot supply: it paints a header, a spacer and a slice, so
+        // data index 3 is almost never paint child 3, and the positions would have to be recomputed
+        // every time the window slides. The cells that should pin carry the `sticky-header` TAG
+        // instead, which pins by document order and survives windowing.
         if (plan.leadingExtent > EMPTY_OFFSET) {
-            children.push(createElement('symbiote-view', {
+            children.push(createElement('view', {
                 key: 'spacer-leading',
                 style: horizontal
                     ? { width: plan.leadingExtent }
@@ -374,7 +402,11 @@ export function VirtualizedList(props) {
                 index: forcedIndex,
                 separators: makeSeparators(forcedIndex),
             });
-            children.push(createElement('symbiote-view', {
+            children.push(createElement(
+            // Sticky by construction — `forcedStickyCell` exists only for an index in `stickySet` —
+            // and the SAME tag the in-window branch below uses, so a cell crossing between the two
+            // keeps its element type as well as its key and never remounts.
+            'sticky-header', {
                 key: `cell-${plan.forcedStickyCell.key}`,
                 onLayout: makeCellMeasure(forcedIndex),
                 style: inverted
@@ -385,7 +417,7 @@ export function VirtualizedList(props) {
             }, forcedCell));
         }
         if (plan.gapExtent > EMPTY_OFFSET) {
-            children.push(createElement('symbiote-view', {
+            children.push(createElement('view', {
                 key: 'spacer-gap',
                 style: horizontal
                     ? { width: plan.gapExtent }
@@ -420,7 +452,13 @@ export function VirtualizedList(props) {
                 : undefined;
             // Wrap each cell in a measuring View. When inverted, each cell carries the counter-flip so
             // its content reads upright inside the flipped content container.
-            children.push(createElement('symbiote-view', {
+            //
+            // A cell the app flagged sticky is wrapped in the `sticky-header` TAG instead — same
+            // position, same key, same `onLayout` (the behavior forwards it rather than replacing it),
+            // and the engine finds this scroll view by walking up. Nothing here computes a child index:
+            // the collision point comes from the owner's DOCUMENT order, which is the one form that
+            // survives windowing.
+            children.push(createElement(stickySet?.has(planCell.index) === true ? 'sticky-header' : 'view', {
                 key: `cell-${planCell.key}`,
                 onLayout: makeCellMeasure(planCell.index),
                 style: inverted
@@ -431,7 +469,7 @@ export function VirtualizedList(props) {
             }, cell, separator));
         }
         if (plan.trailingExtent > EMPTY_OFFSET) {
-            children.push(createElement('symbiote-view', {
+            children.push(createElement('view', {
                 key: 'spacer-trailing',
                 style: horizontal
                     ? { width: plan.trailingExtent }
@@ -441,7 +479,7 @@ export function VirtualizedList(props) {
     }
     const footer = resolveElement(ListFooterComponent);
     if (footer !== undefined) {
-        children.push(createElement('symbiote-view', { key: 'list-footer' }, footer));
+        children.push(createElement('view', { key: 'list-footer' }, footer));
     }
     // A horizontal list pins the content container to the full row width so the row overflows for
     // iOS to scroll. The inversion flip rides ONLY the outer ScrollView style and each cell, never
@@ -458,10 +496,13 @@ export function VirtualizedList(props) {
         ...accessibilityRest,
         style: resolvedStyle,
         contentContainerStyle: resolvedContentContainerStyle,
-        horizontal,
         onScroll,
         onLayout: onViewportLayout,
     };
+    // `horizontal` is NOT in the bag: the axis is the TAG (`horizontal-scroll-view`), because Android
+    // scrolls the two axes with different native ViewManagers. The behavior's own fold deletes the
+    // prop and rewrites it from the tag, so passing it would be at best redundant and at worst a
+    // contradiction it has to warn about.
     if (onScrollBeginDrag !== undefined)
         scrollProps.onScrollBeginDrag = onScrollBeginDrag;
     if (onScrollEndDrag !== undefined)
@@ -479,9 +520,6 @@ export function VirtualizedList(props) {
     // A pending imperative/initial scroll rides down as contentOffset (fresh identity each push).
     if (commandedOffset !== undefined)
         scrollProps.contentOffset = commandedOffset;
-    // Headers in the window stick; an empty list leaves the prop off entirely.
-    if (renderedStickyIndices.length > 0)
-        scrollProps.stickyHeaderIndices = renderedStickyIndices;
     // Forward maintainVisibleContentPosition to the native ScrollView so it anchors in-window cells.
     // minIndexForVisible is bumped by 1 when a ListHeaderComponent occupies child 0.
     if (maintainVisibleContentPosition !== undefined) {
@@ -491,16 +529,23 @@ export function VirtualizedList(props) {
                 (header !== undefined ? 1 : 0),
         };
     }
-    // Pull-to-refresh: when onRefresh is set, build a RefreshControl for the ScrollView's
-    // refreshControl prop. refreshing is RN-required alongside onRefresh, default false when nullish.
-    if (onRefresh !== undefined) {
-        dlog('VirtualizedList wiring RefreshControl (onRefresh provided)');
-        scrollProps.refreshControl = createElement(RefreshControl, {
+    // Pull-to-refresh: when onRefresh is set, the RefreshControl is an ordinary FIRST CHILD on both
+    // platforms rather than a prop. The scroll behavior CLAIMS it, so the engine keeps it beside the
+    // content view on iOS and inverts the tree on Android; everything after it lands in the content
+    // node the behavior built. refreshing is RN-required alongside onRefresh, default false.
+    const refreshControl = onRefresh !== undefined
+        ? createElement('refresh-control', {
+            key: 'refresh-control',
             refreshing: refreshing ?? false,
             onRefresh,
             progressViewOffset,
-        });
+        })
+        : undefined;
+    if (refreshControl !== undefined) {
+        dlog('VirtualizedList wiring RefreshControl (onRefresh provided)');
     }
-    // The ScrollView handle (ref) backs animated imperative scrolls via its native command.
-    return createElement(ScrollView, { ...scrollProps, ref: scrollViewRef }, ...children);
+    // The scroll TAG, not a wrapper: the engine builds the content node, carries
+    // `contentContainerStyle` onto it and places the refresh control. `ref` hands back the engine
+    // node, which is what `buildScrollViewHandle` drives for the imperative scrolls.
+    return createElement(horizontal ? 'horizontal-scroll-view' : 'scroll-view', { ...scrollProps, ref: scrollNodeRef }, refreshControl, ...children);
 }

package/build/components.d.ts

@@ -42,6 +42,7 @@ export interface ITextProps extends IAccessibilityProps, IAriaProps {
     numberOfLines?: number;
     ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
     selectable?: boolean;
+    disabled?: boolean;
     adjustsFontSizeToFit?: boolean;
     minimumFontScale?: number;
     allowFontScaling?: boolean;
@@ -50,5 +51,3 @@ export interface ITextProps extends IAccessibilityProps, IAriaProps {
     ref?: Ref<IHostInstance>;
     children?: ReactNode;
 }
-export declare const View = "symbiote-view";
-export declare const Text = "symbiote-text";