@symbiote-native/react 0.2.7 → 0.3.0

package/build/bootstrap.js

@@ -1,9 +1,8 @@
-// Zero-config app entry: wires the four RN-backed host seams (via @symbiote-native/components'
+// Zero-config app entry: wires the four RN-backed host seams (via @symbiote-native/components's
 // bootstrapHost) plus this adapter's own AppRegistry host-registrar bridge, then registers the
-// root component — collapsing the canary's manual sequence into one call. Lives OUTSIDE the
-// package's main barrel (see package.json's "./bootstrap" export): it imports react-native
-// directly, which Vitest's Flow-unaware transform can't parse (see
-// @symbiote-native/components/bootstrap for the full reason).
+// root component in one call. Lives OUTSIDE the package's main barrel (package.json's
+// "./bootstrap" export) because it imports react-native directly, which Vitest's Flow-unaware
+// transform can't parse (see @symbiote-native/components/bootstrap for the full reason).
 import { AppRegistry as RNAppRegistry } from 'react-native';
 import { bootstrapHost } from '@symbiote-native/components/bootstrap';
 import { AppRegistry, setHostRegistrar } from './modules/app-registry/index.js';

package/build/components/activity-indicator/index.android.d.ts

@@ -1,2 +1,3 @@
+import type { IActivityIndicatorProps } from './shared';
 export type { IActivityIndicatorProps } from './shared';
