@symbiote-native/react 0.4.0 → 2.0.0

package/build/components/pressable/index.js

@@ -1,100 +0,0 @@
-// Pressable: the React lifecycle half. The press lifecycle (the long-press timer, unstable_press-
-// Delay deferral, the pressRetentionOffset drift test, the suppression flags) lives in
-// @symbiote-native/components/state as a pure machine over a runtime + host; the render decisions (the
-// responder listeners, the disabled→accessibilityState fold, the ripple prop) in
-// @symbiote-native/components/view. Here React owns only the lifecycle: useState for `pressed`, a ref for
-// the runtime, a ref for the View instance (the measure handle), and a useMemo that rebuilds the
-// handlers when the config changes. This is the React twin of the Vue adapter's setup-scope
-// runtime + setPressed ref.
-//
-// Three RN interaction props that change real app feel ride on top of the shared synthesis,
-// entirely in JS: android_ripple (an Android native-feedback prop on a dedicated inner View, inert
-// on iOS), unstable_pressDelay, and pressRetentionOffset (the drift region), all handled by the
-// shared machine; here we only wire its host + render the View.
-import { createElement, useMemo, useRef, useState, } from 'react';
-import { createPressHandlers, createPressRuntime, rippleProps, buildPressableListeners, resolveDisabledAccessibilityState, noteHoverNoop, DEFAULT_DELAY_LONG_PRESS_MS, } from '@symbiote-native/components';
-import { View } from '../../components.js';
-function resolveStyle(style, state) {
-    if (typeof style === 'function')
-        return style(state);
-    return style;
-}
-function resolveChildren(children, state) {
-    if (typeof children === 'function')
-        return children(state);
-    return children;
-}
-export const Pressable = props => {
-    const { onPress, onPressIn, onPressOut, onPressMove, onLongPress, delayLongPress = DEFAULT_DELAY_LONG_PRESS_MS, disabled, cancelable, hitSlop, pressRetentionOffset, unstable_pressDelay = 0, android_ripple, android_disableSound, onHoverIn, onHoverOut, delayHoverIn, delayHoverOut, accessibilityState, testID, style, children, 
-    // The remaining accessibility / aria props forward to View untouched; View runs
-    // resolveAccessibilityProps, so aria/role fold there, once.
-    ...accessibilityRest } = props;
-    const [pressed, setPressed] = useState(false);
-    // The mutable press runtime (timers, suppression flags, measured region), a ref so mutating it
-    // never triggers a re-render; only setPressed does.
-    const runtime = useRef(createPressRuntime()).current;
-    // The View instance, so the machine can measure its on-screen rect on responder grant.
-    const viewRef = useRef(null);
-    // The lifecycle seam the machine fills: flip pressed-state, and expose the View's raw measure.
-    const host = useMemo(() => ({
-        setPressed,
-        getMeasureFn: () => {
-            const view = viewRef.current;
-            if (view === null)
-                return undefined;
-            return callback => view.measure(callback);
-        },
-        schedule: (callback, ms) => {
-            const id = setTimeout(callback, ms);
-            return () => clearTimeout(id);
-        },
-    }), []);
-    const handlers = useMemo(() => createPressHandlers({
-        onPress,
-        onPressIn,
-        onPressOut,
-        onPressMove,
-        onLongPress,
-        delayLongPress,
-        unstable_pressDelay,
-        hitSlop,
-        pressRetentionOffset,
-    }, runtime, host), [
-        onPress,
-        onPressIn,
-        onPressOut,
-        onPressMove,
-        onLongPress,
-        delayLongPress,
-        unstable_pressDelay,
-        hitSlop,
-        pressRetentionOffset,
-        runtime,
-        host,
-    ]);
-    noteHoverNoop(onHoverIn, onHoverOut);
-    void delayHoverIn;
-    void delayHoverOut;
-    const state = { pressed };
-    const resolvedAccessibilityState = resolveDisabledAccessibilityState(accessibilityState, disabled);
-    const viewProps = {
-        ...accessibilityRest,
-        // The ref is the handle the retention measure reaches through (measure on grant).
-        ref: viewRef,
-        style: resolveStyle(style, state),
-        hitSlop,
-        accessibilityState: resolvedAccessibilityState,
-        testID,
-    };
-    // Forward the Android tap-sound suppressor under RN's own key; inert on iOS.
-    if (android_disableSound !== undefined)
-        viewProps.android_disableSound = android_disableSound;
-    Object.assign(viewProps, buildPressableListeners(handlers, { disabled, cancelable }));
-    // android_ripple rides a dedicated inner View (the Pressable's own View only forwards a fixed
-    // prop set), mirroring touchable-native-feedback. On iOS the ripple prop is undefined, so the
-    // child renders unwrapped, no extra node.
-    const ripple = android_ripple !== undefined ? rippleProps(android_ripple) : undefined;
-    const content = resolveChildren(children, state);
-    const inner = ripple !== undefined ? createElement(View, ripple, content) : content;
-    return createElement(View, viewProps, inner);
-};

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

