@symbiote-native/solid 3.2.0 → 3.4.0

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

@@ -0,0 +1,27 @@
+// What a list is built from: driver, nesting among lists, sticky state, window and handlers
+import { onCleanup, untrack } from 'solid-js';
+import { createListNesting, listHasMore, resolveItemKey, } from '@symbiote-native/components';
+import { useVirtualizedListScope } from './nested-scope.js';
+import { createListWindow } from './list-window.js';
+import { createScrollHandlers } from './scroll-handlers.js';
+import { createStickyState } from './sticky-state.js';
+import { createListDriver } from './use-list-driver.js';
+export function createListParts(props) {
+    // The driver is built first, so it reaches the nesting through `created`, read on first use
+    const driver = createListDriver(props, (first, last) => created.findFirstChildWithMore(first, last));
+    const created = createListNesting({
+        parent: useVirtualizedListScope(),
+        horizontal: untrack(() => props.horizontal === true),
+        getState: driver.getState,
+        dispatch: driver.dispatch,
+        getContainerNode: driver.getHostNode,
+        getHasMore: () => listHasMore(driver.getState()),
+        keyFor: index => resolveItemKey(props.getItem(props.data, index), index, props.keyExtractor),
+        handlers: () => handlers,
+    });
+    onCleanup(created.detach);
+    const sticky = createStickyState(props);
+    const listWindow = createListWindow(props, driver.metrics);
+    const handlers = createScrollHandlers(props, driver, sticky, () => created);
+    return { driver, nesting: created, sticky, listWindow, handlers };
+}

package/build/components/virtualized-list/list-rows.d.ts

@@ -0,0 +1,18 @@
+import { type Accessor } from 'solid-js';
+import type { JSX } from '../../jsx-runtime';
+import { type IListMetrics } from '@symbiote-native/components';
+import type { ISymbioteEvent } from '@symbiote-native/engine';
+import type { IListWindow } from './list-window';
+import type { IStickyState } from './sticky-state';
+import type { IListSeparators } from './use-separators';
+import type { IVirtualizedListProps } from './virtualized-list-props';
+export type IRowDeps<ItemT> = {
+    props: IVirtualizedListProps<ItemT>;
+    listWindow: IListWindow;
+    metrics: Accessor<IListMetrics>;
+    separators: IListSeparators<ItemT>;
+    sticky: IStickyState;
+    measureCell: (index: Accessor<number>) => (event: ISymbioteEvent) => void;
+    focusCell: (index: Accessor<number>) => () => void;
+};
+export declare function buildRow<ItemT>(deps: IRowDeps<ItemT>, rowKey: string): JSX.Element;

package/build/components/virtualized-list/list-rows.jsx

