@legendapp/list 1.0.0-beta.41 → 1.0.0-beta.43

package/index.js

@@ -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(),
@@ -837,7 +842,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 +888,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 +905,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 +914,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 +942,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 +1025,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 +1081,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 +1109,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 +1127,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 +1155,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 +1228,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 +1424,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 +1459,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 +1509,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 +1533,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 +1571,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 +1607,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 +1666,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 +1699,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 +1731,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 +1744,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 +1868,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     state.scrollForNextCalculateItemsInView = void 0;
     doInitialAllocateContainers();
     doMaintainScrollAtEnd(false);
-    doUpdatePaddingTop();
+    updateAlignItemsPaddingTop();
     checkAtBottom();
     checkAtTop();
     if (didChange) {
@@ -1876,8 +1889,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 +1930,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 +1944,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 +1954,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 +2027,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 +2049,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

@@ -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(),
@@ -816,7 +821,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 +867,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 +884,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 +893,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 +921,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 +1004,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 +1060,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 +1088,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 +1106,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 +1134,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 +1207,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 +1403,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 +1438,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 +1488,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 +1512,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 +1550,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 +1586,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 +1645,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 +1678,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 +1710,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 +1723,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 +1847,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     state.scrollForNextCalculateItemsInView = void 0;
     doInitialAllocateContainers();
     doMaintainScrollAtEnd(false);
-    doUpdatePaddingTop();
+    updateAlignItemsPaddingTop();
     checkAtBottom();
     checkAtTop();
     if (didChange) {
@@ -1855,8 +1868,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 +1909,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 +1923,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 +1933,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 +2006,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 +2028,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

@@ -1,6 +1,8 @@
 'use strict';
 
+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');
 
@@ -27,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);
@@ -38,8 +40,10 @@ var LegendList = typedForwardRef(function LegendList2(props, forwardedRef) {
       reactNativeReanimated.runOnJS(updatePadding)(e.height);
     }
   });
-  const LegendListComponent = LegendListProp != null ? LegendListProp : LegendList2;
-  return /* @__PURE__ */ React__namespace.createElement(LegendListComponent, { style: { paddingTop: padding }, ...rest, ref: forwardedRef });
+  const LegendListComponent = LegendListProp != null ? LegendListProp : list.LegendList;
+  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

@@ -1,12 +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);
@@ -17,8 +19,10 @@ var LegendList = typedForwardRef(function LegendList2(props, forwardedRef) {
       runOnJS(updatePadding)(e.height);
     }
   });
-  const LegendListComponent = LegendListProp != null ? LegendListProp : LegendList2;
-  return /* @__PURE__ */ React.createElement(LegendListComponent, { style: { paddingTop: padding }, ...rest, ref: forwardedRef });
+  const LegendListComponent = LegendListProp != null ? LegendListProp : LegendList$1;
+  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

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