@@ -1,21 +0,0 @@
-// RefreshControl primitive. On iOS this is the PullToRefreshView Fabric node that
-// lives INSIDE a ScrollView (a sibling of the content container), giving the
-// pull-to-refresh gesture. `refreshing` is a controlled prop: the parent owns it
-// and pushes it down each commit; native reports the gesture via the direct
-// `topRefresh` event, which shared routes to the `refresh` listener (onRefresh).
-import { createElement } from 'react';
-import { dlog } from '@symbiote-native/engine';
-import { resolveAccessibilityProps, } from '@symbiote-native/components';
-export const RefreshControl = rawProps => {
-    // Owns its host element (symbiote-refresh-control), so it folds aria/role here;
-    // the resolved accessibility* fields ride down via `...nativeProps`.
-    const props = resolveAccessibilityProps(rawProps);
-    const { children, ...nativeProps } = props;
-    dlog('RefreshControl -> PullToRefreshView');
-    dlog(`RefreshControl refreshing=${String(props.refreshing)}`);
-    if (props.enabled !== undefined)
-        dlog(`RefreshControl enabled=${String(props.enabled)} (Android-only)`);
-    if (props.onRefresh !== undefined)
-        dlog('RefreshControl onRefresh listener wired');
-    return createElement('symbiote-refresh-control', { ...nativeProps }, children);
-};

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

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

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

@@ -1,18 +0,0 @@
-// SafeAreaView primitive. A plain view whose native side insets its children to
-// the safe area (notch, rounded corners, system bars). There is no JS-side
-// translation; RN just renders the native RCTSafeAreaView and lets the host do
-// the inset math, so this maps style + children straight onto the intrinsic.
-import { createElement } from 'react';
-import { dlog } from '@symbiote-native/engine';
-import { resolveAccessibilityProps, } from '@symbiote-native/components';
-export const SafeAreaView = rawProps => {
-    // Owns its host element (symbiote-safe-area-view), so it folds aria/role here;
-    // the resolved accessibility* surface rides the node via `...accessibilityRest`.
-    const props = resolveAccessibilityProps(rawProps);
-    const { style, children, onLayout, ...accessibilityRest } = props;
-    dlog('SafeAreaView -> SafeAreaView');
-    const nodeProps = { ...accessibilityRest, style };
-    if (onLayout !== undefined)
-        nodeProps.onLayout = onLayout;
-    return createElement('symbiote-safe-area-view', nodeProps, children);
-};

package/build/components/scroll-view/index.android.d.ts

@@ -1,3 +0,0 @@
-import { type IScrollViewHandle, type IScrollViewProps } from './shared';
-export type { IScrollViewProps, IScrollViewHandle } from './shared';
-export declare const ScrollView: import("react").ForwardRefExoticComponent<IScrollViewProps & import("react").RefAttributes<IScrollViewHandle>>;

