@legendapp/list 3.0.0-beta.54 → 3.0.0-beta.56

package/reanimated.d.ts

@@ -92,13 +92,11 @@ interface DataModeProps<ItemT, TItemType extends string | undefined> {
      */
     data: ReadonlyArray<ItemT>;
     /**
-     * Function or React component to render each item in the list.
-     * Can be either:
-     * - A function: (props: LegendListRenderItemProps<ItemT>) => ReactNode
-     * - A React component: React.ComponentType<LegendListRenderItemProps<ItemT>>
+     * Callback to render each item in the list.
+     * To use hooks in an item component, return that component from this callback.
      * @required when using data mode
      */
-    renderItem: ((props: LegendListRenderItemProps<ItemT, TItemType>) => React.ReactNode) | React.ComponentType<LegendListRenderItemProps<ItemT, TItemType>>;
+    renderItem: (props: LegendListRenderItemProps<ItemT, TItemType>) => React.ReactNode;
     children?: never;
 }
 interface ChildrenModeProps {
@@ -229,6 +227,13 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
      * Style for the header component.
      */
     ListHeaderComponentStyle?: StyleProp<ViewStyle> | undefined;
+    /**
+     * Estimated height of the ListHeaderComponent. Provide this when the expected header height
+     * is known before layout so that only the items actually visible below the header are rendered
+     * on the initial frame, rather than a full screen's worth of items that are hidden behind it.
+     * The measured header size still replaces this value after layout.
+     */
+    estimatedHeaderSize?: number;
     /**
      * If true, auto-scrolls to end when new items are added.
      * Use an options object to opt into specific triggers and control whether that scroll is animated.
@@ -263,6 +268,12 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
      * @default 1
      */
     numColumns?: number;
+    /**
+     * Force RTL mode for this list instance.
+     * When undefined, uses React Native's global I18nManager.isRTL.
+     * @default undefined
+     */
+    rtl?: boolean;
     /**
      * Called when scrolling reaches the end within onEndReachedThreshold.
      */

package/reanimated.js

@@ -36,6 +36,8 @@ var {
   typedMemo,
   useArr$,
   useCombinedRef,
+  useLatestRef,
+  useStableRenderComponent,
   getComponent
 } = reactNative.internal;
 var { peek$, useStateContext } = reactNative.internal;
@@ -48,12 +50,12 @@ var ReanimatedScrollBridge = typedMemo(function ReanimatedScrollBridgeComponent(
   const animatedScrollRef = Reanimated.useAnimatedRef();
   Reanimated.useScrollViewOffset(animatedScrollRef, scrollOffset);
   const combinedRef = useCombinedRef(animatedScrollRef, forwardedRef);
-  const ScrollComponent = React__namespace.useMemo(
-    () => renderScrollComponent ? React__namespace.forwardRef(
-      (scrollViewProps, ref) => renderScrollComponent({ ...scrollViewProps, ref, scrollEventThrottle: 1 })
-    ) : Reanimated__default.default.ScrollView,
-    [renderScrollComponent]
-  );
+  const CustomScrollComponent = useStableRenderComponent(renderScrollComponent, (scrollViewProps, ref) => ({
+    ...scrollViewProps,
+    ref,
+    scrollEventThrottle: 1
+  }));
+  const ScrollComponent = renderScrollComponent ? CustomScrollComponent : Reanimated__default.default.ScrollView;
   return /* @__PURE__ */ React__namespace.createElement(ScrollComponent, { ...props, ref: combinedRef });
 });
 var StickyOverlay = typedMemo(function StickyOverlayComponent({ stickyHeaderConfig }) {
@@ -218,8 +220,7 @@ var LegendListForwardedRef = typedMemo(
       },
       [scrollOffset]
     );
-    const itemLayoutAnimationRef = React__namespace.useRef(itemLayoutAnimation);
-    itemLayoutAnimationRef.current = itemLayoutAnimation;
+    const itemLayoutAnimationRef = useLatestRef(itemLayoutAnimation);
     const hasItemLayoutAnimation = !!itemLayoutAnimation;
     const positionComponentInternal = React__namespace.useMemo(() => {
       if (!hasItemLayoutAnimation) {

package/reanimated.mjs

@@ -12,6 +12,8 @@ var {
   typedMemo,
   useArr$,
   useCombinedRef,
+  useLatestRef,
+  useStableRenderComponent,
   getComponent
 } = internal;
 var { peek$, useStateContext } = internal;
@@ -24,12 +26,12 @@ var ReanimatedScrollBridge = typedMemo(function ReanimatedScrollBridgeComponent(
   const animatedScrollRef = useAnimatedRef();
   useScrollViewOffset(animatedScrollRef, scrollOffset);
   const combinedRef = useCombinedRef(animatedScrollRef, forwardedRef);
-  const ScrollComponent = React.useMemo(
-    () => renderScrollComponent ? React.forwardRef(
-      (scrollViewProps, ref) => renderScrollComponent({ ...scrollViewProps, ref, scrollEventThrottle: 1 })
-    ) : Reanimated.ScrollView,
-    [renderScrollComponent]
-  );
+  const CustomScrollComponent = useStableRenderComponent(renderScrollComponent, (scrollViewProps, ref) => ({
+    ...scrollViewProps,
+    ref,
+    scrollEventThrottle: 1
+  }));
+  const ScrollComponent = renderScrollComponent ? CustomScrollComponent : Reanimated.ScrollView;
   return /* @__PURE__ */ React.createElement(ScrollComponent, { ...props, ref: combinedRef });
 });
 var StickyOverlay = typedMemo(function StickyOverlayComponent({ stickyHeaderConfig }) {
@@ -194,8 +196,7 @@ var LegendListForwardedRef = typedMemo(
       },
       [scrollOffset]
     );
-    const itemLayoutAnimationRef = React.useRef(itemLayoutAnimation);
-    itemLayoutAnimationRef.current = itemLayoutAnimation;
+    const itemLayoutAnimationRef = useLatestRef(itemLayoutAnimation);
     const hasItemLayoutAnimation = !!itemLayoutAnimation;
     const positionComponentInternal = React.useMemo(() => {
       if (!hasItemLayoutAnimation) {

package/section-list.d.ts

@@ -148,13 +148,11 @@ interface DataModeProps<ItemT, TItemType extends string | undefined> {
      */
     data: ReadonlyArray<ItemT>;
     /**
-     * Function or React component to render each item in the list.
-     * Can be either:
-     * - A function: (props: LegendListRenderItemProps<ItemT>) => ReactNode
-     * - A React component: React.ComponentType<LegendListRenderItemProps<ItemT>>
+     * Callback to render each item in the list.
+     * To use hooks in an item component, return that component from this callback.
      * @required when using data mode
      */
-    renderItem: ((props: LegendListRenderItemProps<ItemT, TItemType>) => React.ReactNode) | React.ComponentType<LegendListRenderItemProps<ItemT, TItemType>>;
+    renderItem: (props: LegendListRenderItemProps<ItemT, TItemType>) => React.ReactNode;
     children?: never;
 }
 interface ChildrenModeProps {
@@ -285,6 +283,13 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
      * Style for the header component.
      */
     ListHeaderComponentStyle?: StyleProp<ViewStyle> | undefined;
+    /**
+     * Estimated height of the ListHeaderComponent. Provide this when the expected header height
+     * is known before layout so that only the items actually visible below the header are rendered
+     * on the initial frame, rather than a full screen's worth of items that are hidden behind it.
+     * The measured header size still replaces this value after layout.
+     */
+    estimatedHeaderSize?: number;
     /**
      * If true, auto-scrolls to end when new items are added.
      * Use an options object to opt into specific triggers and control whether that scroll is animated.
@@ -319,6 +324,12 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
      * @default 1
      */
     numColumns?: number;
+    /**
+     * Force RTL mode for this list instance.
+     * When undefined, uses React Native's global I18nManager.isRTL.
+     * @default undefined
+     */
+    rtl?: boolean;
     /**
      * Called when scrolling reaches the end within onEndReachedThreshold.
      */