@legendapp/list 1.0.20 → 1.1.1

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 1.1.1
+- Fix: scrollTo accuracy when paddingTop changes
+
+## 1.1.0
+- Feat: Add LazyLegendList component for virtualizing regular children
+- Feat: Support initialScrollIndex with viewOffset and viewPosition
+- Feat: Add estimatedListSize prop for better initial size estimation
+
 ## 1.0.20
 - Types: Fix type of ref in Reanimated LegendList
 

package/animated.d.mts

@@ -3,17 +3,25 @@ import * as _legendapp_list from '@legendapp/list';
 import * as react_native from 'react-native';
 import { Animated } from 'react-native';
 
-declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews"> & {
+declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews" | "children"> & {
     alignItemsAtEnd?: boolean;
     columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
     data: readonly T[];
     drawDistance?: number;
     estimatedItemSize?: number;
+    estimatedListSize?: {
+        height: number;
+        width: number;
+    };
     extraData?: any;
     getEstimatedItemSize?: ((index: number, item: T) => number) | undefined;
     initialContainerPoolRatio?: number | undefined;
     initialScrollOffset?: number;
-    initialScrollIndex?: number;
+    initialScrollIndex?: number | {
+        index: number;
+        viewOffset?: number | undefined;
+        viewPosition?: number | undefined;
+    };
     ItemSeparatorComponent?: React$1.ComponentType<{
         leadingItem: T;
     }> | undefined;

package/animated.d.ts

@@ -3,17 +3,25 @@ import * as _legendapp_list from '@legendapp/list';
 import * as react_native from 'react-native';
 import { Animated } from 'react-native';
 
-declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews"> & {
+declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews" | "children"> & {
     alignItemsAtEnd?: boolean;
     columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
     data: readonly T[];
     drawDistance?: number;
     estimatedItemSize?: number;
+    estimatedListSize?: {
+        height: number;
+        width: number;
+    };
     extraData?: any;
     getEstimatedItemSize?: ((index: number, item: T) => number) | undefined;
     initialContainerPoolRatio?: number | undefined;
     initialScrollOffset?: number;
-    initialScrollIndex?: number;
+    initialScrollIndex?: number | {
+        index: number;
+        viewOffset?: number | undefined;
+        viewPosition?: number | undefined;
+    };
     ItemSeparatorComponent?: React$1.ComponentType<{
         leadingItem: T;
     }> | undefined;

package/index.d.mts

@@ -3,6 +3,9 @@ import { ComponentProps, ReactNode, Dispatch, SetStateAction } from 'react';
 import * as react_native from 'react-native';
 import { ScrollView, StyleProp, ViewStyle, ScrollViewProps, NativeSyntheticEvent, NativeScrollEvent, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
 import Animated from 'react-native-reanimated';
+import * as _legendapp_list_reanimated from '@legendapp/list/reanimated';
+import * as _legendapp_list from '@legendapp/list';
+import { LegendListProps as LegendListProps$1, LegendListRenderItemProps as LegendListRenderItemProps$1, LegendListRef as LegendListRef$1 } from '@legendapp/list';
 
 declare class ScrollAdjustHandler {
     private ctx;
@@ -20,7 +23,7 @@ declare class ScrollAdjustHandler {
     unPauseAdjust(): boolean;
 }
 
-type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof ScrollView> | ComponentProps<typeof Animated.ScrollView>> = Omit<TScrollView, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews"> & {
+type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof ScrollView> | ComponentProps<typeof Animated.ScrollView>> = Omit<TScrollView, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews" | "children"> & {
     /**
      * If true, aligns items at the end of the list.
      * @default false
@@ -46,6 +49,14 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
      * @default undefined
      */
     estimatedItemSize?: number;
+    /**
+     * Estimated size of the ScrollView in pixels, a hint for the first render to improve performance
+     * @default undefined
+     */
+    estimatedListSize?: {
+        height: number;
+        width: number;
+    };
     /**
      * Extra data to trigger re-rendering when changed.
      */
@@ -69,7 +80,11 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
      * Index to scroll to initially.
      * @default 0
      */
-    initialScrollIndex?: number;
+    initialScrollIndex?: number | {
+        index: number;
+        viewOffset?: number | undefined;
+        viewPosition?: number | undefined;
+    };
     /**
      * Component to render between items, receiving the leading item as prop.
      */
@@ -478,18 +493,31 @@ type TypedMemo = <T extends React.ComponentType<any>>(Component: T, propsAreEqua
     displayName?: string;
 };
 declare const typedMemo: TypedMemo;
+type ScrollIndexWithOffsetPosition = {
+    index: number;
+    viewOffset?: number;
+    viewPosition?: number;
+};
 
-declare const LegendList: <T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews"> & {
+declare const LegendList: <T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews" | "children"> & {
     alignItemsAtEnd?: boolean;
     columnWrapperStyle?: ColumnWrapperStyle;
     data: readonly T[];
     drawDistance?: number;
     estimatedItemSize?: number;
+    estimatedListSize?: {
+        height: number;
+        width: number;
+    };
     extraData?: any;
     getEstimatedItemSize?: ((index: number, item: T) => number) | undefined;
     initialContainerPoolRatio?: number | undefined;
     initialScrollOffset?: number;
-    initialScrollIndex?: number;
+    initialScrollIndex?: number | {
+        index: number;
+        viewOffset?: number | undefined;
+        viewPosition?: number | undefined;
+    };
     ItemSeparatorComponent?: React$1.ComponentType<{
         leadingItem: T;
     }> | undefined;
@@ -535,6 +563,200 @@ declare const LegendList: <T>(props: Omit<Omit<react_native.ScrollViewProps, "sc
     }) => void;
 } & React$1.RefAttributes<LegendListRef>) => React$1.ReactNode;
 