package/build/components/scroll-view/index.android.js

@@ -1,61 +0,0 @@
-// ScrollView on Android: an Android ScrollView accepts only ONE child, so a RefreshControl
-// can't be a sibling of the content the way iOS allows ("addViewAt: failed to insert view
-// ... at index 1"). Instead the RefreshControl (AndroidSwipeRefreshLayout) WRAPS the
-// scroll view, with the scroll view nested inside and nestedScrollEnabled so the inner
-// scroll handles the gesture before the refresh parent, which mirrors RN's ScrollView.js
-// android branch (cloneElement(refreshControl, {style}, <ScrollView nestedScrollEnabled
-// style={flex:1}>{content}</ScrollView>)). Metro picks this on an Android host; no
-// Platform.OS read.
-import { cloneElement, createElement, forwardRef, useImperativeHandle, useRef, } from 'react';
-import { dlog } from '@symbiote-native/engine';
-import { buildScrollViewHandle, splitLayoutProps, } from '@symbiote-native/components';
-import { usePreparedScrollView, useNativeStickyScrollAttach, } from './shared.js';
-export const ScrollView = forwardRef((props, forwardedRef) => {
-    const { scrollViewIntrinsic, scrollViewBaseStyle, outerProps, style, layoutSplitStyle, content, refreshControl, scrollAnimatedValue, nativeStickyAvailable, } = usePreparedScrollView(props);
-    // The node ref backs the imperative handle; it attaches to the inner scroll-view element
-    // (the wrap shape leaves the scroll view as the command target, not the RefreshControl).
-    const ref = useRef(null);
-    // Lazy getter, not the ref itself: the node is null until the element commits, so the handle
-    // must read ref.current on each command, an eager capture would freeze null.
-    useImperativeHandle(forwardedRef, () => buildScrollViewHandle(() => ref.current), []);
-    // Drive the sticky scroll value on the native UI thread (RN attachNativeEvent). No-op on a
-    // host without the native animated module. The JS sticky path stays in effect.
-    useNativeStickyScrollAttach(ref, scrollAnimatedValue, nativeStickyAvailable);
-    dlog('ScrollView.ANDROID refreshControl=' +
-        (refreshControl === undefined ? 'NONE(1child)' : 'WRAP'));
-    if (refreshControl === undefined) {
-        // Base style (flexDirection: row for horizontal) under user style; undefined base
-        // (vertical) passes the user style through unchanged.
-        const scrollStyle = scrollViewBaseStyle
-            ? [scrollViewBaseStyle, style]
-            : style;
-        return createElement(scrollViewIntrinsic, { ...outerProps, style: scrollStyle, ref }, content);
-    }
-    // RN splits the flattened style across the two boxes (ScrollView.js android branch):
-    // LAYOUT props (margin/flex/size/position/transform/gap/…) drive the outer
-    // AndroidSwipeRefreshLayout frame; VISUAL props (background/padding/border/opacity/…) paint
-    // the inner scroll view. So the wrapper carries `outer`, and the inner scroll view its base
-    // (flexDirection/overflow) plus the visual `inner` composed over it, NOT a hardcoded flex:1
-    // that would override an explicit user height/width.
-    //
-    // layoutSplitStyle (not style): a class-only layout prop (flex/height/gap/…) is invisible to
-    // `style` (it never carries the resolved `className` value), so splitting on `style` alone
-    // starves the wrapper of its layout style and it collapses to nothing. layoutSplitStyle is
-    // `style` merged with the resolved className style (see usePreparedScrollView).
-    const { outer: outerStyle, inner: innerStyle } = splitLayoutProps(layoutSplitStyle);
-    const scrollStyle = scrollViewBaseStyle
-        ? [scrollViewBaseStyle, innerStyle]
-        : innerStyle;
-    // className is stripped from the spread here: layoutSplitStyle already folded its resolved
-    // value into `outer`/`inner` above, so forwarding the raw prop too would re-apply its LAYOUT
-    // half onto the inner scroll view a second time (on top of the outer wrapper).
-    const { className: _classNameAppliedViaSplit, ...innerOuterProps } = outerProps;
-    const scrollView = createElement(scrollViewIntrinsic, {
-        ...innerOuterProps,
-        style: scrollStyle,
-        nestedScrollEnabled: true,
-        ref,
-    }, content);
-    return cloneElement(refreshControl, { style: outerStyle }, scrollView);
-});
-ScrollView.displayName = 'ScrollView';

