@legendapp/list 0.4.2 → 0.4.4

package/README.md

@@ -48,7 +48,6 @@ interface PropsOptional {
     maintainScrollAtEndThreshold?: number;
     onEndReached?: ((info: { distanceFromEnd: number }) => void) | null | undefined;
     keyExtractor?: (item: T, index: number) => string;
-    onViewableRangeChanged?: (range: ViewableRange<T>) => void;
 }
 ```
 

package/index.d.mts

@@ -19,11 +19,12 @@ type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset
     }) => void) | null | undefined;
     keyExtractor?: (item: T, index: number) => string;
     renderItem?: (props: LegendListRenderItemProps<T>) => ReactNode;
-    onViewableRangeChanged?: (range: ViewableRange<T>) => void;
     ListHeaderComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
     ListHeaderComponentStyle?: StyleProp<ViewStyle> | undefined;
     ListFooterComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
     ListFooterComponentStyle?: StyleProp<ViewStyle> | undefined;
+    ListEmptyComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
+    ListEmptyComponentStyle?: StyleProp<ViewStyle> | undefined;
     ItemSeparatorComponent?: React.ComponentType<any>;
     viewabilityConfigCallbackPairs?: ViewabilityConfigCallbackPairs | undefined;
     viewabilityConfig?: ViewabilityConfig;
@@ -63,6 +64,7 @@ interface LegendListRenderItemProps<ItemT> {
     item: ItemT;
     index: number;
     useViewability: (configId: string, callback: ViewabilityCallback) => void;
+    useViewabilityAmount: (callback: ViewabilityAmountCallback) => void;
     useRecyclingEffect: (effect: (info: LegendListRecyclingState<ItemT>) => void | (() => void)) => void;
     useRecyclingState: <T>(updateState: (info: LegendListRecyclingState<ItemT>) => T) => [T, React.Dispatch<T>];
 }
@@ -107,6 +109,14 @@ interface ViewToken<ItemT = any> {
     index: number;
     isViewable: boolean;
 }
+interface ViewAmountToken<ItemT = any> extends ViewToken<ItemT> {
+    sizeVisible: number;
+    size: number;
+    percentVisible: number;
+    percentOfScroller: number;
+    position: number;
+    scrollSize: number;
+}
 interface ViewabilityConfigCallbackPair {
     viewabilityConfig: ViewabilityConfig;
     onViewableItemsChanged?: OnViewableItemsChanged;
@@ -146,6 +156,7 @@ interface ViewabilityConfig {
     waitForInteraction?: boolean | undefined;
 }
 type ViewabilityCallback = (viewToken: ViewToken) => void;
+type ViewabilityAmountCallback = (viewToken: ViewAmountToken) => void;
 interface LegendListRecyclingState<T> {
     item: T;
     prevItem: T | undefined;
@@ -157,4 +168,4 @@ declare const LegendList: <T>(props: LegendListProps<T> & {
     ref?: ForwardedRef<LegendListRef>;
 }) => ReactElement;
 
-export { type InternalState, LegendList, type LegendListProps, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type ViewToken, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange };
+export { type InternalState, LegendList, type LegendListProps, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange };

package/index.d.ts

@@ -19,11 +19,12 @@ type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset
     }) => void) | null | undefined;
     keyExtractor?: (item: T, index: number) => string;
     renderItem?: (props: LegendListRenderItemProps<T>) => ReactNode;
-    onViewableRangeChanged?: (range: ViewableRange<T>) => void;
     ListHeaderComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
     ListHeaderComponentStyle?: StyleProp<ViewStyle> | undefined;
     ListFooterComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
     ListFooterComponentStyle?: StyleProp<ViewStyle> | undefined;
+    ListEmptyComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
+    ListEmptyComponentStyle?: StyleProp<ViewStyle> | undefined;
     ItemSeparatorComponent?: React.ComponentType<any>;
     viewabilityConfigCallbackPairs?: ViewabilityConfigCallbackPairs | undefined;
     viewabilityConfig?: ViewabilityConfig;
@@ -63,6 +64,7 @@ interface LegendListRenderItemProps<ItemT> {
     item: ItemT;
     index: number;
     useViewability: (configId: string, callback: ViewabilityCallback) => void;
+    useViewabilityAmount: (callback: ViewabilityAmountCallback) => void;
     useRecyclingEffect: (effect: (info: LegendListRecyclingState<ItemT>) => void | (() => void)) => void;
     useRecyclingState: <T>(updateState: (info: LegendListRecyclingState<ItemT>) => T) => [T, React.Dispatch<T>];
 }
@@ -107,6 +109,14 @@ interface ViewToken<ItemT = any> {
     index: number;
     isViewable: boolean;
 }
+interface ViewAmountToken<ItemT = any> extends ViewToken<ItemT> {
+    sizeVisible: number;
+    size: number;
+    percentVisible: number;
+    percentOfScroller: number;
+    position: number;
+    scrollSize: number;
+}
 interface ViewabilityConfigCallbackPair {
     viewabilityConfig: ViewabilityConfig;
     onViewableItemsChanged?: OnViewableItemsChanged;
@@ -146,6 +156,7 @@ interface ViewabilityConfig {
     waitForInteraction?: boolean | undefined;
 }
 type ViewabilityCallback = (viewToken: ViewToken) => void;
+type ViewabilityAmountCallback = (viewToken: ViewAmountToken) => void;
 interface LegendListRecyclingState<T> {
     item: T;
     prevItem: T | undefined;
@@ -157,4 +168,4 @@ declare const LegendList: <T>(props: LegendListProps<T> & {
     ref?: ForwardedRef<LegendListRef>;
 }) => ReactElement;
 
-export { type InternalState, LegendList, type LegendListProps, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type ViewToken, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange };
+export { type InternalState, LegendList, type LegendListProps, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange };

package/index.js

@@ -213,6 +213,8 @@ var ListComponent = React6__namespace.memo(function ListComponent2({
   ListHeaderComponentStyle,
   ListFooterComponent,
   ListFooterComponentStyle,
+  ListEmptyComponent,
+  ListEmptyComponentStyle,
   getRenderedItem,
   updateItemSize,
   addTotalSize,
@@ -254,6 +256,13 @@ var ListComponent = React6__namespace.memo(function ListComponent2({
       },
       getComponent(ListHeaderComponent)
     ),
+    ListEmptyComponent && /* @__PURE__ */ React6__namespace.createElement(
+      reactNative.View,
+      {
+        style: ListEmptyComponentStyle
+      },
+      getComponent(ListEmptyComponent)
+    ),
     /* @__PURE__ */ React6__namespace.createElement(
       Containers,
       {
@@ -271,6 +280,9 @@ var ListComponent = React6__namespace.memo(function ListComponent2({
 // src/viewability.ts
 var mapViewabilityConfigCallbackPairs = /* @__PURE__ */ new Map();
 var mapViewabilityCallbacks = /* @__PURE__ */ new Map();
+var mapViewabilityValues = /* @__PURE__ */ new Map();
+var mapViewabilityAmountCallbacks = /* @__PURE__ */ new Map();
+var mapViewabilityAmountValues = /* @__PURE__ */ new Map();
 function setupViewability(props) {
   let { viewabilityConfig, viewabilityConfigCallbackPairs, onViewableItemsChanged } = props;
   viewabilityConfigCallbackPairs = viewabilityConfigCallbackPairs || [
@@ -315,7 +327,7 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
   const changed = [];
   if (previousViewableItems) {
     for (const viewToken of previousViewableItems) {
-      if (!isViewable(state, ctx, viewabilityConfig, viewToken.key, scrollSize)) {
+      if (!isViewable(state, ctx, viewabilityConfig, viewToken.key, scrollSize, viewToken.item, viewToken.index)) {
         viewToken.isViewable = false;
         changed.push(viewToken);
       }
@@ -326,7 +338,7 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
     const item = data[i];
     if (item) {
       const key = getId(i);
-      if (isViewable(state, ctx, viewabilityConfig, key, scrollSize)) {
+      if (isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, i)) {
         const viewToken = {
           item,
           key,
@@ -342,7 +354,6 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
   }
   Object.assign(viewabilityState, { viewableItems, previousStart: start, previousEnd: end });
   if (changed.length > 0) {
-    console.log("changed", changed);
     viewabilityState.viewableItems = viewableItems;
     for (let i = 0; i < changed.length; i++) {
       const change = changed[i];
@@ -353,7 +364,7 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
     }
   }
 }
-function isViewable(state, ctx, viewabilityConfig, key, scrollSize) {
+function isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, index) {
   const { sizes, positions, scroll } = state;
   const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
   const { itemVisiblePercentThreshold, viewAreaCoveragePercentThreshold } = viewabilityConfig;
@@ -363,25 +374,60 @@ function isViewable(state, ctx, viewabilityConfig, key, scrollSize) {
   const size = sizes.get(key) || 0;
   const bottom = top + size;
   const isEntirelyVisible = top >= 0 && bottom <= scrollSize && bottom > top;
-  if (isEntirelyVisible) {
-    return true;
+  const sizeVisible = isEntirelyVisible ? size : Math.min(bottom, scrollSize) - Math.max(top, 0);
+  const percentVisible = size ? isEntirelyVisible ? 100 : 100 * (sizeVisible / size) : 0;
+  const percentOfScroller = size ? 100 * (sizeVisible / scrollSize) : 0;
+  const percent = isEntirelyVisible ? 100 : viewAreaMode ? percentOfScroller : percentVisible;
+  const isViewable2 = percent >= viewablePercentThreshold;
+  const containerId = findContainerId(state, ctx, index);
+  const value = {
+    index,
+    isViewable: isViewable2,
+    item,
+    key,
+    percentVisible,
+    percentOfScroller,
+    sizeVisible,
+    size,
+    position: top,
+    scrollSize
+  };
+  mapViewabilityAmountValues.set(containerId, value);
+  const cb = mapViewabilityAmountCallbacks.get(containerId);
+  if (cb) {
+    cb(value);
+  }
+  return isViewable2;
+}
+function findContainerId(state, ctx, index) {
+  const numContainers = peek$(ctx, "numContainers");
+  for (let i = 0; i < numContainers; i++) {
+    const itemIndex = peek$(ctx, `containerIndex${i}`);
+    if (itemIndex === index) {
+      return i;
+    }
   }
-  const visibleHeight = Math.min(bottom, scrollSize) - Math.max(top, 0);
-  const percent = 100 * (visibleHeight / (viewAreaMode ? scrollSize : size));
-  return percent >= viewablePercentThreshold;
+  return -1;
 }
 function maybeUpdateViewabilityCallback(configId, viewToken) {
   const key = viewToken.key + configId;
+  mapViewabilityValues.set(key, viewToken);
   const cb = mapViewabilityCallbacks.get(key);
   cb == null ? void 0 : cb(viewToken);
 }
-function registerViewabilityCallback(itemKey, configId, callback) {
-  const key = itemKey + configId;
+function registerViewabilityCallback(containerId, configId, callback) {
+  const key = containerId + configId;
   mapViewabilityCallbacks.set(key, callback);
   return () => {
     mapViewabilityCallbacks.delete(key);
   };
 }
+function registerViewabilityAmountCallback(containerId, callback) {
+  mapViewabilityAmountCallbacks.set(containerId, callback);
+  return () => {
+    mapViewabilityAmountCallbacks.delete(containerId);
+  };
+}
 
 // src/LegendList.tsx
 var DEFAULT_SCROLL_BUFFER = 0;
@@ -411,7 +457,7 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
     estimatedItemSize,
     getEstimatedItemSize,
     onEndReached,
-    onViewableRangeChanged,
+    ListEmptyComponent,
     ...rest
   } = props;
   const ctx = useStateContext();
@@ -509,9 +555,23 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
       if (!data2) {
         return null;
       }
-      const itemKey = getId(index);
       const useViewability = (configId, callback) => {
-        React6.useEffect(() => registerViewabilityCallback(itemKey, configId, callback), []);
+        React6.useMemo(() => {
+          const value = mapViewabilityValues.get(containerIndex + configId);
+          if (value) {
+            callback(value);
+          }
+        }, []);
+        React6.useEffect(() => registerViewabilityCallback(containerIndex, configId, callback), []);
+      };
+      const useViewabilityAmount = (callback) => {
+        React6.useMemo(() => {
+          const value = mapViewabilityAmountValues.get(containerIndex);
+          if (value) {
+            callback(value);
+          }
+        }, []);
+        React6.useEffect(() => registerViewabilityAmountCallback(containerIndex, callback), []);
       };
       const useRecyclingEffect = (effect) => {
         React6.useEffect(() => {
@@ -549,7 +609,6 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
         );
         useRecyclingEffect((state) => {
           const newState = updateState(state);
-          console.log("setting state", newState);
           stateInfo[1](newState);
         });
         return stateInfo;
@@ -558,6 +617,7 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
         item: data2[index],
         index,
         useViewability,
+        useViewabilityAmount,
         useRecyclingEffect,
         useRecyclingState
       });
@@ -701,31 +761,20 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
             }
           }
         }
-        if (onViewableRangeChanged) {
-          if (startNoBuffer !== startNoBufferState || startBuffered !== startBufferedState || endNoBuffer !== endNoBufferState || endBuffered !== endBufferedState) {
-            onViewableRangeChanged({
-              start: startNoBuffer,
-              startBuffered,
-              end: endNoBuffer,
-              endBuffered,
-              items: data2.slice(startNoBuffer, endNoBuffer + 1)
-            });
-          }
-        }
-        if (refState.current.viewabilityConfigCallbackPairs) {
-          updateViewableItems(
-            refState.current,
-            ctx,
-            refState.current.viewabilityConfigCallbackPairs,
-            getId,
-            scrollLength,
-            startNoBuffer,
-            endNoBuffer
-          );
-        }
+      }
+      if (refState.current.viewabilityConfigCallbackPairs) {
+        updateViewableItems(
+          refState.current,
+          ctx,
+          refState.current.viewabilityConfigCallbackPairs,
+          getId,
+          scrollLength,
+          startNoBuffer,
+          endNoBuffer
+        );
       }
     });
-  }, [data]);
+  }, []);
   React6.useMemo(() => {
     var _a2, _b2;
     refState.current.viewabilityConfigCallbackPairs = setupViewability(props);
@@ -767,6 +816,15 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
     if (refState.current) {
       refState.current.isEndReached = false;
     }
+    const numContainers = peek$(ctx, "numContainers");
+    if (data.length < numContainers) {
+      for (let i = 0; i < numContainers; i++) {
+        const itemIndex = peek$(ctx, `containerIndex${i}`);
+        if (itemIndex >= data.length) {
+          set$(ctx, `containerIndex${i}`, -1);
+        }
+      }
+    }
     calculateItemsInView();
     checkAtBottom();
   }, [data]);
@@ -869,7 +927,8 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
       onLayout,
       recycleItems,
       alignItemsAtEnd,
-      addTotalSize
+      addTotalSize,
+      ListEmptyComponent: data.length === 0 ? ListEmptyComponent : void 0
     }
   );
 });

package/index.mjs

@@ -192,6 +192,8 @@ var ListComponent = React6.memo(function ListComponent2({
   ListHeaderComponentStyle,
   ListFooterComponent,
   ListFooterComponentStyle,
+  ListEmptyComponent,
+  ListEmptyComponentStyle,
   getRenderedItem,
   updateItemSize,
   addTotalSize,
@@ -233,6 +235,13 @@ var ListComponent = React6.memo(function ListComponent2({
       },
       getComponent(ListHeaderComponent)
     ),
+    ListEmptyComponent && /* @__PURE__ */ React6.createElement(
+      View,
+      {
+        style: ListEmptyComponentStyle
+      },
+      getComponent(ListEmptyComponent)
+    ),
     /* @__PURE__ */ React6.createElement(
       Containers,
       {
@@ -250,6 +259,9 @@ var ListComponent = React6.memo(function ListComponent2({
 // src/viewability.ts
 var mapViewabilityConfigCallbackPairs = /* @__PURE__ */ new Map();
 var mapViewabilityCallbacks = /* @__PURE__ */ new Map();
+var mapViewabilityValues = /* @__PURE__ */ new Map();
+var mapViewabilityAmountCallbacks = /* @__PURE__ */ new Map();
+var mapViewabilityAmountValues = /* @__PURE__ */ new Map();
 function setupViewability(props) {
   let { viewabilityConfig, viewabilityConfigCallbackPairs, onViewableItemsChanged } = props;
   viewabilityConfigCallbackPairs = viewabilityConfigCallbackPairs || [
@@ -294,7 +306,7 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
   const changed = [];
   if (previousViewableItems) {
     for (const viewToken of previousViewableItems) {
-      if (!isViewable(state, ctx, viewabilityConfig, viewToken.key, scrollSize)) {
+      if (!isViewable(state, ctx, viewabilityConfig, viewToken.key, scrollSize, viewToken.item, viewToken.index)) {
         viewToken.isViewable = false;
         changed.push(viewToken);
       }
@@ -305,7 +317,7 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
     const item = data[i];
     if (item) {
       const key = getId(i);
-      if (isViewable(state, ctx, viewabilityConfig, key, scrollSize)) {
+      if (isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, i)) {
         const viewToken = {
           item,
           key,
@@ -321,7 +333,6 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
   }
   Object.assign(viewabilityState, { viewableItems, previousStart: start, previousEnd: end });
   if (changed.length > 0) {
-    console.log("changed", changed);
     viewabilityState.viewableItems = viewableItems;
     for (let i = 0; i < changed.length; i++) {
       const change = changed[i];
@@ -332,7 +343,7 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
     }
   }
 }
-function isViewable(state, ctx, viewabilityConfig, key, scrollSize) {
+function isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, index) {
   const { sizes, positions, scroll } = state;
   const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
   const { itemVisiblePercentThreshold, viewAreaCoveragePercentThreshold } = viewabilityConfig;
@@ -342,25 +353,60 @@ function isViewable(state, ctx, viewabilityConfig, key, scrollSize) {
   const size = sizes.get(key) || 0;
   const bottom = top + size;
   const isEntirelyVisible = top >= 0 && bottom <= scrollSize && bottom > top;
-  if (isEntirelyVisible) {
-    return true;
+  const sizeVisible = isEntirelyVisible ? size : Math.min(bottom, scrollSize) - Math.max(top, 0);
+  const percentVisible = size ? isEntirelyVisible ? 100 : 100 * (sizeVisible / size) : 0;
+  const percentOfScroller = size ? 100 * (sizeVisible / scrollSize) : 0;
+  const percent = isEntirelyVisible ? 100 : viewAreaMode ? percentOfScroller : percentVisible;
+  const isViewable2 = percent >= viewablePercentThreshold;
+  const containerId = findContainerId(state, ctx, index);
+  const value = {
+    index,
+    isViewable: isViewable2,
+    item,
+    key,
+    percentVisible,
+    percentOfScroller,
+    sizeVisible,
+    size,
+    position: top,
+    scrollSize
+  };
+  mapViewabilityAmountValues.set(containerId, value);
+  const cb = mapViewabilityAmountCallbacks.get(containerId);
+  if (cb) {
+    cb(value);
+  }
+  return isViewable2;
+}
+function findContainerId(state, ctx, index) {
+  const numContainers = peek$(ctx, "numContainers");
+  for (let i = 0; i < numContainers; i++) {
+    const itemIndex = peek$(ctx, `containerIndex${i}`);
+    if (itemIndex === index) {
+      return i;
+    }
   }
-  const visibleHeight = Math.min(bottom, scrollSize) - Math.max(top, 0);
-  const percent = 100 * (visibleHeight / (viewAreaMode ? scrollSize : size));
-  return percent >= viewablePercentThreshold;
+  return -1;
 }
 function maybeUpdateViewabilityCallback(configId, viewToken) {
   const key = viewToken.key + configId;
+  mapViewabilityValues.set(key, viewToken);
   const cb = mapViewabilityCallbacks.get(key);
   cb == null ? void 0 : cb(viewToken);
 }
-function registerViewabilityCallback(itemKey, configId, callback) {
-  const key = itemKey + configId;
+function registerViewabilityCallback(containerId, configId, callback) {
+  const key = containerId + configId;
   mapViewabilityCallbacks.set(key, callback);
   return () => {
     mapViewabilityCallbacks.delete(key);
   };
 }
+function registerViewabilityAmountCallback(containerId, callback) {
+  mapViewabilityAmountCallbacks.set(containerId, callback);
+  return () => {
+    mapViewabilityAmountCallbacks.delete(containerId);
+  };
+}
 
 // src/LegendList.tsx
 var DEFAULT_SCROLL_BUFFER = 0;
@@ -390,7 +436,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     estimatedItemSize,
     getEstimatedItemSize,
     onEndReached,
-    onViewableRangeChanged,
+    ListEmptyComponent,
     ...rest
   } = props;
   const ctx = useStateContext();
@@ -488,9 +534,23 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       if (!data2) {
         return null;
       }
-      const itemKey = getId(index);
       const useViewability = (configId, callback) => {
-        useEffect(() => registerViewabilityCallback(itemKey, configId, callback), []);
+        useMemo(() => {
+          const value = mapViewabilityValues.get(containerIndex + configId);
+          if (value) {
+            callback(value);
+          }
+        }, []);
+        useEffect(() => registerViewabilityCallback(containerIndex, configId, callback), []);
+      };
+      const useViewabilityAmount = (callback) => {
+        useMemo(() => {
+          const value = mapViewabilityAmountValues.get(containerIndex);
+          if (value) {
+            callback(value);
+          }
+        }, []);
+        useEffect(() => registerViewabilityAmountCallback(containerIndex, callback), []);
       };
       const useRecyclingEffect = (effect) => {
         useEffect(() => {
@@ -528,7 +588,6 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         );
         useRecyclingEffect((state) => {
           const newState = updateState(state);
-          console.log("setting state", newState);
           stateInfo[1](newState);
         });
         return stateInfo;
@@ -537,6 +596,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         item: data2[index],
         index,
         useViewability,
+        useViewabilityAmount,
         useRecyclingEffect,
         useRecyclingState
       });
@@ -680,31 +740,20 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
             }
           }
         }
-        if (onViewableRangeChanged) {
-          if (startNoBuffer !== startNoBufferState || startBuffered !== startBufferedState || endNoBuffer !== endNoBufferState || endBuffered !== endBufferedState) {
-            onViewableRangeChanged({
-              start: startNoBuffer,
-              startBuffered,
-              end: endNoBuffer,
-              endBuffered,
-              items: data2.slice(startNoBuffer, endNoBuffer + 1)
-            });
-          }
-        }
-        if (refState.current.viewabilityConfigCallbackPairs) {
-          updateViewableItems(
-            refState.current,
-            ctx,
-            refState.current.viewabilityConfigCallbackPairs,
-            getId,
-            scrollLength,
-            startNoBuffer,
-            endNoBuffer
-          );
-        }
+      }
+      if (refState.current.viewabilityConfigCallbackPairs) {
+        updateViewableItems(
+          refState.current,
+          ctx,
+          refState.current.viewabilityConfigCallbackPairs,
+          getId,
+          scrollLength,
+          startNoBuffer,
+          endNoBuffer
+        );
       }
     });
-  }, [data]);
+  }, []);
   useMemo(() => {
     var _a2, _b2;
     refState.current.viewabilityConfigCallbackPairs = setupViewability(props);
@@ -746,6 +795,15 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     if (refState.current) {
       refState.current.isEndReached = false;
     }
+    const numContainers = peek$(ctx, "numContainers");
+    if (data.length < numContainers) {
+      for (let i = 0; i < numContainers; i++) {
+        const itemIndex = peek$(ctx, `containerIndex${i}`);
+        if (itemIndex >= data.length) {
+          set$(ctx, `containerIndex${i}`, -1);
+        }
+      }
+    }
     calculateItemsInView();
     checkAtBottom();
   }, [data]);
@@ -848,7 +906,8 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       onLayout,
       recycleItems,
       alignItemsAtEnd,
-      addTotalSize
+      addTotalSize,
+      ListEmptyComponent: data.length === 0 ? ListEmptyComponent : void 0
     }
   );
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "legend-list",
   "sideEffects": false,
   "private": false,