@@ -0,0 +1,91 @@
+// The rows of the windowed list: a cell with its separator, or a spacer standing in for a gap
+import { Show, createMemo, on, untrack } from 'solid-js';
+import { EMPTY_OFFSET, LIST_SEGMENT_KIND, NO_INDEX, cellStyleOf, spacerStyleOf, } from '@symbiote-native/components';
+import { renderItemContent } from './item-content.jsx';
+import { ScrollViewStickyHeader } from './sticky-header.jsx';
+function separatorElement(deps, index) {
+    const Separator = deps.props.ItemSeparatorComponent;
+    if (Separator === undefined)
+        return undefined;
+    // A spread of a CALL compiles to `mergeProps(() => ...)`, so the separator's props stay live
+    return <Separator {...deps.separators.separatorPropsFor(index)}/>;
+}
+// RN gates the separator on the last index of the DATA, not of the WINDOW: it lives INSIDE the
+// measuring wrapper, so gating on the window would change a cell's height as the window slides
+function hasSeparatorAfter(deps, index) {
+    return (deps.props.ItemSeparatorComponent !== undefined &&
+        index < deps.metrics().count - 1);
+}
+function cellPartsOf(deps, index) {
+    const { props } = deps;
+    // Called once and untracked, a tracked call would rebuild the subtree on every window step
+    const content = untrack(() => renderItemContent(props, () => ({
+        item: props.getItem(props.data, index()),
+        index: index(),
+        separators: deps.separators.makeSeparators(index()),
+    })));
+    // The separator rides INSIDE the measuring wrapper, as a sibling it would be an extra flex child
+    const separator = (<Show when={hasSeparatorAfter(deps, index())}>
+      <view>{separatorElement(deps, index())}</view>
+    </Show>);
+    return { content, separator };
+}
+// The view around a cell, or the app's `CellRendererComponent` standing in for it
+function cellWrapper(deps, index, cellKey, parts) {
+    const { props } = deps;
+    const style = cellStyleOf({
+        inverted: props.inverted === true,
+        horizontal: props.horizontal === true,
+    });
+    const Custom = props.CellRendererComponent;
+    if (Custom === undefined) {
+        return (<view onLayout={deps.measureCell(index)} onFocus={deps.focusCell(index)} style={style}>
+        {parts.content}
+        {parts.separator}
+      </view>);
+    }
+    return (<Custom cellKey={cellKey} index={index()} item={props.getItem(props.data, index())} style={style} onLayout={deps.measureCell(index)} onFocus={deps.focusCell(index)}>
+      {parts.content}
+      {parts.separator}
+    </Custom>);
+}
+function buildCell(deps, index, sticky, cellKey) {
+    const { props } = deps;
+    const parts = cellPartsOf(deps, index);
+    if (!sticky)
+        return cellWrapper(deps, index, cellKey, parts);
+    // A plain sticky cell is measured by the header itself, which REPLACES the view rather than
+    // nesting, the app's own cell component stays inside it
+    // Every reactive input is a CALL so the header reads it in its own effect
+    return (<ScrollViewStickyHeader onLayout={deps.sticky.makeStickyCellLayout(index, deps.measureCell(index))} onFocus={deps.focusCell(index)} nextHeaderLayoutY={deps.sticky.nextStickyHeaderYFor(index(), deps.listWindow.mountedIndices())} scrollAnimatedValue={deps.sticky.scrollAnimatedValue} inverted={undefined} hiddenOnScroll={props.stickyHeaderHiddenOnScroll} scrollViewHeight={undefined}>
+      {props.CellRendererComponent === undefined
+            ? [parts.content, parts.separator]
+            : cellWrapper(deps, index, cellKey, parts)}
+    </ScrollViewStickyHeader>);
+}
+// A row is keyed, so its segment changes under it as the window slides, the previous value covers
+// the tick between a key leaving the plan and `<For>` disposing the row
+function latestSegmentValue(deps, rowKey, read, initial) {
+    return createMemo((previous) => {
+        const segment = deps.listWindow.segmentOf(rowKey);
+        return (segment === undefined ? undefined : read(segment)) ?? previous;
+    }, initial);
+}
+function buildCellRow(deps, rowKey) {
+    const index = latestSegmentValue(deps, rowKey, segment => segment.kind === LIST_SEGMENT_KIND.cell ? segment.index : undefined, NO_INDEX);
+    const isSticky = createMemo(() => deps.listWindow.stickySet()?.has(index()) === true);
+    // A sticky cell is a different host subtree, not a different prop, and Solid has no reconciler to
+    // swap one for the other, so the flip is an explicit rebuild boundary keyed on the discriminator
+    // The row is keyed by its cell's key, which never changes over the row's life
+    const segment = deps.listWindow.segmentOf(rowKey);
+    const cellKey = segment?.kind === LIST_SEGMENT_KIND.cell ? segment.key : rowKey;
+    return createMemo(on(isSticky, sticky => buildCell(deps, index, sticky, cellKey)));
+}
+function buildSpacerRow(deps, rowKey) {
+    const extent = latestSegmentValue(deps, rowKey, segment => segment.kind === LIST_SEGMENT_KIND.spacer ? segment.extent : undefined, EMPTY_OFFSET);
+    return (<view style={spacerStyleOf(extent(), deps.props.horizontal === true)}/>);
+}
+export function buildRow(deps, rowKey) {
+    const isSpacer = deps.listWindow.segmentOf(rowKey)?.kind === LIST_SEGMENT_KIND.spacer;
+    return isSpacer ? buildSpacerRow(deps, rowKey) : buildCellRow(deps, rowKey);
+}