package/build/components/scroll-view/index.d.ts

@@ -1 +0,0 @@
-export * from './index.ios';

package/build/components/scroll-view/index.ios.d.ts

@@ -1,3 +0,0 @@
-import { type IScrollViewHandle, type IScrollViewProps } from './shared';
-export type { IScrollViewProps, IScrollViewHandle } from './shared';
-export declare const ScrollView: import("react").ForwardRefExoticComponent<IScrollViewProps & import("react").RefAttributes<IScrollViewHandle>>;

package/build/components/scroll-view/index.ios.js

@@ -1,29 +0,0 @@
-// ScrollView (iOS): RefreshControl renders as a sibling BEFORE the content container, matching
-// RN's ScrollView.js ({refreshControl}{contentContainer}). Also the base export
-// (scroll-view.ts re-exports it) for headless / web.
-import { createElement, forwardRef, useImperativeHandle, useRef } from 'react';
-import { buildScrollViewHandle } from '@symbiote-native/components';
-import { usePreparedScrollView, useNativeStickyScrollAttach, } from './shared.js';
-export const ScrollView = forwardRef((props, forwardedRef) => {
-    const { scrollViewIntrinsic, scrollViewBaseStyle, outerProps, style, content, refreshControl, scrollAnimatedValue, nativeStickyAvailable, } = usePreparedScrollView(props);
-    // Backs the imperative handle; passing `ref` through createElement props binds it to the
-    // SymbioteNode below, as TextInput does.
-    const ref = useRef(null);
-    // Lazy getter: the node is null until commit, so the handle reads ref.current per call
-    // instead of capturing eagerly, which would freeze null.
-    useImperativeHandle(forwardedRef, () => buildScrollViewHandle(() => ref.current), []);
-    // Drives sticky scroll on the native UI thread (RN attachNativeEvent); no-ops without the
-    // native animated module, falling back to the JS sticky path.
-    useNativeStickyScrollAttach(ref, scrollAnimatedValue, nativeStickyAvailable);
-    // Base style stays under user style so an explicit value wins; undefined base (vertical)
-    // passes the user style through unchanged.
-    const scrollStyle = scrollViewBaseStyle
-        ? [scrollViewBaseStyle, style]
-        : style;
-    const scrollProps = { ...outerProps, style: scrollStyle, ref };
-    if (refreshControl === undefined) {
-        return createElement(scrollViewIntrinsic, scrollProps, content);
-    }
-    return createElement(scrollViewIntrinsic, scrollProps, refreshControl, content);
-});
-ScrollView.displayName = 'ScrollView';

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

@@ -1,4 +0,0 @@
-// Base / default ScrollView: re-exports the iOS build. Metro overrides this with
-// scroll-view.ios.ts / .android.ts on a real host; under tsx / tsc / web the host config
-// resolves here. Filename is the selector, no Platform.OS read.
-export * from './index.ios.js';

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

