npm - @legendapp/list - Versions diffs - 1.0.0-beta.42 → 1.0.0-beta.44 - Mend

@legendapp/list 1.0.0-beta.42 → 1.0.0-beta.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/animated.d.mts CHANGED Viewed

@@ -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<react_native.ScrollViewProps, "maintainVisibleContentPosition" | "stickyHeaderIndices" | "contentInset" | "contentOffset"> & {
+declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<react_native.ScrollViewProps, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices"> & {
     alignItemsAtEnd?: boolean;
     columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
     data: readonly T[];

package/animated.d.ts CHANGED Viewed

@@ -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<react_native.ScrollViewProps, "maintainVisibleContentPosition" | "stickyHeaderIndices" | "contentInset" | "contentOffset"> & {
+declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<react_native.ScrollViewProps, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices"> & {
     alignItemsAtEnd?: boolean;
     columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
     data: readonly T[];

package/index.d.mts CHANGED Viewed

@@ -453,7 +453,7 @@ type TypedMemo = <T extends React.ComponentType<any>>(Component: T, propsAreEqua
 };
 declare const typedMemo: TypedMemo;
-declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "maintainVisibleContentPosition" | "stickyHeaderIndices" | "contentInset" | "contentOffset"> & {
+declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices"> & {
     alignItemsAtEnd?: boolean;
     columnWrapperStyle?: ColumnWrapperStyle;
     data: readonly T[];
@@ -505,7 +505,7 @@ declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "maintai
     waitForInitialLayout?: boolean;
 } & React$1.RefAttributes<LegendListRef>) => React$1.ReactNode;
-declare function useViewability(configId: string, callback: ViewabilityCallback): void;
+declare function useViewability(callback: ViewabilityCallback, configId?: string): void;
 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>];

package/index.d.ts CHANGED Viewed

@@ -453,7 +453,7 @@ type TypedMemo = <T extends React.ComponentType<any>>(Component: T, propsAreEqua
 };
 declare const typedMemo: TypedMemo;
-declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "maintainVisibleContentPosition" | "stickyHeaderIndices" | "contentInset" | "contentOffset"> & {
+declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices"> & {
     alignItemsAtEnd?: boolean;
     columnWrapperStyle?: ColumnWrapperStyle;
     data: readonly T[];
@@ -505,7 +505,7 @@ declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "maintai
     waitForInitialLayout?: boolean;
 } & React$1.RefAttributes<LegendListRef>) => React$1.ReactNode;
-declare function useViewability(configId: string, callback: ViewabilityCallback): void;
+declare function useViewability(callback: ViewabilityCallback, configId?: string): void;
 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>];

package/index.js CHANGED Viewed

