@legendapp/list 0.6.4 → 1.0.0-beta.0

package/README.md

@@ -14,6 +14,10 @@ In addition to normal FlatList features:
 -   `maintainScrollAtEnd`: If true and scroll is within `maintainScrollAtEndThreshold * screen height` then changing items or heights will scroll to the bottom. This can be useful for chat interfaces.
 -   `recycleItems` prop enables toggling recycling of list items. If enabled it will reuse item components for improved performance, but it will reuse any local state in items. So if you have local state in items you likely want this disabled.
 
+## Documentation
+
+See the [documentation site](https://www.legendapp.com/open-source/list) for the full documentation.
+
 ## Usage
 
 ## Install
@@ -41,7 +45,6 @@ interface PropsOptional {
     initialScrollOffset?: number;
     initialScrollIndex?: number;
     drawDistance?: number;
-    initialContainers?: number;
     recycleItems?: boolean;
     onEndReachedThreshold?: number | null | undefined;
     maintainScrollAtEnd?: boolean;

package/index.d.mts

@@ -1,5 +1,5 @@
 import { ComponentProps, ReactNode, ForwardedRef, ReactElement } from 'react';
-import { ScrollView, StyleProp, ViewStyle, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
+import { ScrollView, StyleProp, ViewStyle, ScrollViewProps, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 declare class ScrollAdjustHandler {
@@ -19,7 +19,6 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
     initialScrollOffset?: number;
     initialScrollIndex?: number;
     drawDistance?: number;
-    initialNumContainers?: number;
     recycleItems?: boolean;
     onEndReachedThreshold?: number | null | undefined;
     onStartReachedThreshold?: number | null | undefined;
@@ -57,6 +56,11 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
         itemKey: string;
         itemData: ItemT;
     }) => void;
+    /**
+     * Render custom ScrollView component.
+     * @default (props) => <ScrollView {...props} />
+     */
+    renderScrollComponent?: (props: ScrollViewProps) => React.ReactElement<ScrollViewProps>;
 };
 type LegendListProps<ItemT> = LegendListPropsBase<ItemT, ComponentProps<typeof ScrollView>>;
 interface InternalState {

package/index.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps, ReactNode, ForwardedRef, ReactElement } from 'react';
-import { ScrollView, StyleProp, ViewStyle, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
+import { ScrollView, StyleProp, ViewStyle, ScrollViewProps, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 declare class ScrollAdjustHandler {
@@ -19,7 +19,6 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
     initialScrollOffset?: number;
     initialScrollIndex?: number;
     drawDistance?: number;
-    initialNumContainers?: number;
     recycleItems?: boolean;
     onEndReachedThreshold?: number | null | undefined;
     onStartReachedThreshold?: number | null | undefined;
@@ -57,6 +56,11 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
         itemKey: string;
         itemData: ItemT;
     }) => void;
+    /**
+     * Render custom ScrollView component.
+     * @default (props) => <ScrollView {...props} />
+     */
+    renderScrollComponent?: (props: ScrollViewProps) => React.ReactElement<ScrollViewProps>;
 };
 type LegendListProps<ItemT> = LegendListPropsBase<ItemT, ComponentProps<typeof ScrollView>>;
 interface InternalState {

package/index.js

@@ -208,14 +208,19 @@ var ListComponent = React4__namespace.memo(function ListComponent2({
   updateItemSize,
   refScrollView,
   maintainVisibleContentPosition,
+  renderScrollComponent,
   ...rest
 }) {
   const ctx = useStateContext();
   const animPaddingTop = useValue$("paddingTop");
   const animScrollAdjust = useValue$("scrollAdjust");
+  const ScrollComponent = renderScrollComponent ? React4.useMemo(
+    () => React4__namespace.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
+    [renderScrollComponent]
+  ) : reactNative.ScrollView;
   const additionalSize = { marginTop: animScrollAdjust, paddingTop: animPaddingTop };
   return /* @__PURE__ */ React4__namespace.createElement(
-    reactNative.ScrollView,
+    ScrollComponent,
     {
       ...rest,
       style,
@@ -469,7 +474,6 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     initialScrollIndex,
     initialScrollOffset,
     horizontal,
-    initialNumContainers,
     drawDistance = 250,
     recycleItems = false,
     onEndReachedThreshold = 0.5,
@@ -869,7 +873,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
             set$(ctx, `containerColumn${containerId}`, -1);
             if (__DEV__ && numContainers > peek$(ctx, "numContainersPooled")) {
               console.warn(
-                "[legend-list] No container to recycle, consider increasing initialContainers or estimatedItemSize. numContainers:",
+                "[legend-list] No container to recycle, so creating one on demand. This can be a performance issue and is likely caused by the estimatedItemSize being too small. Consider increasing estimatedItemSize. numContainers:",
                 numContainers
               );
             }
@@ -1182,7 +1186,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     refState.current.viewabilityConfigCallbackPairs = setupViewability(props);
     const scrollLength = refState.current.scrollLength;
     const averageItemSize = (_a2 = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, data[0])) != null ? _a2 : DEFAULT_ITEM_SIZE;
-    const numContainers = (initialNumContainers || Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize)) * numColumnsProp;
+    const numContainers = Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize) * numColumnsProp;
     for (let i = 0; i < numContainers; i++) {
       set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
       set$(ctx, `containerColumn${i}`, -1);

package/index.mjs

@@ -1,5 +1,5 @@
 import * as React4 from 'react';
-import React4__default, { forwardRef, useRef, useMemo, useCallback, useEffect, useImperativeHandle, useSyncExternalStore, useState } from 'react';
+import React4__default, { useMemo, forwardRef, useRef, useCallback, useEffect, useImperativeHandle, useSyncExternalStore, useState } from 'react';
 import { Animated, ScrollView, View, Dimensions, StyleSheet, Platform, useAnimatedValue as useAnimatedValue$1 } from 'react-native';
 
 // src/LegendList.tsx
@@ -187,14 +187,19 @@ var ListComponent = React4.memo(function ListComponent2({
   updateItemSize,
   refScrollView,
   maintainVisibleContentPosition,
+  renderScrollComponent,
   ...rest
 }) {
   const ctx = useStateContext();
   const animPaddingTop = useValue$("paddingTop");
   const animScrollAdjust = useValue$("scrollAdjust");
+  const ScrollComponent = renderScrollComponent ? useMemo(
+    () => React4.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
+    [renderScrollComponent]
+  ) : ScrollView;
   const additionalSize = { marginTop: animScrollAdjust, paddingTop: animPaddingTop };
   return /* @__PURE__ */ React4.createElement(
-    ScrollView,
+    ScrollComponent,
     {
       ...rest,
       style,
@@ -448,7 +453,6 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     initialScrollIndex,
     initialScrollOffset,
     horizontal,
-    initialNumContainers,
     drawDistance = 250,
     recycleItems = false,
     onEndReachedThreshold = 0.5,
@@ -848,7 +852,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
             set$(ctx, `containerColumn${containerId}`, -1);
             if (__DEV__ && numContainers > peek$(ctx, "numContainersPooled")) {
               console.warn(
-                "[legend-list] No container to recycle, consider increasing initialContainers or estimatedItemSize. numContainers:",
+                "[legend-list] No container to recycle, so creating one on demand. This can be a performance issue and is likely caused by the estimatedItemSize being too small. Consider increasing estimatedItemSize. numContainers:",
                 numContainers
               );
             }
@@ -1161,7 +1165,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     refState.current.viewabilityConfigCallbackPairs = setupViewability(props);
     const scrollLength = refState.current.scrollLength;
     const averageItemSize = (_a2 = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, data[0])) != null ? _a2 : DEFAULT_ITEM_SIZE;
-    const numContainers = (initialNumContainers || Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize)) * numColumnsProp;
+    const numContainers = Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize) * numColumnsProp;
     for (let i = 0; i < numContainers; i++) {
       set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
       set$(ctx, `containerColumn${i}`, -1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "0.6.4",
+  "version": "1.0.0-beta.0",
   "description": "legend-list",
   "sideEffects": false,
   "private": false,