@@ -1,240 +0,0 @@
-// ScrollView: shared core. The Fabric tree is nested: the scroll view wraps a content
-// view that holds the children (RN's own ScrollView.js shape). Building that content
-// node, resolving decelerationRate, and the prop plumbing are platform-invariant and
-// live here. What diverges is how a RefreshControl integrates: on iOS it is a
-// CHILD of the scroll view (sibling of the content), on Android it WRAPS the scroll view
-// (AndroidSwipeRefreshLayout is the parent, ScrollView nested inside). So the .ios/.android
-// files assemble the final element; the filename selects, no Platform.OS read.
-//
-// The framework-agnostic pieces (decelerationRate, the per-axis intrinsics/base style, the
-// content-size dedupe, the imperative handle, splitLayoutProps, the sticky math, the native
-// scroll-attach) live in @symbiote-native/components; this file holds only the React
-// lifecycle (refs/state/effects) and the element assembly that consumes them.
-import { createElement, useEffect, useRef, useState, } from 'react';
-import { AnimatedValue, dlog, event as animatedEvent, isClassNameValue, isNativeAnimatedAvailable, resolveClassName, } from '@symbiote-native/engine';
-import { attachStickyScroll, didContentSizeChange, forwardScrollEvent, readLayoutDimension, resolveDecelerationRate, resolveScrollForwarding, selectScrollIntrinsics, } from '@symbiote-native/components';
-import { resolveAccessibilityProps, } from '@symbiote-native/components';
-import { wrapStickyHeaders, } from './sticky-header.js';
-export function usePreparedScrollView(rawProps) {
-    // ScrollView forwards its outer props straight to the native scroll view (not a View
-    // wrapper), so it folds aria/role into accessibility* here before forwarding.
-    const props = resolveAccessibilityProps(rawProps);
-    const { style, className, contentContainerStyle, horizontal, decelerationRate, refreshControl, children, onContentSizeChange, stickyHeaderIndices, invertStickyHeaders, StickyHeaderComponent, onLayout, onScroll, scrollEventThrottle, ...outer } = props;
-    const isHorizontal = horizontal === true;
-    const hasStickyHeaders = stickyHeaderIndices !== undefined && stickyHeaderIndices.length > 0;
-    // A single AnimatedValue tracks the scroll offset and drives every sticky header's
-    // translateY (RN's _scrollAnimatedValue). Stable across renders via a ref so the headers'
-    // bindings survive re-renders. Allocated even when no sticky headers are present (hooks
-    // run unconditionally: usePreparedScrollView is always called at the top of the render body).
-    const scrollAnimatedValueRef = useRef(null);
-    if (scrollAnimatedValueRef.current === null)
-        scrollAnimatedValueRef.current = new AnimatedValue(0);
-    const scrollAnimatedValue = scrollAnimatedValueRef.current;
-    // Inverted sticky headers stick to the BOTTOM, so they need the viewport height (RN reads
-    // it in _handleLayout). Tracked here and fed back into the wrapped headers.
-    const [viewportHeight, setViewportHeight] = useState(undefined);
-    // Sticky-header cross-talk (RN ScrollView.js _headerLayoutYs, line 754): a child-index→measured-y
-    // map the parent keeps so each header can learn where the NEXT sticky header starts (its push-off
-    // collision point). The map lives in a ref (mutated imperatively from each header's onLayout, like
-    // RN's _onStickyHeaderLayout), and a state bump forces the re-render that feeds the freshly-recorded
-    // y forward into the previous header's nextHeaderLayoutY prop.
-    const headerLayoutYsRef = useRef(null);
-    if (headerLayoutYsRef.current === null)
-        headerLayoutYsRef.current = new Map();
-    const headerLayoutYs = headerLayoutYsRef.current;
-    // The mounted headers by child index (RN's _stickyHeaderRefs, ScrollView.js:750), so a fresh
-    // measurement reaches its predecessor directly.
-    const stickyHeaderRefsRef = useRef(null);
-    if (stickyHeaderRefsRef.current === null)
-        stickyHeaderRefsRef.current = new Map();
-    const stickyHeaderRefs = stickyHeaderRefsRef.current;
-    const onHeaderRef = (index, handle) => {
-        if (handle === null)
-            stickyHeaderRefs.delete(index);
-        else
-            stickyHeaderRefs.set(index, handle);
-    };
-    // Measurements waiting to be handed to their predecessors, flushed together (see below).
-    const pendingHeaderYsRef = useRef(null);
-    if (pendingHeaderYsRef.current === null)
-        pendingHeaderYsRef.current = new Map();
-    const pendingHeaderYs = pendingHeaderYsRef.current;
-    const flushScheduledRef = useRef(false);
-    const flushHeaderYs = () => {
-        flushScheduledRef.current = false;
-        if (stickyHeaderIndices === undefined)
-            return;
-        for (const [index, y] of pendingHeaderYs) {
-            const previousIndex = stickyHeaderIndices[stickyHeaderIndices.indexOf(index) - 1];
-            if (previousIndex === undefined)
-                continue;
-            stickyHeaderRefs.get(previousIndex)?.setNextHeaderY(y);
-        }
-        pendingHeaderYs.clear();
-    };
-    // RN _onStickyHeaderLayout (ScrollView.js:1136): record this header's y, then hand it to the
-    // PREVIOUS sticky header as its push-off collision point.
-    //
-    // The handoff is COALESCED rather than immediate, and that is the point. Cross-talk runs BACKWARDS
-    // (a header learns its collision point from the one after it), so a mount measures every header
-    // and walks the chain end to start. Pushing each value the moment it arrives makes every link its
-    // own update generation - a setState on the predecessor, whose effect setStates again - and React
-    // caps nested updates at 50: three headers go unnoticed, two hundred abort the app with "Maximum
-    // update depth exceeded", which reads like an infinite loop but is really depth. Draining on a
-    // microtask puts one burst of layouts into ONE render pass, so depth stops tracking header count.
-    const onHeaderLayoutY = (index, y) => {
-        if (headerLayoutYs.get(index) === y)
-            return;
-        headerLayoutYs.set(index, y);
-        dlog(`ScrollView sticky-header layoutY index=${index} y=${y}`);
-        pendingHeaderYs.set(index, y);
-        if (flushScheduledRef.current)
-            return;
-        flushScheduledRef.current = true;
-        void Promise.resolve().then(flushHeaderYs);
-    };
-    // A class-name string resolves through the shared registry before it reaches the
-    // framework-agnostic selector below, which only understands style objects/arrays.
-    const resolvedContentContainerStyle = typeof contentContainerStyle === 'string'
-        ? resolveClassName(contentContainerStyle)
-        : contentContainerStyle;
-    // The per-axis intrinsics, base style, and content style come from the shared selector
-    // (@symbiote-native/components): on Android horizontal resolves to its own ViewManager, on iOS both
-    // map back to RCTScrollView; here we only pass the axis.
-    const { scrollViewIntrinsic, contentIntrinsic, scrollViewBaseStyle, contentStyle, } = selectScrollIntrinsics(isHorizontal, resolvedContentContainerStyle);
-    const outerProps = { ...outer };
-    // className is pulled out above (unlike the rest of `...outer`) so `layoutSplitStyle` below can
-    // resolve it eagerly; re-added here so the simple single-node paths (iOS, Android with no
-    // refreshControl) keep forwarding it raw, exactly as it did when it flowed through `...outer`.
-    if (className !== undefined)
-        outerProps.className = className;
-    // RN defaults nested scrolling ON (ScrollView.js:1862 `nestedScrollEnabled ?? true`).
-    // Android needs the flag to scroll a scrollable nested inside another scroll view
-    // independently; without it the inner one stays put. iOS handles nesting natively, so
-    // it is a no-op there. Default to true so nested lists scroll out of the box, like RN.
-    outerProps.nestedScrollEnabled = props.nestedScrollEnabled ?? true;
-    // iOS needs `horizontal` to flip RCTScrollView's axis; Android's dedicated horizontal
-    // manager ignores it. Harmless on Android, load-bearing on iOS, so always forward it.
-    if (horizontal !== undefined)
-        outerProps.horizontal = horizontal;
-    if (decelerationRate !== undefined) {
-        outerProps.decelerationRate = resolveDecelerationRate(decelerationRate);
-    }
-    // The scroll-forwarding DECISIONS (which onScroll path, the 1/16 throttle defaults, whether to
-    // capture the viewport height for inverted sticky, whether to keep cells un-flattened) are folded
-    // out to the shared resolveScrollForwarding; here React only EXECUTES them with its own primitives.
-    const nativeStickyAvailable = hasStickyHeaders && isNativeAnimatedAvailable();
-    const forwarding = resolveScrollForwarding({
-        hasStickyHeaders,
-        nativeStickyAvailable,
-        invertStickyHeaders,
-        scrollEventThrottle,
-        maintainVisibleContentPosition: props.maintainVisibleContentPosition,
-        snapToAlignment: props.snapToAlignment,
-    });
-    // onScroll: the JS-fallback path wraps the user's handler in Animated.event so the offset drives
-    // the AnimatedValue each frame (RN _scrollAnimatedValueAttachment); the native + plain paths
-    // forward the user's handler as-is (the native driver attaches the value on the UI thread).
-    if (forwarding.mode === 'sticky-js') {
-        outerProps.onScroll = animatedEvent([{ nativeEvent: { contentOffset: { y: scrollAnimatedValue } } }], onScroll === undefined
-            ? undefined
-            : { listener: (...args) => forwardScrollEvent(onScroll, args) });
-    }
-    else if (onScroll !== undefined) {
-        outerProps.onScroll = onScroll;
-    }
-    if (forwarding.scrollEventThrottle !== undefined) {
-        outerProps.scrollEventThrottle = forwarding.scrollEventThrottle;
-    }
-    // onLayout on the scroll-view node: capture the viewport height for inverted sticky headers
-    // (RN _handleLayout), then call the user's handler. Pass through unchanged otherwise.
-    if (forwarding.capturesViewportHeight) {
-        outerProps.onLayout = (layoutEvent) => {
-            const height = readLayoutDimension(layoutEvent, 'height');
-            if (height !== undefined)
-                setViewportHeight(height);
-            onLayout?.(layoutEvent);
-        };
-    }
-    else if (onLayout !== undefined) {
-        outerProps.onLayout = onLayout;
-    }
-    dlog(`ScrollView -> ${scrollViewIntrinsic} (horizontal=${isHorizontal} sticky=${hasStickyHeaders})`);
-    // onContentSizeChange is synthesized from the content view's own onLayout (RN
-    // _handleContentOnLayout): read width/height off nativeEvent.layout and fire only when the
-    // size actually changed (dedupe via a ref, like RN). Composed with any content onLayout.
-    const lastContentSizeRef = useRef(null);
-    const contentProps = {
-        style: contentStyle,
-        collapsable: false,
-    };
-    // maintainVisibleContentPosition (and Android snapToAlignment) anchor against the metrics
-    // of MOUNTED cell views. Android Fabric view-flattens layout-only cells away, so the native
-    // MaintainVisibleScrollPositionHelper has nothing to anchor to and the list jumps on prepend.
-    // RN keeps the cells as real views via collapsableChildren={false} on the content container
-    // (ScrollView.js:1731-1748 `preserveChildren`). iOS never flattens, so it is a no-op there.
-    if (forwarding.collapsableChildren) {
-        contentProps.collapsableChildren = false;
-    }
-    if (onContentSizeChange !== undefined) {
-        contentProps.onLayout = (layoutEvent) => {
-            const width = readLayoutDimension(layoutEvent, 'width');
-            const height = readLayoutDimension(layoutEvent, 'height');
-            if (width === undefined || height === undefined)
-                return;
-            const last = lastContentSizeRef.current;
-            if (!didContentSizeChange(last, { width, height }))
-                return;
-            lastContentSizeRef.current = { width, height };
-            dlog(`ScrollView onContentSizeChange ${width}x${height}`);
-            onContentSizeChange(width, height);
-        };
-    }
-    // Wrap the flagged children so they pin to the scroll offset (see the sticky-headers note
-    // above); no-op when none are flagged.
-    const contentChildren = hasStickyHeaders
-        ? wrapStickyHeaders(children, stickyHeaderIndices, scrollAnimatedValue, invertStickyHeaders, viewportHeight, StickyHeaderComponent, { headerLayoutYs, onHeaderLayoutY, onHeaderRef })
-        : children;
-    // `collapsable: false` is load-bearing on Android. The content container is a
-    // layout-only View, which Android Fabric view-flattens away, hoisting the cells
-    // up as DIRECT children of the scroll view, which strictly hosts exactly one
-    // child ("ScrollView can host only one direct child" → addViewAt crash). RN pins
-    // its own NativeScrollContentView the same way (ScrollView.js, collapsable={false};
-    // ReactScrollView.java: "the 'content' View … non-collapsable so it will never be
-    // View-flattened away"). iOS doesn't flatten, so this is a no-op there.
-    const content = createElement(contentIntrinsic, contentProps, contentChildren);
-    // resolveClassName(undefined) is a cheap {} no-op, so this is safe with no className too.
-    const resolvedClassName = isClassNameValue(className) ? className : undefined;
-    const layoutSplitStyle = [
-        resolveClassName(resolvedClassName),
-        style,
-    ];
-    return {
-        scrollViewIntrinsic,
-        scrollViewBaseStyle,
-        outerProps,
-        style,
-        layoutSplitStyle,
-        content,
-        refreshControl,
-        scrollAnimatedValue,
-        nativeStickyAvailable,
-    };
-}
-// Attach the scroll event to the scroll-offset value on the NATIVE driver, RN's
-// _updateAnimatedNodeAttachment / AnimatedImplementation.attachNativeEvent (ScrollView.js:1087).
-// Called by each platform ScrollView with its committed scroll-node ref; the value then tracks
-// scroll on the UI thread and the sticky-header interpolations ride it natively (no JS jitter).
-// No-op when native sticky is unavailable or the node hasn't committed. Detaches on unmount.
-// The attach/detach itself lives in @symbiote-native/components (attachStickyScroll); this is the React
-// effect that drives it.
-export function useNativeStickyScrollAttach(scrollNodeRef, scrollAnimatedValue, enabled) {
-    useEffect(() => {
-        if (!enabled)
-            return;
-        const node = scrollNodeRef.current;
-        if (node === null)
-            return;
-        return attachStickyScroll(node, scrollAnimatedValue);
-    }, [scrollNodeRef, scrollAnimatedValue, enabled]);
-}

