@legendapp/list 2.0.14 → 2.0.15

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 2.0.15
+- Fix: Container allocation for sticky headers could duplicate containers, causing rendering issues
+- Fix: Sticky positioned components scrolling out of viewport after scrolling distance exceeded 5000
+
 ## 2.0.14
 - Feat: Add dataVersion prop to trigger re-render when mutating the data array in place
 

package/index.d.mts

@@ -246,6 +246,7 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
     refreshing?: boolean;
     /**
      * Render custom ScrollView component.
+     * Note: When using `stickyHeaderIndices`, you must provide an Animated ScrollView component.
      * @default (props) => <ScrollView {...props} />
      */
     renderScrollComponent?: (props: ScrollViewProps) => React.ReactElement<ScrollViewProps>;

package/index.d.ts

@@ -246,6 +246,7 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
     refreshing?: boolean;
     /**
      * Render custom ScrollView component.
+     * Note: When using `stickyHeaderIndices`, you must provide an Animated ScrollView component.
      * @default (props) => <ScrollView {...props} />
      */
     renderScrollComponent?: (props: ScrollViewProps) => React.ReactElement<ScrollViewProps>;

package/index.js

@@ -286,7 +286,8 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
   const transform = React2__namespace.useMemo(() => {
     if (animatedScrollY && stickyOffset !== void 0) {
       const stickyPosition = animatedScrollY.interpolate({
-        extrapolate: "clamp",
+        extrapolateLeft: "clamp",
+        extrapolateRight: "extend",
         inputRange: [position + headerSize, position + 5e3 + headerSize],
         outputRange: [position, position + 5e3]
       });
@@ -1549,7 +1550,7 @@ function findAvailableContainers(ctx, state, numNeeded, startBuffered, endBuffer
     for (const containerIndex of stickyContainerPool) {
       const key = peek$(ctx, `containerItemKey${containerIndex}`);
       const isPendingRemoval = pendingRemovalSet.has(containerIndex);
-      if ((key === void 0 || isPendingRemoval) && canReuseContainer(containerIndex, requiredType)) {
+      if ((key === void 0 || isPendingRemoval) && canReuseContainer(containerIndex, requiredType) && !result.includes(containerIndex)) {
         result.push(containerIndex);
         if (isPendingRemoval && pendingRemovalSet.delete(containerIndex)) {
           pendingRemovalChanged = true;

package/index.mjs

@@ -265,7 +265,8 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
   const transform = React2.useMemo(() => {
     if (animatedScrollY && stickyOffset !== void 0) {
       const stickyPosition = animatedScrollY.interpolate({
-        extrapolate: "clamp",
+        extrapolateLeft: "clamp",
+        extrapolateRight: "extend",
         inputRange: [position + headerSize, position + 5e3 + headerSize],
         outputRange: [position, position + 5e3]
       });
@@ -1528,7 +1529,7 @@ function findAvailableContainers(ctx, state, numNeeded, startBuffered, endBuffer
     for (const containerIndex of stickyContainerPool) {
       const key = peek$(ctx, `containerItemKey${containerIndex}`);
       const isPendingRemoval = pendingRemovalSet.has(containerIndex);
-      if ((key === void 0 || isPendingRemoval) && canReuseContainer(containerIndex, requiredType)) {
+      if ((key === void 0 || isPendingRemoval) && canReuseContainer(containerIndex, requiredType) && !result.includes(containerIndex)) {
         result.push(containerIndex);
         if (isPendingRemoval && pendingRemovalSet.delete(containerIndex)) {
           pendingRemovalChanged = true;

package/package.json

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