+interface LazyLegendListProps<ItemT, ListT> extends Omit<LegendListProps$1<ItemT>, "data" | "keyExtractor" | "renderItem"> {
+    children?: React$1.ReactNode | undefined;
+    LegendList?: ListT;
+}
+declare const LazyLegendList: <ItemT, ListT extends (<T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews" | "children"> & {
+    alignItemsAtEnd?: boolean;
+    columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
+    data: readonly T[];
+    drawDistance?: number;
+    estimatedItemSize?: number;
+    estimatedListSize?: {
+        height: number;
+        width: number;
+    };
+    extraData?: any;
+    getEstimatedItemSize?: ((index: number, item: T) => number) | undefined;
+    initialContainerPoolRatio?: number | undefined;
+    initialScrollOffset?: number;
+    initialScrollIndex?: number | {
+        index: number;
+        viewOffset?: number | undefined;
+        viewPosition?: number | undefined;
+    };
+    ItemSeparatorComponent?: React$1.ComponentType<{
+        leadingItem: T;
+    }> | undefined;
+    keyExtractor?: ((item: T, index: number) => string) | undefined;
+    ListEmptyComponent?: React$1.ComponentType<any> | React$1.ReactElement | null | undefined;
+    ListFooterComponent?: React$1.ComponentType<any> | React$1.ReactElement | null | undefined;
+    ListFooterComponentStyle?: react_native.StyleProp<react_native.ViewStyle> | undefined;
+    ListHeaderComponent?: React$1.ComponentType<any> | React$1.ReactElement | null | undefined;
+    ListHeaderComponentStyle?: react_native.StyleProp<react_native.ViewStyle> | undefined;
+    maintainScrollAtEnd?: boolean;
+    maintainScrollAtEndThreshold?: number;
+    maintainVisibleContentPosition?: boolean;
+    numColumns?: number;
+    onEndReached?: ((info: {
+        distanceFromEnd: number;
+    }) => void) | null | undefined;
+    onEndReachedThreshold?: number | null | undefined;
+    onItemSizeChanged?: ((info: {
+        size: number;
+        previous: number;
+        index: number;
+        itemKey: string;
+        itemData: T;
+    }) => void) | undefined;
+    onRefresh?: () => void;
+    onStartReached?: ((info: {
+        distanceFromStart: number;
+    }) => void) | null | undefined;
+    onStartReachedThreshold?: number | null | undefined;
+    onViewableItemsChanged?: _legendapp_list.OnViewableItemsChanged | undefined;
+    progressViewOffset?: number;
+    recycleItems?: boolean;
+    refScrollView?: React$1.Ref<react_native.ScrollView>;
+    refreshing?: boolean;
+    renderItem?: React$1.ComponentType<LegendListRenderItemProps$1<T>> | ((props: LegendListRenderItemProps$1<T>) => React$1.ReactNode) | undefined;
+    renderScrollComponent?: (props: react_native.ScrollViewProps) => React$1.ReactElement<react_native.ScrollViewProps>;
+    suggestEstimatedItemSize?: boolean;
+    viewabilityConfig?: _legendapp_list.ViewabilityConfig;
+    viewabilityConfigCallbackPairs?: _legendapp_list.ViewabilityConfigCallbackPairs | undefined;
+    waitForInitialLayout?: boolean;
+    onLoad?: (info: {
+        elapsedTimeInMs: number;
+    }) => void;
+} & React$1.RefAttributes<LegendListRef$1>) => React$1.ReactNode) | react_native.Animated.AnimatedComponent<(<T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews" | "children"> & {
+    alignItemsAtEnd?: boolean;
+    columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
+    data: readonly T[];
+    drawDistance?: number;
+    estimatedItemSize?: number;
+    estimatedListSize?: {
+        height: number;
+        width: number;
+    };
+    extraData?: any;
+    getEstimatedItemSize?: ((index: number, item: T) => number) | undefined;
+    initialContainerPoolRatio?: number | undefined;
+    initialScrollOffset?: number;
+    initialScrollIndex?: number | {
+        index: number;
+        viewOffset?: number | undefined;
+        viewPosition?: number | undefined;
+    };
+    ItemSeparatorComponent?: React$1.ComponentType<{
+        leadingItem: T;
+    }> | undefined;
+    keyExtractor?: ((item: T, index: number) => string) | undefined;
+    ListEmptyComponent?: React$1.ComponentType<any> | React$1.ReactElement | null | undefined;
+    ListFooterComponent?: React$1.ComponentType<any> | React$1.ReactElement | null | undefined;
+    ListFooterComponentStyle?: react_native.StyleProp<react_native.ViewStyle> | undefined;
+    ListHeaderComponent?: React$1.ComponentType<any> | React$1.ReactElement | null | undefined;
+    ListHeaderComponentStyle?: react_native.StyleProp<react_native.ViewStyle> | undefined;
+    maintainScrollAtEnd?: boolean;
+    maintainScrollAtEndThreshold?: number;
+    maintainVisibleContentPosition?: boolean;
+    numColumns?: number;
+    onEndReached?: ((info: {
+        distanceFromEnd: number;
+    }) => void) | null | undefined;
+    onEndReachedThreshold?: number | null | undefined;
+    onItemSizeChanged?: ((info: {
+        size: number;
+        previous: number;
+        index: number;
+        itemKey: string;
+        itemData: T;
+    }) => void) | undefined;
+    onRefresh?: () => void;
+    onStartReached?: ((info: {
+        distanceFromStart: number;
+    }) => void) | null | undefined;
+    onStartReachedThreshold?: number | null | undefined;
+    onViewableItemsChanged?: _legendapp_list.OnViewableItemsChanged | undefined;
+    progressViewOffset?: number;
+    recycleItems?: boolean;
+    refScrollView?: React$1.Ref<react_native.ScrollView>;
+    refreshing?: boolean;
+    renderItem?: React$1.ComponentType<LegendListRenderItemProps$1<T>> | ((props: LegendListRenderItemProps$1<T>) => React$1.ReactNode) | undefined;
+    renderScrollComponent?: (props: react_native.ScrollViewProps) => React$1.ReactElement<react_native.ScrollViewProps>;
+    suggestEstimatedItemSize?: boolean;
+    viewabilityConfig?: _legendapp_list.ViewabilityConfig;
+    viewabilityConfigCallbackPairs?: _legendapp_list.ViewabilityConfigCallbackPairs | undefined;
+    waitForInitialLayout?: boolean;
+    onLoad?: (info: {
+        elapsedTimeInMs: number;
+    }) => void;
+} & React$1.RefAttributes<LegendListRef$1>) => React$1.ReactNode)> | (<ItemT_1>(props: _legendapp_list_reanimated.AnimatedLegendListProps<ItemT_1> & {
+    ref?: React$1.Ref<LegendListRef$1>;
+}) => React$1.ReactElement | null) = <T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews" | "children"> & {
+    alignItemsAtEnd?: boolean;
+    columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
+    data: readonly T[];
+    drawDistance?: number;
+    estimatedItemSize?: number;
+    estimatedListSize?: {
+        height: number;
+        width: number;
+    };
+    extraData?: any;
+    getEstimatedItemSize?: ((index: number, item: T) => number) | undefined;
+    initialContainerPoolRatio?: number | undefined;
+    initialScrollOffset?: number;
+    initialScrollIndex?: number | {
+        index: number;
+        viewOffset?: number | undefined;
+        viewPosition?: number | undefined;
+    };
+    ItemSeparatorComponent?: React$1.ComponentType<{
+        leadingItem: T;
+    }> | undefined;
+    keyExtractor?: ((item: T, index: number) => string) | undefined;
+    ListEmptyComponent?: React$1.ComponentType<any> | React$1.ReactElement | null | undefined;
+    ListFooterComponent?: React$1.ComponentType<any> | React$1.ReactElement | null | undefined;
+    ListFooterComponentStyle?: react_native.StyleProp<react_native.ViewStyle> | undefined;
+    ListHeaderComponent?: React$1.ComponentType<any> | React$1.ReactElement | null | undefined;
+    ListHeaderComponentStyle?: react_native.StyleProp<react_native.ViewStyle> | undefined;
+    maintainScrollAtEnd?: boolean;
+    maintainScrollAtEndThreshold?: number;
+    maintainVisibleContentPosition?: boolean;
+    numColumns?: number;
+    onEndReached?: ((info: {
+        distanceFromEnd: number;
+    }) => void) | null | undefined;
+    onEndReachedThreshold?: number | null | undefined;
+    onItemSizeChanged?: ((info: {
+        size: number;
+        previous: number;
+        index: number;
+        itemKey: string;
+        itemData: T;
+    }) => void) | undefined;
+    onRefresh?: () => void;
+    onStartReached?: ((info: {
+        distanceFromStart: number;
+    }) => void) | null | undefined;
+    onStartReachedThreshold?: number | null | undefined;
+    onViewableItemsChanged?: _legendapp_list.OnViewableItemsChanged | undefined;
+    progressViewOffset?: number;
+    recycleItems?: boolean;
+    refScrollView?: React$1.Ref<react_native.ScrollView>;
+    refreshing?: boolean;
+    renderItem?: React$1.ComponentType<LegendListRenderItemProps$1<T>> | ((props: LegendListRenderItemProps$1<T>) => React$1.ReactNode) | undefined;
+    renderScrollComponent?: (props: react_native.ScrollViewProps) => React$1.ReactElement<react_native.ScrollViewProps>;
+    suggestEstimatedItemSize?: boolean;
+    viewabilityConfig?: _legendapp_list.ViewabilityConfig;
+    viewabilityConfigCallbackPairs?: _legendapp_list.ViewabilityConfigCallbackPairs | undefined;
+    waitForInitialLayout?: boolean;
+    onLoad?: (info: {
+        elapsedTimeInMs: number;
+    }) => void;
+} & React$1.RefAttributes<LegendListRef$1>) => React$1.ReactNode>(props: LazyLegendListProps<ItemT, ListT> & React$1.RefAttributes<LegendListRef$1>) => React$1.ReactNode;
+
 declare function useViewability(callback: ViewabilityCallback, configId?: string): void;
 declare function useViewabilityAmount(callback: ViewabilityAmountCallback): void;
 declare function useRecyclingEffect(effect: (info: LegendListRecyclingState<unknown>) => void | (() => void)): void;
