@legendapp/list 2.0.14 → 2.0.16

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 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
+- Fix: Suppress keyExtractor warning when using lazy list mode #330
+
+## 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;
@@ -1571,14 +1572,14 @@ function findAvailableContainers(ctx, state, numNeeded, startBuffered, endBuffer
       continue;
     }
     const key = peek$(ctx, `containerItemKey${u}`);
-    let isOk = key === void 0;
-    if (!isOk && pendingRemovalSet.has(u)) {
-      pendingRemovalSet.delete(u);
-      pendingRemovalChanged = true;
-      const requiredType = neededTypes[typeIndex];
-      isOk = canReuseContainer(u, requiredType);
-    }
-    if (isOk) {
+    const requiredType = neededTypes[typeIndex];
+    const isPending = key !== void 0 && pendingRemovalSet.has(u);
+    const canUse = key === void 0 || isPending && canReuseContainer(u, requiredType);
+    if (canUse) {
+      if (isPending) {
+        pendingRemovalSet.delete(u);
+        pendingRemovalChanged = true;
+      }
       result.push(u);
       if (requiredItemTypes) {
         typeIndex++;
@@ -2721,6 +2722,7 @@ var LegendList = typedMemo(
     const isChildrenMode = children !== void 0 && dataProp === void 0;
     const processedProps = isChildrenMode ? {
       ...restProps,
+      childrenMode: true,
       data: (isArray(children) ? children : React2__namespace.Children.toArray(children)).flat(1),
       renderItem: ({ item }) => item
     } : {
@@ -2787,6 +2789,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     waitForInitialLayout = true,
     ...rest
   } = props;
+  const { childrenMode } = rest;
   const [renderNum, setRenderNum] = React2.useState(0);
   const initialScroll = initialScrollIndexProp || initialScrollOffsetProp ? typeof initialScrollIndexProp === "object" ? { index: initialScrollIndexProp.index || 0, viewOffset: initialScrollIndexProp.viewOffset || 0 } : { index: initialScrollIndexProp || 0, viewOffset: initialScrollOffsetProp || 0 } : void 0;
   const [canRender, setCanRender] = React2__namespace.useState(!IsNewArchitecture);
@@ -2959,7 +2962,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   if (isFirst || didDataChange || numColumnsProp !== peek$(ctx, "numColumns")) {
     refState.current.lastBatchingAction = Date.now();
     if (!keyExtractorProp && !isFirst && didDataChange) {
-      __DEV__ && warnDevOnce(
+      __DEV__ && !childrenMode && warnDevOnce(
         "keyExtractor",
         "Changing data without a keyExtractor can cause slow performance and resetting scroll. If your list data can change you should use a keyExtractor with a unique id for best performance and behavior."
       );

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;
@@ -1550,14 +1551,14 @@ function findAvailableContainers(ctx, state, numNeeded, startBuffered, endBuffer
       continue;
     }
     const key = peek$(ctx, `containerItemKey${u}`);
-    let isOk = key === void 0;
-    if (!isOk && pendingRemovalSet.has(u)) {
-      pendingRemovalSet.delete(u);
-      pendingRemovalChanged = true;
-      const requiredType = neededTypes[typeIndex];
-      isOk = canReuseContainer(u, requiredType);
-    }
-    if (isOk) {
+    const requiredType = neededTypes[typeIndex];
+    const isPending = key !== void 0 && pendingRemovalSet.has(u);
+    const canUse = key === void 0 || isPending && canReuseContainer(u, requiredType);
+    if (canUse) {
+      if (isPending) {
+        pendingRemovalSet.delete(u);
+        pendingRemovalChanged = true;
+      }
       result.push(u);
       if (requiredItemTypes) {
         typeIndex++;
@@ -2700,6 +2701,7 @@ var LegendList = typedMemo(
     const isChildrenMode = children !== void 0 && dataProp === void 0;
     const processedProps = isChildrenMode ? {
       ...restProps,
+      childrenMode: true,
       data: (isArray(children) ? children : React2.Children.toArray(children)).flat(1),
       renderItem: ({ item }) => item
     } : {
@@ -2766,6 +2768,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     waitForInitialLayout = true,
     ...rest
   } = props;
+  const { childrenMode } = rest;
   const [renderNum, setRenderNum] = useState(0);
   const initialScroll = initialScrollIndexProp || initialScrollOffsetProp ? typeof initialScrollIndexProp === "object" ? { index: initialScrollIndexProp.index || 0, viewOffset: initialScrollIndexProp.viewOffset || 0 } : { index: initialScrollIndexProp || 0, viewOffset: initialScrollOffsetProp || 0 } : void 0;
   const [canRender, setCanRender] = React2.useState(!IsNewArchitecture);
@@ -2938,7 +2941,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   if (isFirst || didDataChange || numColumnsProp !== peek$(ctx, "numColumns")) {
     refState.current.lastBatchingAction = Date.now();
     if (!keyExtractorProp && !isFirst && didDataChange) {
-      __DEV__ && warnDevOnce(
+      __DEV__ && !childrenMode && warnDevOnce(
         "keyExtractor",
         "Changing data without a keyExtractor can cause slow performance and resetting scroll. If your list data can change you should use a keyExtractor with a unique id for best performance and behavior."
       );

package/keyboard.d.mts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Insets } from 'react-native';
+import { ReanimatedScrollEvent } from 'react-native-reanimated/lib/typescript/hook/commonTypes';
+import { LegendListRef } from '@legendapp/list';
+import { AnimatedLegendListProps } from '@legendapp/list/reanimated';
+
+declare const KeyboardAvoidingLegendList: <ItemT>(props: Omit<AnimatedLegendListProps<ItemT>, "contentInset" | "onScroll"> & {
+    onScroll?: (event: ReanimatedScrollEvent) => void;
+    contentInset?: Insets;
+    safeAreaInsetBottom?: number;
+} & React.RefAttributes<LegendListRef>) => React.ReactNode;
+
+export { KeyboardAvoidingLegendList, KeyboardAvoidingLegendList as LegendList };

package/keyboard.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Insets } from 'react-native';
+import { ReanimatedScrollEvent } from 'react-native-reanimated/lib/typescript/hook/commonTypes';
+import { LegendListRef } from '@legendapp/list';
+import { AnimatedLegendListProps } from '@legendapp/list/reanimated';
+
+declare const KeyboardAvoidingLegendList: <ItemT>(props: Omit<AnimatedLegendListProps<ItemT>, "contentInset" | "onScroll"> & {
+    onScroll?: (event: ReanimatedScrollEvent) => void;
+    contentInset?: Insets;
+    safeAreaInsetBottom?: number;
+} & React.RefAttributes<LegendListRef>) => React.ReactNode;
+
+export { KeyboardAvoidingLegendList, KeyboardAvoidingLegendList as LegendList };

package/keyboard.js

@@ -0,0 +1,113 @@
+'use strict';
+
+var React = require('react');
+var reactNative = require('react-native');
+var reactNativeKeyboardController = require('react-native-keyboard-controller');
+var reactNativeReanimated = require('react-native-reanimated');
+var reanimated = require('@legendapp/list/reanimated');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// 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 scrollViewRef = reactNativeReanimated.useAnimatedRef();
+  const scrollOffsetY = reactNativeReanimated.useSharedValue(0);
+  const scrollOffsetAtKeyboardStart = reactNativeReanimated.useSharedValue(0);
+  const keyboardInset = reactNativeReanimated.useSharedValue(0);
+  const scrollHandler = reactNativeReanimated.useAnimatedScrollHandler(
+    (event) => {
+      scrollOffsetY.value = event.contentOffset[horizontal ? "x" : "y"];
+      if (onScrollProp) {
+        reactNativeReanimated.runOnJS(onScrollProp)(event);
+      }
+    },
+    [onScrollProp, horizontal]
+  );
+  reactNativeKeyboardController.useKeyboardHandler(
+    // biome-ignore assist/source/useSortedKeys: prefer start/move/end
+    {
+      onStart: () => {
+        "worklet";
+        scrollOffsetAtKeyboardStart.value = scrollOffsetY.value;
+      },
+      onMove: (event) => {
+        "worklet";
+        const targetOffset = scrollOffsetAtKeyboardStart.value + event.height;
+        scrollOffsetY.value = targetOffset;
+        reactNativeReanimated.scrollTo(scrollViewRef, 0, targetOffset, false);
+        if (!horizontal) {
+          keyboardInset.value = Math.max(0, event.height - safeAreaInsetBottom);
+        }
+      },
+      onEnd: (event) => {
+        "worklet";
+        const targetOffset = scrollOffsetAtKeyboardStart.value + event.height;
+        scrollOffsetY.value = targetOffset;
+        reactNativeReanimated.scrollTo(scrollViewRef, 0, targetOffset, false);
+        if (!horizontal) {
+          keyboardInset.value = Math.max(0, event.height - safeAreaInsetBottom);
+        }
+      }
+    },
+    [scrollViewRef, safeAreaInsetBottom]
+  );
+  const animatedProps = reactNative.Platform.OS === "ios" ? reactNativeReanimated.useAnimatedProps(() => {
+    "worklet";
+    var _a, _b, _c, _d;
+    return {
+      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;
+  const style = reactNative.Platform.OS !== "ios" ? reactNativeReanimated.useAnimatedStyle(() => ({
+    marginBottom: keyboardInset.value
+  })) : void 0;
+  return /* @__PURE__ */ React__namespace.createElement(
+    reanimated.AnimatedLegendList,
+    {
+      ...rest,
+      animatedProps,
+      keyboardDismissMode: "interactive",
+      onScroll: scrollHandler,
+      ref: forwardedRef,
+      refScrollView: scrollViewRef,
+      scrollEventThrottle: resolvedScrollEventThrottle,
+      scrollIndicatorInsets: { bottom: 0, top: 0 },
+      style
+    }
+  );
+});
+
+exports.KeyboardAvoidingLegendList = KeyboardAvoidingLegendList;
+exports.LegendList = KeyboardAvoidingLegendList;

package/keyboard.mjs

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { forwardRef } 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 { AnimatedLegendList } from '@legendapp/list/reanimated';
+
+// 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 scrollViewRef = useAnimatedRef();
+  const scrollOffsetY = useSharedValue(0);
+  const scrollOffsetAtKeyboardStart = useSharedValue(0);
+  const keyboardInset = useSharedValue(0);
+  const scrollHandler = useAnimatedScrollHandler(
+    (event) => {
+      scrollOffsetY.value = event.contentOffset[horizontal ? "x" : "y"];
+      if (onScrollProp) {
+        runOnJS(onScrollProp)(event);
+      }
+    },
+    [onScrollProp, horizontal]
+  );
+  useKeyboardHandler(
+    // biome-ignore assist/source/useSortedKeys: prefer start/move/end
+    {
+      onStart: () => {
+        "worklet";
+        scrollOffsetAtKeyboardStart.value = scrollOffsetY.value;
+      },
+      onMove: (event) => {
+        "worklet";
+        const targetOffset = scrollOffsetAtKeyboardStart.value + event.height;
+        scrollOffsetY.value = targetOffset;
+        scrollTo(scrollViewRef, 0, targetOffset, false);
+        if (!horizontal) {
+          keyboardInset.value = Math.max(0, event.height - safeAreaInsetBottom);
+        }
+      },
+      onEnd: (event) => {
+        "worklet";
+        const targetOffset = scrollOffsetAtKeyboardStart.value + event.height;
+        scrollOffsetY.value = targetOffset;
+        scrollTo(scrollViewRef, 0, targetOffset, false);
+        if (!horizontal) {
+          keyboardInset.value = Math.max(0, event.height - safeAreaInsetBottom);
+        }
+      }
+    },
+    [scrollViewRef, safeAreaInsetBottom]
+  );
+  const animatedProps = Platform.OS === "ios" ? useAnimatedProps(() => {
+    "worklet";
+    var _a, _b, _c, _d;
+    return {
+      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;
+  const style = Platform.OS !== "ios" ? useAnimatedStyle(() => ({
+    marginBottom: keyboardInset.value
+  })) : void 0;
+  return /* @__PURE__ */ React.createElement(
+    AnimatedLegendList,
+    {
+      ...rest,
+      animatedProps,
+      keyboardDismissMode: "interactive",
+      onScroll: scrollHandler,
+      ref: forwardedRef,
+      refScrollView: scrollViewRef,
+      scrollEventThrottle: resolvedScrollEventThrottle,
+      scrollIndicatorInsets: { bottom: 0, top: 0 },
+      style
+    }
+  );
+});
+
+export { KeyboardAvoidingLegendList, KeyboardAvoidingLegendList as LegendList };

package/package.json

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