package/build/components/virtualized-list/list-window.d.ts

@@ -0,0 +1,11 @@
+import { type Accessor } from 'solid-js';
+import { type IListMetrics, type IListSegment } from '@symbiote-native/components';
+import type { IVirtualizedListProps } from './virtualized-list-props';
+export type IListWindow = {
+    stickySet: Accessor<ReadonlySet<number> | undefined>;
+    rowKeys: Accessor<string[]>;
+    segmentOf: (rowKey: string) => IListSegment | undefined;
+    mountedIndices: Accessor<ReadonlySet<number>>;
+};
+export declare function rowKeyOf(segment: IListSegment): string;
+export declare function createListWindow<ItemT>(props: IVirtualizedListProps<ItemT>, metrics: Accessor<IListMetrics>): IListWindow;

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

@@ -0,0 +1,29 @@
+// The plan for the window the driver derived, keyed so a row survives a window slide
+import { createMemo } from 'solid-js';
+import { FIRST_INDEX, LIST_SEGMENT_KIND, planFromMetrics, resolveItemKey, } from '@symbiote-native/components';
+// A cell and a spacer never share a row key, an item key cannot start with `spacer-`
+export function rowKeyOf(segment) {
+    return segment.kind === LIST_SEGMENT_KIND.spacer
+        ? segment.key
+        : `cell-${segment.key}`;
+}
+export function createListWindow(props, metrics) {
+    const keyFor = (index) => resolveItemKey(props.getItem(props.data, index), index, props.keyExtractor);
+    const windowPlan = createMemo(() => {
+        const current = metrics();
+        if (current.count === FIRST_INDEX)
+            return null;
+        return planFromMetrics(current, keyFor, props.stickyHeaderIndices);
+    });
+    const segments = createMemo(() => windowPlan()?.plan.segments ?? []);
+    const segmentsByKey = createMemo(() => new Map(segments().map((segment) => [
+        rowKeyOf(segment),
+        segment,
+    ])));
+    return {
+        stickySet: () => windowPlan()?.stickySet,
+        rowKeys: createMemo(() => segments().map(rowKeyOf)),
+        segmentOf: rowKey => segmentsByKey().get(rowKey),
+        mountedIndices: createMemo(() => new Set(segments().flatMap(segment => segment.kind === LIST_SEGMENT_KIND.cell ? [segment.index] : []))),
+    };
+}

package/build/components/virtualized-list/nested-scope.d.ts

@@ -0,0 +1,7 @@
+import type { IListScope } from '@symbiote-native/components';
+import type { JSX } from '../../jsx-runtime';
+export declare function useVirtualizedListScope(): IListScope | null;
+export declare function provideVirtualizedListScope(scope: IListScope | null, build: () => JSX.Element): JSX.Element;
+export declare function VirtualizedListScopeResetter(props: {
+    children?: JSX.Element;
+}): JSX.Element;

package/build/components/virtualized-list/nested-scope.js

@@ -0,0 +1,21 @@
+// The scope a list hands down to the lists nested in its cells, Solid's way to carry it
+// What it holds and how it behaves is `createListNesting` in the shared components package
+import { createContext, useContext } from 'solid-js';
+const ListScope = createContext(null);
+// Null outside every list, the scope of the nearest list above otherwise
+export function useVirtualizedListScope() {
+    return useContext(ListScope);
+}
+// Called as a function, the Provider's children are built with the scope in their owner chain
+export function provideVirtualizedListScope(scope, build) {
+    return ListScope.Provider({
+        value: scope,
+        get children() {
+            return build();
+        },
+    });
+}
+// A portal-like component (Modal) passes null, its content sits outside the list's scroll
+export function VirtualizedListScopeResetter(props) {
+    return provideVirtualizedListScope(null, () => props.children);
+}