@@ -545,4 +767,4 @@ declare function useListScrollSize(): {
     height: number;
 };
 
-export { type AnchoredPosition, type ColumnWrapperStyle, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type ScrollState, type TypedForwardRef, type TypedMemo, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, typedMemo, useIsLastItem, useListScrollSize, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };
+export { type AnchoredPosition, type ColumnWrapperStyle, type InternalState, LazyLegendList, type LazyLegendListProps, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type ScrollIndexWithOffsetPosition, type ScrollState, type TypedForwardRef, type TypedMemo, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, typedMemo, useIsLastItem, useListScrollSize, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };

package/index.d.ts

@@ -3,6 +3,9 @@ import { ComponentProps, ReactNode, Dispatch, SetStateAction } from 'react';
 import * as react_native from 'react-native';
 import { ScrollView, StyleProp, ViewStyle, ScrollViewProps, NativeSyntheticEvent, NativeScrollEvent, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
 import Animated from 'react-native-reanimated';
+import * as _legendapp_list_reanimated from '@legendapp/list/reanimated';
+import * as _legendapp_list from '@legendapp/list';
+import { LegendListProps as LegendListProps$1, LegendListRenderItemProps as LegendListRenderItemProps$1, LegendListRef as LegendListRef$1 } from '@legendapp/list';
 
 declare class ScrollAdjustHandler {
     private ctx;
@@ -20,7 +23,7 @@ declare class ScrollAdjustHandler {
     unPauseAdjust(): boolean;
 }
 
-type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof ScrollView> | ComponentProps<typeof Animated.ScrollView>> = Omit<TScrollView, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews"> & {
+type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof ScrollView> | ComponentProps<typeof Animated.ScrollView>> = Omit<TScrollView, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews" | "children"> & {
     /**
      * If true, aligns items at the end of the list.
      * @default false
@@ -46,6 +49,14 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
      * @default undefined
      */
     estimatedItemSize?: number;
+    /**
+     * Estimated size of the ScrollView in pixels, a hint for the first render to improve performance
+     * @default undefined
+     */
+    estimatedListSize?: {
+        height: number;
+        width: number;
+    };
     /**
      * Extra data to trigger re-rendering when changed.
      */
@@ -69,7 +80,11 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
      * Index to scroll to initially.
      * @default 0
      */
-    initialScrollIndex?: number;
+    initialScrollIndex?: number | {
+        index: number;
+        viewOffset?: number | undefined;
+        viewPosition?: number | undefined;
+    };
     /**
      * Component to render between items, receiving the leading item as prop.
      */
@@ -478,18 +493,31 @@ type TypedMemo = <T extends React.ComponentType<any>>(Component: T, propsAreEqua
     displayName?: string;
 };
 declare const typedMemo: TypedMemo;
+type ScrollIndexWithOffsetPosition = {
+    index: number;
+    viewOffset?: number;
+    viewPosition?: number;
+};
 
-declare const LegendList: <T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews"> & {
+declare const LegendList: <T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews" | "children"> & {
     alignItemsAtEnd?: boolean;
     columnWrapperStyle?: ColumnWrapperStyle;
     data: readonly T[];
     drawDistance?: number;
     estimatedItemSize?: number;
+    estimatedListSize?: {
+        height: number;
+        width: number;
+    };
     extraData?: any;
     getEstimatedItemSize?: ((index: number, item: T) => number) | undefined;
     initialContainerPoolRatio?: number | undefined;
     initialScrollOffset?: number;
-    initialScrollIndex?: number;
+    initialScrollIndex?: number | {
+        index: number;
+        viewOffset?: number | undefined;
+        viewPosition?: number | undefined;
+    };
     ItemSeparatorComponent?: React$1.ComponentType<{
         leadingItem: T;
     }> | undefined;
@@ -535,6 +563,200 @@ declare const LegendList: <T>(props: Omit<Omit<react_native.ScrollViewProps, "sc
     }) => void;
 } & React$1.RefAttributes<LegendListRef>) => React$1.ReactNode;
 
