@legendapp/list 1.0.15 → 1.0.17

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+## 1.0.17
+- Fix: initialScrollIndex not taking header component size into account
+- Fix: PaddingAndAdjust for ListHeaderComponent
+- Fix: ignore alignItemsAtEnd when the list is empty
+
+## 1.0.16
+- Fix: isAtEnd was going to false when overscrolling
+- Fix: refreshControl not being top padded correctly
+- Fix: type of useLastItem hook
+- Fix: header component was not displaying if a list had no data
+- Fix: scrollToIndex logic that fixes scroll after items layout was not using viewPosition/viewOffset
+- Fix: Improve scrollToIndex accuracy
+- Fix: Improve scrollToEnd accuracy
+
+## 1.0.15
+- Feat: Add a useIsLastItem hook
+- Feat: Support horizontal lists without an intrinsic height, it takes the maximum height of list items
+- Feat: Add onLoad prop
+- Fix: maintainVisibleContentPosition not working on horizontal lists
+- Perf: scrollForNextCalculateItemsInView was not taking drawDistance into account correctly
+- Perf: Improved the algorithm for allocating containers to items
+- Perf: Use useLayoutEffect in LegendList if available to get the outer ScrollView layout as soon as possible
+
+## 1.0.14
+- Fix: A container changing size while inactive but not yet recycled could potentially overlap with elements onscreen if large enough
+
 ## 1.0.13
 - Fix: Missing React import in ListHeaderComponentContainer crashing some environments
 - Fix: `initialScrollIndex` was off by padding if using "padding" or "paddingVertical" props

package/animated.d.mts

@@ -3,7 +3,7 @@ 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">, "maintainVisibleContentPosition" | "removeClippedSubviews" | "stickyHeaderIndices" | "contentInset" | "contentOffset"> & {
+declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews"> & {
     alignItemsAtEnd?: boolean;
     columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
     data: readonly T[];
@@ -48,7 +48,7 @@ declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<Om
     recycleItems?: boolean;
     refScrollView?: React.Ref<react_native.ScrollView>;
     refreshing?: boolean;
-    renderItem?: ((props: _legendapp_list.LegendListRenderItemProps<T>) => React$1.ReactNode) | undefined;
+    renderItem?: React$1.ComponentType<_legendapp_list.LegendListRenderItemProps<T>> | ((props: _legendapp_list.LegendListRenderItemProps<T>) => React$1.ReactNode) | undefined;
     renderScrollComponent?: (props: react_native.ScrollViewProps) => React.ReactElement<react_native.ScrollViewProps>;
     suggestEstimatedItemSize?: boolean;
     viewabilityConfig?: _legendapp_list.ViewabilityConfig;

package/animated.d.ts

@@ -3,7 +3,7 @@ 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">, "maintainVisibleContentPosition" | "removeClippedSubviews" | "stickyHeaderIndices" | "contentInset" | "contentOffset"> & {
+declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews"> & {
     alignItemsAtEnd?: boolean;
     columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
     data: readonly T[];
@@ -48,7 +48,7 @@ declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<Om
     recycleItems?: boolean;
     refScrollView?: React.Ref<react_native.ScrollView>;
     refreshing?: boolean;
-    renderItem?: ((props: _legendapp_list.LegendListRenderItemProps<T>) => React$1.ReactNode) | undefined;
+    renderItem?: React$1.ComponentType<_legendapp_list.LegendListRenderItemProps<T>> | ((props: _legendapp_list.LegendListRenderItemProps<T>) => React$1.ReactNode) | undefined;
     renderScrollComponent?: (props: react_native.ScrollViewProps) => React.ReactElement<react_native.ScrollViewProps>;
     suggestEstimatedItemSize?: boolean;
     viewabilityConfig?: _legendapp_list.ViewabilityConfig;

package/index.d.mts

@@ -180,10 +180,13 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
      */
     refreshing?: boolean;
     /**
-     * Function to render each item in the list.
+     * Function or React component to render each item in the list.
+     * Can be either:
+     * - A function: (props: LegendListRenderItemProps<ItemT>) => ReactNode
+     * - A React component: React.ComponentType<LegendListRenderItemProps<ItemT>>
      * @required
      */
-    renderItem?: (props: LegendListRenderItemProps<ItemT>) => ReactNode;
+    renderItem?: ((props: LegendListRenderItemProps<ItemT>) => ReactNode) | React.ComponentType<LegendListRenderItemProps<ItemT>>;
     /**
      * Render custom ScrollView component.
      * @default (props) => <ScrollView {...props} />
@@ -237,8 +240,8 @@ interface InternalState {
     pendingAdjust: number;
     isStartReached: boolean;
     isEndReached: boolean;
-    isAtBottom: boolean;
-    isAtTop: boolean;
+    isAtEnd: boolean;
+    isAtStart: boolean;
     data: readonly any[];
     hasScrolled?: boolean;
     scrollLength: number;
@@ -262,7 +265,7 @@ interface InternalState {
     nativeMarginTop: number;
     indexByKey: Map<string, number>;
     viewabilityConfigCallbackPairs: ViewabilityConfigCallbackPairs | undefined;
-    renderItem: (props: LegendListRenderItemProps<any>) => ReactNode;
+    renderItem: ((props: LegendListRenderItemProps<any>) => ReactNode) | React.ComponentType<LegendListRenderItemProps<any>>;
     scrollHistory: Array<{
         scroll: number;
         time: number;
@@ -281,7 +284,13 @@ interface InternalState {
     lastBatchingAction: number;
     ignoreScrollFromCalcTotal?: boolean;
     disableScrollJumpsFrom?: number;
-    scrollingToOffset?: number | undefined;
+    scrollingTo?: {
+        offset: number;
+        index?: number;
+        viewOffset?: number;
+        viewPosition?: number;
+        animated?: boolean;
+    } | undefined;
     previousTotalSize?: number;
     needsOtherAxisSize?: boolean;
     averageSizes: Record<string, {
@@ -468,7 +477,7 @@ type TypedMemo = <T extends React.ComponentType<any>>(Component: T, propsAreEqua
 };
 declare const typedMemo: TypedMemo;
 
-declare const LegendList: <T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "maintainVisibleContentPosition" | "removeClippedSubviews" | "stickyHeaderIndices" | "contentInset" | "contentOffset"> & {
+declare const LegendList: <T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews"> & {
     alignItemsAtEnd?: boolean;
     columnWrapperStyle?: ColumnWrapperStyle;
     data: readonly T[];
@@ -513,7 +522,7 @@ declare const LegendList: <T>(props: Omit<Omit<react_native.ScrollViewProps, "sc
     recycleItems?: boolean;
     refScrollView?: React$1.Ref<ScrollView>;
     refreshing?: boolean;
-    renderItem?: ((props: LegendListRenderItemProps<T>) => React$1.ReactNode) | undefined;
+    renderItem?: React$1.ComponentType<LegendListRenderItemProps<T>> | ((props: LegendListRenderItemProps<T>) => React$1.ReactNode) | undefined;
     renderScrollComponent?: (props: react_native.ScrollViewProps) => React$1.ReactElement<react_native.ScrollViewProps>;
     suggestEstimatedItemSize?: boolean;
     viewabilityConfig?: ViewabilityConfig;
@@ -528,6 +537,6 @@ declare function useViewability(callback: ViewabilityCallback, configId?: string
 declare function useViewabilityAmount(callback: ViewabilityAmountCallback): void;
 declare function useRecyclingEffect(effect: (info: LegendListRecyclingState<unknown>) => void | (() => void)): void;
 declare function useRecyclingState<ItemT>(valueOrFun: ((info: LegendListRecyclingState<ItemT>) => ItemT) | ItemT): readonly [ItemT | null, Dispatch<SetStateAction<ItemT>>];
-declare function useIsLastItem(): any;
+declare function useIsLastItem(): boolean;
 
 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, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };

package/index.d.ts

@@ -180,10 +180,13 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
      */
     refreshing?: boolean;
     /**
-     * Function to render each item in the list.
+     * Function or React component to render each item in the list.
+     * Can be either:
+     * - A function: (props: LegendListRenderItemProps<ItemT>) => ReactNode
+     * - A React component: React.ComponentType<LegendListRenderItemProps<ItemT>>
      * @required
      */