@@ -28,7 +28,12 @@ var ContextState = React6__namespace.createContext(null);
 function StateProvider({ children }) {
   const [value] = React6__namespace.useState(() => ({
     listeners: /* @__PURE__ */ new Map(),
-    values: /* @__PURE__ */ new Map(),
+    values: /* @__PURE__ */ new Map([
+      ["paddingTop", 0],
+      ["alignItemsPaddingTop", 0],
+      ["stylePaddingTop", 0],
+      ["headerSize", 0]
+    ]),
     mapViewabilityCallbacks: /* @__PURE__ */ new Map(),
     mapViewabilityValues: /* @__PURE__ */ new Map(),
     mapViewabilityAmountCallbacks: /* @__PURE__ */ new Map(),
@@ -149,10 +154,10 @@ function useInit(cb) {
 // src/ContextContainer.ts
 var ContextContainer = React6.createContext(null);
-function useViewability(configId, callback) {
+function useViewability(callback, configId) {
   const ctx = useStateContext();
   const { containerId } = React6.useContext(ContextContainer);
-  const key = containerId + configId;
+  const key = containerId + (configId != null ? configId : "");
   useInit(() => {
     const value = ctx.mapViewabilityValues.get(key);
     if (value) {
@@ -262,13 +267,20 @@ var Container = ({
   const refLastSize = React6.useRef();
   const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
   const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
-  let verticalPaddingStyles;
+  let paddingStyles;
   if (columnWrapperStyle) {
     const { columnGap, rowGap, gap } = columnWrapperStyle;
-    verticalPaddingStyles = {
-      paddingBottom: !lastItemKeys.includes(itemKey) ? rowGap || gap || void 0 : void 0,
-      paddingHorizontal: (columnGap || gap || 0) / 2
-    };
+    if (horizontal) {
+      paddingStyles = {
+        paddingRight: !lastItemKeys.includes(itemKey) ? columnGap || gap || void 0 : void 0,
+        paddingVertical: (rowGap || gap || 0) / 2
+      };
+    } else {
+      paddingStyles = {
+        paddingBottom: !lastItemKeys.includes(itemKey) ? rowGap || gap || void 0 : void 0,
+        paddingHorizontal: (columnGap || gap || 0) / 2
+      };
+    }
   }
   const style = horizontal ? {
     flexDirection: ItemSeparatorComponent ? "row" : void 0,
@@ -276,14 +288,15 @@ var Container = ({
     top: otherAxisPos,
     bottom: numColumns > 1 ? null : 0,
     height: otherAxisSize,
-    left: position.relativeCoordinate
+    left: position.relativeCoordinate,
+    ...paddingStyles || {}
   } : {
     position: "absolute",
     left: otherAxisPos,
     right: numColumns > 1 ? null : 0,
     width: otherAxisSize,
     top: position.relativeCoordinate,
-    ...verticalPaddingStyles || {}
+    ...paddingStyles || {}
   };
   const renderedItemInfo = React6.useMemo(
     () => itemKey !== void 0 ? getRenderedItem(itemKey) : null,
@@ -381,7 +394,7 @@ var Containers = typedMemo(function Containers2({
 }) {
   const ctx = useStateContext();
   const columnWrapperStyle = ctx.columnWrapperStyle;
-  const numColumns = use$("numColumns");
+  use$("numColumns");
   const numContainers = use$("numContainersPooled");
   const animSize = useValue$(
     "totalSizeWithScrollAdjust",
@@ -408,11 +421,18 @@ var Containers = typedMemo(function Containers2({
     );
   }
   const style = horizontal ? { width: animSize, opacity: animOpacity } : { height: animSize, opacity: animOpacity };
-  if (columnWrapperStyle && !horizontal && numColumns > 1) {
+  if (columnWrapperStyle) {
     const { columnGap, rowGap, gap } = columnWrapperStyle;
-    const mx = (columnGap || gap || 0) / 2;
-    if (mx) {
-      style.marginHorizontal = -mx;
+    if (horizontal) {
+      const my = (rowGap || gap || 0) / 2;
+      if (my) {
+        style.marginVertical = -my;
+      }
+    } else {
+      const mx = (columnGap || gap || 0) / 2;
+      if (mx) {
+        style.marginHorizontal = -mx;
+      }
     }
   }
   return /* @__PURE__ */ React6__namespace.createElement(reactNative.Animated.View, { style }, containers);
@@ -837,7 +857,6 @@ 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;
   const {
     data: dataProp = [],
     initialScrollIndex,
@@ -884,9 +903,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   });
   callbacks.current.onStartReached = rest.onStartReached;
   callbacks.current.onEndReached = rest.onEndReached;
-  const contentContainerStyle = reactNative.StyleSheet.flatten(contentContainerStyleProp);
-  const style = reactNative.StyleSheet.flatten(styleProp);
-  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 contentContainerStyle = { ...reactNative.StyleSheet.flatten(contentContainerStyleProp) };
+  const style = { ...reactNative.StyleSheet.flatten(styleProp) };
+  const stylePaddingTopState = ((style == null ? void 0 : style.paddingTop) || 0) + ((contentContainerStyle == null ? void 0 : contentContainerStyle.paddingTop) || 0);
   if (style == null ? void 0 : style.paddingTop) {
     style.paddingTop = void 0;
   }
@@ -901,8 +920,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const keyExtractor = keyExtractorProp != null ? keyExtractorProp : (item, index) => index.toString();
   const refState = React6.useRef();
   const getId = (index) => {
-    var _a2;
-    const data = (_a2 = refState.current) == null ? void 0 : _a2.data;
+    var _a;
+    const data = (_a = refState.current) == null ? void 0 : _a.data;
     if (!data) {
       return "";
     }
@@ -910,17 +929,17 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     return `${ret}`;
   };
   const getItemSize = (key, index, data) => {
-    var _a2;
+    var _a;
     const sizeKnown = refState.current.sizes.get(key);
     if (sizeKnown !== void 0) {
       return sizeKnown;
     }
-    const size = (_a2 = getEstimatedItemSize ? getEstimatedItemSize(index, data) : estimatedItemSize) != null ? _a2 : DEFAULT_ITEM_SIZE;
+    const size = (_a = getEstimatedItemSize ? getEstimatedItemSize(index, data) : estimatedItemSize) != null ? _a : DEFAULT_ITEM_SIZE;
     refState.current.sizes.set(key, size);
     return size;
   };
   const calculateOffsetForIndex = (index = initialScrollIndex) => {
-    var _a2;
+    var _a;
     const data = dataProp;
     if (index !== void 0) {
       let offset = 0;
@@ -938,7 +957,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       } else if (estimatedItemSize) {
         offset = index * estimatedItemSize;
       }
-      return offset / numColumnsProp - (((_a2 = refState.current) == null ? void 0 : _a2.scrollAdjustHandler.getAppliedAdjust()) || 0);
+      return offset / numColumnsProp - (((_a = refState.current) == null ? void 0 : _a.scrollAdjustHandler.getAppliedAdjust()) || 0);
     }
     return 0;
   };
@@ -1021,18 +1040,18 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     return void 0;
   };
   const setDidLayout = () => {
-    var _a2;
+    var _a;
     refState.current.queuedInitialLayout = true;
     checkAtBottom();
     if (initialScrollIndex) {
       const updatedOffset = calculateOffsetForIndex(initialScrollIndex);
-      (_a2 = refState.current) == null ? void 0 : _a2.scrollAdjustHandler.setDisableAdjust(true);
+      (_a = refState.current) == null ? void 0 : _a.scrollAdjustHandler.setDisableAdjust(true);
       queueMicrotask(() => {
         scrollTo(updatedOffset, false);
         requestAnimationFrame(() => {
-          var _a3;
+          var _a2;
           set$(ctx, "containersDidLayout", true);
-          (_a3 = refState.current) == null ? void 0 : _a3.scrollAdjustHandler.setDisableAdjust(false);
+          (_a2 = refState.current) == null ? void 0 : _a2.scrollAdjustHandler.setDisableAdjust(false);
         });
       });
     } else {
@@ -1077,7 +1096,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     set$(ctx, "totalSize", state.totalSize);
     set$(ctx, "totalSizeWithScrollAdjust", resultSize);
     if (alignItemsAtEnd) {
-      doUpdatePaddingTop();
+      updateAlignItemsPaddingTop();
     }
   }, []);
   const getRowHeight = (n) => {
@@ -1105,13 +1124,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (!state.anchorElement) {
       return /* @__PURE__ */ new Map();
     }
-    let top = state.anchorElement.coordinate;
     const anchorIndex = state.indexByKey.get(state.anchorElement.id);
     if (anchorIndex === 0) {
       return /* @__PURE__ */ new Map();
     }
     const map = state.belowAnchorElementPositions || /* @__PURE__ */ new Map();
     const numColumns = peek$(ctx, "numColumns");
+    let top = state.anchorElement.coordinate;
     for (let i = anchorIndex - 1; i >= 0; i--) {
       const id = getId(i);
       const rowNumber = Math.floor(i / numColumns);
@@ -1123,20 +1142,20 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     return map;
   };
   const getElementPositionBelowAchor = (id) => {
-    var _a2;
+    var _a;
     const state = refState.current;
     if (!refState.current.belowAnchorElementPositions) {
       state.belowAnchorElementPositions = buildElementPositionsBelowAnchor();
     }
     const res = state.belowAnchorElementPositions.get(id);
     if (res === void 0) {
-      console.warn(`Undefined position below achor ${id} ${(_a2 = state.anchorElement) == null ? void 0 : _a2.id}`);
+      console.warn(`Undefined position below anchor ${id} ${(_a = state.anchorElement) == null ? void 0 : _a.id}`);
       return 0;
     }
     return res;
   };
   const calculateItemsInView = React6.useCallback(() => {
-    var _a2;
+    var _a;
     const state = refState.current;
     const {
       data,
@@ -1151,7 +1170,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       return;
     }
     const totalSize = peek$(ctx, "totalSizeWithScrollAdjust");
-    const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
+    const topPad = peek$(ctx, "stylePaddingTop") + peek$(ctx, "headerSize");
     const numColumns = peek$(ctx, "numColumns");
     const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
     const scrollExtra = Math.max(-16, Math.min(16, speed)) * 16;
@@ -1224,22 +1243,22 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     let column = 1;
     let maxSizeInRow = 0;
     const getInitialTop = (i) => {
-      var _a3;
+      var _a2;
       const id = getId(i);
       let topOffset = 0;
       if (positions.get(id)) {
         topOffset = positions.get(id);
       }
-      if (id === ((_a3 = state.anchorElement) == null ? void 0 : _a3.id)) {
+      if (id === ((_a2 = state.anchorElement) == null ? void 0 : _a2.id)) {
         topOffset = state.anchorElement.coordinate;
       }
       return topOffset;
     };
-    for (let i = loopStart; i < data.length; i++) {
+    for (let i = Math.max(0, loopStart); i < data.length; i++) {
       const id = getId(i);
       const size = getItemSize(id, i, data[i]);
       maxSizeInRow = Math.max(maxSizeInRow, size);
-      if (top === void 0 || id === ((_a2 = state.anchorElement) == null ? void 0 : _a2.id)) {
+      if (top === void 0 || id === ((_a = state.anchorElement) == null ? void 0 : _a.id)) {
         top = getInitialTop(i);
       }
       if (positions.get(id) !== top) {
@@ -1420,17 +1439,33 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       );
     }
   }, []);
-  const doUpdatePaddingTop = () => {
+  const setPaddingTop = ({
+    stylePaddingTop,
+    alignItemsPaddingTop
+  }) => {
+    if (stylePaddingTop !== void 0) {
+      set$(ctx, "stylePaddingTop", stylePaddingTop);
+    }
+    if (alignItemsPaddingTop !== void 0) {
+      set$(ctx, "alignItemsPaddingTop", alignItemsPaddingTop);
+    }
+    set$(
+      ctx,
+      "paddingTop",
+      (stylePaddingTop != null ? stylePaddingTop : peek$(ctx, "stylePaddingTop")) + (alignItemsPaddingTop != null ? alignItemsPaddingTop : peek$(ctx, "alignItemsPaddingTop"))
+    );
+  };
+  const updateAlignItemsPaddingTop = () => {
     if (alignItemsAtEnd) {
       const { scrollLength } = refState.current;
       const contentSize = getContentSize(ctx);
       const paddingTop = Math.max(0, Math.floor(scrollLength - contentSize));
-      set$(ctx, "paddingTop", paddingTop);
+      setPaddingTop({ alignItemsPaddingTop: paddingTop });
     }
   };
   const scrollTo = (offset, animated) => {
-    var _a2;
-    (_a2 = refScroller.current) == null ? void 0 : _a2.scrollTo({
+    var _a;
+    (_a = refScroller.current) == null ? void 0 : _a.scrollTo({
       x: horizontal ? offset : 0,
       y: horizontal ? 0 : offset,
       animated: !!animated
@@ -1439,13 +1474,13 @@ 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")) {
-      const paddingTop = peek$(ctx, "paddingTop") || 0;
+      const paddingTop = peek$(ctx, "alignItemsPaddingTop");
       if (paddingTop > 0) {
         state.scroll = 0;
       }
       requestAnimationFrame(() => {
-        var _a2;
-        (_a2 = refScroller.current) == null ? void 0 : _a2.scrollToEnd({
+        var _a;
+        (_a = refScroller.current) == null ? void 0 : _a.scrollToEnd({
           animated
         });
       });
@@ -1489,8 +1524,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         refState.current.isEndReached,
         refState.current.endReachedBlockedByTimer,
         (distance) => {
-          var _a2, _b2;
-          return (_b2 = (_a2 = callbacks.current).onEndReached) == null ? void 0 : _b2.call(_a2, { distanceFromEnd: distance });
+          var _a, _b;
+          return (_b = (_a = callbacks.current).onEndReached) == null ? void 0 : _b.call(_a, { distanceFromEnd: distance });
         },
         (block) => {
           refState.current.endReachedBlockedByTimer = block;
@@ -1513,8 +1548,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       refState.current.isStartReached,
       refState.current.startReachedBlockedByTimer,
       (distance) => {
-        var _a2, _b2;
-        return (_b2 = (_a2 = callbacks.current).onStartReached) == null ? void 0 : _b2.call(_a2, { distanceFromStart: distance });
+        var _a, _b;
+        return (_b = (_a = callbacks.current).onStartReached) == null ? void 0 : _b.call(_a, { distanceFromStart: distance });
       },
       (block) => {
         refState.current.startReachedBlockedByTimer = block;
@@ -1551,14 +1586,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
   };
   const calcTotalSizesAndPositions = ({ forgetPositions = false }) => {
-    var _a2, _b2;
+    var _a, _b;
     let totalSize = 0;
     let totalSizeBelowIndex = 0;
     const indexByKey = /* @__PURE__ */ new Map();
     const newPositions = /* @__PURE__ */ new Map();
     let column = 1;
     let maxSizeInRow = 0;
-    const numColumns = (_a2 = peek$(ctx, "numColumns")) != null ? _a2 : numColumnsProp;
+    const numColumns = (_a = peek$(ctx, "numColumns")) != null ? _a : numColumnsProp;
     if (!refState.current) {
       return;
     }
@@ -1587,7 +1622,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
               id: getId(0)
             };
             refState.current.anchorElement = newAnchorElement;
-            (_b2 = refState.current.belowAnchorElementPositions) == null ? void 0 : _b2.clear();
+            (_b = refState.current.belowAnchorElementPositions) == null ? void 0 : _b.clear();
             scrollTo(0, false);
             setTimeout(() => {
               calculateItemsInView();
@@ -1646,20 +1681,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const initalizeStateVars = () => {
     set$(ctx, "lastItemKeys", memoizedLastItemKeys);
     set$(ctx, "numColumns", numColumnsProp);
-    if (maintainVisibleContentPosition) {
-      const prevPaddingTop = peek$(ctx, "stylePaddingTop");
-      set$(ctx, "stylePaddingTop", stylePaddingTop);
-      if (prevPaddingTop !== void 0) {
-        const paddingDiff = stylePaddingTop - prevPaddingTop;
-        if (paddingDiff) {
-          set$(ctx, "paddingTop", peek$(ctx, "paddingTop") + paddingDiff);
-          if (reactNative.Platform.OS === "ios") {
-            queueMicrotask(() => {
-              scrollTo(refState.current.scroll + paddingDiff, false);
-            });
-          }
-        }
-      }
+    const prevPaddingTop = peek$(ctx, "stylePaddingTop");
+    setPaddingTop({ stylePaddingTop: stylePaddingTopState });
+    const paddingDiff = stylePaddingTopState - prevPaddingTop;
+    if (paddingDiff && prevPaddingTop !== void 0 && reactNative.Platform.OS === "ios") {
+      queueMicrotask(() => {
+        scrollTo(refState.current.scroll + paddingDiff, false);
+      });
     }
   };
   if (isFirst) {
@@ -1686,9 +1714,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     set$(ctx, "extraData", extraData);
   }, [extraData]);
   refState.current.renderItem = renderItem;
-  React6.useEffect(initalizeStateVars, [memoizedLastItemKeys.join(","), numColumnsProp, stylePaddingTop]);
+  React6.useEffect(initalizeStateVars, [memoizedLastItemKeys.join(","), numColumnsProp, stylePaddingTopState]);
   const getRenderedItem = React6.useCallback((key) => {
-    var _a2, _b2;
+    var _a, _b;
     const state = refState.current;
     if (!state) {
       return null;
@@ -1718,7 +1746,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         `[legend-list] useRecyclingState has been moved from a render prop to a regular import: import { useRecyclingState } from "@legendapp/list";`
       );
     } : void 0;
-    const renderedItem = (_b2 = (_a2 = refState.current).renderItem) == null ? void 0 : _b2.call(_a2, {
+    const renderedItem = (_b = (_a = refState.current).renderItem) == null ? void 0 : _b.call(_a, {
       item: data[index],
       index,
       extraData: peek$(ctx, "extraData"),
@@ -1731,11 +1759,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     return { index, item: data[index], renderedItem };
   }, []);
   const doInitialAllocateContainers = () => {
-    var _a2;
+    var _a;
     const state = refState.current;
     const { scrollLength, data } = state;
     if (scrollLength > 0 && data.length > 0 && !peek$(ctx, "numContainers")) {
-      const averageItemSize = (_a2 = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, data[0])) != null ? _a2 : DEFAULT_ITEM_SIZE;
+      const averageItemSize = (_a = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, data[0])) != null ? _a : DEFAULT_ITEM_SIZE;
       const numContainers = Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize) * numColumnsProp;
       for (let i = 0; i < numContainers; i++) {
         set$(ctx, `containerPosition${i}`, ANCHORED_POSITION_OUT_OF_VIEW);
@@ -1855,7 +1883,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     state.scrollForNextCalculateItemsInView = void 0;
     doInitialAllocateContainers();
     doMaintainScrollAtEnd(false);
-    doUpdatePaddingTop();
+    updateAlignItemsPaddingTop();
     checkAtBottom();
     checkAtTop();
     if (didChange) {
@@ -1876,8 +1904,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }, []);
   const handleScroll = React6.useCallback(
     (event, fromSelf) => {
-      var _a2, _b2, _c2, _d2;
-      if (((_b2 = (_a2 = event.nativeEvent) == null ? void 0 : _a2.contentSize) == null ? void 0 : _b2.height) === 0 && ((_c2 = event.nativeEvent.contentSize) == null ? void 0 : _c2.width) === 0) {
+      var _a, _b, _c, _d;
+      if (((_b = (_a = event.nativeEvent) == null ? void 0 : _a.contentSize) == null ? void 0 : _b.height) === 0 && ((_c = event.nativeEvent.contentSize) == null ? void 0 : _c.width) === 0) {
         return;
       }
       const state = refState.current;
@@ -1917,7 +1945,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       checkAtBottom();
       checkAtTop();
       if (!fromSelf) {
-        (_d2 = state.onScroll) == null ? void 0 : _d2.call(state, event);
+        (_d = state.onScroll) == null ? void 0 : _d.call(state, event);
       }
     },
     []
@@ -1931,7 +1959,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         animated = true,
         viewPosition = 0
       }) => {
-        var _a2;
+        var _a;
         const state = refState.current;
         const firstIndexOffset = calculateOffsetForIndex(index);
         let firstIndexScrollPostion = firstIndexOffset - viewOffset;
@@ -1941,7 +1969,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         if (needsReanchoring) {
           const id = getId(index);
           state.anchorElement = { id, coordinate: firstIndexOffset };
-          (_a2 = state.belowAnchorElementPositions) == null ? void 0 : _a2.clear();
+          (_a = state.belowAnchorElementPositions) == null ? void 0 : _a.clear();
           state.positions.clear();
           calcTotalSizesAndPositions({ forgetPositions: true });
           state.startBufferedId = id;
@@ -2014,13 +2042,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   );
   if (reactNative.Platform.OS === "web") {
     React6.useEffect(() => {
-      var _a2;
+      var _a;
       if (initialContentOffset) {
-        (_a2 = refState.current) == null ? void 0 : _a2.scrollAdjustHandler.setDisableAdjust(true);
+        (_a = refState.current) == null ? void 0 : _a.scrollAdjustHandler.setDisableAdjust(true);
         scrollTo(initialContentOffset, false);
         setTimeout(() => {
-          var _a3;
-          (_a3 = refState.current) == null ? void 0 : _a3.scrollAdjustHandler.setDisableAdjust(false);
+          var _a2;
+          (_a2 = refState.current) == null ? void 0 : _a2.scrollAdjustHandler.setDisableAdjust(false);
         }, 0);
       }
     }, []);
@@ -2036,8 +2064,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       updateItemSize,
       handleScroll,
       onMomentumScrollEnd: (event) => {
-        var _a2;
-        const scrollingToOffset = (_a2 = refState.current) == null ? void 0 : _a2.scrollingToOffset;
+        var _a;
+        const scrollingToOffset = (_a = refState.current) == null ? void 0 : _a.scrollingToOffset;
         if (scrollingToOffset !== void 0) {
           requestAnimationFrame(() => {
             scrollTo(scrollingToOffset, false);

package/index.mjs CHANGED Viewed

@@ -7,7 +7,12 @@ var ContextState = React6.createContext(null);
 function StateProvider({ children }) {
   const [value] = React6.useState(() => ({
     listeners: /* @__PURE__ */ new Map(),
-    values: /* @__PURE__ */ new Map(),
+    values: /* @__PURE__ */ new Map([
+      ["paddingTop", 0],
+      ["alignItemsPaddingTop", 0],
+      ["stylePaddingTop", 0],
+      ["headerSize", 0]
+    ]),
     mapViewabilityCallbacks: /* @__PURE__ */ new Map(),
     mapViewabilityValues: /* @__PURE__ */ new Map(),
     mapViewabilityAmountCallbacks: /* @__PURE__ */ new Map(),
@@ -128,10 +133,10 @@ function useInit(cb) {
 // src/ContextContainer.ts
 var ContextContainer = createContext(null);
-function useViewability(configId, callback) {
+function useViewability(callback, configId) {
   const ctx = useStateContext();
   const { containerId } = useContext(ContextContainer);
-  const key = containerId + configId;
+  const key = containerId + (configId != null ? configId : "");
   useInit(() => {
     const value = ctx.mapViewabilityValues.get(key);
     if (value) {
@@ -241,13 +246,20 @@ var Container = ({
   const refLastSize = useRef();
   const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
   const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
-  let verticalPaddingStyles;
+  let paddingStyles;
   if (columnWrapperStyle) {
     const { columnGap, rowGap, gap } = columnWrapperStyle;
-    verticalPaddingStyles = {
-      paddingBottom: !lastItemKeys.includes(itemKey) ? rowGap || gap || void 0 : void 0,
-      paddingHorizontal: (columnGap || gap || 0) / 2
-    };
+    if (horizontal) {
+      paddingStyles = {
+        paddingRight: !lastItemKeys.includes(itemKey) ? columnGap || gap || void 0 : void 0,
+        paddingVertical: (rowGap || gap || 0) / 2
+      };
+    } else {
+      paddingStyles = {
+        paddingBottom: !lastItemKeys.includes(itemKey) ? rowGap || gap || void 0 : void 0,
+        paddingHorizontal: (columnGap || gap || 0) / 2
+      };
+    }
   }
   const style = horizontal ? {
     flexDirection: ItemSeparatorComponent ? "row" : void 0,
@@ -255,14 +267,15 @@ var Container = ({
     top: otherAxisPos,
     bottom: numColumns > 1 ? null : 0,
     height: otherAxisSize,
-    left: position.relativeCoordinate
+    left: position.relativeCoordinate,
+    ...paddingStyles || {}
   } : {
     position: "absolute",
     left: otherAxisPos,
     right: numColumns > 1 ? null : 0,
     width: otherAxisSize,
     top: position.relativeCoordinate,
-    ...verticalPaddingStyles || {}
+    ...paddingStyles || {}
   };
   const renderedItemInfo = useMemo(
     () => itemKey !== void 0 ? getRenderedItem(itemKey) : null,
@@ -360,7 +373,7 @@ var Containers = typedMemo(function Containers2({
 }) {
   const ctx = useStateContext();
   const columnWrapperStyle = ctx.columnWrapperStyle;
-  const numColumns = use$("numColumns");
+  use$("numColumns");
   const numContainers = use$("numContainersPooled");
   const animSize = useValue$(
     "totalSizeWithScrollAdjust",
@@ -387,11 +400,18 @@ var Containers = typedMemo(function Containers2({
     );
   }
   const style = horizontal ? { width: animSize, opacity: animOpacity } : { height: animSize, opacity: animOpacity };
-  if (columnWrapperStyle && !horizontal && numColumns > 1) {
+  if (columnWrapperStyle) {
     const { columnGap, rowGap, gap } = columnWrapperStyle;
-    const mx = (columnGap || gap || 0) / 2;
-    if (mx) {
-      style.marginHorizontal = -mx;
+    if (horizontal) {
+      const my = (rowGap || gap || 0) / 2;
+      if (my) {
+        style.marginVertical = -my;
+      }
+    } else {
+      const mx = (columnGap || gap || 0) / 2;
+      if (mx) {
+        style.marginHorizontal = -mx;
+      }
     }
   }
   return /* @__PURE__ */ React6.createElement(Animated.View, { style }, containers);
@@ -816,7 +836,6 @@ 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;
   const {
     data: dataProp = [],
     initialScrollIndex,
@@ -863,9 +882,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   });
   callbacks.current.onStartReached = rest.onStartReached;
   callbacks.current.onEndReached = rest.onEndReached;
-  const contentContainerStyle = StyleSheet.flatten(contentContainerStyleProp);
-  const style = StyleSheet.flatten(styleProp);
-  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 contentContainerStyle = { ...StyleSheet.flatten(contentContainerStyleProp) };
+  const style = { ...StyleSheet.flatten(styleProp) };
+  const stylePaddingTopState = ((style == null ? void 0 : style.paddingTop) || 0) + ((contentContainerStyle == null ? void 0 : contentContainerStyle.paddingTop) || 0);
   if (style == null ? void 0 : style.paddingTop) {
     style.paddingTop = void 0;
   }
@@ -880,8 +899,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const keyExtractor = keyExtractorProp != null ? keyExtractorProp : (item, index) => index.toString();
   const refState = useRef();
   const getId = (index) => {
-    var _a2;
-    const data = (_a2 = refState.current) == null ? void 0 : _a2.data;
+    var _a;
+    const data = (_a = refState.current) == null ? void 0 : _a.data;
     if (!data) {
       return "";
     }
@@ -889,17 +908,17 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     return `${ret}`;
   };
   const getItemSize = (key, index, data) => {
-    var _a2;
+    var _a;
     const sizeKnown = refState.current.sizes.get(key);
     if (sizeKnown !== void 0) {
       return sizeKnown;
     }
-    const size = (_a2 = getEstimatedItemSize ? getEstimatedItemSize(index, data) : estimatedItemSize) != null ? _a2 : DEFAULT_ITEM_SIZE;
+    const size = (_a = getEstimatedItemSize ? getEstimatedItemSize(index, data) : estimatedItemSize) != null ? _a : DEFAULT_ITEM_SIZE;
     refState.current.sizes.set(key, size);
     return size;
   };
   const calculateOffsetForIndex = (index = initialScrollIndex) => {
-    var _a2;
+    var _a;
     const data = dataProp;
     if (index !== void 0) {
       let offset = 0;
@@ -917,7 +936,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       } else if (estimatedItemSize) {
         offset = index * estimatedItemSize;
       }
-      return offset / numColumnsProp - (((_a2 = refState.current) == null ? void 0 : _a2.scrollAdjustHandler.getAppliedAdjust()) || 0);
+      return offset / numColumnsProp - (((_a = refState.current) == null ? void 0 : _a.scrollAdjustHandler.getAppliedAdjust()) || 0);
     }
     return 0;
   };
@@ -1000,18 +1019,18 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     return void 0;
   };
   const setDidLayout = () => {
-    var _a2;
+    var _a;
     refState.current.queuedInitialLayout = true;
     checkAtBottom();
     if (initialScrollIndex) {
       const updatedOffset = calculateOffsetForIndex(initialScrollIndex);
-      (_a2 = refState.current) == null ? void 0 : _a2.scrollAdjustHandler.setDisableAdjust(true);
+      (_a = refState.current) == null ? void 0 : _a.scrollAdjustHandler.setDisableAdjust(true);
       queueMicrotask(() => {
         scrollTo(updatedOffset, false);
         requestAnimationFrame(() => {
-          var _a3;
+          var _a2;
           set$(ctx, "containersDidLayout", true);
-          (_a3 = refState.current) == null ? void 0 : _a3.scrollAdjustHandler.setDisableAdjust(false);
+          (_a2 = refState.current) == null ? void 0 : _a2.scrollAdjustHandler.setDisableAdjust(false);
         });
       });
     } else {
@@ -1056,7 +1075,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     set$(ctx, "totalSize", state.totalSize);
     set$(ctx, "totalSizeWithScrollAdjust", resultSize);
     if (alignItemsAtEnd) {
-      doUpdatePaddingTop();
+      updateAlignItemsPaddingTop();
     }
   }, []);
   const getRowHeight = (n) => {
@@ -1084,13 +1103,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (!state.anchorElement) {
       return /* @__PURE__ */ new Map();
     }
-    let top = state.anchorElement.coordinate;
     const anchorIndex = state.indexByKey.get(state.anchorElement.id);
     if (anchorIndex === 0) {
       return /* @__PURE__ */ new Map();
     }
     const map = state.belowAnchorElementPositions || /* @__PURE__ */ new Map();
     const numColumns = peek$(ctx, "numColumns");
+    let top = state.anchorElement.coordinate;
     for (let i = anchorIndex - 1; i >= 0; i--) {
       const id = getId(i);
       const rowNumber = Math.floor(i / numColumns);
@@ -1102,20 +1121,20 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     return map;
   };
   const getElementPositionBelowAchor = (id) => {
-    var _a2;
+    var _a;
     const state = refState.current;
     if (!refState.current.belowAnchorElementPositions) {
       state.belowAnchorElementPositions = buildElementPositionsBelowAnchor();
     }
     const res = state.belowAnchorElementPositions.get(id);
     if (res === void 0) {
-      console.warn(`Undefined position below achor ${id} ${(_a2 = state.anchorElement) == null ? void 0 : _a2.id}`);
+      console.warn(`Undefined position below anchor ${id} ${(_a = state.anchorElement) == null ? void 0 : _a.id}`);
       return 0;
     }
     return res;
   };
   const calculateItemsInView = useCallback(() => {
-    var _a2;
+    var _a;
     const state = refState.current;
     const {
       data,
@@ -1130,7 +1149,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       return;
     }
     const totalSize = peek$(ctx, "totalSizeWithScrollAdjust");
-    const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
+    const topPad = peek$(ctx, "stylePaddingTop") + peek$(ctx, "headerSize");
     const numColumns = peek$(ctx, "numColumns");
     const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
     const scrollExtra = Math.max(-16, Math.min(16, speed)) * 16;
@@ -1203,22 +1222,22 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     let column = 1;
     let maxSizeInRow = 0;
     const getInitialTop = (i) => {
-      var _a3;
+      var _a2;
       const id = getId(i);
       let topOffset = 0;
       if (positions.get(id)) {
         topOffset = positions.get(id);
       }
-      if (id === ((_a3 = state.anchorElement) == null ? void 0 : _a3.id)) {
+      if (id === ((_a2 = state.anchorElement) == null ? void 0 : _a2.id)) {
         topOffset = state.anchorElement.coordinate;
       }
       return topOffset;
     };
-    for (let i = loopStart; i < data.length; i++) {
+    for (let i = Math.max(0, loopStart); i < data.length; i++) {
       const id = getId(i);
       const size = getItemSize(id, i, data[i]);
       maxSizeInRow = Math.max(maxSizeInRow, size);
-      if (top === void 0 || id === ((_a2 = state.anchorElement) == null ? void 0 : _a2.id)) {
+      if (top === void 0 || id === ((_a = state.anchorElement) == null ? void 0 : _a.id)) {
         top = getInitialTop(i);
       }
       if (positions.get(id) !== top) {
@@ -1399,17 +1418,33 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       );
     }
   }, []);
-  const doUpdatePaddingTop = () => {
+  const setPaddingTop = ({
+    stylePaddingTop,
+    alignItemsPaddingTop
+  }) => {
+    if (stylePaddingTop !== void 0) {
+      set$(ctx, "stylePaddingTop", stylePaddingTop);
+    }
+    if (alignItemsPaddingTop !== void 0) {
+      set$(ctx, "alignItemsPaddingTop", alignItemsPaddingTop);
+    }
+    set$(
+      ctx,
+      "paddingTop",
+      (stylePaddingTop != null ? stylePaddingTop : peek$(ctx, "stylePaddingTop")) + (alignItemsPaddingTop != null ? alignItemsPaddingTop : peek$(ctx, "alignItemsPaddingTop"))
+    );
+  };
+  const updateAlignItemsPaddingTop = () => {
     if (alignItemsAtEnd) {
       const { scrollLength } = refState.current;
       const contentSize = getContentSize(ctx);
       const paddingTop = Math.max(0, Math.floor(scrollLength - contentSize));
-      set$(ctx, "paddingTop", paddingTop);
+      setPaddingTop({ alignItemsPaddingTop: paddingTop });
     }
   };
   const scrollTo = (offset, animated) => {
-    var _a2;
-    (_a2 = refScroller.current) == null ? void 0 : _a2.scrollTo({
+    var _a;
+    (_a = refScroller.current) == null ? void 0 : _a.scrollTo({
       x: horizontal ? offset : 0,
       y: horizontal ? 0 : offset,
       animated: !!animated
@@ -1418,13 +1453,13 @@ 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")) {
-      const paddingTop = peek$(ctx, "paddingTop") || 0;
+      const paddingTop = peek$(ctx, "alignItemsPaddingTop");
       if (paddingTop > 0) {
         state.scroll = 0;
       }
       requestAnimationFrame(() => {
-        var _a2;
-        (_a2 = refScroller.current) == null ? void 0 : _a2.scrollToEnd({
+        var _a;
+        (_a = refScroller.current) == null ? void 0 : _a.scrollToEnd({
           animated
         });
       });
@@ -1468,8 +1503,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         refState.current.isEndReached,
         refState.current.endReachedBlockedByTimer,
         (distance) => {
-          var _a2, _b2;
-          return (_b2 = (_a2 = callbacks.current).onEndReached) == null ? void 0 : _b2.call(_a2, { distanceFromEnd: distance });
+          var _a, _b;
+          return (_b = (_a = callbacks.current).onEndReached) == null ? void 0 : _b.call(_a, { distanceFromEnd: distance });
         },
         (block) => {
           refState.current.endReachedBlockedByTimer = block;
@@ -1492,8 +1527,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       refState.current.isStartReached,
       refState.current.startReachedBlockedByTimer,
       (distance) => {
-        var _a2, _b2;
-        return (_b2 = (_a2 = callbacks.current).onStartReached) == null ? void 0 : _b2.call(_a2, { distanceFromStart: distance });
+        var _a, _b;
+        return (_b = (_a = callbacks.current).onStartReached) == null ? void 0 : _b.call(_a, { distanceFromStart: distance });
       },
       (block) => {
         refState.current.startReachedBlockedByTimer = block;
@@ -1530,14 +1565,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
   };
   const calcTotalSizesAndPositions = ({ forgetPositions = false }) => {
-    var _a2, _b2;
+    var _a, _b;
     let totalSize = 0;
     let totalSizeBelowIndex = 0;
     const indexByKey = /* @__PURE__ */ new Map();
     const newPositions = /* @__PURE__ */ new Map();
     let column = 1;
     let maxSizeInRow = 0;
-    const numColumns = (_a2 = peek$(ctx, "numColumns")) != null ? _a2 : numColumnsProp;
+    const numColumns = (_a = peek$(ctx, "numColumns")) != null ? _a : numColumnsProp;
     if (!refState.current) {
       return;
     }
@@ -1566,7 +1601,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
               id: getId(0)
             };
             refState.current.anchorElement = newAnchorElement;
-            (_b2 = refState.current.belowAnchorElementPositions) == null ? void 0 : _b2.clear();
+            (_b = refState.current.belowAnchorElementPositions) == null ? void 0 : _b.clear();
             scrollTo(0, false);
             setTimeout(() => {
               calculateItemsInView();
@@ -1625,20 +1660,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const initalizeStateVars = () => {
     set$(ctx, "lastItemKeys", memoizedLastItemKeys);
     set$(ctx, "numColumns", numColumnsProp);
-    if (maintainVisibleContentPosition) {
-      const prevPaddingTop = peek$(ctx, "stylePaddingTop");
-      set$(ctx, "stylePaddingTop", stylePaddingTop);
-      if (prevPaddingTop !== void 0) {
-        const paddingDiff = stylePaddingTop - prevPaddingTop;
-        if (paddingDiff) {
-          set$(ctx, "paddingTop", peek$(ctx, "paddingTop") + paddingDiff);
-          if (Platform.OS === "ios") {
-            queueMicrotask(() => {
-              scrollTo(refState.current.scroll + paddingDiff, false);
-            });
-          }
-        }
-      }
+    const prevPaddingTop = peek$(ctx, "stylePaddingTop");
+    setPaddingTop({ stylePaddingTop: stylePaddingTopState });
+    const paddingDiff = stylePaddingTopState - prevPaddingTop;
+    if (paddingDiff && prevPaddingTop !== void 0 && Platform.OS === "ios") {
+      queueMicrotask(() => {
+        scrollTo(refState.current.scroll + paddingDiff, false);
+      });
     }
   };
   if (isFirst) {
@@ -1665,9 +1693,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     set$(ctx, "extraData", extraData);
   }, [extraData]);
   refState.current.renderItem = renderItem;
-  useEffect(initalizeStateVars, [memoizedLastItemKeys.join(","), numColumnsProp, stylePaddingTop]);
+  useEffect(initalizeStateVars, [memoizedLastItemKeys.join(","), numColumnsProp, stylePaddingTopState]);
   const getRenderedItem = useCallback((key) => {
-    var _a2, _b2;
+    var _a, _b;
     const state = refState.current;
     if (!state) {
       return null;
@@ -1697,7 +1725,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         `[legend-list] useRecyclingState has been moved from a render prop to a regular import: import { useRecyclingState } from "@legendapp/list";`
       );
     } : void 0;
-    const renderedItem = (_b2 = (_a2 = refState.current).renderItem) == null ? void 0 : _b2.call(_a2, {
+    const renderedItem = (_b = (_a = refState.current).renderItem) == null ? void 0 : _b.call(_a, {
       item: data[index],
       index,
       extraData: peek$(ctx, "extraData"),
@@ -1710,11 +1738,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     return { index, item: data[index], renderedItem };
   }, []);
   const doInitialAllocateContainers = () => {
-    var _a2;
+    var _a;
     const state = refState.current;
     const { scrollLength, data } = state;
     if (scrollLength > 0 && data.length > 0 && !peek$(ctx, "numContainers")) {
-      const averageItemSize = (_a2 = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, data[0])) != null ? _a2 : DEFAULT_ITEM_SIZE;
+      const averageItemSize = (_a = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, data[0])) != null ? _a : DEFAULT_ITEM_SIZE;
       const numContainers = Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize) * numColumnsProp;
       for (let i = 0; i < numContainers; i++) {
         set$(ctx, `containerPosition${i}`, ANCHORED_POSITION_OUT_OF_VIEW);
@@ -1834,7 +1862,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     state.scrollForNextCalculateItemsInView = void 0;
     doInitialAllocateContainers();
     doMaintainScrollAtEnd(false);
-    doUpdatePaddingTop();
+    updateAlignItemsPaddingTop();
     checkAtBottom();
     checkAtTop();
     if (didChange) {
@@ -1855,8 +1883,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }, []);
   const handleScroll = useCallback(
     (event, fromSelf) => {
-      var _a2, _b2, _c2, _d2;
-      if (((_b2 = (_a2 = event.nativeEvent) == null ? void 0 : _a2.contentSize) == null ? void 0 : _b2.height) === 0 && ((_c2 = event.nativeEvent.contentSize) == null ? void 0 : _c2.width) === 0) {
+      var _a, _b, _c, _d;
+      if (((_b = (_a = event.nativeEvent) == null ? void 0 : _a.contentSize) == null ? void 0 : _b.height) === 0 && ((_c = event.nativeEvent.contentSize) == null ? void 0 : _c.width) === 0) {
         return;
       }
       const state = refState.current;
@@ -1896,7 +1924,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       checkAtBottom();
       checkAtTop();
       if (!fromSelf) {
-        (_d2 = state.onScroll) == null ? void 0 : _d2.call(state, event);
+        (_d = state.onScroll) == null ? void 0 : _d.call(state, event);
       }
     },
     []
@@ -1910,7 +1938,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         animated = true,
         viewPosition = 0
       }) => {
-        var _a2;
+        var _a;
         const state = refState.current;
         const firstIndexOffset = calculateOffsetForIndex(index);
         let firstIndexScrollPostion = firstIndexOffset - viewOffset;
@@ -1920,7 +1948,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         if (needsReanchoring) {
           const id = getId(index);
           state.anchorElement = { id, coordinate: firstIndexOffset };
-          (_a2 = state.belowAnchorElementPositions) == null ? void 0 : _a2.clear();
+          (_a = state.belowAnchorElementPositions) == null ? void 0 : _a.clear();
           state.positions.clear();
           calcTotalSizesAndPositions({ forgetPositions: true });
           state.startBufferedId = id;
@@ -1993,13 +2021,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   );
   if (Platform.OS === "web") {
     useEffect(() => {
-      var _a2;
+      var _a;
       if (initialContentOffset) {
-        (_a2 = refState.current) == null ? void 0 : _a2.scrollAdjustHandler.setDisableAdjust(true);
+        (_a = refState.current) == null ? void 0 : _a.scrollAdjustHandler.setDisableAdjust(true);
         scrollTo(initialContentOffset, false);
         setTimeout(() => {
-          var _a3;
-          (_a3 = refState.current) == null ? void 0 : _a3.scrollAdjustHandler.setDisableAdjust(false);
+          var _a2;
+          (_a2 = refState.current) == null ? void 0 : _a2.scrollAdjustHandler.setDisableAdjust(false);
         }, 0);
       }
     }, []);
@@ -2015,8 +2043,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       updateItemSize,
       handleScroll,
       onMomentumScrollEnd: (event) => {
-        var _a2;
-        const scrollingToOffset = (_a2 = refState.current) == null ? void 0 : _a2.scrollingToOffset;
+        var _a;
+        const scrollingToOffset = (_a = refState.current) == null ? void 0 : _a.scrollingToOffset;
         if (scrollingToOffset !== void 0) {
           requestAnimationFrame(() => {
             scrollTo(scrollingToOffset, false);

package/keyboard-controller.js CHANGED Viewed

@@ -2,6 +2,7 @@
 var list = require('@legendapp/list');
 var React = require('react');
+var reactNative = require('react-native');
 var reactNativeKeyboardController = require('react-native-keyboard-controller');
 var reactNativeReanimated = require('react-native-reanimated');
@@ -28,7 +29,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 // src/keyboard-controller.tsx
 var typedForwardRef = React.forwardRef;
 var LegendList = typedForwardRef(function LegendList2(props, forwardedRef) {
-  const { LegendList: LegendListProp, ...rest } = props;
+  const { LegendList: LegendListProp, style: styleProp, ...rest } = props;
   const [padding, setPadding] = React.useState(0);
   const updatePadding = (height) => {
     setPadding(height);
@@ -40,7 +41,9 @@ var LegendList = typedForwardRef(function LegendList2(props, forwardedRef) {
     }
   });
   const LegendListComponent = LegendListProp != null ? LegendListProp : list.LegendList;
-  return /* @__PURE__ */ React__namespace.createElement(LegendListComponent, { style: { paddingTop: padding }, ...rest, ref: forwardedRef });
+  const styleFlattened = reactNative.StyleSheet.flatten(styleProp) || {};
+  const style = { ...styleFlattened, paddingTop: padding + (styleFlattened.paddingTop || 0) };
+  return /* @__PURE__ */ React__namespace.createElement(LegendListComponent, { ...rest, style, ref: forwardedRef });
 });
 exports.LegendList = LegendList;

package/keyboard-controller.mjs CHANGED Viewed

@@ -1,13 +1,14 @@
 import { LegendList as LegendList$1 } from '@legendapp/list';
 import * as React from 'react';
 import { useState, forwardRef } from 'react';
+import { StyleSheet } from 'react-native';
 import { useKeyboardHandler } from 'react-native-keyboard-controller';
 import { runOnJS } from 'react-native-reanimated';
 // src/keyboard-controller.tsx
 var typedForwardRef = forwardRef;
 var LegendList = typedForwardRef(function LegendList2(props, forwardedRef) {
-  const { LegendList: LegendListProp, ...rest } = props;
+  const { LegendList: LegendListProp, style: styleProp, ...rest } = props;
   const [padding, setPadding] = useState(0);
   const updatePadding = (height) => {
     setPadding(height);
@@ -19,7 +20,9 @@ var LegendList = typedForwardRef(function LegendList2(props, forwardedRef) {
     }
   });
   const LegendListComponent = LegendListProp != null ? LegendListProp : LegendList$1;
-  return /* @__PURE__ */ React.createElement(LegendListComponent, { style: { paddingTop: padding }, ...rest, ref: forwardedRef });
+  const styleFlattened = StyleSheet.flatten(styleProp) || {};
+  const style = { ...styleFlattened, paddingTop: padding + (styleFlattened.paddingTop || 0) };
+  return /* @__PURE__ */ React.createElement(LegendListComponent, { ...rest, style, ref: forwardedRef });
 });
 export { LegendList };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "1.0.0-beta.42",
+  "version": "1.0.0-beta.44",
   "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,