@legendapp/list 1.0.0-beta.13 → 1.0.0-beta.15

package/animated.d.mts

@@ -16,6 +16,7 @@ declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<re
     alignItemsAtEnd?: boolean;
     maintainVisibleContentPosition?: boolean;
     numColumns?: number;
+    columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
     refScrollView?: React.Ref<react_native.ScrollView>;
     waitForInitialLayout?: boolean;
     estimatedItemSize?: number;

package/animated.d.ts

@@ -16,6 +16,7 @@ declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<re
     alignItemsAtEnd?: boolean;
     maintainVisibleContentPosition?: boolean;
     numColumns?: number;
+    columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
     refScrollView?: React.Ref<react_native.ScrollView>;
     waitForInitialLayout?: boolean;
     estimatedItemSize?: number;

package/index.d.mts

@@ -7,12 +7,15 @@ import Animated from 'react-native-reanimated';
 declare class ScrollAdjustHandler {
     private ctx;
     private appliedAdjust;
-    private pendingAdjust;
     private busy;
     private context;
+    private isPaused;
     constructor(ctx: any);
+    private doAjdust;
     requestAdjust(adjust: number, onAdjusted: (diff: number) => void): void;
     getAppliedAdjust(): number;
+    pauseAdjust(): void;
+    unPauseAdjust(): boolean;
 }
 
 type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof ScrollView> | ComponentProps<typeof Animated.ScrollView>> = Omit<TScrollView, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices"> & {
@@ -28,6 +31,7 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
     alignItemsAtEnd?: boolean;
     maintainVisibleContentPosition?: boolean;
     numColumns?: number;
+    columnWrapperStyle?: ColumnWrapperStyle;
     refScrollView?: React.Ref<ScrollView>;
     waitForInitialLayout?: boolean;
     estimatedItemSize?: number;
@@ -63,6 +67,11 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
     renderScrollComponent?: (props: ScrollViewProps) => React.ReactElement<ScrollViewProps>;
     extraData?: any;
 };
+interface ColumnWrapperStyle {
+    rowGap?: number;
+    gap?: number;
+    columnGap?: number;
+}
 type AnchoredPosition = {
     type: "top" | "bottom";
     relativeCoordinate: number;
@@ -248,6 +257,7 @@ declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "content
     alignItemsAtEnd?: boolean;
     maintainVisibleContentPosition?: boolean;
     numColumns?: number;
+    columnWrapperStyle?: ColumnWrapperStyle;
     refScrollView?: React$1.Ref<ScrollView>;
     waitForInitialLayout?: boolean;
     estimatedItemSize?: number;
@@ -285,4 +295,4 @@ declare function useViewabilityAmount(callback: ViewabilityAmountCallback): void
 declare function useRecyclingEffect(effect: (info: LegendListRecyclingState<unknown>) => void | (() => void)): void;
 declare function useRecyclingState(valueOrFun: ((info: LegendListRecyclingState<unknown>) => any) | any): [any, React$1.Dispatch<any>];
 
-export { type AnchoredPosition, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type TypedForwardRef, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };
+export { type AnchoredPosition, type ColumnWrapperStyle, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type TypedForwardRef, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };

package/index.d.ts

@@ -7,12 +7,15 @@ import Animated from 'react-native-reanimated';
 declare class ScrollAdjustHandler {
     private ctx;
     private appliedAdjust;
-    private pendingAdjust;
     private busy;
     private context;
+    private isPaused;
     constructor(ctx: any);
+    private doAjdust;
     requestAdjust(adjust: number, onAdjusted: (diff: number) => void): void;
     getAppliedAdjust(): number;
+    pauseAdjust(): void;
+    unPauseAdjust(): boolean;
 }
 
 type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof ScrollView> | ComponentProps<typeof Animated.ScrollView>> = Omit<TScrollView, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices"> & {
@@ -28,6 +31,7 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
     alignItemsAtEnd?: boolean;
     maintainVisibleContentPosition?: boolean;
     numColumns?: number;
+    columnWrapperStyle?: ColumnWrapperStyle;
     refScrollView?: React.Ref<ScrollView>;
     waitForInitialLayout?: boolean;
     estimatedItemSize?: number;
@@ -63,6 +67,11 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
     renderScrollComponent?: (props: ScrollViewProps) => React.ReactElement<ScrollViewProps>;
     extraData?: any;
 };
