@legendapp/list 2.0.16 → 2.0.17

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 2.0.17
+- Feat: Add stickyHeaderOffset property to control sticky header positioning
+- Feat: Add sticky header backdrop component support
+- Fix: Improve KeyboardAvoidingLegendList quality by using animated contentOffset y instead of reanimated scrollTo
+- Fix: Initial scroll could sometimes be out of range beyond the ScrollView if some items are much larger than the estimated size
+- Fix: Item layout updates now work correctly when container is the exact same size as previous item on old arch
+
 ## 2.0.16
 - Feat: Add KeyboardAvoidingLegendList component for better keyboard handling integration
 - Fix: Stale containers are not being removed and overlap with new data when using getItemType #335

package/index.d.mts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
 import { ComponentProps, Key, ReactNode, Dispatch, SetStateAction } from 'react';
 import { View, Animated, ScrollView, LayoutRectangle, ScrollViewComponent, ScrollResponderMixin, StyleProp, ViewStyle, NativeSyntheticEvent, NativeScrollEvent, ScrollViewProps } from 'react-native';
-import Animated$1 from 'react-native-reanimated';
+import Reanimated from 'react-native-reanimated';
 
 type ListenerType = "numContainers" | "numContainersPooled" | `containerItemKey${number}` | `containerItemData${number}` | `containerPosition${number}` | `containerColumn${number}` | `containerSticky${number}` | `containerStickyOffset${number}` | "containersDidLayout" | "extraData" | "numColumns" | "lastItemKeys" | "totalSize" | "alignItemsPaddingTop" | "stylePaddingTop" | "scrollAdjust" | "scrollAdjustUserOffset" | "headerSize" | "footerSize" | "maintainVisibleContentPosition" | "debugRawScroll" | "debugComputedScroll" | "otherAxisSize" | "snapToOffsets" | "scrollSize";
 interface StateContext {
@@ -216,7 +216,7 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
     onStartReachedThreshold?: number | null | undefined;
     /**
      * Called when the sticky header changes.
-    */
+     */
     onStickyHeaderChange?: (info: {
         index: number;
         item: any;
@@ -280,11 +280,29 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
      * @default undefined
      */
     stickyIndices?: number[];
+    /**
+     * Configuration for sticky headers.
+     * @default undefined
+     */
+    stickyHeaderConfig?: StickyHeaderConfig;
     getItemType?: (item: ItemT, index: number) => TItemType;
     getFixedItemSize?: (index: number, item: ItemT, type: TItemType) => number | undefined;
     itemsAreEqual?: (itemPrevious: ItemT, item: ItemT, index: number, data: readonly ItemT[]) => boolean;
 }
-type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof ScrollView> | ComponentProps<typeof Animated.ScrollView> | ComponentProps<typeof Animated$1.ScrollView>, TItemType extends string | undefined = string | undefined> = BaseScrollViewProps<TScrollView> & LegendListSpecificProps<ItemT, TItemType> & (DataModeProps<ItemT, TItemType> | ChildrenModeProps);
+type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof ScrollView> | ComponentProps<typeof Animated.ScrollView> | ComponentProps<typeof Reanimated.ScrollView>, TItemType extends string | undefined = string | undefined> = BaseScrollViewProps<TScrollView> & LegendListSpecificProps<ItemT, TItemType> & (DataModeProps<ItemT, TItemType> | ChildrenModeProps);
+interface StickyHeaderConfig {
+    /**
+     * Specifies how far from the top edge sticky headers should start sticking.
+     * Useful for scenarios with a fixed navbar or header, where sticky elements pin below it..
+     * @default 0
+     */
+    offset?: number;
+    /**
+     * Component to render as a backdrop behind the sticky header.
+     * @default undefined
+     */
+    backdropComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
+}
 interface MaintainScrollAtEndOptions {
     onLayout?: boolean;
     onItemLayout?: boolean;
@@ -639,4 +657,4 @@ declare function useListScrollSize(): {
 };
 declare function useSyncLayout(): () => void;
 
-export { type ColumnWrapperStyle, type GetRenderedItem, type GetRenderedItemResult, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type MaintainScrollAtEndOptions, type OnViewableItemsChanged, type ScrollIndexWithOffset, type ScrollIndexWithOffsetPosition, type ScrollState, type TypedForwardRef, type TypedMemo, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, typedMemo, useIsLastItem, useListScrollSize, useRecyclingEffect, useRecyclingState, useSyncLayout, useViewability, useViewabilityAmount };
+export { type ColumnWrapperStyle, type GetRenderedItem, type GetRenderedItemResult, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type MaintainScrollAtEndOptions, type OnViewableItemsChanged, type ScrollIndexWithOffset, type ScrollIndexWithOffsetPosition, type ScrollState, type StickyHeaderConfig, type TypedForwardRef, type TypedMemo, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, typedMemo, useIsLastItem, useListScrollSize, useRecyclingEffect, useRecyclingState, useSyncLayout, useViewability, useViewabilityAmount };

package/index.d.ts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
 import { ComponentProps, Key, ReactNode, Dispatch, SetStateAction } from 'react';
 import { View, Animated, ScrollView, LayoutRectangle, ScrollViewComponent, ScrollResponderMixin, StyleProp, ViewStyle, NativeSyntheticEvent, NativeScrollEvent, ScrollViewProps } from 'react-native';
-import Animated$1 from 'react-native-reanimated';
+import Reanimated from 'react-native-reanimated';
 
 type ListenerType = "numContainers" | "numContainersPooled" | `containerItemKey${number}` | `containerItemData${number}` | `containerPosition${number}` | `containerColumn${number}` | `containerSticky${number}` | `containerStickyOffset${number}` | "containersDidLayout" | "extraData" | "numColumns" | "lastItemKeys" | "totalSize" | "alignItemsPaddingTop" | "stylePaddingTop" | "scrollAdjust" | "scrollAdjustUserOffset" | "headerSize" | "footerSize" | "maintainVisibleContentPosition" | "debugRawScroll" | "debugComputedScroll" | "otherAxisSize" | "snapToOffsets" | "scrollSize";
 interface StateContext {
@@ -216,7 +216,7 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
     onStartReachedThreshold?: number | null | undefined;
     /**
      * Called when the sticky header changes.
-    */
+     */
     onStickyHeaderChange?: (info: {
         index: number;
         item: any;
@@ -280,11 +280,29 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
      * @default undefined
      */
     stickyIndices?: number[];
+    /**
+     * Configuration for sticky headers.
+     * @default undefined
+     */
+    stickyHeaderConfig?: StickyHeaderConfig;
     getItemType?: (item: ItemT, index: number) => TItemType;
     getFixedItemSize?: (index: number, item: ItemT, type: TItemType) => number | undefined;
     itemsAreEqual?: (itemPrevious: ItemT, item: ItemT, index: number, data: readonly ItemT[]) => boolean;
 }
-type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof ScrollView> | ComponentProps<typeof Animated.ScrollView> | ComponentProps<typeof Animated$1.ScrollView>, TItemType extends string | undefined = string | undefined> = BaseScrollViewProps<TScrollView> & LegendListSpecificProps<ItemT, TItemType> & (DataModeProps<ItemT, TItemType> | ChildrenModeProps);
+type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof ScrollView> | ComponentProps<typeof Animated.ScrollView> | ComponentProps<typeof Reanimated.ScrollView>, TItemType extends string | undefined = string | undefined> = BaseScrollViewProps<TScrollView> & LegendListSpecificProps<ItemT, TItemType> & (DataModeProps<ItemT, TItemType> | ChildrenModeProps);
+interface StickyHeaderConfig {
+    /**
+     * Specifies how far from the top edge sticky headers should start sticking.
+     * Useful for scenarios with a fixed navbar or header, where sticky elements pin below it..
+     * @default 0
+     */
+    offset?: number;
+    /**
+     * Component to render as a backdrop behind the sticky header.
+     * @default undefined
+     */
+    backdropComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
+}
 interface MaintainScrollAtEndOptions {
     onLayout?: boolean;
     onItemLayout?: boolean;
@@ -639,4 +657,4 @@ declare function useListScrollSize(): {
 };
 declare function useSyncLayout(): () => void;
 
-export { type ColumnWrapperStyle, type GetRenderedItem, type GetRenderedItemResult, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type MaintainScrollAtEndOptions, type OnViewableItemsChanged, type ScrollIndexWithOffset, type ScrollIndexWithOffsetPosition, type ScrollState, type TypedForwardRef, type TypedMemo, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, typedMemo, useIsLastItem, useListScrollSize, useRecyclingEffect, useRecyclingState, useSyncLayout, useViewability, useViewabilityAmount };
+export { type ColumnWrapperStyle, type GetRenderedItem, type GetRenderedItemResult, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type MaintainScrollAtEndOptions, type OnViewableItemsChanged, type ScrollIndexWithOffset, type ScrollIndexWithOffsetPosition, type ScrollState, type StickyHeaderConfig, type TypedForwardRef, type TypedMemo, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, typedMemo, useIsLastItem, useListScrollSize, useRecyclingEffect, useRecyclingState, useSyncLayout, useViewability, useViewabilityAmount };

package/index.js

@@ -232,6 +232,15 @@ function useValue$(key, params) {
 }
 var typedForwardRef = React2.forwardRef;
 var typedMemo = React2.memo;
+var getComponent = (Component) => {
+  if (React2__namespace.isValidElement(Component)) {
+    return Component;
+  }
+  if (Component) {
+    return /* @__PURE__ */ React2__namespace.createElement(Component, null);
+  }
+  return null;
+};
 
 // src/components/PositionView.tsx
 var PositionViewState = typedMemo(function PositionView({
@@ -280,22 +289,42 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
   animatedScrollY,
   stickyOffset,
   index,
+  stickyHeaderConfig,
+  children,
   ...rest
 }) {
   const [position = POSITION_OUT_OF_VIEW, headerSize] = useArr$([`containerPosition${id}`, "headerSize"]);
   const transform = React2__namespace.useMemo(() => {
+    var _a;
     if (animatedScrollY && stickyOffset !== void 0) {
+      const stickyOffset2 = (_a = stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.offset) != null ? _a : 0;
       const stickyPosition = animatedScrollY.interpolate({
         extrapolateLeft: "clamp",
         extrapolateRight: "extend",
-        inputRange: [position + headerSize, position + 5e3 + headerSize],
+        inputRange: [position + headerSize - stickyOffset2, position + 5e3 + headerSize - stickyOffset2],
         outputRange: [position, position + 5e3]
       });
       return horizontal ? [{ translateX: stickyPosition }] : [{ translateY: stickyPosition }];
     }
-  }, [animatedScrollY, headerSize, horizontal, stickyOffset, position]);
+  }, [animatedScrollY, headerSize, horizontal, stickyOffset, position, stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.offset]);
   const viewStyle = React2__namespace.useMemo(() => [style, { zIndex: index + 1e3 }, { transform }], [style, transform]);
-  return /* @__PURE__ */ React2__namespace.createElement(reactNative.Animated.View, { ref: refView, style: viewStyle, ...rest });
+  const renderStickyHeaderBackdrop = React2__namespace.useMemo(() => {
+    if (!(stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.backdropComponent)) {
+      return null;
+    }
+    return /* @__PURE__ */ React2__namespace.createElement(
+      reactNative.View,
+      {
+        style: {
+          inset: 0,
+          pointerEvents: "none",
+          position: "absolute"
+        }
+      },
+      getComponent(stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.backdropComponent)
+    );
+  }, [stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.backdropComponent]);
+  return /* @__PURE__ */ React2__namespace.createElement(reactNative.Animated.View, { ref: refView, style: viewStyle, ...rest }, renderStickyHeaderBackdrop, children);
 });
 var PositionView3 = IsNewArchitecture ? PositionViewState : PositionViewAnimated;
 var symbolFirst = Symbol();
@@ -481,7 +510,8 @@ var Container = typedMemo(function Container2({
   horizontal,
   getRenderedItem: getRenderedItem2,
   updateItemSize: updateItemSize2,
-  ItemSeparatorComponent
+  ItemSeparatorComponent,
+  stickyHeaderConfig
 }) {
   const ctx = useStateContext();
   const { columnWrapperStyle, animatedScrollY } = ctx;
@@ -580,6 +610,7 @@ var Container = typedMemo(function Container2({
   if (!IsNewArchitecture) {
     React2.useEffect(() => {
       if (!isNullOrUndefined(itemKey)) {
+        didLayoutRef.current = false;
         const timeout = setTimeout(() => {
           if (!didLayoutRef.current && refLastSize.current) {
             updateItemSize2(itemKey, refLastSize.current);
@@ -603,6 +634,7 @@ var Container = typedMemo(function Container2({
       key: recycleItems ? void 0 : itemKey,
       onLayout,
       refView: ref,
+      stickyHeaderConfig,
       stickyOffset: isSticky ? stickyOffset : void 0,
       style
     },
@@ -617,7 +649,8 @@ var Containers = typedMemo(function Containers2({
   ItemSeparatorComponent,
   waitForInitialLayout,
   updateItemSize: updateItemSize2,
-  getRenderedItem: getRenderedItem2
+  getRenderedItem: getRenderedItem2,
+  stickyHeaderConfig
 }) {
   const ctx = useStateContext();
   const columnWrapperStyle = ctx.columnWrapperStyle;
@@ -644,6 +677,7 @@ var Containers = typedMemo(function Containers2({
           id: i,
           key: i,
           recycleItems,
+          stickyHeaderConfig,
           updateItemSize: updateItemSize2
         }
       )
@@ -700,15 +734,6 @@ function SnapWrapper({ ScrollComponent, ...props }) {
 }
 
 // src/components/ListComponent.tsx
-var getComponent = (Component) => {
-  if (React2__namespace.isValidElement(Component)) {
-    return Component;
-  }
-  if (Component) {
-    return /* @__PURE__ */ React2__namespace.createElement(Component, null);
-  }
-  return null;
-};
 var Padding = () => {
   const animPaddingTop = useValue$("alignItemsPaddingTop", { delay: 0 });
   return /* @__PURE__ */ React2__namespace.createElement(reactNative.Animated.View, { style: { paddingTop: animPaddingTop } });
@@ -755,6 +780,7 @@ var ListComponent = typedMemo(function ListComponent2({
   onLayoutHeader,
   snapToIndices,
   stickyIndices,
+  stickyHeaderConfig,
   ...rest
 }) {
   const ctx = useStateContext();
@@ -800,6 +826,7 @@ var ListComponent = typedMemo(function ListComponent2({
         horizontal,
         ItemSeparatorComponent,
         recycleItems,
+        stickyHeaderConfig,
         updateItemSize: updateItemSize2,
         waitForInitialLayout
       }
@@ -2412,8 +2439,17 @@ function onScroll(ctx, state, event) {
   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 newScroll = event.nativeEvent.contentOffset[state.props.horizontal ? "x" : "y"];
+  let newScroll = event.nativeEvent.contentOffset[state.props.horizontal ? "x" : "y"];
   state.scrollPending = newScroll;
+  console.log("newScroll", newScroll);
+  const maxOffset = Math.max(0, getContentSize(ctx) - state.scrollLength);
+  if (state.initialScroll && newScroll > maxOffset) {
+    newScroll = maxOffset;
+    scrollTo(state, {
+      noScrollingTo: true,
+      offset: newScroll
+    });
+  }
   updateScroll(ctx, state, newScroll);
   onScrollProp == null ? void 0 : onScrollProp(event);
 }
@@ -2787,6 +2823,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     viewabilityConfig,
     viewabilityConfigCallbackPairs,
     waitForInitialLayout = true,
+    stickyHeaderConfig,
     ...rest
   } = props;
   const { childrenMode } = rest;
@@ -3188,6 +3225,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       scrollAdjustHandler: (_a = refState.current) == null ? void 0 : _a.scrollAdjustHandler,
       scrollEventThrottle: reactNative.Platform.OS === "web" ? 16 : void 0,
       snapToIndices,
+      stickyHeaderConfig,
       stickyIndices,
       style,
       updateItemSize: fns.updateItemSize,

package/index.mjs

@@ -211,6 +211,15 @@ function useValue$(key, params) {
 }
 var typedForwardRef = forwardRef;
 var typedMemo = memo;
+var getComponent = (Component) => {
+  if (React2.isValidElement(Component)) {
+    return Component;
+  }
+  if (Component) {
+    return /* @__PURE__ */ React2.createElement(Component, null);
+  }
+  return null;
+};
 
 // src/components/PositionView.tsx
 var PositionViewState = typedMemo(function PositionView({
@@ -259,22 +268,42 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
   animatedScrollY,
   stickyOffset,
   index,
+  stickyHeaderConfig,
+  children,
   ...rest
 }) {
   const [position = POSITION_OUT_OF_VIEW, headerSize] = useArr$([`containerPosition${id}`, "headerSize"]);
   const transform = React2.useMemo(() => {
+    var _a;
     if (animatedScrollY && stickyOffset !== void 0) {
+      const stickyOffset2 = (_a = stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.offset) != null ? _a : 0;
       const stickyPosition = animatedScrollY.interpolate({
         extrapolateLeft: "clamp",
         extrapolateRight: "extend",
-        inputRange: [position + headerSize, position + 5e3 + headerSize],
+        inputRange: [position + headerSize - stickyOffset2, position + 5e3 + headerSize - stickyOffset2],
         outputRange: [position, position + 5e3]
       });
       return horizontal ? [{ translateX: stickyPosition }] : [{ translateY: stickyPosition }];
     }
-  }, [animatedScrollY, headerSize, horizontal, stickyOffset, position]);
+  }, [animatedScrollY, headerSize, horizontal, stickyOffset, position, stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.offset]);
   const viewStyle = React2.useMemo(() => [style, { zIndex: index + 1e3 }, { transform }], [style, transform]);
-  return /* @__PURE__ */ React2.createElement(Animated.View, { ref: refView, style: viewStyle, ...rest });
+  const renderStickyHeaderBackdrop = React2.useMemo(() => {
+    if (!(stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.backdropComponent)) {
+      return null;
+    }
+    return /* @__PURE__ */ React2.createElement(
+      View,
+      {
+        style: {
+          inset: 0,
+          pointerEvents: "none",
+          position: "absolute"
+        }
+      },
+      getComponent(stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.backdropComponent)
+    );
+  }, [stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.backdropComponent]);
+  return /* @__PURE__ */ React2.createElement(Animated.View, { ref: refView, style: viewStyle, ...rest }, renderStickyHeaderBackdrop, children);
 });
 var PositionView3 = IsNewArchitecture ? PositionViewState : PositionViewAnimated;
 var symbolFirst = Symbol();
@@ -460,7 +489,8 @@ var Container = typedMemo(function Container2({
   horizontal,
   getRenderedItem: getRenderedItem2,
   updateItemSize: updateItemSize2,
-  ItemSeparatorComponent
+  ItemSeparatorComponent,
+  stickyHeaderConfig
 }) {
   const ctx = useStateContext();
   const { columnWrapperStyle, animatedScrollY } = ctx;
@@ -559,6 +589,7 @@ var Container = typedMemo(function Container2({
   if (!IsNewArchitecture) {
     useEffect(() => {
       if (!isNullOrUndefined(itemKey)) {
+        didLayoutRef.current = false;
         const timeout = setTimeout(() => {
           if (!didLayoutRef.current && refLastSize.current) {
             updateItemSize2(itemKey, refLastSize.current);
@@ -582,6 +613,7 @@ var Container = typedMemo(function Container2({
       key: recycleItems ? void 0 : itemKey,
       onLayout,
       refView: ref,
+      stickyHeaderConfig,
       stickyOffset: isSticky ? stickyOffset : void 0,
       style
     },
@@ -596,7 +628,8 @@ var Containers = typedMemo(function Containers2({
   ItemSeparatorComponent,
   waitForInitialLayout,
   updateItemSize: updateItemSize2,
-  getRenderedItem: getRenderedItem2
+  getRenderedItem: getRenderedItem2,
+  stickyHeaderConfig
 }) {
   const ctx = useStateContext();
   const columnWrapperStyle = ctx.columnWrapperStyle;
@@ -623,6 +656,7 @@ var Containers = typedMemo(function Containers2({
           id: i,
           key: i,
           recycleItems,
+          stickyHeaderConfig,
           updateItemSize: updateItemSize2
         }
       )
@@ -679,15 +713,6 @@ function SnapWrapper({ ScrollComponent, ...props }) {
 }
 
 // src/components/ListComponent.tsx
-var getComponent = (Component) => {
-  if (React2.isValidElement(Component)) {
-    return Component;
-  }
-  if (Component) {
-    return /* @__PURE__ */ React2.createElement(Component, null);
-  }
-  return null;
-};
 var Padding = () => {
   const animPaddingTop = useValue$("alignItemsPaddingTop", { delay: 0 });
   return /* @__PURE__ */ React2.createElement(Animated.View, { style: { paddingTop: animPaddingTop } });
@@ -734,6 +759,7 @@ var ListComponent = typedMemo(function ListComponent2({
   onLayoutHeader,
   snapToIndices,
   stickyIndices,
+  stickyHeaderConfig,
   ...rest
 }) {
   const ctx = useStateContext();
@@ -779,6 +805,7 @@ var ListComponent = typedMemo(function ListComponent2({
         horizontal,
         ItemSeparatorComponent,
         recycleItems,
+        stickyHeaderConfig,
         updateItemSize: updateItemSize2,
         waitForInitialLayout
       }
@@ -2391,8 +2418,17 @@ function onScroll(ctx, state, event) {
   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 newScroll = event.nativeEvent.contentOffset[state.props.horizontal ? "x" : "y"];
+  let newScroll = event.nativeEvent.contentOffset[state.props.horizontal ? "x" : "y"];
   state.scrollPending = newScroll;
+  console.log("newScroll", newScroll);
+  const maxOffset = Math.max(0, getContentSize(ctx) - state.scrollLength);
+  if (state.initialScroll && newScroll > maxOffset) {
+    newScroll = maxOffset;
+    scrollTo(state, {
+      noScrollingTo: true,
+      offset: newScroll
+    });
+  }
   updateScroll(ctx, state, newScroll);
   onScrollProp == null ? void 0 : onScrollProp(event);
 }
@@ -2766,6 +2802,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     viewabilityConfig,
     viewabilityConfigCallbackPairs,
     waitForInitialLayout = true,
+    stickyHeaderConfig,
     ...rest
   } = props;
   const { childrenMode } = rest;
@@ -3167,6 +3204,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       scrollAdjustHandler: (_a = refState.current) == null ? void 0 : _a.scrollAdjustHandler,
       scrollEventThrottle: Platform.OS === "web" ? 16 : void 0,
       snapToIndices,
+      stickyHeaderConfig,
       stickyIndices,
       style,
       updateItemSize: fns.updateItemSize,

package/keyboard.js

@@ -26,21 +26,48 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
+// src/integrations/keyboard.tsx
+
+// src/utils/helpers.ts
+function isFunction(obj) {
+  return typeof obj === "function";
+}
+
+// src/hooks/useCombinedRef.ts
+var useCombinedRef = (...refs) => {
+  const callback = React.useCallback((element) => {
+    for (const ref of refs) {
+      if (!ref) {
+        continue;
+      }
+      if (isFunction(ref)) {
+        ref(element);
+      } else {
+        ref.current = element;
+      }
+    }
+  }, refs);
+  return callback;
+};
+
 // src/integrations/keyboard.tsx
 var KeyboardAvoidingLegendList = React.forwardRef(function KeyboardAvoidingLegendList2(props, forwardedRef) {
   const {
     contentInset: contentInsetProp,
     horizontal,
     onScroll: onScrollProp,
-    scrollEventThrottle,
     safeAreaInsetBottom = 0,
     ...rest
   } = props;
-  const resolvedScrollEventThrottle = scrollEventThrottle != null ? scrollEventThrottle : 16;
+  const refLegendList = React.useRef(null);
+  const combinedRef = useCombinedRef(forwardedRef, refLegendList);
   const scrollViewRef = reactNativeReanimated.useAnimatedRef();
   const scrollOffsetY = reactNativeReanimated.useSharedValue(0);
+  const animatedOffsetY = reactNativeReanimated.useSharedValue(null);
   const scrollOffsetAtKeyboardStart = reactNativeReanimated.useSharedValue(0);
   const keyboardInset = reactNativeReanimated.useSharedValue(0);
+  const keyboardHeight = reactNativeReanimated.useSharedValue(0);
+  const isOpening = reactNativeReanimated.useSharedValue(false);
   const scrollHandler = reactNativeReanimated.useAnimatedScrollHandler(
     (event) => {
       scrollOffsetY.value = event.contentOffset[horizontal ? "x" : "y"];
@@ -50,46 +77,71 @@ var KeyboardAvoidingLegendList = React.forwardRef(function KeyboardAvoidingLegen
     },
     [onScrollProp, horizontal]
   );
+  const setScrollProcessingEnabled = React.useCallback(
+    (enabled) => {
+      var _a;
+      (_a = refLegendList.current) == null ? void 0 : _a.setScrollProcessingEnabled(enabled);
+    },
+    [refLegendList]
+  );
   reactNativeKeyboardController.useKeyboardHandler(
     // biome-ignore assist/source/useSortedKeys: prefer start/move/end
     {
-      onStart: () => {
+      onStart: (event) => {
         "worklet";
+        if (event.height > 0) {
+          keyboardHeight.set(event.height - safeAreaInsetBottom);
+        }
+        isOpening.set(event.progress > 0);
         scrollOffsetAtKeyboardStart.value = scrollOffsetY.value;
+        animatedOffsetY.set(scrollOffsetY.value);
+        reactNativeReanimated.runOnJS(setScrollProcessingEnabled)(false);
       },
       onMove: (event) => {
         "worklet";
-        const targetOffset = scrollOffsetAtKeyboardStart.value + event.height;
+        const vIsOpening = isOpening.get();
+        const vKeyboardHeight = keyboardHeight.get();
+        const vProgress = vIsOpening ? event.progress : 1 - event.progress;
+        const targetOffset = scrollOffsetAtKeyboardStart.value + (vIsOpening ? vKeyboardHeight : -vKeyboardHeight) * vProgress;
         scrollOffsetY.value = targetOffset;
-        reactNativeReanimated.scrollTo(scrollViewRef, 0, targetOffset, false);
+        animatedOffsetY.set(targetOffset);
         if (!horizontal) {
           keyboardInset.value = Math.max(0, event.height - safeAreaInsetBottom);
         }
       },
       onEnd: (event) => {
         "worklet";
-        const targetOffset = scrollOffsetAtKeyboardStart.value + event.height;
+        const vIsOpening = isOpening.get();
+        const vKeyboardHeight = keyboardHeight.get();
+        const targetOffset = scrollOffsetAtKeyboardStart.value + (vIsOpening ? vKeyboardHeight : -vKeyboardHeight) * (vIsOpening ? event.progress : 1 - event.progress);
         scrollOffsetY.value = targetOffset;
-        reactNativeReanimated.scrollTo(scrollViewRef, 0, targetOffset, false);
+        animatedOffsetY.set(targetOffset);
         if (!horizontal) {
           keyboardInset.value = Math.max(0, event.height - safeAreaInsetBottom);
         }
+        reactNativeReanimated.runOnJS(setScrollProcessingEnabled)(true);
       }
     },
     [scrollViewRef, safeAreaInsetBottom]
   );
-  const animatedProps = reactNative.Platform.OS === "ios" ? reactNativeReanimated.useAnimatedProps(() => {
+  const animatedProps = reactNativeReanimated.useAnimatedProps(() => {
     "worklet";
     var _a, _b, _c, _d;
-    return {
+    const baseProps = {
+      contentOffset: animatedOffsetY.value === null ? void 0 : {
+        x: 0,
+        y: animatedOffsetY.value
+      }
+    };
+    return reactNative.Platform.OS === "ios" ? Object.assign(baseProps, {
       contentInset: {
         bottom: ((_a = contentInsetProp == null ? void 0 : contentInsetProp.bottom) != null ? _a : 0) + (horizontal ? 0 : keyboardInset.value),
         left: (_b = contentInsetProp == null ? void 0 : contentInsetProp.left) != null ? _b : 0,
         right: (_c = contentInsetProp == null ? void 0 : contentInsetProp.right) != null ? _c : 0,
         top: (_d = contentInsetProp == null ? void 0 : contentInsetProp.top) != null ? _d : 0
       }
-    };
-  }) : void 0;
+    }) : baseProps;
+  });
   const style = reactNative.Platform.OS !== "ios" ? reactNativeReanimated.useAnimatedStyle(() => ({
     marginBottom: keyboardInset.value
   })) : void 0;
@@ -100,9 +152,8 @@ var KeyboardAvoidingLegendList = React.forwardRef(function KeyboardAvoidingLegen
       animatedProps,
       keyboardDismissMode: "interactive",
       onScroll: scrollHandler,
-      ref: forwardedRef,
+      ref: combinedRef,
       refScrollView: scrollViewRef,
-      scrollEventThrottle: resolvedScrollEventThrottle,
       scrollIndicatorInsets: { bottom: 0, top: 0 },
       style
     }

package/keyboard.mjs

@@ -1,25 +1,52 @@
 import * as React from 'react';
-import { forwardRef } from 'react';
+import { forwardRef, useRef, useCallback } from 'react';
 import { Platform } from 'react-native';
 import { useKeyboardHandler } from 'react-native-keyboard-controller';
-import { useAnimatedRef, useSharedValue, useAnimatedScrollHandler, runOnJS, scrollTo, useAnimatedProps, useAnimatedStyle } from 'react-native-reanimated';
+import { useAnimatedRef, useSharedValue, useAnimatedScrollHandler, runOnJS, useAnimatedProps, useAnimatedStyle } from 'react-native-reanimated';
 import { AnimatedLegendList } from '@legendapp/list/reanimated';
 
+// src/integrations/keyboard.tsx
+
+// src/utils/helpers.ts
+function isFunction(obj) {
+  return typeof obj === "function";
+}
+
+// src/hooks/useCombinedRef.ts
+var useCombinedRef = (...refs) => {
+  const callback = useCallback((element) => {
+    for (const ref of refs) {
+      if (!ref) {
+        continue;
+      }
+      if (isFunction(ref)) {
+        ref(element);
+      } else {
+        ref.current = element;
+      }
+    }
+  }, refs);
+  return callback;
+};
+
 // src/integrations/keyboard.tsx
 var KeyboardAvoidingLegendList = forwardRef(function KeyboardAvoidingLegendList2(props, forwardedRef) {
   const {
     contentInset: contentInsetProp,
     horizontal,
     onScroll: onScrollProp,
-    scrollEventThrottle,
     safeAreaInsetBottom = 0,
     ...rest
   } = props;
-  const resolvedScrollEventThrottle = scrollEventThrottle != null ? scrollEventThrottle : 16;
+  const refLegendList = useRef(null);
+  const combinedRef = useCombinedRef(forwardedRef, refLegendList);
   const scrollViewRef = useAnimatedRef();
   const scrollOffsetY = useSharedValue(0);
+  const animatedOffsetY = useSharedValue(null);
   const scrollOffsetAtKeyboardStart = useSharedValue(0);
   const keyboardInset = useSharedValue(0);
+  const keyboardHeight = useSharedValue(0);
+  const isOpening = useSharedValue(false);
   const scrollHandler = useAnimatedScrollHandler(
     (event) => {
       scrollOffsetY.value = event.contentOffset[horizontal ? "x" : "y"];
@@ -29,46 +56,71 @@ var KeyboardAvoidingLegendList = forwardRef(function KeyboardAvoidingLegendList2
     },
     [onScrollProp, horizontal]
   );
+  const setScrollProcessingEnabled = useCallback(
+    (enabled) => {
+      var _a;
+      (_a = refLegendList.current) == null ? void 0 : _a.setScrollProcessingEnabled(enabled);
+    },
+    [refLegendList]
+  );
   useKeyboardHandler(
     // biome-ignore assist/source/useSortedKeys: prefer start/move/end
     {
-      onStart: () => {
+      onStart: (event) => {
         "worklet";
+        if (event.height > 0) {
+          keyboardHeight.set(event.height - safeAreaInsetBottom);
+        }
+        isOpening.set(event.progress > 0);
         scrollOffsetAtKeyboardStart.value = scrollOffsetY.value;
+        animatedOffsetY.set(scrollOffsetY.value);
+        runOnJS(setScrollProcessingEnabled)(false);
       },
       onMove: (event) => {
         "worklet";
-        const targetOffset = scrollOffsetAtKeyboardStart.value + event.height;
+        const vIsOpening = isOpening.get();
+        const vKeyboardHeight = keyboardHeight.get();
+        const vProgress = vIsOpening ? event.progress : 1 - event.progress;
+        const targetOffset = scrollOffsetAtKeyboardStart.value + (vIsOpening ? vKeyboardHeight : -vKeyboardHeight) * vProgress;
         scrollOffsetY.value = targetOffset;
-        scrollTo(scrollViewRef, 0, targetOffset, false);
+        animatedOffsetY.set(targetOffset);
         if (!horizontal) {
           keyboardInset.value = Math.max(0, event.height - safeAreaInsetBottom);
         }
       },
       onEnd: (event) => {
         "worklet";
-        const targetOffset = scrollOffsetAtKeyboardStart.value + event.height;
+        const vIsOpening = isOpening.get();
+        const vKeyboardHeight = keyboardHeight.get();
+        const targetOffset = scrollOffsetAtKeyboardStart.value + (vIsOpening ? vKeyboardHeight : -vKeyboardHeight) * (vIsOpening ? event.progress : 1 - event.progress);
         scrollOffsetY.value = targetOffset;
-        scrollTo(scrollViewRef, 0, targetOffset, false);
+        animatedOffsetY.set(targetOffset);
         if (!horizontal) {
           keyboardInset.value = Math.max(0, event.height - safeAreaInsetBottom);
         }
+        runOnJS(setScrollProcessingEnabled)(true);
       }
     },
     [scrollViewRef, safeAreaInsetBottom]
   );
-  const animatedProps = Platform.OS === "ios" ? useAnimatedProps(() => {
+  const animatedProps = useAnimatedProps(() => {
     "worklet";
     var _a, _b, _c, _d;
-    return {
+    const baseProps = {
+      contentOffset: animatedOffsetY.value === null ? void 0 : {
+        x: 0,
+        y: animatedOffsetY.value
+      }
+    };
+    return Platform.OS === "ios" ? Object.assign(baseProps, {
       contentInset: {
         bottom: ((_a = contentInsetProp == null ? void 0 : contentInsetProp.bottom) != null ? _a : 0) + (horizontal ? 0 : keyboardInset.value),
         left: (_b = contentInsetProp == null ? void 0 : contentInsetProp.left) != null ? _b : 0,
         right: (_c = contentInsetProp == null ? void 0 : contentInsetProp.right) != null ? _c : 0,
         top: (_d = contentInsetProp == null ? void 0 : contentInsetProp.top) != null ? _d : 0
       }
-    };
-  }) : void 0;
+    }) : baseProps;
+  });
   const style = Platform.OS !== "ios" ? useAnimatedStyle(() => ({
     marginBottom: keyboardInset.value
   })) : void 0;
@@ -79,9 +131,8 @@ var KeyboardAvoidingLegendList = forwardRef(function KeyboardAvoidingLegendList2
       animatedProps,
       keyboardDismissMode: "interactive",
       onScroll: scrollHandler,
-      ref: forwardedRef,
+      ref: combinedRef,
       refScrollView: scrollViewRef,
-      scrollEventThrottle: resolvedScrollEventThrottle,
       scrollIndicatorInsets: { bottom: 0, top: 0 },
       style
     }

package/package.json

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

package/reanimated.d.mts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { ComponentProps } from 'react';
-import Animated from 'react-native-reanimated';
+import Reanimated from 'react-native-reanimated';
 import { LegendListPropsBase, LegendListRef } from '@legendapp/list';
 
 type KeysToOmit = "getEstimatedItemSize" | "getFixedItemSize" | "getItemType" | "keyExtractor" | "animatedProps" | "renderItem" | "onItemSizeChanged" | "itemsAreEqual" | "ItemSeparatorComponent";
-type PropsBase<ItemT> = LegendListPropsBase<ItemT, ComponentProps<typeof Animated.ScrollView>>;
+type PropsBase<ItemT> = LegendListPropsBase<ItemT, ComponentProps<typeof Reanimated.ScrollView>>;
 interface AnimatedLegendListPropsBase<ItemT> extends Omit<PropsBase<ItemT>, KeysToOmit> {
-    refScrollView?: React.Ref<Animated.ScrollView>;
+    refScrollView?: React.Ref<Reanimated.ScrollView>;
 }
 type OtherAnimatedLegendListProps<ItemT> = Pick<PropsBase<ItemT>, KeysToOmit>;
 type AnimatedLegendListProps<ItemT> = Omit<AnimatedLegendListPropsBase<ItemT>, "refLegendList" | "ref"> & OtherAnimatedLegendListProps<ItemT>;

package/reanimated.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { ComponentProps } from 'react';
-import Animated from 'react-native-reanimated';
+import Reanimated from 'react-native-reanimated';
 import { LegendListPropsBase, LegendListRef } from '@legendapp/list';
 
 type KeysToOmit = "getEstimatedItemSize" | "getFixedItemSize" | "getItemType" | "keyExtractor" | "animatedProps" | "renderItem" | "onItemSizeChanged" | "itemsAreEqual" | "ItemSeparatorComponent";
-type PropsBase<ItemT> = LegendListPropsBase<ItemT, ComponentProps<typeof Animated.ScrollView>>;
+type PropsBase<ItemT> = LegendListPropsBase<ItemT, ComponentProps<typeof Reanimated.ScrollView>>;
 interface AnimatedLegendListPropsBase<ItemT> extends Omit<PropsBase<ItemT>, KeysToOmit> {
-    refScrollView?: React.Ref<Animated.ScrollView>;
+    refScrollView?: React.Ref<Reanimated.ScrollView>;
 }
 type OtherAnimatedLegendListProps<ItemT> = Pick<PropsBase<ItemT>, KeysToOmit>;
 type AnimatedLegendListProps<ItemT> = Omit<AnimatedLegendListPropsBase<ItemT>, "refLegendList" | "ref"> & OtherAnimatedLegendListProps<ItemT>;

package/reanimated.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var Animated = require('react-native-reanimated');
+var Reanimated = require('react-native-reanimated');
 var list = require('@legendapp/list');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -25,7 +25,7 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var Animated__default = /*#__PURE__*/_interopDefault(Animated);
+var Reanimated__default = /*#__PURE__*/_interopDefault(Reanimated);
 
 // src/integrations/reanimated.tsx
 
@@ -65,7 +65,7 @@ var LegendListForwardedRef = typedMemo(
     return /* @__PURE__ */ React__namespace.createElement(list.LegendList, { ref: refFn, refScrollView: ref, ...rest });
   })
 );
-var AnimatedLegendListComponent = Animated__default.default.createAnimatedComponent(LegendListForwardedRef);
+var AnimatedLegendListComponent = Reanimated__default.default.createAnimatedComponent(LegendListForwardedRef);
 var AnimatedLegendList = typedMemo(
   React__namespace.forwardRef(function AnimatedLegendList2(props, ref) {
     const { refScrollView, ...rest } = props;

package/reanimated.mjs

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useCallback, memo } from 'react';
-import Animated from 'react-native-reanimated';
+import Reanimated from 'react-native-reanimated';
 import { LegendList } from '@legendapp/list';
 
 // src/integrations/reanimated.tsx
@@ -41,7 +41,7 @@ var LegendListForwardedRef = typedMemo(
     return /* @__PURE__ */ React.createElement(LegendList, { ref: refFn, refScrollView: ref, ...rest });
   })
 );
-var AnimatedLegendListComponent = Animated.createAnimatedComponent(LegendListForwardedRef);
+var AnimatedLegendListComponent = Reanimated.createAnimatedComponent(LegendListForwardedRef);
 var AnimatedLegendList = typedMemo(
   React.forwardRef(function AnimatedLegendList2(props, ref) {
     const { refScrollView, ...rest } = props;