package/build/components/virtualized-list/scroll-handlers.d.ts

@@ -0,0 +1,12 @@
+import { type Accessor } from 'solid-js';
+import { type IListHandlers, type IListNesting } from '@symbiote-native/components';
+import { type ISymbioteEvent } from '@symbiote-native/engine';
+import type { IListDriver } from './use-list-driver';
+import type { IStickyState } from './sticky-state';
+import type { IVirtualizedListProps } from './virtualized-list-props';
+export type IScrollHandlers = Omit<IListHandlers, 'makeCellMeasure'> & {
+    measureCell: (index: Accessor<number>) => (event: ISymbioteEvent) => void;
+    focusCell: (index: Accessor<number>) => () => void;
+    scrollHandler: Accessor<unknown>;
+};
+export declare function createScrollHandlers<ItemT>(props: IVirtualizedListProps<ItemT>, driver: Pick<IListDriver<ItemT>, 'dispatch' | 'clearCommandedOffset' | 'getHostNode'>, sticky: Pick<IStickyState, 'forwarding' | 'scrollAnimatedValue'>, nesting: () => IListNesting<ItemT>): IScrollHandlers;

package/build/components/virtualized-list/scroll-handlers.js

@@ -0,0 +1,31 @@
+// Native scroll, layout and cell-measure events turned into reducer actions
+import { createMemo } from 'solid-js';
+import { LIST_ACTION_KIND, createListHandlers, forwardScrollEvent, resolveItemKey, } from '@symbiote-native/components';
+import { event as animatedEvent, } from '@symbiote-native/engine';
+export function createScrollHandlers(props, driver, sticky, nesting) {
+    const { dispatch } = driver;
+    const core = createListHandlers({
+        isHorizontal: () => props.horizontal === true,
+        user: () => props,
+        nesting,
+        dispatch,
+        clearCommandedOffset: driver.clearCommandedOffset,
+        getNode: driver.getHostNode,
+        keyFor: index => resolveItemKey(props.getItem(props.data, index), index, props.keyExtractor),
+    });
+    // Without the native animated module the sticky value is driven off the JS thread, so the
+    // handler is wrapped in `Animated.event`, the native and plain paths forward it untouched
+    const scrollHandler = createMemo(() => {
+        if (sticky.forwarding().mode !== 'sticky-js')
+            return core.onScroll;
+        return animatedEvent([{ nativeEvent: { contentOffset: { y: sticky.scrollAnimatedValue } } }], {
+            listener: (...args) => forwardScrollEvent(core.onScroll, args),
+        });
+    });
+    return {
+        ...core,
+        scrollHandler,
+        measureCell: index => event => core.makeCellMeasure(index())(event),
+        focusCell: index => () => dispatch({ kind: LIST_ACTION_KIND.cellFocused, index: index() }),
+    };
+}

package/build/components/virtualized-list/scroll-tree.d.ts

@@ -0,0 +1,18 @@
+import type { JSX } from '../../jsx-runtime';
+import { resolveAccessibilityProps, type IListNesting } from '@symbiote-native/components';
+import { type ISymbioteNode } from '@symbiote-native/engine';
+import type { IScrollHandlers } from './scroll-handlers';
+import type { IStickyState } from './sticky-state';
+import type { IListDriver } from './use-list-driver';
+import type { IVirtualizedListProps } from './virtualized-list-props';
+export type IScrollTreeDeps<ItemT> = {
+    props: IVirtualizedListProps<ItemT>;
+    accessibility: () => ReturnType<typeof resolveAccessibilityProps>;
+    driver: Pick<IListDriver<ItemT>, 'metrics' | 'setHostNode' | 'commandedOffset'>;
+    sticky: IStickyState;
+    handlers: IScrollHandlers;
+    nesting: IListNesting<ItemT>;
+    hasHeader: boolean;
+    body: () => JSX.Element;
+};
+export declare function createScrollTree<ItemT>(deps: IScrollTreeDeps<ItemT>): () => ISymbioteNode;