+interface LazyLegendListProps<ItemT, ListT> extends Omit<LegendListProps$1<ItemT>, "data" | "keyExtractor" | "renderItem"> {
+    children?: React$1.ReactNode | undefined;
+    LegendList?: ListT;
+}
+declare const LazyLegendList: <ItemT, ListT extends (<T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews" | "children"> & {
+    alignItemsAtEnd?: boolean;
+    columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
+    data: readonly T[];
+    drawDistance?: number;
+    estimatedItemSize?: number;
+    estimatedListSize?: {
+        height: number;
+        width: number;
+    };
+    extraData?: any;
+    getEstimatedItemSize?: ((index: number, item: T) => number) | undefined;
+    initialContainerPoolRatio?: number | undefined;
+    initialScrollOffset?: number;
+    initialScrollIndex?: number | {
+        index: number;
+        viewOffset?: number | undefined;
+        viewPosition?: number | undefined;
+    };
+    ItemSeparatorComponent?: React$1.ComponentType<{
+        leadingItem: T;
+    }> | undefined;
+    keyExtractor?: ((item: T, index: number) => string) | undefined;
+    ListEmptyComponent?: React$1.ComponentType<any> | React$1.ReactElement | null | undefined;
+    ListFooterComponent?: React$1.ComponentType<any> | React$1.ReactElement | null | undefined;
+    ListFooterComponentStyle?: react_native.StyleProp<react_native.ViewStyle> | undefined;
+    ListHeaderComponent?: React$1.ComponentType<any> | React$1.ReactElement | null | undefined;
+    ListHeaderComponentStyle?: react_native.StyleProp<react_native.ViewStyle> | undefined;
+    maintainScrollAtEnd?: boolean;
+    maintainScrollAtEndThreshold?: number;
+    maintainVisibleContentPosition?: boolean;
+    numColumns?: number;
+    onEndReached?: ((info: {
+        distanceFromEnd: number;
+    }) => void) | null | undefined;
+    onEndReachedThreshold?: number | null | undefined;
+    onItemSizeChanged?: ((info: {
+        size: number;
+        previous: number;
+        index: number;
+        itemKey: string;
+        itemData: T;
+    }) => void) | undefined;
+    onRefresh?: () => void;
+    onStartReached?: ((info: {
+        distanceFromStart: number;
+    }) => void) | null | undefined;
+    onStartReachedThreshold?: number | null | undefined;
+    onViewableItemsChanged?: _legendapp_list.OnViewableItemsChanged | undefined;
+    progressViewOffset?: number;
+    recycleItems?: boolean;
+    refScrollView?: React$1.Ref<react_native.ScrollView>;
+    refreshing?: boolean;
+    renderItem?: React$1.ComponentType<LegendListRenderItemProps$1<T>> | ((props: LegendListRenderItemProps$1<T>) => React$1.ReactNode) | undefined;
+    renderScrollComponent?: (props: react_native.ScrollViewProps) => React$1.ReactElement<react_native.ScrollViewProps>;
+    suggestEstimatedItemSize?: boolean;
+    viewabilityConfig?: _legendapp_list.ViewabilityConfig;
+    viewabilityConfigCallbackPairs?: _legendapp_list.ViewabilityConfigCallbackPairs | undefined;
+    waitForInitialLayout?: boolean;
+    onLoad?: (info: {
+        elapsedTimeInMs: number;
+    }) => void;
+} & React$1.RefAttributes<LegendListRef$1>) => React$1.ReactNode) | react_native.Animated.AnimatedComponent<(<T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews" | "children"> & {
+    alignItemsAtEnd?: boolean;
+    columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
+    data: readonly T[];
+    drawDistance?: number;
+    estimatedItemSize?: number;
+    estimatedListSize?: {
+        height: number;
+        width: number;
+    };
+    extraData?: any;
+    getEstimatedItemSize?: ((index: number, item: T) => number) | undefined;
+    initialContainerPoolRatio?: number | undefined;
+    initialScrollOffset?: number;
+    initialScrollIndex?: number | {
+        index: number;
+        viewOffset?: number | undefined;
+        viewPosition?: number | undefined;
+    };
+    ItemSeparatorComponent?: React$1.ComponentType<{
+        leadingItem: T;
+    }> | undefined;
+    keyExtractor?: ((item: T, index: number) => string) | undefined;
+    ListEmptyComponent?: React$1.ComponentType<any> | React$1.ReactElement | null | undefined;
+    ListFooterComponent?: React$1.ComponentType<any> | React$1.ReactElement | null | undefined;
+    ListFooterComponentStyle?: react_native.StyleProp<react_native.ViewStyle> | undefined;
+    ListHeaderComponent?: React$1.ComponentType<any> | React$1.ReactElement | null | undefined;
+    ListHeaderComponentStyle?: react_native.StyleProp<react_native.ViewStyle> | undefined;
+    maintainScrollAtEnd?: boolean;
+    maintainScrollAtEndThreshold?: number;
+    maintainVisibleContentPosition?: boolean;
+    numColumns?: number;
+    onEndReached?: ((info: {
+        distanceFromEnd: number;
+    }) => void) | null | undefined;
+    onEndReachedThreshold?: number | null | undefined;
+    onItemSizeChanged?: ((info: {
+        size: number;
+        previous: number;
+        index: number;
+        itemKey: string;
+        itemData: T;
+    }) => void) | undefined;
+    onRefresh?: () => void;
+    onStartReached?: ((info: {
+        distanceFromStart: number;
+    }) => void) | null | undefined;
+    onStartReachedThreshold?: number | null | undefined;
+    onViewableItemsChanged?: _legendapp_list.OnViewableItemsChanged | undefined;
+    progressViewOffset?: number;
+    recycleItems?: boolean;
+    refScrollView?: React$1.Ref<react_native.ScrollView>;
+    refreshing?: boolean;
+    renderItem?: React$1.ComponentType<LegendListRenderItemProps$1<T>> | ((props: LegendListRenderItemProps$1<T>) => React$1.ReactNode) | undefined;
+    renderScrollComponent?: (props: react_native.ScrollViewProps) => React$1.ReactElement<react_native.ScrollViewProps>;
+    suggestEstimatedItemSize?: boolean;
+    viewabilityConfig?: _legendapp_list.ViewabilityConfig;
+    viewabilityConfigCallbackPairs?: _legendapp_list.ViewabilityConfigCallbackPairs | undefined;
+    waitForInitialLayout?: boolean;
+    onLoad?: (info: {
+        elapsedTimeInMs: number;
+    }) => void;
+} & React$1.RefAttributes<LegendListRef$1>) => React$1.ReactNode)> | (<ItemT_1>(props: _legendapp_list_reanimated.AnimatedLegendListProps<ItemT_1> & {
+    ref?: React$1.Ref<LegendListRef$1>;
+}) => React$1.ReactElement | null) = <T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews" | "children"> & {
+    alignItemsAtEnd?: boolean;
+    columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
+    data: readonly T[];
+    drawDistance?: number;
+    estimatedItemSize?: number;
+    estimatedListSize?: {
+        height: number;
+        width: number;
+    };
+    extraData?: any;
+    getEstimatedItemSize?: ((index: number, item: T) => number) | undefined;
+    initialContainerPoolRatio?: number | undefined;
+    initialScrollOffset?: number;
+    initialScrollIndex?: number | {
+        index: number;
+        viewOffset?: number | undefined;
+        viewPosition?: number | undefined;
+    };
+    ItemSeparatorComponent?: React$1.ComponentType<{
+        leadingItem: T;
+    }> | undefined;
+    keyExtractor?: ((item: T, index: number) => string) | undefined;
+    ListEmptyComponent?: React$1.ComponentType<any> | React$1.ReactElement | null | undefined;
+    ListFooterComponent?: React$1.ComponentType<any> | React$1.ReactElement | null | undefined;
+    ListFooterComponentStyle?: react_native.StyleProp<react_native.ViewStyle> | undefined;
+    ListHeaderComponent?: React$1.ComponentType<any> | React$1.ReactElement | null | undefined;
+    ListHeaderComponentStyle?: react_native.StyleProp<react_native.ViewStyle> | undefined;
+    maintainScrollAtEnd?: boolean;
+    maintainScrollAtEndThreshold?: number;
+    maintainVisibleContentPosition?: boolean;
+    numColumns?: number;
+    onEndReached?: ((info: {
+        distanceFromEnd: number;
+    }) => void) | null | undefined;
+    onEndReachedThreshold?: number | null | undefined;
+    onItemSizeChanged?: ((info: {
+        size: number;
+        previous: number;
+        index: number;
+        itemKey: string;
+        itemData: T;
+    }) => void) | undefined;
+    onRefresh?: () => void;
+    onStartReached?: ((info: {
+        distanceFromStart: number;
+    }) => void) | null | undefined;
+    onStartReachedThreshold?: number | null | undefined;
+    onViewableItemsChanged?: _legendapp_list.OnViewableItemsChanged | undefined;
+    progressViewOffset?: number;
+    recycleItems?: boolean;
+    refScrollView?: React$1.Ref<react_native.ScrollView>;
+    refreshing?: boolean;
+    renderItem?: React$1.ComponentType<LegendListRenderItemProps$1<T>> | ((props: LegendListRenderItemProps$1<T>) => React$1.ReactNode) | undefined;
+    renderScrollComponent?: (props: react_native.ScrollViewProps) => React$1.ReactElement<react_native.ScrollViewProps>;
+    suggestEstimatedItemSize?: boolean;
+    viewabilityConfig?: _legendapp_list.ViewabilityConfig;
+    viewabilityConfigCallbackPairs?: _legendapp_list.ViewabilityConfigCallbackPairs | undefined;
+    waitForInitialLayout?: boolean;
+    onLoad?: (info: {
+        elapsedTimeInMs: number;
+    }) => void;
+} & React$1.RefAttributes<LegendListRef$1>) => React$1.ReactNode>(props: LazyLegendListProps<ItemT, ListT> & React$1.RefAttributes<LegendListRef$1>) => React$1.ReactNode;
+
 declare function useViewability(callback: ViewabilityCallback, configId?: string): void;
 declare function useViewabilityAmount(callback: ViewabilityAmountCallback): void;
 declare function useRecyclingEffect(effect: (info: LegendListRecyclingState<unknown>) => void | (() => void)): void;