package/build/components/scroll-view/sticky-header.d.ts

@@ -1,18 +0,0 @@
-import { type ComponentType, type ReactNode, type Ref } from 'react';
-import { AnimatedValue } from '@symbiote-native/engine';
-import { type IStickyHeaderProps } from '@symbiote-native/components';
-export type IStickyHeaderHandle = {
-    setNextHeaderY: (y: number) => void;
-};
-export type IStickyCrossTalk = {
-    headerLayoutYs: ReadonlyMap<number, number>;
-    onHeaderLayoutY: (index: number, y: number) => void;
-    onHeaderRef: (index: number, handle: IStickyHeaderHandle | null) => void;
-};
-export type IStickyHeaderComponentProps = IStickyHeaderProps & {
-    children?: ReactNode;
-    ref?: Ref<IStickyHeaderHandle>;
-};
-export type IStickyHeaderComponentType = ComponentType<IStickyHeaderComponentProps>;
-export declare const ScrollViewStickyHeader: IStickyHeaderComponentType;
-export declare function wrapStickyHeaders(children: ReactNode, stickyHeaderIndices: number[] | undefined, scrollAnimatedValue: AnimatedValue, invertStickyHeaders: boolean | undefined, scrollViewHeight: number | undefined, StickyHeaderComponent: IStickyHeaderComponentType | undefined, crossTalk: IStickyCrossTalk): ReactNode;