package/build/components/virtualized-list/scroll-tree.jsx

@@ -0,0 +1,143 @@
+// The scroll host: the tag, its props, and the engine-owned content node the list body goes into
+import { createEffect, createMemo, on, onCleanup } from 'solid-js';
+import { attachStickyScroll, buildListScrollProps, resolveAccessibilityProps, selectScrollIntrinsics, } from '@symbiote-native/components';
+import { dlog, isSymbioteNode, resolveClassName, whenCommitted, } from '@symbiote-native/engine';
+import { createElement, insert, insertNode, spread } from '../../renderer.js';
+import { withStableKeys } from '../../utils/stable-keys.js';
+// A class-name string resolves through the shared registry before it reaches the intrinsic
+// selector, which only understands style objects and arrays
+function contentContainerStyleInput(props) {
+    const style = props.contentContainerStyle;
+    return typeof style === 'string' ? resolveClassName(style) : style;
+}
+// `withStableKeys` because several keys are conditional and Solid's `spread` has no removal pass, a
+// key that vanished would keep its last value on the native view forever
+function createOuterBag(deps) {
+    const { props, driver, sticky, handlers } = deps;
+    return withStableKeys(() => ({
+        ...buildListScrollProps({
+            horizontal: props.horizontal === true,
+            inverted: props.inverted === true,
+            style: props.style,
+            contentContainerStyle: contentContainerStyleInput(props),
+            maintainVisibleContentPosition: props.maintainVisibleContentPosition,
+            onScrollBeginDrag: handlers.onScrollBeginDrag,
+            onScrollEndDrag: handlers.onScrollEndDrag,
+            onMomentumScrollBegin: handlers.onMomentumScrollBegin,
+            onMomentumScrollEnd: handlers.onMomentumScrollEnd,
+            onContentSizeChange: handlers.onContentSizeChange,
+            // The folded throttle, not the raw prop: it carries the sticky-mode default
+            scrollEventThrottle: sticky.forwarding().scrollEventThrottle,
+            keyboardShouldPersistTaps: props.keyboardShouldPersistTaps,
+            keyboardDismissMode: props.keyboardDismissMode,
+            removeClippedSubviews: props.removeClippedSubviews,
+            nestedScrollEnabled: props.nestedScrollEnabled,
+            stickyHeaderHiddenOnScroll: props.stickyHeaderHiddenOnScroll,
+            total: driver.metrics().total,
+            hasHeader: deps.hasHeader,
+            commandedOffset: driver.commandedOffset(),
+            onScroll: handlers.onScroll,
+            onLayout: handlers.onViewportLayout,
+        }, { ...deps.accessibility(), class: props.class }),
+        onScroll: handlers.scrollHandler(),
+    }));
+}
+// The list above scrolls, so RN renders a `View` with no content container
+function createNestedBag(deps) {
+    const { props, handlers } = deps;
+    return withStableKeys(() => ({
+        ...deps.accessibility(),
+        class: props.class,
+        style: props.style,
+        onLayout: handlers.onViewportLayout,
+    }));
+}
+function buildNestedTree(deps, onHost) {
+    dlog('VirtualizedList nested in a list of the same orientation -> view');
+    const view = hostElement('view');
+    onHost(view);
+    spread(view, createNestedBag(deps), true);
+    insert(view, deps.body);
+    return view;
+}
+function hostElement(tag) {
+    const node = createElement(tag);
+    // Narrowing, the renderer types `createElement` over a union that includes the surface
+    if (!isSymbioteNode(node)) {
+        throw new Error(`VirtualizedList: ${tag} did not create a host node`);
+    }
+    return node;
+}
+// Built once: `refreshing` is written as a CALL, so the compiler emits a getter and the controlled
+// state keeps reaching this same node
+function buildRefreshControl(props) {
+    const onRefresh = props.onRefresh;
+    if (onRefresh === undefined)
+        return undefined;
+    dlog('VirtualizedList wiring RefreshControl (onRefresh provided)');
+    const element = (<refresh-control refreshing={props.refreshing ?? false} onRefresh={onRefresh} progressViewOffset={props.progressViewOffset}/>);
+    return isSymbioteNode(element) ? element : undefined;
+}
+// The scroll host is wired to the ENGINE-OWNED content node, building a second one here would nest
+// `RCTScrollContentView` inside the behavior's own
+function buildTree(deps, outerBag, scrollViewIntrinsic, onHost) {
+    dlog(`VirtualizedList -> ${scrollViewIntrinsic}`);
+    const scroll = hostElement(scrollViewIntrinsic);
+    onHost(scroll);
+    spread(scroll, outerBag, true);
+    const content = scroll.childHost;
+    if (content === undefined) {
+        throw new Error(`VirtualizedList: ${scrollViewIntrinsic} built no content node, ` +
+            'is registerScrollViewBehavior() wired?');
+    }
+    insert(content, deps.body);
+    // An ordinary child on both platforms, the behavior's `claimedChildren` places it
+    const refresh = buildRefreshControl(deps.props);
+    if (refresh !== undefined)
+        insertNode(scroll, refresh);
+    // A wrap claim re-parents `scroll` under the RefreshControl, the wrapper is what occupies this
+    // subtree's place once claimed
+    return scroll.wrapper ?? scroll;
+}
+// Drives the sticky scroll value on the native UI thread, no JS per frame
+// The engine commits on a microtask, so the node has no Fabric tag on the first run and
+// `whenCommitted` is the retry
+function attachSticky(deps, tree, hostNode) {
+    createEffect(() => {
+        // Read for the dependency: a rebuild means a NEW scroll node to attach to
+        tree();
+        if (deps.nesting.isNested || !deps.sticky.nativeStickyAvailable())
+            return;
+        const node = hostNode();
+        if (node === null)
+            return;
+        let detach;
+        const cancel = whenCommitted(node, () => {
+            detach = attachStickyScroll(node, deps.sticky.scrollAnimatedValue);
+        });
+        onCleanup(() => {
+            cancel();
+            detach?.();
+        });
+    });
+}
+export function createScrollTree(deps) {
+    const { props } = deps;
+    let scrollNode = null;
+    const outerBag = createOuterBag(deps);
+    const horizontalAxis = createMemo(() => String(props.horizontal === true));
+    // The axis picks a different host TAG and Solid cannot swap a tag under a live node, so the flip
+    // rebuilds, `on()` runs the build untracked so every other read re-props the same nodes
+    const tree = createMemo(on(horizontalAxis, () => {
+        const onHost = (node) => {
+            scrollNode = node;
+            deps.driver.setHostNode(node);
+        };
+        if (deps.nesting.isNested)
+            return buildNestedTree(deps, onHost);
+        const { scrollViewIntrinsic } = selectScrollIntrinsics(props.horizontal === true, contentContainerStyleInput(props));
+        return buildTree(deps, outerBag, scrollViewIntrinsic, onHost);
+    }));
+    attachSticky(deps, tree, () => scrollNode);
+    return tree;
+}