@@ -545,4 +767,4 @@ declare function useListScrollSize(): {
     height: number;
 };
 
-export { type AnchoredPosition, type ColumnWrapperStyle, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type ScrollState, type TypedForwardRef, type TypedMemo, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, typedMemo, useIsLastItem, useListScrollSize, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };
+export { type AnchoredPosition, type ColumnWrapperStyle, type InternalState, LazyLegendList, type LazyLegendListProps, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type ScrollIndexWithOffsetPosition, type ScrollState, type TypedForwardRef, type TypedMemo, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, typedMemo, useIsLastItem, useListScrollSize, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };

package/index.js

@@ -3,6 +3,7 @@
 var React2 = require('react');
 var reactNative = require('react-native');
 var shim = require('use-sync-external-store/shim');
+var list = require('@legendapp/list');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -193,6 +194,9 @@ function useInterval(callback, delay) {
 function isFunction(obj) {
   return typeof obj === "function";
 }
+function isArray(obj) {
+  return Array.isArray(obj);
+}
 var warned = /* @__PURE__ */ new Set();
 function warnDevOnce(id, text) {
   if (__DEV__ && !warned.has(id)) {
@@ -1005,7 +1009,7 @@ var LegendList = typedForwardRef(function LegendList2(props, forwardedRef) {
 var LegendListInner = typedForwardRef(function LegendListInner2(props, forwardedRef) {
   const {
     data: dataProp = [],
-    initialScrollIndex,
+    initialScrollIndex: initialScrollIndexProp,
     initialScrollOffset,
     horizontal,
     drawDistance = 250,
@@ -1021,7 +1025,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     numColumns: numColumnsProp = 1,
     columnWrapperStyle,
     keyExtractor: keyExtractorProp,
-    renderItem,
+    renderItem: renderItem2,
+    estimatedListSize,
     estimatedItemSize: estimatedItemSizeProp,
     getEstimatedItemSize,
     suggestEstimatedItemSize,
@@ -1044,6 +1049,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     onViewableItemsChanged,
     ...rest
   } = props;
+  const initialScroll = typeof initialScrollIndexProp === "number" ? { index: initialScrollIndexProp } : initialScrollIndexProp;
+  const initialScrollIndex = initialScroll == null ? void 0 : initialScroll.index;
   const refLoadStartTime = React2.useRef(Date.now());
   const callbacks = React2.useRef({
     onStartReached: rest.onStartReached,
@@ -1121,9 +1128,21 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
     return 0;
   };
+  const calculateOffsetWithOffsetPosition = (offsetParam, params) => {
+    const { index, viewOffset, viewPosition } = params;
+    let offset = offsetParam;
+    const state = refState.current;
+    if (viewOffset) {
+      offset -= viewOffset;
+    }
+    if (viewPosition !== void 0 && index !== void 0) {
+      offset -= viewPosition * (state.scrollLength - getItemSize(getId(index), index, state.data[index]));
+    }
+    return offset;
+  };
   const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : React2.useMemo(() => calculateOffsetForIndex(void 0), []);
   if (!refState.current) {
-    const initialScrollLength = reactNative.Dimensions.get("window")[horizontal ? "width" : "height"];
+    const initialScrollLength = (estimatedListSize != null ? estimatedListSize : reactNative.Dimensions.get("window"))[horizontal ? "width" : "height"];
     refState.current = {
       sizes: /* @__PURE__ */ new Map(),
       positions: /* @__PURE__ */ new Map(),
@@ -1247,12 +1266,12 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         props.onLoad({ elapsedTimeInMs: Date.now() - refLoadStartTime.current });
       }
     };
-    if (initialScrollIndex) {
+    if (initialScroll) {
       queueMicrotask(() => {
-        scrollToIndex({ index: initialScrollIndex, animated: false });
+        scrollToIndex({ ...initialScroll, animated: false });
         requestAnimationFrame(() => {
           if (!IsNewArchitecture) {
-            scrollToIndex({ index: initialScrollIndex, animated: false });
+            scrollToIndex({ ...initialScroll, animated: false });
           }
           setIt();
         });
@@ -1466,8 +1485,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     let scrollState = state.scroll;
     const scrollExtra = 0;
     const useAverageSize = !state.disableScrollJumpsFrom && speed >= 0 && peek$(ctx, "containersDidLayout");
-    if (!state.queuedInitialLayout && initialScrollIndex) {
-      const updatedOffset = calculateOffsetForIndex(initialScrollIndex);
+    if (!state.queuedInitialLayout && initialScroll) {
+      const updatedOffset = calculateOffsetWithOffsetPosition(
+        calculateOffsetForIndex(initialScroll.index),
+        initialScroll
+      );
       scrollState = updatedOffset;
     }
     const scrollAdjustPad = -previousScrollAdjust - topPad;
@@ -1759,17 +1781,12 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const scrollTo = (params = {}) => {
     var _a;
     const state = refState.current;
-    const { animated, index, viewPosition, viewOffset } = params;
-    let { offset } = params;
-    if (viewOffset) {
-      offset -= viewOffset;
-    }
-    if (viewPosition !== void 0 && index !== void 0) {
-      offset -= viewPosition * (state.scrollLength - getItemSize(getId(index), index, state.data[index]));
-    }
+    const { animated } = params;
+    const offset = calculateOffsetWithOffsetPosition(params.offset, params);
     state.scrollAdjustHandler.setDisableAdjust(true);
     state.scrollHistory.length = 0;
     state.scrollingTo = params;
+    state.scrollPending = offset;
     (_a = refScroller.current) == null ? void 0 : _a.scrollTo({
       x: horizontal ? offset : 0,
       y: horizontal ? 0 : offset,
@@ -2076,7 +2093,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     const paddingDiff = stylePaddingTopState - prevPaddingTop;
     if (paddingDiff && prevPaddingTop !== void 0 && reactNative.Platform.OS === "ios") {
       queueMicrotask(() => {
-        scrollTo({ offset: refState.current.scroll + paddingDiff, animated: false });
+        scrollTo({ offset: refState.current.scrollPending + paddingDiff, animated: false });
       });
     }
   };
@@ -2097,10 +2114,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     calcTotalSizesAndPositions({ forgetPositions: false });
   }
   React2.useEffect(() => {
-    if (initialScrollIndex && ListHeaderComponent) {
+    if (initialScroll && ListHeaderComponent) {
       const dispose = listen$(ctx, "headerSize", (size) => {
         if (size > 0) {
-          scrollToIndex({ index: initialScrollIndex, animated: false });
+          scrollToIndex({ ...initialScroll, animated: false });
           dispose == null ? void 0 : dispose();
         }
       });
@@ -2120,7 +2137,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   React2.useEffect(() => {
     set$(ctx, "extraData", extraData);
   }, [extraData]);
-  refState.current.renderItem = renderItem;
+  refState.current.renderItem = renderItem2;
   React2.useEffect(initalizeStateVars, [
     memoizedLastItemKeys.join(","),
     numColumnsProp,
@@ -2161,7 +2178,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       }
       set$(ctx, "numContainers", numContainers);
       set$(ctx, "numContainersPooled", numContainers * initialContainerPoolRatio);
-      if (initialScrollIndex) {
+      if (initialScroll) {
         requestAnimationFrame(() => {
           calculateItemsInView(
             /*isReset*/
@@ -2569,7 +2586,20 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
   ), __DEV__ && ENABLE_DEBUG_VIEW && /* @__PURE__ */ React2__namespace.createElement(DebugView, { state: refState.current }));
 });
+var typedForwardRef2 = React2.forwardRef;
+var renderItem = ({ item }) => item;
+var LazyLegendList = typedForwardRef2(function LazyLegendList2(props, forwardedRef) {
+  const { LegendList: LegendListProp, children, ...rest } = props;
+  const LegendListComponent = LegendListProp != null ? LegendListProp : list.LegendList;
+  const data = (isArray(children) ? children : React2__namespace.Children.toArray(children)).flat(1);
+  console.log({ data });
+  return (
+    // @ts-expect-error TODO: Fix this type
+    /* @__PURE__ */ React2__namespace.createElement(LegendListComponent, { ...rest, data, renderItem, ref: forwardedRef })
+  );
+});
 
+exports.LazyLegendList = LazyLegendList;
 exports.LegendList = LegendList;
 exports.useIsLastItem = useIsLastItem;
 exports.useListScrollSize = useListScrollSize;

package/index.mjs

@@ -2,6 +2,7 @@ import * as React2 from 'react';
 import React2__default, { useReducer, useEffect, createContext, useMemo, useRef, useCallback, useLayoutEffect, useImperativeHandle, useContext, useState, forwardRef, memo } from 'react';
 import { View, Text, Platform, Animated, ScrollView, StyleSheet, Dimensions, RefreshControl } from 'react-native';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
+import { LegendList as LegendList$1 } from '@legendapp/list';
 
 // src/LegendList.tsx
 var ContextState = React2.createContext(null);
@@ -172,6 +173,9 @@ function useInterval(callback, delay) {
 function isFunction(obj) {
   return typeof obj === "function";
 }
+function isArray(obj) {
+  return Array.isArray(obj);
+}
 var warned = /* @__PURE__ */ new Set();
 function warnDevOnce(id, text) {
   if (__DEV__ && !warned.has(id)) {
@@ -984,7 +988,7 @@ var LegendList = typedForwardRef(function LegendList2(props, forwardedRef) {
 var LegendListInner = typedForwardRef(function LegendListInner2(props, forwardedRef) {
   const {
     data: dataProp = [],
-    initialScrollIndex,
+    initialScrollIndex: initialScrollIndexProp,
     initialScrollOffset,
     horizontal,
     drawDistance = 250,
@@ -1000,7 +1004,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     numColumns: numColumnsProp = 1,
     columnWrapperStyle,
     keyExtractor: keyExtractorProp,
-    renderItem,
+    renderItem: renderItem2,
+    estimatedListSize,
     estimatedItemSize: estimatedItemSizeProp,
     getEstimatedItemSize,
     suggestEstimatedItemSize,
@@ -1023,6 +1028,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     onViewableItemsChanged,
     ...rest
   } = props;
+  const initialScroll = typeof initialScrollIndexProp === "number" ? { index: initialScrollIndexProp } : initialScrollIndexProp;
+  const initialScrollIndex = initialScroll == null ? void 0 : initialScroll.index;
   const refLoadStartTime = useRef(Date.now());
   const callbacks = useRef({
     onStartReached: rest.onStartReached,
@@ -1100,9 +1107,21 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
     return 0;
   };
+  const calculateOffsetWithOffsetPosition = (offsetParam, params) => {
+    const { index, viewOffset, viewPosition } = params;
+    let offset = offsetParam;
+    const state = refState.current;
+    if (viewOffset) {
+      offset -= viewOffset;
+    }
+    if (viewPosition !== void 0 && index !== void 0) {
+      offset -= viewPosition * (state.scrollLength - getItemSize(getId(index), index, state.data[index]));
+    }
+    return offset;
+  };
   const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : useMemo(() => calculateOffsetForIndex(void 0), []);
   if (!refState.current) {
-    const initialScrollLength = Dimensions.get("window")[horizontal ? "width" : "height"];
+    const initialScrollLength = (estimatedListSize != null ? estimatedListSize : Dimensions.get("window"))[horizontal ? "width" : "height"];
     refState.current = {
       sizes: /* @__PURE__ */ new Map(),
       positions: /* @__PURE__ */ new Map(),
@@ -1226,12 +1245,12 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         props.onLoad({ elapsedTimeInMs: Date.now() - refLoadStartTime.current });
       }
     };
-    if (initialScrollIndex) {
+    if (initialScroll) {
       queueMicrotask(() => {
-        scrollToIndex({ index: initialScrollIndex, animated: false });
+        scrollToIndex({ ...initialScroll, animated: false });
         requestAnimationFrame(() => {
           if (!IsNewArchitecture) {
-            scrollToIndex({ index: initialScrollIndex, animated: false });
+            scrollToIndex({ ...initialScroll, animated: false });
           }
           setIt();
         });
@@ -1445,8 +1464,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     let scrollState = state.scroll;
     const scrollExtra = 0;
     const useAverageSize = !state.disableScrollJumpsFrom && speed >= 0 && peek$(ctx, "containersDidLayout");
-    if (!state.queuedInitialLayout && initialScrollIndex) {
-      const updatedOffset = calculateOffsetForIndex(initialScrollIndex);
+    if (!state.queuedInitialLayout && initialScroll) {
+      const updatedOffset = calculateOffsetWithOffsetPosition(
+        calculateOffsetForIndex(initialScroll.index),
+        initialScroll
+      );
       scrollState = updatedOffset;
     }
     const scrollAdjustPad = -previousScrollAdjust - topPad;
@@ -1738,17 +1760,12 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const scrollTo = (params = {}) => {
     var _a;
     const state = refState.current;
-    const { animated, index, viewPosition, viewOffset } = params;
-    let { offset } = params;
-    if (viewOffset) {
-      offset -= viewOffset;
-    }
-    if (viewPosition !== void 0 && index !== void 0) {
-      offset -= viewPosition * (state.scrollLength - getItemSize(getId(index), index, state.data[index]));
-    }
+    const { animated } = params;
+    const offset = calculateOffsetWithOffsetPosition(params.offset, params);
     state.scrollAdjustHandler.setDisableAdjust(true);
     state.scrollHistory.length = 0;
     state.scrollingTo = params;
+    state.scrollPending = offset;
     (_a = refScroller.current) == null ? void 0 : _a.scrollTo({
       x: horizontal ? offset : 0,
       y: horizontal ? 0 : offset,
@@ -2055,7 +2072,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     const paddingDiff = stylePaddingTopState - prevPaddingTop;
     if (paddingDiff && prevPaddingTop !== void 0 && Platform.OS === "ios") {
       queueMicrotask(() => {
-        scrollTo({ offset: refState.current.scroll + paddingDiff, animated: false });
+        scrollTo({ offset: refState.current.scrollPending + paddingDiff, animated: false });
       });
     }
   };
@@ -2076,10 +2093,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     calcTotalSizesAndPositions({ forgetPositions: false });
   }
   useEffect(() => {
-    if (initialScrollIndex && ListHeaderComponent) {
+    if (initialScroll && ListHeaderComponent) {
       const dispose = listen$(ctx, "headerSize", (size) => {
         if (size > 0) {
-          scrollToIndex({ index: initialScrollIndex, animated: false });
+          scrollToIndex({ ...initialScroll, animated: false });
           dispose == null ? void 0 : dispose();
         }
       });
@@ -2099,7 +2116,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   useEffect(() => {
     set$(ctx, "extraData", extraData);
   }, [extraData]);
-  refState.current.renderItem = renderItem;
+  refState.current.renderItem = renderItem2;
   useEffect(initalizeStateVars, [
     memoizedLastItemKeys.join(","),
     numColumnsProp,
@@ -2140,7 +2157,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       }
       set$(ctx, "numContainers", numContainers);
       set$(ctx, "numContainersPooled", numContainers * initialContainerPoolRatio);
-      if (initialScrollIndex) {
+      if (initialScroll) {
         requestAnimationFrame(() => {
           calculateItemsInView(
             /*isReset*/
@@ -2548,5 +2565,17 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
   ), __DEV__ && ENABLE_DEBUG_VIEW && /* @__PURE__ */ React2.createElement(DebugView, { state: refState.current }));
 });
+var typedForwardRef2 = forwardRef;
+var renderItem = ({ item }) => item;
+var LazyLegendList = typedForwardRef2(function LazyLegendList2(props, forwardedRef) {
+  const { LegendList: LegendListProp, children, ...rest } = props;
+  const LegendListComponent = LegendListProp != null ? LegendListProp : LegendList$1;
+  const data = (isArray(children) ? children : React2.Children.toArray(children)).flat(1);
+  console.log({ data });
+  return (
+    // @ts-expect-error TODO: Fix this type
+    /* @__PURE__ */ React2.createElement(LegendListComponent, { ...rest, data, renderItem, ref: forwardedRef })
+  );
+});
 
-export { LegendList, useIsLastItem, useListScrollSize, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };
+export { LazyLegendList, LegendList, useIsLastItem, useListScrollSize, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };

package/keyboard-controller.d.mts

@@ -4,17 +4,25 @@ import { LegendListRef } from '@legendapp/list';
 import * as react_native from 'react-native';
 import * as React from 'react';
 
-declare const LegendList: <ItemT, ListT extends (<T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews"> & {
+declare const LegendList: <ItemT, ListT extends (<T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews" | "children"> & {
     alignItemsAtEnd?: boolean;
     columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
     data: readonly T[];
     drawDistance?: number;
     estimatedItemSize?: number;
+    estimatedListSize?: {
+        height: number;
+        width: number;
+    };
     extraData?: any;
     getEstimatedItemSize?: ((index: number, item: T) => number) | undefined;
     initialContainerPoolRatio?: number | undefined;
     initialScrollOffset?: number;
-    initialScrollIndex?: number;
+    initialScrollIndex?: number | {
+        index: number;
+        viewOffset?: number | undefined;
+        viewPosition?: number | undefined;
+    };
     ItemSeparatorComponent?: React.ComponentType<{
         leadingItem: T;
     }> | undefined;
@@ -58,17 +66,25 @@ declare const LegendList: <ItemT, ListT extends (<T>(props: Omit<Omit<react_nati
     onLoad?: (info: {
         elapsedTimeInMs: number;
     }) => void;
-} & React.RefAttributes<LegendListRef>) => React.ReactNode) | react_native.Animated.AnimatedComponent<(<T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews"> & {
+} & React.RefAttributes<LegendListRef>) => React.ReactNode) | react_native.Animated.AnimatedComponent<(<T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews" | "children"> & {
     alignItemsAtEnd?: boolean;
     columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
     data: readonly T[];
     drawDistance?: number;
     estimatedItemSize?: number;
+    estimatedListSize?: {
+        height: number;
+        width: number;
+    };
     extraData?: any;
     getEstimatedItemSize?: ((index: number, item: T) => number) | undefined;
     initialContainerPoolRatio?: number | undefined;
     initialScrollOffset?: number;
-    initialScrollIndex?: number;
+    initialScrollIndex?: number | {
+        index: number;
+        viewOffset?: number | undefined;
+        viewPosition?: number | undefined;
+    };
     ItemSeparatorComponent?: React.ComponentType<{
         leadingItem: T;
     }> | undefined;
@@ -114,17 +130,25 @@ declare const LegendList: <ItemT, ListT extends (<T>(props: Omit<Omit<react_nati
     }) => void;
 } & React.RefAttributes<LegendListRef>) => React.ReactNode)> | (<ItemT_1>(props: _legendapp_list_reanimated.AnimatedLegendListProps<ItemT_1> & {
     ref?: React.Ref<LegendListRef>;
-}) => React.ReactElement | null) = <T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews"> & {
+}) => React.ReactElement | null) = <T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews" | "children"> & {
     alignItemsAtEnd?: boolean;
     columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
     data: readonly T[];
     drawDistance?: number;
     estimatedItemSize?: number;
+    estimatedListSize?: {
+        height: number;
+        width: number;
+    };
     extraData?: any;
     getEstimatedItemSize?: ((index: number, item: T) => number) | undefined;
     initialContainerPoolRatio?: number | undefined;
     initialScrollOffset?: number;
-    initialScrollIndex?: number;
+    initialScrollIndex?: number | {
+        index: number;
+        viewOffset?: number | undefined;
+        viewPosition?: number | undefined;
+    };
     ItemSeparatorComponent?: React.ComponentType<{
         leadingItem: T;
     }> | undefined;
@@ -168,17 +192,25 @@ declare const LegendList: <ItemT, ListT extends (<T>(props: Omit<Omit<react_nati
     onLoad?: (info: {
         elapsedTimeInMs: number;
     }) => void;
-} & React.RefAttributes<LegendListRef>) => React.ReactNode>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews"> & {
+} & React.RefAttributes<LegendListRef>) => React.ReactNode>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews" | "children"> & {
     alignItemsAtEnd?: boolean;
     columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
     data: readonly ItemT[];
     drawDistance?: number;
     estimatedItemSize?: number;
+    estimatedListSize?: {
+        height: number;
+        width: number;
+    };
     extraData?: any;
     getEstimatedItemSize?: ((index: number, item: ItemT) => number) | undefined;
     initialContainerPoolRatio?: number | undefined;
     initialScrollOffset?: number;
-    initialScrollIndex?: number;
+    initialScrollIndex?: number | {
+        index: number;
+        viewOffset?: number | undefined;
+        viewPosition?: number | undefined;
+    };
     ItemSeparatorComponent?: React.ComponentType<{
         leadingItem: ItemT;
     }> | undefined;

package/keyboard-controller.d.ts

@@ -4,17 +4,25 @@ import { LegendListRef } from '@legendapp/list';
 import * as react_native from 'react-native';
 import * as React from 'react';
 
-declare const LegendList: <ItemT, ListT extends (<T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews"> & {
+declare const LegendList: <ItemT, ListT extends (<T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews" | "children"> & {
     alignItemsAtEnd?: boolean;
     columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
     data: readonly T[];
     drawDistance?: number;
     estimatedItemSize?: number;
+    estimatedListSize?: {
+        height: number;
+        width: number;
+    };
     extraData?: any;
     getEstimatedItemSize?: ((index: number, item: T) => number) | undefined;
     initialContainerPoolRatio?: number | undefined;
     initialScrollOffset?: number;
-    initialScrollIndex?: number;
+    initialScrollIndex?: number | {
+        index: number;
+        viewOffset?: number | undefined;
+        viewPosition?: number | undefined;
+    };
     ItemSeparatorComponent?: React.ComponentType<{
         leadingItem: T;
     }> | undefined;
@@ -58,17 +66,25 @@ declare const LegendList: <ItemT, ListT extends (<T>(props: Omit<Omit<react_nati
     onLoad?: (info: {
         elapsedTimeInMs: number;
     }) => void;
-} & React.RefAttributes<LegendListRef>) => React.ReactNode) | react_native.Animated.AnimatedComponent<(<T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews"> & {
+} & React.RefAttributes<LegendListRef>) => React.ReactNode) | react_native.Animated.AnimatedComponent<(<T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews" | "children"> & {
     alignItemsAtEnd?: boolean;
     columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
     data: readonly T[];
     drawDistance?: number;
     estimatedItemSize?: number;
+    estimatedListSize?: {
+        height: number;
+        width: number;
+    };
     extraData?: any;
     getEstimatedItemSize?: ((index: number, item: T) => number) | undefined;
     initialContainerPoolRatio?: number | undefined;
     initialScrollOffset?: number;
-    initialScrollIndex?: number;
+    initialScrollIndex?: number | {
+        index: number;
+        viewOffset?: number | undefined;
+        viewPosition?: number | undefined;
+    };
     ItemSeparatorComponent?: React.ComponentType<{
         leadingItem: T;
     }> | undefined;
@@ -114,17 +130,25 @@ declare const LegendList: <ItemT, ListT extends (<T>(props: Omit<Omit<react_nati
     }) => void;
 } & React.RefAttributes<LegendListRef>) => React.ReactNode)> | (<ItemT_1>(props: _legendapp_list_reanimated.AnimatedLegendListProps<ItemT_1> & {
     ref?: React.Ref<LegendListRef>;
-}) => React.ReactElement | null) = <T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews"> & {
+}) => React.ReactElement | null) = <T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews" | "children"> & {
     alignItemsAtEnd?: boolean;
     columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
     data: readonly T[];
     drawDistance?: number;
     estimatedItemSize?: number;
+    estimatedListSize?: {
+        height: number;
+        width: number;
+    };
     extraData?: any;
     getEstimatedItemSize?: ((index: number, item: T) => number) | undefined;
     initialContainerPoolRatio?: number | undefined;
     initialScrollOffset?: number;
-    initialScrollIndex?: number;
+    initialScrollIndex?: number | {
+        index: number;
+        viewOffset?: number | undefined;
+        viewPosition?: number | undefined;
+    };
     ItemSeparatorComponent?: React.ComponentType<{
         leadingItem: T;
     }> | undefined;
@@ -168,17 +192,25 @@ declare const LegendList: <ItemT, ListT extends (<T>(props: Omit<Omit<react_nati
     onLoad?: (info: {
         elapsedTimeInMs: number;
     }) => void;
-} & React.RefAttributes<LegendListRef>) => React.ReactNode>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews"> & {
+} & React.RefAttributes<LegendListRef>) => React.ReactNode>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews" | "children"> & {
     alignItemsAtEnd?: boolean;
     columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
     data: readonly ItemT[];
     drawDistance?: number;
     estimatedItemSize?: number;
+    estimatedListSize?: {
+        height: number;
+        width: number;
+    };
     extraData?: any;
     getEstimatedItemSize?: ((index: number, item: ItemT) => number) | undefined;
     initialContainerPoolRatio?: number | undefined;
     initialScrollOffset?: number;
-    initialScrollIndex?: number;
+    initialScrollIndex?: number | {
+        index: number;
+        viewOffset?: number | undefined;
+        viewPosition?: number | undefined;
+    };
     ItemSeparatorComponent?: React.ComponentType<{
         leadingItem: ItemT;
     }> | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "1.0.20",
+  "version": "1.1.1",
   "description": "Legend List is a drop-in replacement for FlatList with much better performance and supporting dynamically sized items.",
   "sideEffects": false,
   "private": false,