+interface ColumnWrapperStyle {
+    rowGap?: number;
+    gap?: number;
+    columnGap?: number;
+}
 type AnchoredPosition = {
     type: "top" | "bottom";
     relativeCoordinate: number;
@@ -248,6 +257,7 @@ declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "content
     alignItemsAtEnd?: boolean;
     maintainVisibleContentPosition?: boolean;
     numColumns?: number;
+    columnWrapperStyle?: ColumnWrapperStyle;
     refScrollView?: React$1.Ref<ScrollView>;
     waitForInitialLayout?: boolean;
     estimatedItemSize?: number;
@@ -285,4 +295,4 @@ declare function useViewabilityAmount(callback: ViewabilityAmountCallback): void
 declare function useRecyclingEffect(effect: (info: LegendListRecyclingState<unknown>) => void | (() => void)): void;
 declare function useRecyclingState(valueOrFun: ((info: LegendListRecyclingState<unknown>) => any) | any): [any, React$1.Dispatch<any>];
 
-export { type AnchoredPosition, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type TypedForwardRef, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };
+export { type AnchoredPosition, type ColumnWrapperStyle, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type TypedForwardRef, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };

package/index.js

@@ -32,7 +32,8 @@ function StateProvider({ children }) {
     mapViewabilityCallbacks: /* @__PURE__ */ new Map(),
     mapViewabilityValues: /* @__PURE__ */ new Map(),
     mapViewabilityAmountCallbacks: /* @__PURE__ */ new Map(),
-    mapViewabilityAmountValues: /* @__PURE__ */ new Map()
+    mapViewabilityAmountValues: /* @__PURE__ */ new Map(),
+    columnWrapperStyle: void 0
   }));
   return /* @__PURE__ */ React6__namespace.createElement(ContextState.Provider, { value }, children);
 }