package/build/components/virtualized-list/shared.d.ts

@@ -1,75 +1,4 @@
-import { type Accessor, type Ref } from 'solid-js';
-import type { JSX } from '../../jsx-runtime';
-import { type IAccessibilityProps, type IAriaProps, type ICellLayout, type IViewabilityConfig, type IViewabilityConfigCallbackPair, type IViewableItemsChangedInfo, type ISeparatorProps, type ISeparators, type IViewToken, type IVirtualizedListHandle } from '@symbiote-native/components';
-import { type IClassNameValue, type IStyleProp, type ISymbioteEvent, type IViewStyle } from '@symbiote-native/engine';
-export type { ICellLayout, ISeparators, ISeparatorProps, IViewToken, IViewableItemsChangedInfo, IViewabilityConfig, IViewabilityConfigCallbackPair, IVirtualizedListHandle, };
-export interface IVirtualizedListCellInfo<ItemT> {
-    item: ItemT;
-    index: number;
-    separators: ISeparators;
-}
-export type IVirtualizedListRenderItem<ItemT> = (info: Accessor<IVirtualizedListCellInfo<ItemT>>) => JSX.Element;
-export interface IVirtualizedListProps<ItemT> extends IAccessibilityProps, IAriaProps {
-    data: unknown;
-    getItem: (data: unknown, index: number) => ItemT;
-    getItemCount: (data: unknown) => number;
-    renderItem: IVirtualizedListRenderItem<ItemT>;
-    getItemLayout?: (data: unknown, index: number) => {
-        length: number;
-        offset: number;
-        index: number;
-    };
-    initialNumToRender?: number;
-    windowSize?: number;
-    ListHeaderComponent?: JSX.Element;
-    ListFooterComponent?: JSX.Element;
-    ListEmptyComponent?: JSX.Element;
-    ItemSeparatorComponent?: (props: ISeparatorProps<ItemT>) => JSX.Element;
-    ref?: Ref<IVirtualizedListHandle>;
-    onEndReached?: (info: {
-        distanceFromEnd: number;
-    }) => void;
-    onEndReachedThreshold?: number;
-    onStartReached?: (info: {
-        distanceFromStart: number;
-    }) => void;
-    onStartReachedThreshold?: number;
-    keyExtractor?: (item: ItemT, index: number) => string;
-    onViewableItemsChanged?: (info: IViewableItemsChangedInfo<ItemT>) => void;
-    viewabilityConfig?: IViewabilityConfig;
-    viewabilityConfigCallbackPairs?: IViewabilityConfigCallbackPair<ItemT>[];
-    onScroll?: (event: ISymbioteEvent) => void;
-    onScrollBeginDrag?: (event: ISymbioteEvent) => void;
-    onScrollEndDrag?: (event: ISymbioteEvent) => void;
-    onMomentumScrollBegin?: (event: ISymbioteEvent) => void;
-    onMomentumScrollEnd?: (event: ISymbioteEvent) => void;
-    scrollEventThrottle?: number;
-    keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
-    keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
-    removeClippedSubviews?: boolean;
-    nestedScrollEnabled?: boolean;
-    horizontal?: boolean;
-    inverted?: boolean;
-    style?: IStyleProp<IViewStyle>;
-    contentContainerStyle?: IStyleProp<IViewStyle> | string;
-    class?: IClassNameValue;
-    onRefresh?: () => void;
-    refreshing?: boolean | null;
-    progressViewOffset?: number;
-    stickyHeaderIndices?: number[];
-    maintainVisibleContentPosition?: {
-        minIndexForVisible: number;
-        autoscrollToTopThreshold?: number;
-    };
-    initialScrollIndex?: number;
-    maxToRenderPerBatch?: number;
-    updateCellsBatchingPeriod?: number;
-    extraData?: unknown;
-    onScrollToIndexFailed?: (info: {
-        index: number;
-        highestMeasuredFrameIndex: number;
-        averageItemLength: number;
-    }) => void;
-}
-export type IVirtualizedListComponent = <ItemT>(props: IVirtualizedListProps<ItemT>) => JSX.Element;
+import { type IVirtualizedListComponent } from './virtualized-list-props';
+export type { ICellLayout, ISeparators, ISeparatorProps, IViewToken, IViewableItemsChangedInfo, IViewabilityConfig, IViewabilityConfigCallbackPair, IVirtualizedListHandle, } from '@symbiote-native/components';
+export type { ICellRendererComponent, ICellRendererProps, IVirtualizedListCellInfo, IVirtualizedListComponent, IVirtualizedListProps, IVirtualizedListRenderItem, } from './virtualized-list-props';
 export declare function createVirtualizedList(): IVirtualizedListComponent;