-    renderItem?: (props: LegendListRenderItemProps<ItemT>) => ReactNode;
+    renderItem?: ((props: LegendListRenderItemProps<ItemT>) => ReactNode) | React.ComponentType<LegendListRenderItemProps<ItemT>>;
     /**
      * Render custom ScrollView component.
      * @default (props) => <ScrollView {...props} />
@@ -237,8 +240,8 @@ interface InternalState {
     pendingAdjust: number;
     isStartReached: boolean;
     isEndReached: boolean;
-    isAtBottom: boolean;
-    isAtTop: boolean;
+    isAtEnd: boolean;
+    isAtStart: boolean;
     data: readonly any[];
     hasScrolled?: boolean;
     scrollLength: number;
@@ -262,7 +265,7 @@ interface InternalState {
     nativeMarginTop: number;
     indexByKey: Map<string, number>;
     viewabilityConfigCallbackPairs: ViewabilityConfigCallbackPairs | undefined;
-    renderItem: (props: LegendListRenderItemProps<any>) => ReactNode;
+    renderItem: ((props: LegendListRenderItemProps<any>) => ReactNode) | React.ComponentType<LegendListRenderItemProps<any>>;
     scrollHistory: Array<{
         scroll: number;
         time: number;
@@ -281,7 +284,13 @@ interface InternalState {
     lastBatchingAction: number;
     ignoreScrollFromCalcTotal?: boolean;
     disableScrollJumpsFrom?: number;
-    scrollingToOffset?: number | undefined;
+    scrollingTo?: {
+        offset: number;
+        index?: number;
+        viewOffset?: number;
+        viewPosition?: number;
+        animated?: boolean;
+    } | undefined;
     previousTotalSize?: number;
     needsOtherAxisSize?: boolean;
     averageSizes: Record<string, {
@@ -468,7 +477,7 @@ type TypedMemo = <T extends React.ComponentType<any>>(Component: T, propsAreEqua
 };
 declare const typedMemo: TypedMemo;
 
-declare const LegendList: <T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "maintainVisibleContentPosition" | "removeClippedSubviews" | "stickyHeaderIndices" | "contentInset" | "contentOffset"> & {
+declare const LegendList: <T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews"> & {
     alignItemsAtEnd?: boolean;
     columnWrapperStyle?: ColumnWrapperStyle;
     data: readonly T[];
@@ -513,7 +522,7 @@ declare const LegendList: <T>(props: Omit<Omit<react_native.ScrollViewProps, "sc
     recycleItems?: boolean;
     refScrollView?: React$1.Ref<ScrollView>;
     refreshing?: boolean;
-    renderItem?: ((props: LegendListRenderItemProps<T>) => React$1.ReactNode) | undefined;
+    renderItem?: React$1.ComponentType<LegendListRenderItemProps<T>> | ((props: LegendListRenderItemProps<T>) => React$1.ReactNode) | undefined;
     renderScrollComponent?: (props: react_native.ScrollViewProps) => React$1.ReactElement<react_native.ScrollViewProps>;
     suggestEstimatedItemSize?: boolean;
     viewabilityConfig?: ViewabilityConfig;
@@ -528,6 +537,6 @@ declare function useViewability(callback: ViewabilityCallback, configId?: string
 declare function useViewabilityAmount(callback: ViewabilityAmountCallback): void;
 declare function useRecyclingEffect(effect: (info: LegendListRecyclingState<unknown>) => void | (() => void)): void;
 declare function useRecyclingState<ItemT>(valueOrFun: ((info: LegendListRecyclingState<ItemT>) => ItemT) | ItemT): readonly [ItemT | null, Dispatch<SetStateAction<ItemT>>];
-declare function useIsLastItem(): any;
+declare function useIsLastItem(): boolean;
 
 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, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };

package/index.js

@@ -173,7 +173,7 @@ var DebugView = React2__namespace.memo(function DebugView2({ state }) {
     },
     /* @__PURE__ */ React2__namespace.createElement(DebugRow, null, /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, "TotalSize:"), /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, totalSize.toFixed(2))),
     /* @__PURE__ */ React2__namespace.createElement(DebugRow, null, /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, "ContentSize:"), /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, contentSize.toFixed(2))),
-    /* @__PURE__ */ React2__namespace.createElement(DebugRow, null, /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, "At end:"), /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, String(state.isAtBottom))),
+    /* @__PURE__ */ React2__namespace.createElement(DebugRow, null, /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, "At end:"), /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, String(state.isAtEnd))),
     /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null),
     /* @__PURE__ */ React2__namespace.createElement(DebugRow, null, /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, "ScrollAdjust:"), /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, scrollAdjust.toFixed(2))),
     /* @__PURE__ */ React2__namespace.createElement(DebugRow, null, /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, "TotalSizeReal: "), /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, totalSizeWithScrollAdjust.toFixed(2))),
@@ -200,9 +200,6 @@ function warnDevOnce(id, text) {
     console.warn(`[legend-list] ${text}`);
   }
 }
-function roundSize(size) {
-  return Math.floor(size * 8) / 8;
-}
 function isNullOrUndefined(value) {
   return value === null || value === void 0;
 }