@@ -217,12 +218,24 @@ var Container = ({
   updateItemSize,
   ItemSeparatorComponent
 }) => {
+  const ctx = useStateContext();
+  const columnWrapperStyle = ctx.columnWrapperStyle;
   const maintainVisibleContentPosition = use$("maintainVisibleContentPosition");
   const position = use$(`containerPosition${id}`) || ANCHORED_POSITION_OUT_OF_VIEW;
   const column = use$(`containerColumn${id}`) || 0;
   const numColumns = use$("numColumns");
   const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
   const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
+  let verticalPaddingStyles;
+  if (columnWrapperStyle && !horizontal && numColumns > 1) {
+    const { columnGap, rowGap, gap } = columnWrapperStyle;
+    verticalPaddingStyles = {
+      paddingVertical: rowGap || gap || void 0,
+      // Apply horizontal padding based on column position (first, middle, or last)
+      paddingLeft: column > 1 ? (columnGap || gap || 0) / 2 : void 0,
+      paddingRight: column < numColumns ? (columnGap || gap || 0) / 2 : void 0
+    };
+  }
   const style = horizontal ? {
     flexDirection: ItemSeparatorComponent ? "row" : void 0,
     position: "absolute",
@@ -235,7 +248,8 @@ var Container = ({
     left: otherAxisPos,
     right: numColumns > 1 ? null : 0,
     width: otherAxisSize,
-    top: position.relativeCoordinate
+    top: position.relativeCoordinate,
+    ...verticalPaddingStyles || {}
   };
   const lastItemKey = use$("lastItemKey");
   const itemKey = use$(`containerItemKey${id}`);
@@ -286,9 +300,9 @@ var Container = ({
   }
   return /* @__PURE__ */ React6__namespace.default.createElement(LeanView, { style, onLayout, ref }, contentFragment);
 };
-var useAnimatedValue = reactNative.useAnimatedValue || ((initialValue) => {
+var useAnimatedValue = (initialValue) => {
   return React6.useRef(new reactNative.Animated.Value(initialValue)).current;
-});
+};
 
 // src/useValue$.ts
 function useValue$(key, getValue, useMicrotask) {
@@ -494,30 +508,41 @@ var ScrollAdjustHandler = class {
   constructor(ctx) {
     this.ctx = ctx;
     this.appliedAdjust = 0;
-    this.pendingAdjust = 0;
     this.busy = false;
+    this.isPaused = false;
     this.context = ctx;
   }
+  doAjdust() {
+    set$(this.context, "scrollAdjust", this.appliedAdjust);
+    this.busy = false;
+  }
   requestAdjust(adjust, onAdjusted) {
     const oldAdjustTop = peek$(this.context, "scrollAdjust");
     if (oldAdjustTop === adjust) {
       return;
     }
     this.appliedAdjust = adjust;
-    this.pendingAdjust = adjust;
-    const doAjdust = () => {
-      set$(this.context, "scrollAdjust", this.pendingAdjust);
-      onAdjusted(oldAdjustTop - this.pendingAdjust);
-      this.busy = false;
-    };
-    if (!this.busy) {
+    if (!this.busy && !this.isPaused) {
       this.busy = true;
-      doAjdust();
+      this.doAjdust();
+      onAdjusted(oldAdjustTop - adjust);
     }
   }
   getAppliedAdjust() {
     return this.appliedAdjust;
   }
+  pauseAdjust() {
+    this.isPaused = true;
+  }
+  // return true if it was paused
+  unPauseAdjust() {
+    if (this.isPaused) {
+      this.isPaused = false;
+      this.doAjdust();
+      return true;
+    }
+    return false;
+  }
 };
 var typedForwardRef = React6.forwardRef;
 var useCombinedRef = (...refs) => {
@@ -690,7 +715,7 @@ var LegendList = typedForwardRef(function LegendList2(props, forwardedRef) {
   return /* @__PURE__ */ React6__namespace.createElement(StateProvider, null, /* @__PURE__ */ React6__namespace.createElement(LegendListInner, { ...props, ref: forwardedRef }));
 });
 var LegendListInner = typedForwardRef(function LegendListInner2(props, forwardedRef) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d;
   const {
     data: dataProp,
     initialScrollIndex,
@@ -705,7 +730,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     alignItemsAtEnd = false,
     maintainVisibleContentPosition = false,
     onScroll: onScrollProp,
+    onMomentumScrollEnd,
     numColumns: numColumnsProp = 1,
+    columnWrapperStyle,
     keyExtractor: keyExtractorProp,
     renderItem,
     estimatedItemSize,
@@ -727,6 +754,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   callbacks.current.onStartReached = rest.onStartReached;
   callbacks.current.onEndReached = rest.onEndReached;
   const ctx = useStateContext();
+  ctx.columnWrapperStyle = columnWrapperStyle;
   const refScroller = React6.useRef(null);
   const combinedRef = useCombinedRef(refScroller, refScrollView);
   const scrollBuffer = drawDistance != null ? drawDistance : DEFAULT_DRAW_DISTANCE;
@@ -751,13 +779,20 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     refState.current.sizes.set(key, size);
     return size;
   };
-  const calculateInitialOffset = (index = initialScrollIndex) => {
+  const calculateOffsetForIndex = (index = initialScrollIndex) => {
     const data = dataProp;
     if (index) {
       let offset = 0;
-      if (getEstimatedItemSize) {
+      const canGetSize = !!refState.current;
+      if (canGetSize || getEstimatedItemSize) {
+        const sizeFn = (index2) => {
+          if (canGetSize) {
+            return getItemSize(getId(index2), index2, data[index2]);
+          }
+          return getEstimatedItemSize(index2, data[index2]);
+        };
         for (let i = 0; i < index; i++) {
-          offset += getEstimatedItemSize(i, data[i]);
+          offset += sizeFn(i);
         }
       } else if (estimatedItemSize) {
         offset = index * estimatedItemSize;
@@ -766,7 +801,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
     return 0;
   };
-  const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : React6.useMemo(calculateInitialOffset, []);
+  const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : React6.useMemo(calculateOffsetForIndex, []);
   if (!refState.current) {
     const initialScrollLength = reactNative.Dimensions.get("window")[horizontal ? "width" : "height"];
     refState.current = {
@@ -918,17 +953,20 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     return map;
   };
   const getElementPositionBelowAchor = (id) => {
+    var _a2;
     const state = refState.current;
     if (!refState.current.belowAnchorElementPositions) {
       state.belowAnchorElementPositions = buildElementPositionsBelowAnchor();
     }
     const res = state.belowAnchorElementPositions.get(id);
     if (res === void 0) {
-      throw new Error("Undefined position below achor");
+      console.warn(`Undefined position below achor ${id} ${(_a2 = state.anchorElement) == null ? void 0 : _a2.id}`);
+      return 0;
     }
     return res;
   };
   const calculateItemsInView = React6.useCallback((speed) => {
+    var _a2;
     const state = refState.current;
     const {
       data,
@@ -1006,14 +1044,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     let column = 1;
     let maxSizeInRow = 0;
     const getInitialTop = (i) => {
-      var _a2;
+      var _a3;
       const id = getId(i);
       let topOffset = 0;
       if (positions.get(id)) {
         topOffset = positions.get(id);
       }
-      if (id === ((_a2 = state.anchorElement) == null ? void 0 : _a2.id)) {
-        topOffset = initialContentOffset || 0;
+      if (id === ((_a3 = state.anchorElement) == null ? void 0 : _a3.id)) {
+        topOffset = state.anchorElement.coordinate;
       }
       return topOffset;
     };
@@ -1021,7 +1059,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       const id = getId(i);
       const size = getItemSize(id, i, data[i]);
       maxSizeInRow = Math.max(maxSizeInRow, size);
-      if (top === void 0) {
+      if (top === void 0 || id === ((_a2 = state.anchorElement) == null ? void 0 : _a2.id)) {
         top = getInitialTop(i);
       }
       if (positions.get(id) !== top) {
@@ -1287,18 +1325,17 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       }
     }
   };
-  const isFirst = !refState.current.renderItem;
-  if (isFirst || dataProp !== refState.current.data || numColumnsProp !== peek$(ctx, "numColumns")) {
-    if (!keyExtractorProp && !isFirst && dataProp !== refState.current.data) {
-      refState.current.positions.clear();
-    }
-    refState.current.data = dataProp;
+  const calcTotalSizesAndPositions = ({ forgetPositions = false }) => {
+    var _a2, _b2, _c2;
     let totalSize = 0;
     let totalSizeBelowIndex = 0;
     const indexByKey = /* @__PURE__ */ new Map();
     const newPositions = /* @__PURE__ */ new Map();
     let column = 1;
     let maxSizeInRow = 0;
+    if (!refState.current) {
+      return;
+    }
     for (let i = 0; i < dataProp.length; i++) {
       const key = getId(i);
       if (__DEV__) {
@@ -1309,13 +1346,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         }
       }
       indexByKey.set(key, i);
-      if (refState.current.positions.get(key) != null && refState.current.indexByKey.get(key) === i) {
+      if (!forgetPositions && refState.current.positions.get(key) != null && refState.current.indexByKey.get(key) === i) {
         newPositions.set(key, refState.current.positions.get(key));
       }
     }
     refState.current.indexByKey = indexByKey;
     refState.current.positions = newPositions;
-    if (!isFirst) {
+    if (!forgetPositions && !isFirst) {
       if (maintainVisibleContentPosition) {
         if (refState.current.anchorElement == null || indexByKey.get(refState.current.anchorElement.id) == null) {
           if (dataProp.length) {
@@ -1324,8 +1361,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
               id: getId(0)
             };
             refState.current.anchorElement = newAnchorElement;
-            (_a = refState.current.belowAnchorElementPositions) == null ? void 0 : _a.clear();
-            (_b = refScroller.current) == null ? void 0 : _b.scrollTo({ x: 0, y: 0, animated: false });
+            (_a2 = refState.current.belowAnchorElementPositions) == null ? void 0 : _a2.clear();
+            (_b2 = refScroller.current) == null ? void 0 : _b2.scrollTo({ x: 0, y: 0, animated: false });
             setTimeout(() => {
               calculateItemsInView(0);
             }, 0);
@@ -1340,7 +1377,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           } else {
             refState.current.startBufferedId = void 0;
           }
-          (_c = refScroller.current) == null ? void 0 : _c.scrollTo({ x: 0, y: 0, animated: false });
+          (_c2 = refScroller.current) == null ? void 0 : _c2.scrollTo({ x: 0, y: 0, animated: false });
           setTimeout(() => {
             calculateItemsInView(0);
           }, 0);
@@ -1366,6 +1403,21 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       totalSize += maxSizeInRow;
     }
     addTotalSize(null, totalSize, totalSizeBelowIndex);
+  };
+  const isFirst = !refState.current.renderItem;
+  if (isFirst || dataProp !== refState.current.data || numColumnsProp !== peek$(ctx, "numColumns")) {
+    if (!keyExtractorProp && !isFirst && dataProp !== refState.current.data) {
+      refState.current.sizes.clear();
+      refState.current.positions.clear();
+    }
+    refState.current.data = dataProp;
+    const indexByKey = /* @__PURE__ */ new Map();
+    for (let i = 0; i < dataProp.length; i++) {
+      const key = getId(i);
+      indexByKey.set(key, i);
+    }
+    refState.current.indexByKey = indexByKey;
+    calcTotalSizesAndPositions({ forgetPositions: false });
   }
   React6.useEffect(() => {
     checkResetContainers(
@@ -1378,7 +1430,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }, [extraData]);
   refState.current.renderItem = renderItem;
   const lastItemKey = dataProp.length > 0 ? getId(dataProp.length - 1) : void 0;
-  const stylePaddingTop = (_g = (_f = (_d = reactNative.StyleSheet.flatten(style)) == null ? void 0 : _d.paddingTop) != null ? _f : (_e = reactNative.StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _e.paddingTop) != null ? _g : 0;
+  const stylePaddingTop = (_d = (_c = (_a = reactNative.StyleSheet.flatten(style)) == null ? void 0 : _a.paddingTop) != null ? _c : (_b = reactNative.StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _b.paddingTop) != null ? _d : 0;
   const initalizeStateVars = () => {
     set$(ctx, "lastItemKey", lastItemKey);
     set$(ctx, "numColumns", numColumnsProp);
@@ -1582,10 +1634,42 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   React6.useImperativeHandle(
     forwardedRef,
     () => {
-      const scrollToIndex = ({ index, animated }) => {
-        const offsetObj = calculateInitialOffset(index);
-        const offset = horizontal ? { x: offsetObj, y: 0 } : { x: 0, y: offsetObj };
-        refScroller.current.scrollTo({ ...offset, animated });
+      const scrollToIndex = ({ index, animated = true }) => {
+        var _a2;
+        const state = refState.current;
+        const firstIndexOffset = calculateOffsetForIndex(index);
+        let firstIndexScrollPostion = firstIndexOffset;
+        if (maintainVisibleContentPosition) {
+          const id = getId(index);
+          state.anchorElement = { id, coordinate: firstIndexOffset };
+          (_a2 = state.belowAnchorElementPositions) == null ? void 0 : _a2.clear();
+          state.positions.clear();
+          calcTotalSizesAndPositions({ forgetPositions: true });
+          state.scrollForNextCalculateItemsInView = void 0;
+          state.startBufferedId = id;
+          state.minIndexSizeChanged = index;
+          firstIndexScrollPostion = firstIndexOffset + state.scrollAdjustHandler.getAppliedAdjust();
+          state.scrollAdjustHandler.pauseAdjust();
+          setTimeout(
+            () => {
+              const wasAdjusted = state.scrollAdjustHandler.unPauseAdjust();
+              if (wasAdjusted) {
+                refState.current.scrollVelocity = 0;
+                refState.current.scrollHistory = [];
+                calculateItemsInView(0);
+              }
+            },
+            animated ? 1e3 : 50
+          );
+        }
+        const offset = horizontal ? { x: firstIndexScrollPostion, y: 0 } : { x: 0, y: firstIndexScrollPostion };
+        if (maintainVisibleContentPosition) {
+          setTimeout(() => {
+            refScroller.current.scrollTo({ ...offset, animated });
+          }, 50);
+        } else {
+          refScroller.current.scrollTo({ ...offset, animated });
+        }
       };
       return {
         getNativeScrollRef: () => refScroller.current,
@@ -1619,6 +1703,17 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       getRenderedItem,
       updateItemSize,
       handleScroll,
+      onMomentumScrollEnd: (event) => {
+        const wasPaused = refState.current.scrollAdjustHandler.unPauseAdjust();
+        if (wasPaused) {
+          refState.current.scrollVelocity = 0;
+          refState.current.scrollHistory = [];
+          calculateItemsInView(0);
+        }
+        if (onMomentumScrollEnd) {
+          onMomentumScrollEnd(event);
+        }
+      },
       onLayout,
       recycleItems,
       alignItemsAtEnd,

package/index.mjs

@@ -1,6 +1,6 @@
 import * as React6 from 'react';
 import React6__default, { createContext, memo, useReducer, useEffect, useMemo, useRef, useCallback, useImperativeHandle, useSyncExternalStore, useContext, useState, forwardRef, useLayoutEffect } from 'react';
-import { View, Text, Platform, Animated, ScrollView, Dimensions, StyleSheet, useAnimatedValue as useAnimatedValue$1 } from 'react-native';
+import { View, Text, Platform, Animated, ScrollView, Dimensions, StyleSheet } from 'react-native';
 
 // src/LegendList.tsx
 var ContextState = React6.createContext(null);
@@ -11,7 +11,8 @@ function StateProvider({ children }) {
     mapViewabilityCallbacks: /* @__PURE__ */ new Map(),
     mapViewabilityValues: /* @__PURE__ */ new Map(),
     mapViewabilityAmountCallbacks: /* @__PURE__ */ new Map(),
-    mapViewabilityAmountValues: /* @__PURE__ */ new Map()
+    mapViewabilityAmountValues: /* @__PURE__ */ new Map(),
+    columnWrapperStyle: void 0
   }));
   return /* @__PURE__ */ React6.createElement(ContextState.Provider, { value }, children);
 }
@@ -196,12 +197,24 @@ var Container = ({
   updateItemSize,
   ItemSeparatorComponent
 }) => {
+  const ctx = useStateContext();
+  const columnWrapperStyle = ctx.columnWrapperStyle;
   const maintainVisibleContentPosition = use$("maintainVisibleContentPosition");
   const position = use$(`containerPosition${id}`) || ANCHORED_POSITION_OUT_OF_VIEW;
   const column = use$(`containerColumn${id}`) || 0;
   const numColumns = use$("numColumns");
   const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
   const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
+  let verticalPaddingStyles;
+  if (columnWrapperStyle && !horizontal && numColumns > 1) {
+    const { columnGap, rowGap, gap } = columnWrapperStyle;
+    verticalPaddingStyles = {
+      paddingVertical: rowGap || gap || void 0,
+      // Apply horizontal padding based on column position (first, middle, or last)
+      paddingLeft: column > 1 ? (columnGap || gap || 0) / 2 : void 0,
+      paddingRight: column < numColumns ? (columnGap || gap || 0) / 2 : void 0
+    };
+  }
   const style = horizontal ? {
     flexDirection: ItemSeparatorComponent ? "row" : void 0,
     position: "absolute",
@@ -214,7 +227,8 @@ var Container = ({
     left: otherAxisPos,
     right: numColumns > 1 ? null : 0,
     width: otherAxisSize,
-    top: position.relativeCoordinate
+    top: position.relativeCoordinate,
+    ...verticalPaddingStyles || {}
   };
   const lastItemKey = use$("lastItemKey");
   const itemKey = use$(`containerItemKey${id}`);
@@ -265,9 +279,9 @@ var Container = ({
   }
   return /* @__PURE__ */ React6__default.createElement(LeanView, { style, onLayout, ref }, contentFragment);
 };
-var useAnimatedValue = useAnimatedValue$1 || ((initialValue) => {
+var useAnimatedValue = (initialValue) => {
   return useRef(new Animated.Value(initialValue)).current;
-});
+};
 
 // src/useValue$.ts
 function useValue$(key, getValue, useMicrotask) {
@@ -473,30 +487,41 @@ var ScrollAdjustHandler = class {
   constructor(ctx) {
     this.ctx = ctx;
     this.appliedAdjust = 0;
-    this.pendingAdjust = 0;
     this.busy = false;
+    this.isPaused = false;
     this.context = ctx;
   }
+  doAjdust() {
+    set$(this.context, "scrollAdjust", this.appliedAdjust);
+    this.busy = false;
+  }
   requestAdjust(adjust, onAdjusted) {
     const oldAdjustTop = peek$(this.context, "scrollAdjust");
     if (oldAdjustTop === adjust) {
       return;
     }
     this.appliedAdjust = adjust;
-    this.pendingAdjust = adjust;
-    const doAjdust = () => {
-      set$(this.context, "scrollAdjust", this.pendingAdjust);
-      onAdjusted(oldAdjustTop - this.pendingAdjust);
-      this.busy = false;
-    };
-    if (!this.busy) {
+    if (!this.busy && !this.isPaused) {
       this.busy = true;
-      doAjdust();
+      this.doAjdust();
+      onAdjusted(oldAdjustTop - adjust);
     }
   }
   getAppliedAdjust() {
     return this.appliedAdjust;
   }
+  pauseAdjust() {
+    this.isPaused = true;
+  }
+  // return true if it was paused
+  unPauseAdjust() {
+    if (this.isPaused) {
+      this.isPaused = false;
+      this.doAjdust();
+      return true;
+    }
+    return false;
+  }
 };
 var typedForwardRef = forwardRef;
 var useCombinedRef = (...refs) => {
@@ -669,7 +694,7 @@ var LegendList = typedForwardRef(function LegendList2(props, forwardedRef) {
   return /* @__PURE__ */ React6.createElement(StateProvider, null, /* @__PURE__ */ React6.createElement(LegendListInner, { ...props, ref: forwardedRef }));
 });
 var LegendListInner = typedForwardRef(function LegendListInner2(props, forwardedRef) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d;
   const {
     data: dataProp,
     initialScrollIndex,
@@ -684,7 +709,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     alignItemsAtEnd = false,
     maintainVisibleContentPosition = false,
     onScroll: onScrollProp,
+    onMomentumScrollEnd,
     numColumns: numColumnsProp = 1,
+    columnWrapperStyle,
     keyExtractor: keyExtractorProp,
     renderItem,
     estimatedItemSize,
@@ -706,6 +733,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   callbacks.current.onStartReached = rest.onStartReached;
   callbacks.current.onEndReached = rest.onEndReached;
   const ctx = useStateContext();
+  ctx.columnWrapperStyle = columnWrapperStyle;
   const refScroller = useRef(null);
   const combinedRef = useCombinedRef(refScroller, refScrollView);
   const scrollBuffer = drawDistance != null ? drawDistance : DEFAULT_DRAW_DISTANCE;
@@ -730,13 +758,20 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     refState.current.sizes.set(key, size);
     return size;
   };
-  const calculateInitialOffset = (index = initialScrollIndex) => {
+  const calculateOffsetForIndex = (index = initialScrollIndex) => {
     const data = dataProp;
     if (index) {
       let offset = 0;
-      if (getEstimatedItemSize) {
+      const canGetSize = !!refState.current;
+      if (canGetSize || getEstimatedItemSize) {
+        const sizeFn = (index2) => {
+          if (canGetSize) {
+            return getItemSize(getId(index2), index2, data[index2]);
+          }
+          return getEstimatedItemSize(index2, data[index2]);
+        };
         for (let i = 0; i < index; i++) {
-          offset += getEstimatedItemSize(i, data[i]);
+          offset += sizeFn(i);
         }
       } else if (estimatedItemSize) {
         offset = index * estimatedItemSize;
@@ -745,7 +780,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
     return 0;
   };
-  const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : useMemo(calculateInitialOffset, []);
+  const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : useMemo(calculateOffsetForIndex, []);
   if (!refState.current) {
     const initialScrollLength = Dimensions.get("window")[horizontal ? "width" : "height"];
     refState.current = {
@@ -897,17 +932,20 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     return map;
   };
   const getElementPositionBelowAchor = (id) => {
+    var _a2;
     const state = refState.current;
     if (!refState.current.belowAnchorElementPositions) {
       state.belowAnchorElementPositions = buildElementPositionsBelowAnchor();
     }
     const res = state.belowAnchorElementPositions.get(id);
     if (res === void 0) {
-      throw new Error("Undefined position below achor");
+      console.warn(`Undefined position below achor ${id} ${(_a2 = state.anchorElement) == null ? void 0 : _a2.id}`);
+      return 0;
     }
     return res;
   };
   const calculateItemsInView = useCallback((speed) => {
+    var _a2;
     const state = refState.current;
     const {
       data,
@@ -985,14 +1023,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     let column = 1;
     let maxSizeInRow = 0;
     const getInitialTop = (i) => {
-      var _a2;
+      var _a3;
       const id = getId(i);
       let topOffset = 0;
       if (positions.get(id)) {
         topOffset = positions.get(id);
       }
-      if (id === ((_a2 = state.anchorElement) == null ? void 0 : _a2.id)) {
-        topOffset = initialContentOffset || 0;
+      if (id === ((_a3 = state.anchorElement) == null ? void 0 : _a3.id)) {
+        topOffset = state.anchorElement.coordinate;
       }
       return topOffset;
     };
@@ -1000,7 +1038,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       const id = getId(i);
       const size = getItemSize(id, i, data[i]);
       maxSizeInRow = Math.max(maxSizeInRow, size);
-      if (top === void 0) {
+      if (top === void 0 || id === ((_a2 = state.anchorElement) == null ? void 0 : _a2.id)) {
         top = getInitialTop(i);
       }
       if (positions.get(id) !== top) {
@@ -1266,18 +1304,17 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       }
     }
   };
-  const isFirst = !refState.current.renderItem;
-  if (isFirst || dataProp !== refState.current.data || numColumnsProp !== peek$(ctx, "numColumns")) {
-    if (!keyExtractorProp && !isFirst && dataProp !== refState.current.data) {
-      refState.current.positions.clear();
-    }
-    refState.current.data = dataProp;
+  const calcTotalSizesAndPositions = ({ forgetPositions = false }) => {
+    var _a2, _b2, _c2;
     let totalSize = 0;
     let totalSizeBelowIndex = 0;
     const indexByKey = /* @__PURE__ */ new Map();
     const newPositions = /* @__PURE__ */ new Map();
     let column = 1;
     let maxSizeInRow = 0;
+    if (!refState.current) {
+      return;
+    }
     for (let i = 0; i < dataProp.length; i++) {
       const key = getId(i);
       if (__DEV__) {
@@ -1288,13 +1325,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         }
       }
       indexByKey.set(key, i);
-      if (refState.current.positions.get(key) != null && refState.current.indexByKey.get(key) === i) {
+      if (!forgetPositions && refState.current.positions.get(key) != null && refState.current.indexByKey.get(key) === i) {
         newPositions.set(key, refState.current.positions.get(key));
       }
     }
     refState.current.indexByKey = indexByKey;
     refState.current.positions = newPositions;
-    if (!isFirst) {
+    if (!forgetPositions && !isFirst) {
       if (maintainVisibleContentPosition) {
         if (refState.current.anchorElement == null || indexByKey.get(refState.current.anchorElement.id) == null) {
           if (dataProp.length) {
@@ -1303,8 +1340,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
               id: getId(0)
             };
             refState.current.anchorElement = newAnchorElement;
-            (_a = refState.current.belowAnchorElementPositions) == null ? void 0 : _a.clear();
-            (_b = refScroller.current) == null ? void 0 : _b.scrollTo({ x: 0, y: 0, animated: false });
+            (_a2 = refState.current.belowAnchorElementPositions) == null ? void 0 : _a2.clear();
+            (_b2 = refScroller.current) == null ? void 0 : _b2.scrollTo({ x: 0, y: 0, animated: false });
             setTimeout(() => {
               calculateItemsInView(0);
             }, 0);
@@ -1319,7 +1356,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           } else {
             refState.current.startBufferedId = void 0;
           }
-          (_c = refScroller.current) == null ? void 0 : _c.scrollTo({ x: 0, y: 0, animated: false });
+          (_c2 = refScroller.current) == null ? void 0 : _c2.scrollTo({ x: 0, y: 0, animated: false });
           setTimeout(() => {
             calculateItemsInView(0);
           }, 0);
@@ -1345,6 +1382,21 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       totalSize += maxSizeInRow;
     }
     addTotalSize(null, totalSize, totalSizeBelowIndex);
+  };
+  const isFirst = !refState.current.renderItem;
+  if (isFirst || dataProp !== refState.current.data || numColumnsProp !== peek$(ctx, "numColumns")) {
+    if (!keyExtractorProp && !isFirst && dataProp !== refState.current.data) {
+      refState.current.sizes.clear();
+      refState.current.positions.clear();
+    }
+    refState.current.data = dataProp;
+    const indexByKey = /* @__PURE__ */ new Map();
+    for (let i = 0; i < dataProp.length; i++) {
+      const key = getId(i);
+      indexByKey.set(key, i);
+    }
+    refState.current.indexByKey = indexByKey;
+    calcTotalSizesAndPositions({ forgetPositions: false });
   }
   useEffect(() => {
     checkResetContainers(
@@ -1357,7 +1409,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }, [extraData]);
   refState.current.renderItem = renderItem;
   const lastItemKey = dataProp.length > 0 ? getId(dataProp.length - 1) : void 0;
-  const stylePaddingTop = (_g = (_f = (_d = StyleSheet.flatten(style)) == null ? void 0 : _d.paddingTop) != null ? _f : (_e = StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _e.paddingTop) != null ? _g : 0;
+  const stylePaddingTop = (_d = (_c = (_a = StyleSheet.flatten(style)) == null ? void 0 : _a.paddingTop) != null ? _c : (_b = StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _b.paddingTop) != null ? _d : 0;
   const initalizeStateVars = () => {
     set$(ctx, "lastItemKey", lastItemKey);
     set$(ctx, "numColumns", numColumnsProp);
@@ -1561,10 +1613,42 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   useImperativeHandle(
     forwardedRef,
     () => {
-      const scrollToIndex = ({ index, animated }) => {
-        const offsetObj = calculateInitialOffset(index);
-        const offset = horizontal ? { x: offsetObj, y: 0 } : { x: 0, y: offsetObj };
-        refScroller.current.scrollTo({ ...offset, animated });
+      const scrollToIndex = ({ index, animated = true }) => {
+        var _a2;
+        const state = refState.current;
+        const firstIndexOffset = calculateOffsetForIndex(index);
+        let firstIndexScrollPostion = firstIndexOffset;
+        if (maintainVisibleContentPosition) {
+          const id = getId(index);
+          state.anchorElement = { id, coordinate: firstIndexOffset };
+          (_a2 = state.belowAnchorElementPositions) == null ? void 0 : _a2.clear();
+          state.positions.clear();
+          calcTotalSizesAndPositions({ forgetPositions: true });
+          state.scrollForNextCalculateItemsInView = void 0;
+          state.startBufferedId = id;
+          state.minIndexSizeChanged = index;
+          firstIndexScrollPostion = firstIndexOffset + state.scrollAdjustHandler.getAppliedAdjust();
+          state.scrollAdjustHandler.pauseAdjust();
+          setTimeout(
+            () => {
+              const wasAdjusted = state.scrollAdjustHandler.unPauseAdjust();
+              if (wasAdjusted) {
+                refState.current.scrollVelocity = 0;
+                refState.current.scrollHistory = [];
+                calculateItemsInView(0);
+              }
+            },
+            animated ? 1e3 : 50
+          );
+        }
+        const offset = horizontal ? { x: firstIndexScrollPostion, y: 0 } : { x: 0, y: firstIndexScrollPostion };
+        if (maintainVisibleContentPosition) {
+          setTimeout(() => {
+            refScroller.current.scrollTo({ ...offset, animated });
+          }, 50);
+        } else {
+          refScroller.current.scrollTo({ ...offset, animated });
+        }
       };
       return {
         getNativeScrollRef: () => refScroller.current,
@@ -1598,6 +1682,17 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       getRenderedItem,
       updateItemSize,
       handleScroll,
+      onMomentumScrollEnd: (event) => {
+        const wasPaused = refState.current.scrollAdjustHandler.unPauseAdjust();
+        if (wasPaused) {
+          refState.current.scrollVelocity = 0;
+          refState.current.scrollHistory = [];
+          calculateItemsInView(0);
+        }
+        if (onMomentumScrollEnd) {
+          onMomentumScrollEnd(event);
+        }
+      },
       onLayout,
       recycleItems,
       alignItemsAtEnd,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "1.0.0-beta.13",
+  "version": "1.0.0-beta.15",
   "description": "Legend List aims to be a drop-in replacement for FlatList with much better performance and supporting dynamically sized items.",
   "sideEffects": false,
   "private": false,