-export declare const ActivityIndicator: import("react").FC<import("./shared").IActivityIndicatorProps>;
+export declare function ActivityIndicator(rawProps: IActivityIndicatorProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/build/components/activity-indicator/index.android.js

@@ -1,13 +1,17 @@
-// ActivityIndicator on Android: AndroidProgressBar needs `styleAttr` (it drives the
-// ProgressBar's setStyle(); without it the view throws "setStyle() not called") and
-// `indeterminate: true`, and its default color is the theme (null), per RN's
-// ActivityIndicator.js android branch ({styleAttr:'Normal', indeterminate:true}). Metro
-// picks this on an Android host; no Platform.OS read.
-// device-verify-pending: prop names mirror RN's AndroidProgressBar, proven on a real
-// host by the absence of the "setStyle() not called" red box.
-import { createActivityIndicator } from './shared.js';
-export const ActivityIndicator = createActivityIndicator({
+// AndroidProgressBar needs `styleAttr` (drives ProgressBar.setStyle(); missing it throws
+// "setStyle() not called") and `indeterminate: true`; default color is the theme (null) —
+// mirrors RN's ActivityIndicator.js android branch. Metro selects this file on an Android
+// host, no Platform.OS read needed.
+// device-verify-pending: confirmed by the absence of the setStyle() red box on a real host.
+import { descriptorToReact } from '../../descriptor-to-react/index.js';
+import { useActivityIndicatorLogic } from './shared.js';
+const PLATFORM = {
     // RN: `color = Platform.OS === 'ios' ? GRAY : null`; Android lets the theme color it.
     defaultColor: null,
     nativeExtras: { styleAttr: 'Normal', indeterminate: true },
-});
+};
+// A top-level named function, not a factory-returned closure: React Compiler's
+// component detection only walks top-level declarations (see shared.ts).
+export function ActivityIndicator(rawProps) {
+    return descriptorToReact(useActivityIndicatorLogic(rawProps, PLATFORM));
+}

package/build/components/activity-indicator/index.ios.d.ts

@@ -1,2 +1,3 @@
+import type { IActivityIndicatorProps } from './shared';
 export type { IActivityIndicatorProps } from './shared';
-export declare const ActivityIndicator: import("react").FC<import("./shared").IActivityIndicatorProps>;
+export declare function ActivityIndicator(rawProps: IActivityIndicatorProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/build/components/activity-indicator/index.ios.js

@@ -1,10 +1,16 @@
 // ActivityIndicator on iOS: RCTActivityIndicatorView takes the size enum + a GRAY
 // default color and no extra native props. Also the base (activity-indicator.ts
 // re-exports it) for headless / web.
-import { createActivityIndicator } from './shared.js';
+import { descriptorToReact } from '../../descriptor-to-react/index.js';
+import { useActivityIndicatorLogic } from './shared.js';
 // RN's iOS default spinner color (Libraries/.../ActivityIndicator.js GRAY).
 const IOS_DEFAULT_COLOR = '#999999';
-export const ActivityIndicator = createActivityIndicator({
+const PLATFORM = {
     defaultColor: IOS_DEFAULT_COLOR,
     nativeExtras: {},
-});
+};
+// A top-level named function, not a factory-returned closure: React Compiler's
+// component detection only walks top-level declarations (see shared.ts).
+export function ActivityIndicator(rawProps) {
+    return descriptorToReact(useActivityIndicatorLogic(rawProps, PLATFORM));
+}

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

@@ -1,7 +1,6 @@
-import type { FC } from 'react';
 import type { IActivityIndicatorPlatform, IActivityIndicatorProps as IActivityIndicatorBaseProps } from '@symbiote-native/components';
 export type { IActivityIndicatorPlatform } from '@symbiote-native/components';
 export type IActivityIndicatorProps = IActivityIndicatorBaseProps & {
     className?: string;
 };
-export declare function createActivityIndicator(platform: IActivityIndicatorPlatform): FC<IActivityIndicatorProps>;
+export declare function useActivityIndicatorLogic(rawProps: IActivityIndicatorProps, platform: IActivityIndicatorPlatform): import("@symbiote-native/components").IDescriptor;

package/build/components/activity-indicator/shared.js

@@ -5,16 +5,18 @@
 //
 // The per-platform bits (iOS GRAY default + no extras; Android theme/null + styleAttr +
 // indeterminate) are supplied by the .ios/.android files via `IActivityIndicatorPlatform`.
+//
+// useActivityIndicatorLogic is a plain top-level hook, not a component factory returning a
+// closure: React Compiler's component/hook detection only walks top-level declarations, so
+// index.ios.ts / index.android.ts each declare their OWN top-level `ActivityIndicator`
+// function that calls this hook, rather than exporting whatever a factory here returns (same
+// shape as switch/shared.ts's useSwitchLogic).
 import { renderActivityIndicator, resolveAccessibilityProps } from '@symbiote-native/components';
-import { descriptorToReact } from '../../descriptor-to-react/index.js';
-export function createActivityIndicator(platform) {
-    return rawProps => {
-        // The wrapper is a raw symbiote-view, not the View FC, so it never runs
-        // resolveAccessibilityProps itself, so fold aria/role here, then forward the resolved
-        // accessibility* surface (plus testID / onLayout) onto the wrapper via `passthrough`.
-        const props = resolveAccessibilityProps(rawProps);
-        const { animating = true, color, hidesWhenStopped = true, size = 'small', style, ...passthrough } = props;
-        const descriptor = renderActivityIndicator({ animating, color, hidesWhenStopped, size, style, passthrough }, platform);
-        return descriptorToReact(descriptor);
-    };
+export function useActivityIndicatorLogic(rawProps, platform) {
+    // The wrapper is a raw symbiote-view, not the View FC, so it never runs
+    // resolveAccessibilityProps itself, so fold aria/role here, then forward the resolved
+    // accessibility* surface (plus testID / onLayout) onto the wrapper via `passthrough`.
+    const props = resolveAccessibilityProps(rawProps);
+    const { animating = true, color, hidesWhenStopped = true, size = 'small', style, ...passthrough } = props;
+    return renderActivityIndicator({ animating, color, hidesWhenStopped, size, style, passthrough }, platform);
 }

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

@@ -11,7 +11,7 @@ import { createElement, useEffect, useRef, useState, } from 'react';
 import { dlog } from '@symbiote-native/engine';
 import { computeInset, readKeyboardFrame, readLayoutFrame, resolveKeyboardAvoidingLayout, DEFAULT_VERTICAL_OFFSET, } from '@symbiote-native/components';
 import { View } from '../../components.js';
-import { Keyboard, KEYBOARD_EVENT } from '../../modules/keyboard.js';
+import { Keyboard, KEYBOARD_EVENT } from '@symbiote-native/engine';
 export const KeyboardAvoidingView = props => {
     const { behavior, enabled = true, keyboardVerticalOffset = DEFAULT_VERTICAL_OFFSET, contentContainerStyle, style, children, onLayout, 
     // The wrapper is the View FC, which runs resolveAccessibilityProps itself, so

package/build/components/modal/index.d.ts

@@ -1,5 +1,6 @@
 import { type FC, type ReactNode } from 'react';
-import { type IAccessibilityProps, type IAriaProps, type IModalAnimationType, type IModalOrientation, type IModalOrientationChangeEvent, type IModalPresentationStyle } from '@symbiote-native/components';
+import { type ISymbioteEvent } from '@symbiote-native/engine';
+import { type IAccessibilityProps, type IAriaProps, type IModalAnimationType, type IModalOrientation, type IModalPresentationStyle } from '@symbiote-native/components';
 import type { IStyleProp, IViewStyle } from '../../utils/styles';
 export type { IModalAnimationType, IModalPresentationStyle, IModalOrientation, IModalOrientationChangeEvent, } from '@symbiote-native/components';
 export interface IModalProps extends IAccessibilityProps, IAriaProps {
@@ -16,7 +17,7 @@ export interface IModalProps extends IAccessibilityProps, IAriaProps {
     onShow?: () => void;
     onDismiss?: () => void;
     onRequestClose?: () => void;
-    onOrientationChange?: (event: IModalOrientationChangeEvent) => void;
+    onOrientationChange?: (event: ISymbioteEvent) => void;
     style?: IStyleProp<IViewStyle>;
     className?: string;
     children?: ReactNode;

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

@@ -6,8 +6,6 @@
 // android branch (cloneElement(refreshControl, {style}, <ScrollView nestedScrollEnabled
 // style={flex:1}>{content}</ScrollView>)). Metro picks this on an Android host; no
 // Platform.OS read.
-// device-verify-pending: the wrap shape mirrors RN, proven on a real host by the absence
-// of the "addViewAt: failed to insert" crash.
 import { cloneElement, createElement, forwardRef, useImperativeHandle, useRef } from 'react';
 import { dlog } from '@symbiote-native/engine';
 import { buildScrollViewHandle, splitLayoutProps } from '@symbiote-native/components';

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

@@ -1,21 +1,21 @@
-// ScrollView on iOS: the RefreshControl is a CHILD of the scroll view, rendered as a
-// sibling BEFORE the content container (RN ScrollView.js: {refreshControl}{contentContainer}).
-// Also the base (scroll-view.ts re-exports it) for headless / web.
+// 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);
-    // The node ref backs the imperative handle; it attaches to the scroll-view element below
-    // (passing `ref` through createElement props binds it to the SymbioteNode, as TextInput does).
+    // Backs the imperative handle; passing `ref` through createElement props binds it to the
+    // SymbioteNode below, as TextInput does.
     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.
+    // 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), []);
-    // 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.
+    // 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 under user style so an explicit user value wins; undefined base (vertical)
+    // 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 };

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

@@ -12,7 +12,7 @@
 // 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, selectScrollIntrinsics, } from '@symbiote-native/components';
+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) {
@@ -77,39 +77,35 @@ export function usePreparedScrollView(rawProps) {
     if (decelerationRate !== undefined) {
         outerProps.decelerationRate = resolveDecelerationRate(decelerationRate);
     }
-    // onScroll: when sticky headers are active, the offset must reach the AnimatedValue, so
-    // we wrap the user's handler with Animated.event (it fires the listener passthrough). RN
-    // does the same with _scrollAnimatedValueAttachment. Without sticky headers, forward as-is.
+    // 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();
-    if (hasStickyHeaders) {
-        if (nativeStickyAvailable) {
-            // Native path (RN attachNativeEvent): the scroll value is driven on the UI thread by the
-            // imperative attach in the platform component's effect (useNativeStickyScrollAttach), so
-            // onScroll only forwards to the user, zero JS per frame. RN uses throttle 1 when sticky
-            // (ScrollView.js:1798); the native driver can afford it.
-            if (onScroll !== undefined)
-                outerProps.onScroll = onScroll;
-            outerProps.scrollEventThrottle = scrollEventThrottle ?? 1;
-        }
-        else {
-            // JS fallback (no native module): Animated.event drives the value each frame and forwards
-            // the user's handler as the listener passthrough. Correct, but lags a frame under fast
-            // scroll (the jitter), which the native path above removes on a real host.
-            outerProps.onScroll = animatedEvent([{ nativeEvent: { contentOffset: { y: scrollAnimatedValue } } }], onScroll === undefined
-                ? undefined
-                : { listener: (...args) => forwardScrollEvent(onScroll, args) });
-            outerProps.scrollEventThrottle = scrollEventThrottle ?? 16;
-        }
+    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;
     }
-    else {
-        if (onScroll !== undefined)
-            outerProps.onScroll = onScroll;
-        if (scrollEventThrottle !== undefined)
-            outerProps.scrollEventThrottle = scrollEventThrottle;
+    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 (hasStickyHeaders && invertStickyHeaders === true) {
+    if (forwarding.capturesViewportHeight) {
         outerProps.onLayout = (layoutEvent) => {
             const height = readLayoutDimension(layoutEvent, 'height');
             if (height !== undefined)
@@ -131,7 +127,7 @@ export function usePreparedScrollView(rawProps) {
     // 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 (props.maintainVisibleContentPosition !== undefined || props.snapToAlignment !== undefined) {
+    if (forwarding.collapsableChildren) {
         contentProps.collapsableChildren = false;
     }
     if (onContentSizeChange !== undefined) {
@@ -148,8 +144,8 @@ export function usePreparedScrollView(rawProps) {
             onContentSizeChange(width, height);
         };
     }
-    // Sticky headers are a pure-JS layer (the native scroll view ignores stickyHeaderIndices);
-    // wrap the flagged children so they pin to the scroll offset. No-op when none are flagged.
+    // 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)
         : children;

package/build/components/scroll-view/sticky-header.js

@@ -1,17 +1,15 @@
 // Sticky headers: the JS layer RN implements in ScrollView.js / ScrollViewStickyHeader.js.
 //
-// VERDICT (source-based): RN does stickiness PURELY IN JS. ScrollView.js (render, ~line
-// 1690) wraps each child whose index is in `stickyHeaderIndices` in a ScrollViewStickyHeader,
-// fed by a single `_scrollAnimatedValue` an Animated.event drives from `onScroll`
-// (ScrollView.js ~line 1095). The native Fabric scroll view does NOT honor the index array on
-// its own. Forwarding `stickyHeaderIndices` to native is a silent no-op. So we replicate the
-// JS layer: subscribe each flagged child to the scroll offset and translate it to stay pinned.
-// The interpolation mirrors ScrollViewStickyHeader.js (non-inverted + inverted branches) and now
-// lives, framework-agnostic, in @symbiote-native/components (computeStickyInterpolation); this
-// file holds the React component shell, the layout state, and the child-wrapping.
-import { Children, createElement, isValidElement, useCallback, useEffect, useRef, useState, } from 'react';
+// RN does stickiness purely in JS: ScrollView.js (~line 1690) wraps each flagged child in a
+// ScrollViewStickyHeader, fed by a single `_scrollAnimatedValue` that Animated.event drives
+// from `onScroll` (~line 1095). The native Fabric scroll view does not honor the index array,
+// so forwarding `stickyHeaderIndices` to native would be a silent no-op - we replicate the JS
+// layer instead. The interpolation mirrors ScrollViewStickyHeader.js and now lives,
+// framework-agnostic, in @symbiote-native/components (computeStickyInterpolation); this file
+// holds only the React component shell, layout state, and child-wrapping.
+import { Children, createElement, isValidElement, useCallback, useEffect, useReducer, useRef, useState, } from 'react';
 import { AnimatedInterpolation, AnimatedValue, Platform, dlog, } from '@symbiote-native/engine';
-import { computeStickyInterpolation, nextStickyHeaderY, readLayoutNumber, stickyDebounceMs, STICKY_HEADER_Z_INDEX, } from '@symbiote-native/components';
+import { createInitialStickyState, nextStickyHeaderY, readLayoutNumber, reduceSticky, STICKY_HEADER_Z_INDEX, } from '@symbiote-native/components';
 import { Animated } from '../../modules/animated/index.js';
 function readChildOnLayout(child) {
     const childProps = child.props;
@@ -27,79 +25,105 @@ function firstChild(children) {
 // One sticky header. Measures its own y/height via onLayout, interpolates the shared scroll
 // offset into a translateY that keeps it pinned to the top (or bottom, inverted) until the next
 // header collides with it, and drives that translate through the native driver when available so
-// the pin tracks scroll on the UI thread (no JS jitter). Ported from
-// ScrollViewStickyHeader.js, including the Fabric ShadowTree debounce path.
+// the pin tracks scroll on the UI thread (no JS jitter). The DECISIONS — the zero-swallow gate, the
+// debounce delay, the rebuild-on-input-change ranges — live in `reduceSticky`
+// (@symbiote-native/components); this component supplies only the React lifecycle: the ONE folded
+// state cell, the interpolation-node + listener wiring, the debounce setTimeout, and the re-render.
 export const ScrollViewStickyHeader = props => {
     const { inverted, scrollViewHeight, scrollAnimatedValue, nextHeaderLayoutY, children } = props;
-    const [measured, setMeasured] = useState(false);
-    const [layoutY, setLayoutY] = useState(0);
-    const [layoutHeight, setLayoutHeight] = useState(0);
-    // The animated node that drives the transform (RN's animatedTranslateY). When the scroll value
-    // is native (attachNativeEvent), this interpolation runs on the UI thread: the smooth pin.
+    // The one folded state cell (RN's scattered useState/useRef collapsed into IStickyHeaderState),
+    // mutated in place by reduceSticky. Lazily created once.
+    const stateRef = useRef(null);
+    const state = (stateRef.current ??= createInitialStickyState());
+    const [, forceRender] = useReducer((tick) => tick + 1, 0);
+    // The animated node that drives the transform (RN's animatedTranslateY), rebuilt by the
+    // rebuild-interpolation effect. When the scroll value is native, this interpolation runs on the
+    // UI thread: the smooth pin.
     const [animatedTranslateY, setAnimatedTranslateY] = useState(() => scrollAnimatedValue.interpolate({ inputRange: [-1, 0], outputRange: [0, 0] }));
-    // The debounced EXPLICIT translateY pushed to the committed transform via
-    // passthroughAnimatedPropExplicitValues, so the Fabric ShadowTree (hit-testing) knows the pinned
-    // position while the native driver animates. null until the listener first fires.
-    const [translateY, setTranslateY] = useState(null);
-    const haveReceivedInitialZeroTranslateY = useRef(true);
     const debounceTimer = useRef(null);
-    useEffect(() => {
-        if (translateY !== 0 && translateY !== null)
-            haveReceivedInitialZeroTranslateY.current = false;
-    }, [translateY]);
-    // The animated value updates several times per frame during scroll; debounce it and push the
-    // settled value into the committed transform so hit detection stays current (RN: a Fabric-only
-    // issue, symbiote is always Fabric, and worse on Android).
-    const animatedValueListener = useCallback(({ value }) => {
-        if (typeof value !== 'number')
-            return;
-        const timeout = stickyDebounceMs(Platform.OS);
-        // A freshly-rebuilt interpolation re-emits 0 to its listeners; swallow that first zero (RN).
-        if (value === 0 && !haveReceivedInitialZeroTranslateY.current) {
-            haveReceivedInitialZeroTranslateY.current = true;
-            return;
+    // The current interpolation node + its settled-value listener id, held so the next rebuild can
+    // detach the old listener (engine calls the reducer does NOT own) and unmount can clean up.
+    const interpolationRef = useRef(null);
+    const listenerIdRef = useRef(null);
+    const inputsRef = useRef({
+        os: Platform.OS,
+        inverted,
+        scrollViewHeight,
+        nextHeaderLayoutY,
+    });
+    inputsRef.current = { os: Platform.OS, inverted, scrollViewHeight, nextHeaderLayoutY };
+    // dispatch reaches through a ref because the effect executors dispatch follow-up actions
+    // (the listener -> animated-tick, the debounce timer -> debounce-fired).
+    const dispatchRef = useRef(() => { });
+    const runEffects = useCallback((effects) => {
+        for (const effect of effects) {
+            switch (effect.kind) {
+                case 'rebuild-interpolation': {
+                    // Detach the old listener, build a fresh interpolation onto the shared scroll value, and
+                    // wire the settled-value listener (symbiote is always Fabric; RN attaches it only there).
+                    const previous = interpolationRef.current;
+                    if (previous !== null && listenerIdRef.current !== null) {
+                        previous.removeListener(listenerIdRef.current);
+                        listenerIdRef.current = null;
+                    }
+                    const next = scrollAnimatedValue.interpolate({
+                        inputRange: effect.inputRange,
+                        outputRange: effect.outputRange,
+                    });
+                    listenerIdRef.current = next.addListener(({ value }) => {
+                        if (typeof value === 'number')
+                            dispatchRef.current({ kind: 'animated-tick', value });
+                    });
+                    interpolationRef.current = next;
+                    setAnimatedTranslateY(next);
+                    break;
+                }
+                case 'schedule-debounce': {
+                    // The animated value updates several times per frame; debounce the settled value into the
+                    // committed transform so hit detection stays current (a Fabric issue, worse on Android).
+                    if (debounceTimer.current !== null)
+                        clearTimeout(debounceTimer.current);
+                    debounceTimer.current = setTimeout(() => {
+                        debounceTimer.current = null;
+                        dispatchRef.current({ kind: 'debounce-fired', value: effect.value });
+                    }, effect.delay);
+                    break;
+                }
+                case 'apply-passthrough':
+                    forceRender();
+                    break;
+                case 'record-header-y':
+                    // React records through the wrapper's onLayout closure (props.onLayout, below), which
+                    // honors the public IStickyHeaderProps contract; the reducer emits no index for it.
+                    break;
+            }
         }
+    }, [scrollAnimatedValue]);
+    const dispatch = useCallback((action) => {
+        const current = stateRef.current;
+        if (current === null)
+            return;
+        runEffects(reduceSticky(current, action, inputsRef.current).effects);
+    }, [runEffects]);
+    dispatchRef.current = dispatch;
+    // Rebuild when the collision/viewport inputs change (RN effect deps minus the layout state, which
+    // dispatches 'layout' itself); also does the initial identity build on mount.
+    useEffect(() => {
+        dispatchRef.current({ kind: 'inputs-changed' });
+    }, [inverted, scrollViewHeight, nextHeaderLayoutY, scrollAnimatedValue]);
+    // Detach the listener + clear the debounce on unmount.
+    useEffect(() => () => {
+        const previous = interpolationRef.current;
+        if (previous !== null && listenerIdRef.current !== null)
+            previous.removeListener(listenerIdRef.current);
         if (debounceTimer.current !== null)
             clearTimeout(debounceTimer.current);
-        debounceTimer.current = setTimeout(() => setTranslateY(value), timeout);
     }, []);
-    useEffect(() => {
-        const { inputRange, outputRange } = computeStickyInterpolation({
-            measured,
-            inverted,
-            scrollViewHeight,
-            layoutY,
-            layoutHeight,
-            nextHeaderLayoutY,
-        });
-        const newAnimatedTranslateY = scrollAnimatedValue.interpolate({ inputRange, outputRange });
-        // symbiote is always Fabric: listen to the settled value to keep the ShadowTree transform
-        // current for hit-testing (RN attaches this listener only under Fabric).
-        const listenerId = newAnimatedTranslateY.addListener(animatedValueListener);
-        setAnimatedTranslateY(newAnimatedTranslateY);
-        return () => {
-            newAnimatedTranslateY.removeListener(listenerId);
-            if (debounceTimer.current !== null)
-                clearTimeout(debounceTimer.current);
-        };
-    }, [
-        measured,
-        layoutY,
-        layoutHeight,
-        scrollViewHeight,
-        nextHeaderLayoutY,
-        inverted,
-        scrollAnimatedValue,
-        animatedValueListener,
-    ]);
     const onLayout = (event) => {
         const y = readLayoutNumber(event, 'y');
         const height = readLayoutNumber(event, 'height');
-        if (y !== undefined)
-            setLayoutY(y);
-        if (height !== undefined)
-            setLayoutHeight(height);
-        setMeasured(true);
+        // Keep the previous value when a field is absent (RN sets state only on a defined read).
+        dispatch({ kind: 'layout', y: y ?? state.layoutY, height: height ?? state.layoutHeight });
         props.onLayout(event);
         const child = firstChild(children);
         const childOnLayout = child === undefined ? undefined : readChildOnLayout(child);
@@ -107,7 +131,7 @@ export const ScrollViewStickyHeader = props => {
     };
     // The EXPLICIT debounced translateY overrides the committed transform for hit-testing, while
     // `animatedTranslateY` does the smooth (native-driven) pin, per RN ScrollViewStickyHeader.js.
-    const passthroughAnimatedPropExplicitValues = translateY !== null ? { style: { transform: [{ translateY }] } } : null;
+    const passthroughAnimatedPropExplicitValues = state.translateY !== null ? { style: { transform: [{ translateY: state.translateY }] } } : null;
     // collapsable:false keeps the wrapper a real Yoga node; zIndex makes the pinned header paint
     // OVER the rows scrolling under it. `style` is `unknown` on Animated.View, so the interpolation
     // transform passes with no cast.

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

@@ -1,10 +1,8 @@
-// SectionList: the public, high-level list-of-sections component. It is a thin
-// wrapper over VirtualizedSectionList, mirroring RN's layering
-// (SectionList -> VirtualizedSectionList -> VirtualizedList). All the
+// SectionList: public wrapper over VirtualizedSectionList, mirroring RN's
+// SectionList -> VirtualizedSectionList -> VirtualizedList layering. All
 // section-flattening / windowing / imperative-scroll logic lives in
-// VirtualizedSectionList; this layer only re-exposes the same surface under the
-// SectionList name so existing consumers and the canary keep importing it from
-// here, threading the imperative ref straight through.
+// VirtualizedSectionList; this re-exposes the same surface under the
+// SectionList name, threading the imperative ref straight through.
 import { createElement } from 'react';
 import { VirtualizedSectionList, } from '../virtualized-section-list/index.js';
 export function SectionList(props) {

package/build/components/switch/index.android.d.ts

@@ -1,2 +1,3 @@
+import type { ISwitchProps } from './shared';
 export type { ISwitchProps, ISwitchTrackColor } from './shared';
-export declare const Switch: import("react").FC<import("./shared").ISwitchProps>;
+export declare function Switch(rawProps: ISwitchProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/build/components/switch/index.android.js

@@ -1,12 +1,18 @@
 // Switch, Android host binding. AndroidSwitch takes trackColorForTrue / trackColorForFalse
 // plus trackTintColor (the color for the CURRENT value, which RN computes as value ? true :
 // false), and snaps native back via the `setNativeValue` command (Switch.js:221-225).
-import { createSwitch } from './shared.js';
-export const Switch = createSwitch({
+import { descriptorToReact } from '../../descriptor-to-react/index.js';
+import { useSwitchLogic } from './shared.js';
+const PLATFORM = {
     snapBackCommand: 'setNativeValue',
     trackColorProps: (value, trackColor) => ({
         trackColorForFalse: trackColor?.false,
         trackColorForTrue: trackColor?.true,
         trackTintColor: value ? trackColor?.true : trackColor?.false,
     }),
-});
+};
+// A top-level named function, not a factory-returned closure: React Compiler's
+// component detection only walks top-level declarations (see shared.ts).
+export function Switch(rawProps) {
+    return descriptorToReact(useSwitchLogic(rawProps, PLATFORM));
+}

package/build/components/switch/index.ios.d.ts

@@ -1,2 +1,3 @@
+import type { ISwitchProps } from './shared';
 export type { ISwitchProps, ISwitchTrackColor } from './shared';
-export declare const Switch: import("react").FC<import("./shared").ISwitchProps>;
+export declare function Switch(rawProps: ISwitchProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/build/components/switch/index.ios.js

@@ -1,10 +1,16 @@
 // Switch, iOS host binding. iOS's native Switch takes onTintColor (ON-track) / tintColor
 // (OFF-track), and snaps native back via the `setValue` command (Switch.js:221-225).
-import { createSwitch } from './shared.js';
-export const Switch = createSwitch({
+import { descriptorToReact } from '../../descriptor-to-react/index.js';
+import { useSwitchLogic } from './shared.js';
+const PLATFORM = {
     snapBackCommand: 'setValue',
     trackColorProps: (_value, trackColor) => ({
         onTintColor: trackColor?.true,
         tintColor: trackColor?.false,
     }),
-});
+};
+// A top-level named function, not a factory-returned closure: React Compiler's
+// component detection only walks top-level declarations (see shared.ts).
+export function Switch(rawProps) {
+    return descriptorToReact(useSwitchLogic(rawProps, PLATFORM));
+}

package/build/components/switch/shared.d.ts

@@ -1,10 +1,9 @@
-import type { FC } from 'react';
 import type { ISwitchPlatform, ISwitchProps as ISwitchBaseProps } from '@symbiote-native/components';
 export type { ISwitchTrackColor } from '@symbiote-native/components';
 export type ISwitchProps = ISwitchBaseProps & {
     className?: string;
 };
-type ISwitchHostPlatform = ISwitchPlatform & {
+export type ISwitchHostPlatform = ISwitchPlatform & {
     snapBackCommand: string;
 };
-export declare function createSwitch(platform: ISwitchHostPlatform): FC<ISwitchProps>;
+export declare function useSwitchLogic(rawProps: ISwitchProps, platform: ISwitchHostPlatform): import("@symbiote-native/components").IDescriptor;