@@ -565,11 +562,14 @@ function ListHeaderComponentContainer({
   horizontal,
   waitForInitialLayout
 }) {
-  const scrollAdjust = useValue$("scrollAdjust", (v) => v, true);
+  var _a;
+  const hasData = ((_a = peek$(ctx, "lastItemKeys")) == null ? void 0 : _a.length) > 0;
+  const scrollAdjust = useValue$("scrollAdjust", (v) => v != null ? v : 0, true);
   const animOpacity = waitForInitialLayout ? useValue$("containersDidLayout", (value) => value ? 1 : 0) : void 0;
   const additionalSize = {
     transform: [{ translateY: reactNative.Animated.multiply(scrollAdjust, -1) }],
-    opacity: animOpacity
+    // Header should show if there's no data yet, but containersDidLayout will be false until it has some data
+    opacity: hasData ? animOpacity : 1
   };
   return /* @__PURE__ */ React2__namespace.createElement(
     reactNative.Animated.View,
@@ -666,9 +666,6 @@ var ListComponent = typedMemo(function ListComponent2({
   refScrollView,
   maintainVisibleContentPosition,
   renderScrollComponent,
-  onRefresh,
-  refreshing,
-  progressViewOffset,
   ...rest
 }) {
   const ctx = useStateContext();
@@ -694,7 +691,7 @@ var ListComponent = typedMemo(function ListComponent2({
       contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
       ref: refScrollView
     },
-    !ListEmptyComponent && (ENABLE_DEVMODE ? /* @__PURE__ */ React2__namespace.createElement(PaddingAndAdjustDevMode, null) : /* @__PURE__ */ React2__namespace.createElement(PaddingAndAdjust, null)),
+    ENABLE_DEVMODE ? /* @__PURE__ */ React2__namespace.createElement(PaddingAndAdjustDevMode, null) : /* @__PURE__ */ React2__namespace.createElement(PaddingAndAdjust, null),
     ListHeaderComponent && /* @__PURE__ */ React2__namespace.createElement(
       ListHeaderComponentContainer,
       {
@@ -1024,6 +1021,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     estimatedItemSize: estimatedItemSizeProp,
     getEstimatedItemSize,
     suggestEstimatedItemSize,
+    ListHeaderComponent,
     ListEmptyComponent,
     onItemSizeChanged,
     refScrollView,
@@ -1077,20 +1075,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   };
   const getItemSize = (key, index, data, useAverageSize = false) => {
     const state = refState.current;
-    const sizeKnown = state.sizesKnown.get(key);
+    state.sizesKnown.get(key);
     const sizePrevious = state.sizes.get(key);
     let size;
-    const numColumns = peek$(ctx, "numColumns");
-    if (sizeKnown === void 0 && !getEstimatedItemSize && numColumns === 1 && useAverageSize) {
-      const itemType = "";
-      const average = state.averageSizes[itemType];
-      if (average) {
-        size = roundSize(average.avg);
-        if (size !== sizePrevious) {
-          addTotalSize(key, size - sizePrevious, 0);
-        }
-      }
-    }
+    peek$(ctx, "numColumns");
     if (size === void 0 && sizePrevious !== void 0) {
       return sizePrevious;
     }
@@ -1111,7 +1099,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       if (canGetSize || getEstimatedItemSize) {
         const sizeFn = (index2) => {
           if (canGetSize) {
-            return getItemSize(getId(index2), index2, data[index2]);
+            return getItemSize(getId(index2), index2, data[index2], true);
           }
           return getEstimatedItemSize(index2, data[index2]);
         };
@@ -1138,8 +1126,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       pendingAdjust: 0,
       isStartReached: initialContentOffset < initialScrollLength * onStartReachedThreshold,
       isEndReached: false,
-      isAtBottom: false,
-      isAtTop: false,
+      isAtEnd: false,
+      isAtStart: false,
       data: dataProp,
       scrollLength: initialScrollLength,
       startBuffered: -1,
@@ -1224,6 +1212,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       index = 0;
     }
     const firstIndexOffset = calculateOffsetForIndex(index);
+    const isLast = index === state.data.length - 1;
+    if (isLast && viewPosition !== void 0) {
+      viewPosition = 1;
+    }
     let firstIndexScrollPostion = firstIndexOffset - viewOffset;
     const diff = Math.abs(state.scroll - firstIndexScrollPostion);
     const topPad = peek$(ctx, "stylePaddingTop") + peek$(ctx, "headerSize");
@@ -1239,10 +1231,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       state.minIndexSizeChanged = index;
       firstIndexScrollPostion = firstIndexOffset - viewOffset + state.scrollAdjustHandler.getAppliedAdjust();
     }
-    if (viewPosition) {
-      firstIndexScrollPostion -= viewPosition * (state.scrollLength - getItemSize(getId(index), index, state.data[index]));
-    }
-    scrollTo(firstIndexScrollPostion, animated);
+    scrollTo({ offset: firstIndexScrollPostion, animated, index, viewPosition, viewOffset });
   };
   const setDidLayout = () => {
     refState.current.queuedInitialLayout = true;
@@ -1350,7 +1339,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   };
   const disableScrollJumps = (timeout) => {
     const state = refState.current;
-    if (state.scrollingToOffset === void 0) {
+    if (state.scrollingTo === void 0) {
       state.disableScrollJumpsFrom = state.scroll - state.scrollAdjustHandler.getAppliedAdjust();
       state.scrollHistory.length = 0;
       setTimeout(() => {
@@ -1744,27 +1733,38 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   };
   const updateAlignItemsPaddingTop = () => {
     if (alignItemsAtEnd) {
-      const { scrollLength } = refState.current;
-      const contentSize = getContentSize(ctx);
-      const paddingTop = Math.max(0, Math.floor(scrollLength - contentSize));
-      setPaddingTop({ alignItemsPaddingTop: paddingTop });
+      const { data, scrollLength } = refState.current;
+      let alignItemsPaddingTop = 0;
+      if ((data == null ? void 0 : data.length) > 0) {
+        const contentSize = getContentSize(ctx);
+        alignItemsPaddingTop = Math.max(0, Math.floor(scrollLength - contentSize));
+      }
+      setPaddingTop({ alignItemsPaddingTop });
     }
   };
   const finishScrollTo = () => {
     const state = refState.current;
     if (state) {
-      state.scrollingToOffset = void 0;
+      state.scrollingTo = void 0;
       state.scrollAdjustHandler.setDisableAdjust(false);
       state.scrollHistory.length = 0;
       calculateItemsInView();
     }
   };
-  const scrollTo = (offset, animated) => {
+  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]));
+    }
     state.scrollAdjustHandler.setDisableAdjust(true);
     state.scrollHistory.length = 0;
-    state.scrollingToOffset = offset;
+    state.scrollingTo = params;
     (_a = refScroller.current) == null ? void 0 : _a.scrollTo({
       x: horizontal ? offset : 0,
       y: horizontal ? 0 : offset,
@@ -1776,7 +1776,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   };
   const doMaintainScrollAtEnd = (animated) => {
     const state = refState.current;
-    if ((state == null ? void 0 : state.isAtBottom) && maintainScrollAtEnd && peek$(ctx, "containersDidLayout")) {
+    if ((state == null ? void 0 : state.isAtEnd) && maintainScrollAtEnd && peek$(ctx, "containersDidLayout")) {
       const paddingTop = peek$(ctx, "alignItemsPaddingTop");
       if (paddingTop > 0) {
         state.scroll = 0;
@@ -1825,9 +1825,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     const contentSize = getContentSize(ctx);
     if (contentSize > 0 && queuedInitialLayout && !maintainingScrollAtEnd) {
       const distanceFromEnd = contentSize - scroll - scrollLength;
-      const distanceFromEndAbs = Math.abs(distanceFromEnd);
       const isContentLess = contentSize < scrollLength;
-      refState.current.isAtBottom = isContentLess || distanceFromEndAbs < scrollLength * maintainScrollAtEndThreshold;
+      refState.current.isAtEnd = isContentLess || distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
       refState.current.isEndReached = checkThreshold(
         distanceFromEnd,
         isContentLess,
@@ -1850,7 +1849,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
     const { scrollLength, scroll } = refState.current;
     const distanceFromTop = scroll;
-    refState.current.isAtTop = distanceFromTop <= 0;
+    refState.current.isAtStart = distanceFromTop <= 0;
     refState.current.isStartReached = checkThreshold(
       distanceFromTop,
       false,
@@ -1945,7 +1944,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
             };
             state.anchorElement = newAnchorElement;
             (_b = state.belowAnchorElementPositions) == null ? void 0 : _b.clear();
-            scrollTo(0, false);
+            scrollTo({ offset: 0, animated: false });
             setTimeout(() => {
               calculateItemsInView(
                 /*reset*/
@@ -1963,7 +1962,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           } else {
             state.startBufferedId = void 0;
           }
-          scrollTo(0, false);
+          scrollTo({ offset: 0, animated: false });
           setTimeout(() => {
             calculateItemsInView(
               /*reset*/
@@ -2071,7 +2070,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     const paddingDiff = stylePaddingTopState - prevPaddingTop;
     if (paddingDiff && prevPaddingTop !== void 0 && reactNative.Platform.OS === "ios") {
       queueMicrotask(() => {
-        scrollTo(refState.current.scroll + paddingDiff, false);
+        scrollTo({ offset: refState.current.scroll + paddingDiff, animated: false });
       });
     }
   };
@@ -2091,6 +2090,18 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     refState.current.previousTotalSize = peek$(ctx, "totalSize");
     calcTotalSizesAndPositions({ forgetPositions: false });
   }
+  React2.useEffect(() => {
+    if (initialScrollIndex && ListHeaderComponent) {
+      const dispose = listen$(ctx, "headerSize", (size) => {
+        if (size > 0) {
+          scrollToIndex({ index: initialScrollIndex, animated: false });
+          dispose == null ? void 0 : dispose();
+        }
+      });
+      setTimeout(dispose, 0);
+      return dispose;
+    }
+  }, []);
   React2.useEffect(() => {
     const didAllocateContainers = doInitialAllocateContainers();
     if (!didAllocateContainers) {
@@ -2106,7 +2117,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   refState.current.renderItem = renderItem;
   React2.useEffect(initalizeStateVars, [memoizedLastItemKeys.join(","), numColumnsProp, stylePaddingTopState]);
   const getRenderedItem = React2.useCallback((key) => {
-    var _a, _b;
     const state = refState.current;
     if (!state) {
       return null;
@@ -2116,11 +2126,16 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (index === void 0) {
       return null;
     }
-    const renderedItem = (_b = (_a = refState.current).renderItem) == null ? void 0 : _b.call(_a, {
-      item: data[index],
-      index,
-      extraData: peek$(ctx, "extraData")
-    });
+    const renderItemProp = refState.current.renderItem;
+    let renderedItem = null;
+    if (renderItemProp) {
+      const itemProps = {
+        item: data[index],
+        index,
+        extraData: peek$(ctx, "extraData")
+      };
+      renderedItem = isFunction(renderItemProp) ? renderItemProp(itemProps) : React2__namespace.createElement(renderItemProp, itemProps);
+    }
     return { index, item: data[index], renderedItem };
   }, []);
   const doInitialAllocateContainers = () => {
@@ -2259,7 +2274,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       if (needsUpdateContainersDidLayout || !fromFixGaps && needsCalculate && (isInView || !queuedInitialLayout)) {
         const scrollVelocity = state.scrollVelocity;
         let didCalculate = false;
-        if ((Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1 || state.scrollingToOffset !== void 0) && (!waitForInitialLayout || needsUpdateContainersDidLayout || queuedInitialLayout)) {
+        if ((Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1 || state.scrollingTo !== void 0) && (!waitForInitialLayout || needsUpdateContainersDidLayout || queuedInitialLayout)) {
           if (Date.now() - state.lastBatchingAction < 500) {
             if (!state.queuedCalculateItemsInView) {
               state.queuedCalculateItemsInView = requestAnimationFrame(() => {
@@ -2349,8 +2364,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   );
   const updateScroll = React2.useCallback((newScroll) => {
     const state = refState.current;
-    const scrollingToOffset = state.scrollingToOffset;
-    if (scrollingToOffset !== void 0 && Math.abs(newScroll - scrollingToOffset) < 10) {
+    const scrollingTo = state.scrollingTo;
+    if (scrollingTo !== void 0 && Math.abs(newScroll - scrollingTo.offset) < 10) {
       finishScrollTo();
     }
     if (state.disableScrollJumpsFrom !== void 0) {
@@ -2363,7 +2378,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     state.hasScrolled = true;
     state.lastBatchingAction = Date.now();
     const currentTime = performance.now();
-    if (scrollingToOffset === void 0 && !(state.scrollHistory.length === 0 && newScroll === initialContentOffset)) {
+    if (scrollingTo === void 0 && !(state.scrollHistory.length === 0 && newScroll === initialContentOffset)) {
       state.scrollHistory.push({ scroll: newScroll, time: currentTime });
     }
     if (state.scrollHistory.length > 5) {
@@ -2429,8 +2444,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
             contentLength: state.totalSize,
             end: state.endNoBuffer,
             endBuffered: state.endBuffered,
-            isAtEnd: state.isAtBottom,
-            isAtStart: state.isAtTop,
+            isAtEnd: state.isAtEnd,
+            isAtStart: state.isAtStart,
             scroll: state.scroll,
             scrollLength: state.scrollLength,
             start: state.startNoBuffer,
@@ -2453,10 +2468,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
             scrollToIndex({ index, ...props2 });
           }
         },
-        scrollToOffset: ({ offset, animated }) => {
-          scrollTo(offset, animated);
-        },
-        scrollToEnd: (options) => refScroller.current.scrollToEnd(options)
+        scrollToOffset: (params) => scrollTo(params),
+        scrollToEnd: (options) => {
+          const { data } = refState.current;
+          const index = data.length - 1;
+          if (index !== -1) {
+            scrollToIndex({ index, ...options });
+          }
+        }
       };
     },
     []
@@ -2466,7 +2485,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       var _a;
       if (initialContentOffset) {
         (_a = refState.current) == null ? void 0 : _a.scrollAdjustHandler.setDisableAdjust(true);
-        scrollTo(initialContentOffset, false);
+        scrollTo({ offset: initialContentOffset, animated: false });
         setTimeout(() => {
           var _a2;
           (_a2 = refState.current) == null ? void 0 : _a2.scrollAdjustHandler.setDisableAdjust(false);
@@ -2486,11 +2505,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       handleScroll,
       onMomentumScrollEnd: (event) => {
         var _a;
-        const scrollingToOffset = (_a = refState.current) == null ? void 0 : _a.scrollingToOffset;
-        if (scrollingToOffset !== void 0) {
+        const scrollingTo = (_a = refState.current) == null ? void 0 : _a.scrollingTo;
+        if (scrollingTo !== void 0) {
           requestAnimationFrame(() => {
-            scrollTo(scrollingToOffset, false);
-            refState.current.scrollingToOffset = void 0;
+            scrollTo({ ...scrollingTo, animated: false });
+            refState.current.scrollingTo = void 0;
             requestAnimationFrame(() => {
               refState.current.scrollAdjustHandler.setDisableAdjust(false);
             });
@@ -2510,15 +2529,18 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       recycleItems,
       alignItemsAtEnd,
       ListEmptyComponent: dataProp.length === 0 ? ListEmptyComponent : void 0,
+      ListHeaderComponent,
       maintainVisibleContentPosition,
       scrollEventThrottle: reactNative.Platform.OS === "web" ? 16 : void 0,
       waitForInitialLayout,
-      refreshControl: refreshControl != null ? refreshControl : onRefresh && /* @__PURE__ */ React2__namespace.createElement(
+      refreshControl: refreshControl ? stylePaddingTopState > 0 ? React2__namespace.cloneElement(refreshControl, {
+        progressViewOffset: (refreshControl.props.progressViewOffset || 0) + stylePaddingTopState
+      }) : refreshControl : onRefresh && /* @__PURE__ */ React2__namespace.createElement(
         reactNative.RefreshControl,
         {
           refreshing: !!refreshing,
           onRefresh,
-          progressViewOffset
+          progressViewOffset: (progressViewOffset || 0) + stylePaddingTopState
         }
       ),
       style,

package/index.mjs

@@ -152,7 +152,7 @@ var DebugView = React2.memo(function DebugView2({ state }) {
     },
     /* @__PURE__ */ React2.createElement(DebugRow, null, /* @__PURE__ */ React2.createElement(Text, null, "TotalSize:"), /* @__PURE__ */ React2.createElement(Text, null, totalSize.toFixed(2))),
     /* @__PURE__ */ React2.createElement(DebugRow, null, /* @__PURE__ */ React2.createElement(Text, null, "ContentSize:"), /* @__PURE__ */ React2.createElement(Text, null, contentSize.toFixed(2))),
-    /* @__PURE__ */ React2.createElement(DebugRow, null, /* @__PURE__ */ React2.createElement(Text, null, "At end:"), /* @__PURE__ */ React2.createElement(Text, null, String(state.isAtBottom))),
+    /* @__PURE__ */ React2.createElement(DebugRow, null, /* @__PURE__ */ React2.createElement(Text, null, "At end:"), /* @__PURE__ */ React2.createElement(Text, null, String(state.isAtEnd))),
     /* @__PURE__ */ React2.createElement(Text, null),
     /* @__PURE__ */ React2.createElement(DebugRow, null, /* @__PURE__ */ React2.createElement(Text, null, "ScrollAdjust:"), /* @__PURE__ */ React2.createElement(Text, null, scrollAdjust.toFixed(2))),
     /* @__PURE__ */ React2.createElement(DebugRow, null, /* @__PURE__ */ React2.createElement(Text, null, "TotalSizeReal: "), /* @__PURE__ */ React2.createElement(Text, null, totalSizeWithScrollAdjust.toFixed(2))),
@@ -179,9 +179,6 @@ function warnDevOnce(id, text) {
     console.warn(`[legend-list] ${text}`);
   }
 }
-function roundSize(size) {
-  return Math.floor(size * 8) / 8;
-}
 function isNullOrUndefined(value) {
   return value === null || value === void 0;
 }
@@ -544,11 +541,14 @@ function ListHeaderComponentContainer({
   horizontal,
   waitForInitialLayout
 }) {
-  const scrollAdjust = useValue$("scrollAdjust", (v) => v, true);
+  var _a;
+  const hasData = ((_a = peek$(ctx, "lastItemKeys")) == null ? void 0 : _a.length) > 0;
+  const scrollAdjust = useValue$("scrollAdjust", (v) => v != null ? v : 0, true);
   const animOpacity = waitForInitialLayout ? useValue$("containersDidLayout", (value) => value ? 1 : 0) : void 0;
   const additionalSize = {
     transform: [{ translateY: Animated.multiply(scrollAdjust, -1) }],
-    opacity: animOpacity
+    // Header should show if there's no data yet, but containersDidLayout will be false until it has some data
+    opacity: hasData ? animOpacity : 1
   };
   return /* @__PURE__ */ React2.createElement(
     Animated.View,
@@ -645,9 +645,6 @@ var ListComponent = typedMemo(function ListComponent2({
   refScrollView,
   maintainVisibleContentPosition,
   renderScrollComponent,
-  onRefresh,
-  refreshing,
-  progressViewOffset,
   ...rest
 }) {
   const ctx = useStateContext();
@@ -673,7 +670,7 @@ var ListComponent = typedMemo(function ListComponent2({
       contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
       ref: refScrollView
     },
-    !ListEmptyComponent && (ENABLE_DEVMODE ? /* @__PURE__ */ React2.createElement(PaddingAndAdjustDevMode, null) : /* @__PURE__ */ React2.createElement(PaddingAndAdjust, null)),
+    ENABLE_DEVMODE ? /* @__PURE__ */ React2.createElement(PaddingAndAdjustDevMode, null) : /* @__PURE__ */ React2.createElement(PaddingAndAdjust, null),
     ListHeaderComponent && /* @__PURE__ */ React2.createElement(
       ListHeaderComponentContainer,
       {
@@ -1003,6 +1000,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     estimatedItemSize: estimatedItemSizeProp,
     getEstimatedItemSize,
     suggestEstimatedItemSize,
+    ListHeaderComponent,
     ListEmptyComponent,
     onItemSizeChanged,
     refScrollView,
@@ -1056,20 +1054,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   };
   const getItemSize = (key, index, data, useAverageSize = false) => {
     const state = refState.current;
-    const sizeKnown = state.sizesKnown.get(key);
+    state.sizesKnown.get(key);
     const sizePrevious = state.sizes.get(key);
     let size;
-    const numColumns = peek$(ctx, "numColumns");
-    if (sizeKnown === void 0 && !getEstimatedItemSize && numColumns === 1 && useAverageSize) {
-      const itemType = "";
-      const average = state.averageSizes[itemType];
-      if (average) {
-        size = roundSize(average.avg);
-        if (size !== sizePrevious) {
-          addTotalSize(key, size - sizePrevious, 0);
-        }
-      }
-    }
+    peek$(ctx, "numColumns");
     if (size === void 0 && sizePrevious !== void 0) {
       return sizePrevious;
     }
@@ -1090,7 +1078,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       if (canGetSize || getEstimatedItemSize) {
         const sizeFn = (index2) => {
           if (canGetSize) {
-            return getItemSize(getId(index2), index2, data[index2]);
+            return getItemSize(getId(index2), index2, data[index2], true);
           }
           return getEstimatedItemSize(index2, data[index2]);
         };
@@ -1117,8 +1105,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       pendingAdjust: 0,
       isStartReached: initialContentOffset < initialScrollLength * onStartReachedThreshold,
       isEndReached: false,
-      isAtBottom: false,
-      isAtTop: false,
+      isAtEnd: false,
+      isAtStart: false,
       data: dataProp,
       scrollLength: initialScrollLength,
       startBuffered: -1,
@@ -1203,6 +1191,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       index = 0;
     }
     const firstIndexOffset = calculateOffsetForIndex(index);
+    const isLast = index === state.data.length - 1;
+    if (isLast && viewPosition !== void 0) {
+      viewPosition = 1;
+    }
     let firstIndexScrollPostion = firstIndexOffset - viewOffset;
     const diff = Math.abs(state.scroll - firstIndexScrollPostion);
     const topPad = peek$(ctx, "stylePaddingTop") + peek$(ctx, "headerSize");
@@ -1218,10 +1210,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       state.minIndexSizeChanged = index;
       firstIndexScrollPostion = firstIndexOffset - viewOffset + state.scrollAdjustHandler.getAppliedAdjust();
     }
-    if (viewPosition) {
-      firstIndexScrollPostion -= viewPosition * (state.scrollLength - getItemSize(getId(index), index, state.data[index]));
-    }
-    scrollTo(firstIndexScrollPostion, animated);
+    scrollTo({ offset: firstIndexScrollPostion, animated, index, viewPosition, viewOffset });
   };
   const setDidLayout = () => {
     refState.current.queuedInitialLayout = true;
@@ -1329,7 +1318,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   };
   const disableScrollJumps = (timeout) => {
     const state = refState.current;
-    if (state.scrollingToOffset === void 0) {
+    if (state.scrollingTo === void 0) {
       state.disableScrollJumpsFrom = state.scroll - state.scrollAdjustHandler.getAppliedAdjust();
       state.scrollHistory.length = 0;
       setTimeout(() => {
@@ -1723,27 +1712,38 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   };
   const updateAlignItemsPaddingTop = () => {
     if (alignItemsAtEnd) {
-      const { scrollLength } = refState.current;
-      const contentSize = getContentSize(ctx);
-      const paddingTop = Math.max(0, Math.floor(scrollLength - contentSize));
-      setPaddingTop({ alignItemsPaddingTop: paddingTop });
+      const { data, scrollLength } = refState.current;
+      let alignItemsPaddingTop = 0;
+      if ((data == null ? void 0 : data.length) > 0) {
+        const contentSize = getContentSize(ctx);
+        alignItemsPaddingTop = Math.max(0, Math.floor(scrollLength - contentSize));
+      }
+      setPaddingTop({ alignItemsPaddingTop });
     }
   };
   const finishScrollTo = () => {
     const state = refState.current;
     if (state) {
-      state.scrollingToOffset = void 0;
+      state.scrollingTo = void 0;
       state.scrollAdjustHandler.setDisableAdjust(false);
       state.scrollHistory.length = 0;
       calculateItemsInView();
     }
   };
-  const scrollTo = (offset, animated) => {
+  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]));
+    }
     state.scrollAdjustHandler.setDisableAdjust(true);
     state.scrollHistory.length = 0;
-    state.scrollingToOffset = offset;
+    state.scrollingTo = params;
     (_a = refScroller.current) == null ? void 0 : _a.scrollTo({
       x: horizontal ? offset : 0,
       y: horizontal ? 0 : offset,
@@ -1755,7 +1755,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   };
   const doMaintainScrollAtEnd = (animated) => {
     const state = refState.current;
-    if ((state == null ? void 0 : state.isAtBottom) && maintainScrollAtEnd && peek$(ctx, "containersDidLayout")) {
+    if ((state == null ? void 0 : state.isAtEnd) && maintainScrollAtEnd && peek$(ctx, "containersDidLayout")) {
       const paddingTop = peek$(ctx, "alignItemsPaddingTop");
       if (paddingTop > 0) {
         state.scroll = 0;
@@ -1804,9 +1804,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     const contentSize = getContentSize(ctx);
     if (contentSize > 0 && queuedInitialLayout && !maintainingScrollAtEnd) {
       const distanceFromEnd = contentSize - scroll - scrollLength;
-      const distanceFromEndAbs = Math.abs(distanceFromEnd);
       const isContentLess = contentSize < scrollLength;
-      refState.current.isAtBottom = isContentLess || distanceFromEndAbs < scrollLength * maintainScrollAtEndThreshold;
+      refState.current.isAtEnd = isContentLess || distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
       refState.current.isEndReached = checkThreshold(
         distanceFromEnd,
         isContentLess,
@@ -1829,7 +1828,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
     const { scrollLength, scroll } = refState.current;
     const distanceFromTop = scroll;
-    refState.current.isAtTop = distanceFromTop <= 0;
+    refState.current.isAtStart = distanceFromTop <= 0;
     refState.current.isStartReached = checkThreshold(
       distanceFromTop,
       false,
@@ -1924,7 +1923,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
             };
             state.anchorElement = newAnchorElement;
             (_b = state.belowAnchorElementPositions) == null ? void 0 : _b.clear();
-            scrollTo(0, false);
+            scrollTo({ offset: 0, animated: false });
             setTimeout(() => {
               calculateItemsInView(
                 /*reset*/
@@ -1942,7 +1941,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           } else {
             state.startBufferedId = void 0;
           }
-          scrollTo(0, false);
+          scrollTo({ offset: 0, animated: false });
           setTimeout(() => {
             calculateItemsInView(
               /*reset*/
@@ -2050,7 +2049,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     const paddingDiff = stylePaddingTopState - prevPaddingTop;
     if (paddingDiff && prevPaddingTop !== void 0 && Platform.OS === "ios") {
       queueMicrotask(() => {
-        scrollTo(refState.current.scroll + paddingDiff, false);
+        scrollTo({ offset: refState.current.scroll + paddingDiff, animated: false });
       });
     }
   };
@@ -2070,6 +2069,18 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     refState.current.previousTotalSize = peek$(ctx, "totalSize");
     calcTotalSizesAndPositions({ forgetPositions: false });
   }
+  useEffect(() => {
+    if (initialScrollIndex && ListHeaderComponent) {
+      const dispose = listen$(ctx, "headerSize", (size) => {
+        if (size > 0) {
+          scrollToIndex({ index: initialScrollIndex, animated: false });
+          dispose == null ? void 0 : dispose();
+        }
+      });
+      setTimeout(dispose, 0);
+      return dispose;
+    }
+  }, []);
   useEffect(() => {
     const didAllocateContainers = doInitialAllocateContainers();
     if (!didAllocateContainers) {
@@ -2085,7 +2096,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   refState.current.renderItem = renderItem;
   useEffect(initalizeStateVars, [memoizedLastItemKeys.join(","), numColumnsProp, stylePaddingTopState]);
   const getRenderedItem = useCallback((key) => {
-    var _a, _b;
     const state = refState.current;
     if (!state) {
       return null;
@@ -2095,11 +2105,16 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (index === void 0) {
       return null;
     }
-    const renderedItem = (_b = (_a = refState.current).renderItem) == null ? void 0 : _b.call(_a, {
-      item: data[index],
-      index,
-      extraData: peek$(ctx, "extraData")
-    });
+    const renderItemProp = refState.current.renderItem;
+    let renderedItem = null;
+    if (renderItemProp) {
+      const itemProps = {
+        item: data[index],
+        index,
+        extraData: peek$(ctx, "extraData")
+      };
+      renderedItem = isFunction(renderItemProp) ? renderItemProp(itemProps) : React2.createElement(renderItemProp, itemProps);
+    }
     return { index, item: data[index], renderedItem };
   }, []);
   const doInitialAllocateContainers = () => {
@@ -2238,7 +2253,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       if (needsUpdateContainersDidLayout || !fromFixGaps && needsCalculate && (isInView || !queuedInitialLayout)) {
         const scrollVelocity = state.scrollVelocity;
         let didCalculate = false;
-        if ((Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1 || state.scrollingToOffset !== void 0) && (!waitForInitialLayout || needsUpdateContainersDidLayout || queuedInitialLayout)) {
+        if ((Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1 || state.scrollingTo !== void 0) && (!waitForInitialLayout || needsUpdateContainersDidLayout || queuedInitialLayout)) {
           if (Date.now() - state.lastBatchingAction < 500) {
             if (!state.queuedCalculateItemsInView) {
               state.queuedCalculateItemsInView = requestAnimationFrame(() => {
@@ -2328,8 +2343,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   );
   const updateScroll = useCallback((newScroll) => {
     const state = refState.current;
-    const scrollingToOffset = state.scrollingToOffset;
-    if (scrollingToOffset !== void 0 && Math.abs(newScroll - scrollingToOffset) < 10) {
+    const scrollingTo = state.scrollingTo;
+    if (scrollingTo !== void 0 && Math.abs(newScroll - scrollingTo.offset) < 10) {
       finishScrollTo();
     }
     if (state.disableScrollJumpsFrom !== void 0) {
@@ -2342,7 +2357,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     state.hasScrolled = true;
     state.lastBatchingAction = Date.now();
     const currentTime = performance.now();
-    if (scrollingToOffset === void 0 && !(state.scrollHistory.length === 0 && newScroll === initialContentOffset)) {
+    if (scrollingTo === void 0 && !(state.scrollHistory.length === 0 && newScroll === initialContentOffset)) {
       state.scrollHistory.push({ scroll: newScroll, time: currentTime });
     }
     if (state.scrollHistory.length > 5) {
@@ -2408,8 +2423,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
             contentLength: state.totalSize,
             end: state.endNoBuffer,
             endBuffered: state.endBuffered,
-            isAtEnd: state.isAtBottom,
-            isAtStart: state.isAtTop,
+            isAtEnd: state.isAtEnd,
+            isAtStart: state.isAtStart,
             scroll: state.scroll,
             scrollLength: state.scrollLength,
             start: state.startNoBuffer,
@@ -2432,10 +2447,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
             scrollToIndex({ index, ...props2 });
           }
         },
-        scrollToOffset: ({ offset, animated }) => {
-          scrollTo(offset, animated);
-        },
-        scrollToEnd: (options) => refScroller.current.scrollToEnd(options)
+        scrollToOffset: (params) => scrollTo(params),
+        scrollToEnd: (options) => {
+          const { data } = refState.current;
+          const index = data.length - 1;
+          if (index !== -1) {
+            scrollToIndex({ index, ...options });
+          }
+        }
       };
     },
     []
@@ -2445,7 +2464,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       var _a;
       if (initialContentOffset) {
         (_a = refState.current) == null ? void 0 : _a.scrollAdjustHandler.setDisableAdjust(true);
-        scrollTo(initialContentOffset, false);
+        scrollTo({ offset: initialContentOffset, animated: false });
         setTimeout(() => {
           var _a2;
           (_a2 = refState.current) == null ? void 0 : _a2.scrollAdjustHandler.setDisableAdjust(false);
@@ -2465,11 +2484,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       handleScroll,
       onMomentumScrollEnd: (event) => {
         var _a;
-        const scrollingToOffset = (_a = refState.current) == null ? void 0 : _a.scrollingToOffset;
-        if (scrollingToOffset !== void 0) {
+        const scrollingTo = (_a = refState.current) == null ? void 0 : _a.scrollingTo;
+        if (scrollingTo !== void 0) {
           requestAnimationFrame(() => {
-            scrollTo(scrollingToOffset, false);
-            refState.current.scrollingToOffset = void 0;
+            scrollTo({ ...scrollingTo, animated: false });
+            refState.current.scrollingTo = void 0;
             requestAnimationFrame(() => {
               refState.current.scrollAdjustHandler.setDisableAdjust(false);
             });
@@ -2489,15 +2508,18 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       recycleItems,
       alignItemsAtEnd,
       ListEmptyComponent: dataProp.length === 0 ? ListEmptyComponent : void 0,
+      ListHeaderComponent,
       maintainVisibleContentPosition,
       scrollEventThrottle: Platform.OS === "web" ? 16 : void 0,
       waitForInitialLayout,
-      refreshControl: refreshControl != null ? refreshControl : onRefresh && /* @__PURE__ */ React2.createElement(
+      refreshControl: refreshControl ? stylePaddingTopState > 0 ? React2.cloneElement(refreshControl, {
+        progressViewOffset: (refreshControl.props.progressViewOffset || 0) + stylePaddingTopState
+      }) : refreshControl : onRefresh && /* @__PURE__ */ React2.createElement(
         RefreshControl,
         {
           refreshing: !!refreshing,
           onRefresh,
-          progressViewOffset
+          progressViewOffset: (progressViewOffset || 0) + stylePaddingTopState
         }
       ),
       style,

package/keyboard-controller.d.mts

@@ -52,7 +52,7 @@ declare const LegendList: <ItemT, ListT extends (<T>(props: Omit<Omit<react_nati
     recycleItems?: boolean;
     refScrollView?: React.Ref<react_native.ScrollView>;
     refreshing?: boolean;
-    renderItem?: ((props: _legendapp_list.LegendListRenderItemProps<T>) => React.ReactNode) | undefined;
+    renderItem?: ((props: _legendapp_list.LegendListRenderItemProps<T>) => React.ReactNode) | React.ComponentType<_legendapp_list.LegendListRenderItemProps<T>> | undefined;
     renderScrollComponent?: (props: react_native.ScrollViewProps) => React.ReactElement<react_native.ScrollViewProps>;
     suggestEstimatedItemSize?: boolean;
     viewabilityConfig?: _legendapp_list.ViewabilityConfig;
@@ -106,7 +106,7 @@ declare const LegendList: <ItemT, ListT extends (<T>(props: Omit<Omit<react_nati
     recycleItems?: boolean;
     refScrollView?: React.Ref<react_native.ScrollView>;
     refreshing?: boolean;
-    renderItem?: ((props: _legendapp_list.LegendListRenderItemProps<T>) => React.ReactNode) | undefined;
+    renderItem?: ((props: _legendapp_list.LegendListRenderItemProps<T>) => React.ReactNode) | React.ComponentType<_legendapp_list.LegendListRenderItemProps<T>> | undefined;
     renderScrollComponent?: (props: react_native.ScrollViewProps) => React.ReactElement<react_native.ScrollViewProps>;
     suggestEstimatedItemSize?: boolean;
     viewabilityConfig?: _legendapp_list.ViewabilityConfig;
@@ -128,7 +128,7 @@ declare const LegendList: <ItemT, ListT extends (<T>(props: Omit<Omit<react_nati
         itemKey: string;
         itemData: ItemT_1;
     }) => void) | undefined;
-    renderItem?: ((props: _legendapp_list.LegendListRenderItemProps<ItemT_1>) => React.ReactNode) | undefined;
+    renderItem?: ((props: _legendapp_list.LegendListRenderItemProps<ItemT_1>) => React.ReactNode) | React.ComponentType<_legendapp_list.LegendListRenderItemProps<ItemT_1>> | undefined;
     animatedProps?: Partial<{
         contentOffset?: react_native.PointProp | react_native_reanimated.SharedValue<react_native.PointProp | undefined> | undefined;
         contentInset?: Insets | react_native_reanimated.SharedValue<Insets | undefined> | undefined;
@@ -343,7 +343,7 @@ declare const LegendList: <ItemT, ListT extends (<T>(props: Omit<Omit<react_nati
     recycleItems?: boolean;
     refScrollView?: React.Ref<react_native.ScrollView>;
     refreshing?: boolean;
-    renderItem?: ((props: _legendapp_list.LegendListRenderItemProps<T>) => React.ReactNode) | undefined;
+    renderItem?: ((props: _legendapp_list.LegendListRenderItemProps<T>) => React.ReactNode) | React.ComponentType<_legendapp_list.LegendListRenderItemProps<T>> | undefined;
     renderScrollComponent?: (props: react_native.ScrollViewProps) => React.ReactElement<react_native.ScrollViewProps>;
     suggestEstimatedItemSize?: boolean;
     viewabilityConfig?: _legendapp_list.ViewabilityConfig;
@@ -397,7 +397,7 @@ declare const LegendList: <ItemT, ListT extends (<T>(props: Omit<Omit<react_nati
     recycleItems?: boolean;
     refScrollView?: React.Ref<react_native.ScrollView>;
     refreshing?: boolean;
-    renderItem?: ((props: _legendapp_list.LegendListRenderItemProps<ItemT>) => React.ReactNode) | undefined;
+    renderItem?: ((props: _legendapp_list.LegendListRenderItemProps<ItemT>) => React.ReactNode) | React.ComponentType<_legendapp_list.LegendListRenderItemProps<ItemT>> | undefined;
     renderScrollComponent?: (props: react_native.ScrollViewProps) => React.ReactElement<react_native.ScrollViewProps>;
     suggestEstimatedItemSize?: boolean;
     viewabilityConfig?: _legendapp_list.ViewabilityConfig;

package/keyboard-controller.d.ts

@@ -52,7 +52,7 @@ declare const LegendList: <ItemT, ListT extends (<T>(props: Omit<Omit<react_nati
     recycleItems?: boolean;
     refScrollView?: React.Ref<react_native.ScrollView>;
     refreshing?: boolean;
-    renderItem?: ((props: _legendapp_list.LegendListRenderItemProps<T>) => React.ReactNode) | undefined;
+    renderItem?: ((props: _legendapp_list.LegendListRenderItemProps<T>) => React.ReactNode) | React.ComponentType<_legendapp_list.LegendListRenderItemProps<T>> | undefined;
     renderScrollComponent?: (props: react_native.ScrollViewProps) => React.ReactElement<react_native.ScrollViewProps>;
     suggestEstimatedItemSize?: boolean;
     viewabilityConfig?: _legendapp_list.ViewabilityConfig;
@@ -106,7 +106,7 @@ declare const LegendList: <ItemT, ListT extends (<T>(props: Omit<Omit<react_nati
     recycleItems?: boolean;
     refScrollView?: React.Ref<react_native.ScrollView>;
     refreshing?: boolean;
-    renderItem?: ((props: _legendapp_list.LegendListRenderItemProps<T>) => React.ReactNode) | undefined;
+    renderItem?: ((props: _legendapp_list.LegendListRenderItemProps<T>) => React.ReactNode) | React.ComponentType<_legendapp_list.LegendListRenderItemProps<T>> | undefined;
     renderScrollComponent?: (props: react_native.ScrollViewProps) => React.ReactElement<react_native.ScrollViewProps>;
     suggestEstimatedItemSize?: boolean;
     viewabilityConfig?: _legendapp_list.ViewabilityConfig;
@@ -128,7 +128,7 @@ declare const LegendList: <ItemT, ListT extends (<T>(props: Omit<Omit<react_nati
         itemKey: string;
         itemData: ItemT_1;
     }) => void) | undefined;
-    renderItem?: ((props: _legendapp_list.LegendListRenderItemProps<ItemT_1>) => React.ReactNode) | undefined;
+    renderItem?: ((props: _legendapp_list.LegendListRenderItemProps<ItemT_1>) => React.ReactNode) | React.ComponentType<_legendapp_list.LegendListRenderItemProps<ItemT_1>> | undefined;
     animatedProps?: Partial<{
         contentOffset?: react_native.PointProp | react_native_reanimated.SharedValue<react_native.PointProp | undefined> | undefined;
         contentInset?: Insets | react_native_reanimated.SharedValue<Insets | undefined> | undefined;
@@ -343,7 +343,7 @@ declare const LegendList: <ItemT, ListT extends (<T>(props: Omit<Omit<react_nati
     recycleItems?: boolean;
     refScrollView?: React.Ref<react_native.ScrollView>;
     refreshing?: boolean;
-    renderItem?: ((props: _legendapp_list.LegendListRenderItemProps<T>) => React.ReactNode) | undefined;
+    renderItem?: ((props: _legendapp_list.LegendListRenderItemProps<T>) => React.ReactNode) | React.ComponentType<_legendapp_list.LegendListRenderItemProps<T>> | undefined;
     renderScrollComponent?: (props: react_native.ScrollViewProps) => React.ReactElement<react_native.ScrollViewProps>;
     suggestEstimatedItemSize?: boolean;
     viewabilityConfig?: _legendapp_list.ViewabilityConfig;
@@ -397,7 +397,7 @@ declare const LegendList: <ItemT, ListT extends (<T>(props: Omit<Omit<react_nati
     recycleItems?: boolean;
     refScrollView?: React.Ref<react_native.ScrollView>;
     refreshing?: boolean;
-    renderItem?: ((props: _legendapp_list.LegendListRenderItemProps<ItemT>) => React.ReactNode) | undefined;
+    renderItem?: ((props: _legendapp_list.LegendListRenderItemProps<ItemT>) => React.ReactNode) | React.ComponentType<_legendapp_list.LegendListRenderItemProps<ItemT>> | undefined;
     renderScrollComponent?: (props: react_native.ScrollViewProps) => React.ReactElement<react_native.ScrollViewProps>;
     suggestEstimatedItemSize?: boolean;
     viewabilityConfig?: _legendapp_list.ViewabilityConfig;

package/package.json

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