@legendapp/list 0.4.3 → 0.4.5

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

@@ -1,7 +1,7 @@
 import { ComponentProps, ReactNode, ForwardedRef, ReactElement } from 'react';
 import { ScrollView, StyleProp, ViewStyle, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
 
-type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset'> & {
+type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, "contentOffset"> & {
     data: ArrayLike<any> & T[];
     initialScrollOffset?: number;
     initialScrollIndex?: number;
@@ -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;
@@ -51,6 +52,7 @@ interface InternalState {
     totalSize: number;
     timeouts: Set<number>;
     viewabilityConfigCallbackPairs: ViewabilityConfigCallbackPairs;
+    renderItem: (props: LegendListRenderItemProps<any>) => ReactNode;
 }
 interface ViewableRange<T> {
     startBuffered: number;

package/index.d.ts

@@ -1,7 +1,7 @@
 import { ComponentProps, ReactNode, ForwardedRef, ReactElement } from 'react';
 import { ScrollView, StyleProp, ViewStyle, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
 
-type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset'> & {
+type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, "contentOffset"> & {
     data: ArrayLike<any> & T[];
     initialScrollOffset?: number;
     initialScrollIndex?: number;
@@ -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;
@@ -51,6 +52,7 @@ interface InternalState {
     totalSize: number;
     timeouts: Set<number>;
     viewabilityConfigCallbackPairs: ViewabilityConfigCallbackPairs;
+    renderItem: (props: LegendListRenderItemProps<any>) => ReactNode;
 }
 interface ViewableRange<T> {
     startBuffered: number;

package/index.js

@@ -33,7 +33,11 @@ function StateProvider({ children }) {
   const [value] = React6__namespace.useState(() => ({
     hooks: /* @__PURE__ */ new Map(),
     listeners: /* @__PURE__ */ new Map(),
-    values: /* @__PURE__ */ new Map()
+    values: /* @__PURE__ */ new Map(),
+    mapViewabilityCallbacks: /* @__PURE__ */ new Map(),
+    mapViewabilityValues: /* @__PURE__ */ new Map(),
+    mapViewabilityAmountCallbacks: /* @__PURE__ */ new Map(),
+    mapViewabilityAmountValues: /* @__PURE__ */ new Map()
   }));
   return /* @__PURE__ */ React6__namespace.createElement(ContextState.Provider, { value }, children);
 }
@@ -213,6 +217,8 @@ var ListComponent = React6__namespace.memo(function ListComponent2({
   ListHeaderComponentStyle,
   ListFooterComponent,
   ListFooterComponentStyle,
+  ListEmptyComponent,
+  ListEmptyComponentStyle,
   getRenderedItem,
   updateItemSize,
   addTotalSize,
@@ -254,6 +260,7 @@ 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,
       {
@@ -267,15 +274,26 @@ var ListComponent = React6__namespace.memo(function ListComponent2({
     ListFooterComponent && /* @__PURE__ */ React6__namespace.createElement(reactNative.View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
   );
 });
+var symbolFirst = Symbol();
+function useInit(cb) {
+  const refValue = React6.useRef(symbolFirst);
+  if (refValue.current === symbolFirst) {
+    refValue.current = cb();
+  }
+  return refValue.current;
+}
 
 // src/viewability.ts
 var mapViewabilityConfigCallbackPairs = /* @__PURE__ */ new Map();
-var mapViewabilityCallbacks = /* @__PURE__ */ new Map();
-var mapViewabilityAmountCallbacks = /* @__PURE__ */ new Map();
 function setupViewability(props) {
   let { viewabilityConfig, viewabilityConfigCallbackPairs, onViewableItemsChanged } = props;
   viewabilityConfigCallbackPairs = viewabilityConfigCallbackPairs || [
-    { viewabilityConfig: viewabilityConfig || { viewAreaCoveragePercentThreshold: 0 }, onViewableItemsChanged }
+    {
+      viewabilityConfig: viewabilityConfig || {
+        viewAreaCoveragePercentThreshold: 0
+      },
+      onViewableItemsChanged
+    }
   ];
   if (viewabilityConfigCallbackPairs) {
     for (const pair of viewabilityConfigCallbackPairs) {
@@ -341,12 +359,16 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
       }
     }
   }
-  Object.assign(viewabilityState, { viewableItems, previousStart: start, previousEnd: end });
+  Object.assign(viewabilityState, {
+    viewableItems,
+    previousStart: start,
+    previousEnd: end
+  });
   if (changed.length > 0) {
     viewabilityState.viewableItems = viewableItems;
     for (let i = 0; i < changed.length; i++) {
       const change = changed[i];
-      maybeUpdateViewabilityCallback(configId, change);
+      maybeUpdateViewabilityCallback(ctx, configId, change);
     }
     if (onViewableItemsChanged) {
       onViewableItemsChanged({ viewableItems, changed });
@@ -369,20 +391,22 @@ function isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, index)
   const percent = isEntirelyVisible ? 100 : viewAreaMode ? percentOfScroller : percentVisible;
   const isViewable2 = percent >= viewablePercentThreshold;
   const containerId = findContainerId(state, ctx, index);
-  const cb = mapViewabilityAmountCallbacks.get(containerId);
+  const value = {
+    index,
+    isViewable: isViewable2,
+    item,
+    key,
+    percentVisible,
+    percentOfScroller,
+    sizeVisible,
+    size,
+    position: top,
+    scrollSize
+  };
+  ctx.mapViewabilityAmountValues.set(containerId, value);
+  const cb = ctx.mapViewabilityAmountCallbacks.get(containerId);
   if (cb) {
-    cb({
-      index,
-      isViewable: isViewable2,
-      item,
-      key,
-      percentVisible,
-      percentOfScroller,
-      sizeVisible,
-      size,
-      position: top,
-      scrollSize
-    });
+    cb(value);
   }
   return isViewable2;
 }
@@ -396,24 +420,12 @@ function findContainerId(state, ctx, index) {
   }
   return -1;
 }
-function maybeUpdateViewabilityCallback(configId, viewToken) {
+function maybeUpdateViewabilityCallback(ctx, configId, viewToken) {
   const key = viewToken.key + configId;
-  const cb = mapViewabilityCallbacks.get(key);
+  ctx.mapViewabilityValues.set(key, viewToken);
+  const cb = ctx.mapViewabilityCallbacks.get(key);
   cb == null ? void 0 : cb(viewToken);
 }
-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;
@@ -443,7 +455,7 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
     estimatedItemSize,
     getEstimatedItemSize,
     onEndReached,
-    onViewableRangeChanged,
+    ListEmptyComponent,
     ...rest
   } = props;
   const ctx = useStateContext();
@@ -508,11 +520,13 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
       scroll: initialContentOffset || 0,
       totalSize: 0,
       timeouts: /* @__PURE__ */ new Set(),
-      viewabilityConfigCallbackPairs: void 0
+      viewabilityConfigCallbackPairs: void 0,
+      renderItem: void 0
     };
     refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
   }
   refState.current.data = data;
+  refState.current.renderItem = renderItem;
   set$(ctx, "numItems", data.length);
   set$(ctx, "stylePaddingTop", (_b = (_a = styleFlattened == null ? void 0 : styleFlattened.paddingTop) != null ? _a : contentContainerStyleFlattened == null ? void 0 : contentContainerStyleFlattened.paddingTop) != null ? _b : 0);
   const addTotalSize = React6.useCallback((add) => {
@@ -534,71 +548,93 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
       refState.current.animFrameTotalSize = requestAnimationFrame(doAdd);
     }
   }, []);
-  const getRenderedItem = React6.useCallback(
-    (index, containerIndex) => {
-      var _a2;
-      const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
-      if (!data2) {
-        return null;
-      }
-      const useViewability = (configId, callback) => {
-        React6.useEffect(() => registerViewabilityCallback(containerIndex, configId, callback), []);
-      };
-      const useViewabilityAmount = (callback) => {
-        React6.useEffect(() => registerViewabilityAmountCallback(containerIndex, callback), []);
-      };
-      const useRecyclingEffect = (effect) => {
-        React6.useEffect(() => {
-          let prevIndex = index;
-          let prevItem = data2[index];
-          const signal = `containerIndex${containerIndex}`;
-          listen$(ctx, signal, () => {
-            var _a3;
-            const data3 = (_a3 = refState.current) == null ? void 0 : _a3.data;
-            if (data3) {
-              const newIndex = peek$(ctx, signal);
-              const newItem = data3[newIndex];
-              if (newItem) {
-                effect({
-                  index: newIndex,
-                  item: newItem,
-                  prevIndex,
-                  prevItem
-                });
-              }
-              prevIndex = newIndex;
-              prevItem = newItem;
+  const getRenderedItem = React6.useCallback((index, containerIndex) => {
+    var _a2, _b2, _c;
+    const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
+    if (!data2) {
+      return null;
+    }
+    const useViewability = (configId, callback) => {
+      const key = containerIndex + configId;
+      useInit(() => {
+        const value = ctx.mapViewabilityValues.get(key);
+        if (value) {
+          callback(value);
+        }
+      });
+      ctx.mapViewabilityCallbacks.set(key, callback);
+      React6.useEffect(
+        () => () => {
+          ctx.mapViewabilityCallbacks.delete(key);
+        },
+        []
+      );
+    };
+    const useViewabilityAmount = (callback) => {
+      useInit(() => {
+        const value = ctx.mapViewabilityAmountValues.get(containerIndex);
+        if (value) {
+          callback(value);
+        }
+      });
+      ctx.mapViewabilityAmountCallbacks.set(containerIndex, callback);
+      React6.useEffect(
+        () => () => {
+          ctx.mapViewabilityAmountCallbacks.delete(containerIndex);
+        },
+        []
+      );
+    };
+    const useRecyclingEffect = (effect) => {
+      React6.useEffect(() => {
+        const state = refState.current;
+        let prevIndex = index;
+        let prevItem = state.data[index];
+        const signal = `containerIndex${containerIndex}`;
+        listen$(ctx, signal, () => {
+          const data3 = state.data;
+          if (data3) {
+            const newIndex = peek$(ctx, signal);
+            const newItem = data3[newIndex];
+            if (newItem) {
+              effect({
+                index: newIndex,
+                item: newItem,
+                prevIndex,
+                prevItem
+              });
             }
-          });
-        }, []);
-      };
-      const useRecyclingState = (updateState) => {
-        const stateInfo = React6.useState(
-          () => updateState({
-            index,
-            item: data2[index],
-            prevIndex: void 0,
-            prevItem: void 0
-          })
-        );
-        useRecyclingEffect((state) => {
-          const newState = updateState(state);
-          stateInfo[1](newState);
+            prevIndex = newIndex;
+            prevItem = newItem;
+          }
         });
-        return stateInfo;
-      };
-      const renderedItem = renderItem == null ? void 0 : renderItem({
-        item: data2[index],
-        index,
-        useViewability,
-        useViewabilityAmount,
-        useRecyclingEffect,
-        useRecyclingState
+      }, []);
+    };
+    const useRecyclingState = (updateState) => {
+      const stateInfo = React6.useState(
+        () => updateState({
+          index,
+          item: refState.current.data[index],
+          prevIndex: void 0,
+          prevItem: void 0
+        })
+      );
+      useRecyclingEffect((state) => {
+        const newState = updateState(state);
+        stateInfo[1](newState);
       });
-      return renderedItem;
-    },
-    [renderItem]
-  );
+      return stateInfo;
+    };
+    const renderedItem = (_c = (_b2 = refState.current).renderItem) == null ? void 0 : _c.call(_b2, {
+      item: data2[index],
+      index,
+      useViewability,
+      useViewabilityAmount,
+      useRecyclingEffect,
+      useRecyclingState
+    });
+    return renderedItem;
+  }, []);
   const calculateItemsInView = React6.useCallback(() => {
     reactNative.unstable_batchedUpdates(() => {
       var _a2, _b2, _c;
@@ -735,32 +771,21 @@ 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(() => {
+  }, []);
+  useInit(() => {
     var _a2, _b2;
     refState.current.viewabilityConfigCallbackPairs = setupViewability(props);
     const scrollLength = refState.current.scrollLength;
@@ -779,7 +804,7 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
       totalSize += (_b2 = sizes.get(id)) != null ? _b2 : getItemSize(i, data[i]);
     }
     addTotalSize(totalSize);
-  }, []);
+  });
   const checkAtBottom = () => {
     var _a2;
     const { scrollLength, scroll } = refState.current;
@@ -801,6 +826,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]);
@@ -863,31 +897,35 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
     },
     []
   );
-  React6.useImperativeHandle(forwardedRef, () => {
-    const scrollToIndex = ({ index, animated }) => {
-      const offsetObj = calculateInitialOffset(index);
-      const offset = horizontal ? { x: offsetObj, y: 0 } : { x: 0, y: offsetObj };
-      refScroller.current.scrollTo({ ...offset, animated });
-    };
-    return {
-      getNativeScrollRef: () => refScroller.current,
-      getScrollableNode: refScroller.current.getScrollableNode,
-      getScrollResponder: refScroller.current.getScrollResponder,
-      flashScrollIndicators: refScroller.current.flashScrollIndicators,
-      scrollToIndex,
-      scrollToOffset: ({ offset, animated }) => {
-        const offsetObj = horizontal ? { x: offset, y: 0 } : { x: 0, y: offset };
-        refScroller.current.scrollTo({ ...offsetObj, animated });
-      },
-      scrollToItem: ({ item, animated }) => {
-        const index = data.indexOf(item);
-        if (index !== -1) {
-          scrollToIndex({ index, animated });
-        }
-      },
-      scrollToEnd: refScroller.current.scrollToEnd
-    };
-  }, []);
+  React6.useImperativeHandle(
+    forwardedRef,
+    () => {
+      const scrollToIndex = ({ index, animated }) => {
+        const offsetObj = calculateInitialOffset(index);
+        const offset = horizontal ? { x: offsetObj, y: 0 } : { x: 0, y: offsetObj };
+        refScroller.current.scrollTo({ ...offset, animated });
+      };
+      return {
+        getNativeScrollRef: () => refScroller.current,
+        getScrollableNode: refScroller.current.getScrollableNode,
+        getScrollResponder: refScroller.current.getScrollResponder,
+        flashScrollIndicators: refScroller.current.flashScrollIndicators,
+        scrollToIndex,
+        scrollToOffset: ({ offset, animated }) => {
+          const offsetObj = horizontal ? { x: offset, y: 0 } : { x: 0, y: offset };
+          refScroller.current.scrollTo({ ...offsetObj, animated });
+        },
+        scrollToItem: ({ item, animated }) => {
+          const index = data.indexOf(item);
+          if (index !== -1) {
+            scrollToIndex({ index, animated });
+          }
+        },
+        scrollToEnd: refScroller.current.scrollToEnd
+      };
+    },
+    []
+  );
   return /* @__PURE__ */ React6__namespace.createElement(
     ListComponent,
     {
@@ -903,7 +941,8 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
       onLayout,
       recycleItems,
       alignItemsAtEnd,
-      addTotalSize
+      addTotalSize,
+      ListEmptyComponent: data.length === 0 ? ListEmptyComponent : void 0
     }
   );
 });

package/index.mjs

@@ -12,7 +12,11 @@ function StateProvider({ children }) {
   const [value] = React6.useState(() => ({
     hooks: /* @__PURE__ */ new Map(),
     listeners: /* @__PURE__ */ new Map(),
-    values: /* @__PURE__ */ new Map()
+    values: /* @__PURE__ */ new Map(),
+    mapViewabilityCallbacks: /* @__PURE__ */ new Map(),
+    mapViewabilityValues: /* @__PURE__ */ new Map(),
+    mapViewabilityAmountCallbacks: /* @__PURE__ */ new Map(),
+    mapViewabilityAmountValues: /* @__PURE__ */ new Map()
   }));
   return /* @__PURE__ */ React6.createElement(ContextState.Provider, { value }, children);
 }
@@ -192,6 +196,8 @@ var ListComponent = React6.memo(function ListComponent2({
   ListHeaderComponentStyle,
   ListFooterComponent,
   ListFooterComponentStyle,
+  ListEmptyComponent,
+  ListEmptyComponentStyle,
   getRenderedItem,
   updateItemSize,
   addTotalSize,
@@ -233,6 +239,7 @@ var ListComponent = React6.memo(function ListComponent2({
       },
       getComponent(ListHeaderComponent)
     ),
+    ListEmptyComponent && /* @__PURE__ */ React6.createElement(View, { style: ListEmptyComponentStyle }, getComponent(ListEmptyComponent)),
     /* @__PURE__ */ React6.createElement(
       Containers,
       {
@@ -246,15 +253,26 @@ var ListComponent = React6.memo(function ListComponent2({
     ListFooterComponent && /* @__PURE__ */ React6.createElement(View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
   );
 });
+var symbolFirst = Symbol();
+function useInit(cb) {
+  const refValue = useRef(symbolFirst);
+  if (refValue.current === symbolFirst) {
+    refValue.current = cb();
+  }
+  return refValue.current;
+}
 
 // src/viewability.ts
 var mapViewabilityConfigCallbackPairs = /* @__PURE__ */ new Map();
-var mapViewabilityCallbacks = /* @__PURE__ */ new Map();
-var mapViewabilityAmountCallbacks = /* @__PURE__ */ new Map();
 function setupViewability(props) {
   let { viewabilityConfig, viewabilityConfigCallbackPairs, onViewableItemsChanged } = props;
   viewabilityConfigCallbackPairs = viewabilityConfigCallbackPairs || [
-    { viewabilityConfig: viewabilityConfig || { viewAreaCoveragePercentThreshold: 0 }, onViewableItemsChanged }
+    {
+      viewabilityConfig: viewabilityConfig || {
+        viewAreaCoveragePercentThreshold: 0
+      },
+      onViewableItemsChanged
+    }
   ];
   if (viewabilityConfigCallbackPairs) {
     for (const pair of viewabilityConfigCallbackPairs) {
@@ -320,12 +338,16 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
       }
     }
   }
-  Object.assign(viewabilityState, { viewableItems, previousStart: start, previousEnd: end });
+  Object.assign(viewabilityState, {
+    viewableItems,
+    previousStart: start,
+    previousEnd: end
+  });
   if (changed.length > 0) {
     viewabilityState.viewableItems = viewableItems;
     for (let i = 0; i < changed.length; i++) {
       const change = changed[i];
-      maybeUpdateViewabilityCallback(configId, change);
+      maybeUpdateViewabilityCallback(ctx, configId, change);
     }
     if (onViewableItemsChanged) {
       onViewableItemsChanged({ viewableItems, changed });
@@ -348,20 +370,22 @@ function isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, index)
   const percent = isEntirelyVisible ? 100 : viewAreaMode ? percentOfScroller : percentVisible;
   const isViewable2 = percent >= viewablePercentThreshold;
   const containerId = findContainerId(state, ctx, index);
-  const cb = mapViewabilityAmountCallbacks.get(containerId);
+  const value = {
+    index,
+    isViewable: isViewable2,
+    item,
+    key,
+    percentVisible,
+    percentOfScroller,
+    sizeVisible,
+    size,
+    position: top,
+    scrollSize
+  };
+  ctx.mapViewabilityAmountValues.set(containerId, value);
+  const cb = ctx.mapViewabilityAmountCallbacks.get(containerId);
   if (cb) {
-    cb({
-      index,
-      isViewable: isViewable2,
-      item,
-      key,
-      percentVisible,
-      percentOfScroller,
-      sizeVisible,
-      size,
-      position: top,
-      scrollSize
-    });
+    cb(value);
   }
   return isViewable2;
 }
@@ -375,24 +399,12 @@ function findContainerId(state, ctx, index) {
   }
   return -1;
 }
-function maybeUpdateViewabilityCallback(configId, viewToken) {
+function maybeUpdateViewabilityCallback(ctx, configId, viewToken) {
   const key = viewToken.key + configId;
-  const cb = mapViewabilityCallbacks.get(key);
+  ctx.mapViewabilityValues.set(key, viewToken);
+  const cb = ctx.mapViewabilityCallbacks.get(key);
   cb == null ? void 0 : cb(viewToken);
 }
-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;
@@ -422,7 +434,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     estimatedItemSize,
     getEstimatedItemSize,
     onEndReached,
-    onViewableRangeChanged,
+    ListEmptyComponent,
     ...rest
   } = props;
   const ctx = useStateContext();
@@ -487,11 +499,13 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       scroll: initialContentOffset || 0,
       totalSize: 0,
       timeouts: /* @__PURE__ */ new Set(),
-      viewabilityConfigCallbackPairs: void 0
+      viewabilityConfigCallbackPairs: void 0,
+      renderItem: void 0
     };
     refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
   }
   refState.current.data = data;
+  refState.current.renderItem = renderItem;
   set$(ctx, "numItems", data.length);
   set$(ctx, "stylePaddingTop", (_b = (_a = styleFlattened == null ? void 0 : styleFlattened.paddingTop) != null ? _a : contentContainerStyleFlattened == null ? void 0 : contentContainerStyleFlattened.paddingTop) != null ? _b : 0);
   const addTotalSize = useCallback((add) => {
@@ -513,71 +527,93 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       refState.current.animFrameTotalSize = requestAnimationFrame(doAdd);
     }
   }, []);
-  const getRenderedItem = useCallback(
-    (index, containerIndex) => {
-      var _a2;
-      const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
-      if (!data2) {
-        return null;
-      }
-      const useViewability = (configId, callback) => {
-        useEffect(() => registerViewabilityCallback(containerIndex, configId, callback), []);
-      };
-      const useViewabilityAmount = (callback) => {
-        useEffect(() => registerViewabilityAmountCallback(containerIndex, callback), []);
-      };
-      const useRecyclingEffect = (effect) => {
-        useEffect(() => {
-          let prevIndex = index;
-          let prevItem = data2[index];
-          const signal = `containerIndex${containerIndex}`;
-          listen$(ctx, signal, () => {
-            var _a3;
-            const data3 = (_a3 = refState.current) == null ? void 0 : _a3.data;
-            if (data3) {
-              const newIndex = peek$(ctx, signal);
-              const newItem = data3[newIndex];
-              if (newItem) {
-                effect({
-                  index: newIndex,
-                  item: newItem,
-                  prevIndex,
-                  prevItem
-                });
-              }
-              prevIndex = newIndex;
-              prevItem = newItem;
+  const getRenderedItem = useCallback((index, containerIndex) => {
+    var _a2, _b2, _c;
+    const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
+    if (!data2) {
+      return null;
+    }
+    const useViewability = (configId, callback) => {
+      const key = containerIndex + configId;
+      useInit(() => {
+        const value = ctx.mapViewabilityValues.get(key);
+        if (value) {
+          callback(value);
+        }
+      });
+      ctx.mapViewabilityCallbacks.set(key, callback);
+      useEffect(
+        () => () => {
+          ctx.mapViewabilityCallbacks.delete(key);
+        },
+        []
+      );
+    };
+    const useViewabilityAmount = (callback) => {
+      useInit(() => {
+        const value = ctx.mapViewabilityAmountValues.get(containerIndex);
+        if (value) {
+          callback(value);
+        }
+      });
+      ctx.mapViewabilityAmountCallbacks.set(containerIndex, callback);
+      useEffect(
+        () => () => {
+          ctx.mapViewabilityAmountCallbacks.delete(containerIndex);
+        },
+        []
+      );
+    };
+    const useRecyclingEffect = (effect) => {
+      useEffect(() => {
+        const state = refState.current;
+        let prevIndex = index;
+        let prevItem = state.data[index];
+        const signal = `containerIndex${containerIndex}`;
+        listen$(ctx, signal, () => {
+          const data3 = state.data;
+          if (data3) {
+            const newIndex = peek$(ctx, signal);
+            const newItem = data3[newIndex];
+            if (newItem) {
+              effect({
+                index: newIndex,
+                item: newItem,
+                prevIndex,
+                prevItem
+              });
             }
-          });
-        }, []);
-      };
-      const useRecyclingState = (updateState) => {
-        const stateInfo = useState(
-          () => updateState({
-            index,
-            item: data2[index],
-            prevIndex: void 0,
-            prevItem: void 0
-          })
-        );
-        useRecyclingEffect((state) => {
-          const newState = updateState(state);
-          stateInfo[1](newState);
+            prevIndex = newIndex;
+            prevItem = newItem;
+          }
         });
-        return stateInfo;
-      };
-      const renderedItem = renderItem == null ? void 0 : renderItem({
-        item: data2[index],
-        index,
-        useViewability,
-        useViewabilityAmount,
-        useRecyclingEffect,
-        useRecyclingState
+      }, []);
+    };
+    const useRecyclingState = (updateState) => {
+      const stateInfo = useState(
+        () => updateState({
+          index,
+          item: refState.current.data[index],
+          prevIndex: void 0,
+          prevItem: void 0
+        })
+      );
+      useRecyclingEffect((state) => {
+        const newState = updateState(state);
+        stateInfo[1](newState);
       });
-      return renderedItem;
-    },
-    [renderItem]
-  );
+      return stateInfo;
+    };
+    const renderedItem = (_c = (_b2 = refState.current).renderItem) == null ? void 0 : _c.call(_b2, {
+      item: data2[index],
+      index,
+      useViewability,
+      useViewabilityAmount,
+      useRecyclingEffect,
+      useRecyclingState
+    });
+    return renderedItem;
+  }, []);
   const calculateItemsInView = useCallback(() => {
     unstable_batchedUpdates(() => {
       var _a2, _b2, _c;
@@ -714,32 +750,21 @@ 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(() => {
+  }, []);
+  useInit(() => {
     var _a2, _b2;
     refState.current.viewabilityConfigCallbackPairs = setupViewability(props);
     const scrollLength = refState.current.scrollLength;
@@ -758,7 +783,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       totalSize += (_b2 = sizes.get(id)) != null ? _b2 : getItemSize(i, data[i]);
     }
     addTotalSize(totalSize);
-  }, []);
+  });
   const checkAtBottom = () => {
     var _a2;
     const { scrollLength, scroll } = refState.current;
@@ -780,6 +805,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]);
@@ -842,31 +876,35 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     },
     []
   );
-  useImperativeHandle(forwardedRef, () => {
-    const scrollToIndex = ({ index, animated }) => {
-      const offsetObj = calculateInitialOffset(index);
-      const offset = horizontal ? { x: offsetObj, y: 0 } : { x: 0, y: offsetObj };
-      refScroller.current.scrollTo({ ...offset, animated });
-    };
-    return {
-      getNativeScrollRef: () => refScroller.current,
-      getScrollableNode: refScroller.current.getScrollableNode,
-      getScrollResponder: refScroller.current.getScrollResponder,
-      flashScrollIndicators: refScroller.current.flashScrollIndicators,
-      scrollToIndex,
-      scrollToOffset: ({ offset, animated }) => {
-        const offsetObj = horizontal ? { x: offset, y: 0 } : { x: 0, y: offset };
-        refScroller.current.scrollTo({ ...offsetObj, animated });
-      },
-      scrollToItem: ({ item, animated }) => {
-        const index = data.indexOf(item);
-        if (index !== -1) {
-          scrollToIndex({ index, animated });
-        }
-      },
-      scrollToEnd: refScroller.current.scrollToEnd
-    };
-  }, []);
+  useImperativeHandle(
+    forwardedRef,
+    () => {
+      const scrollToIndex = ({ index, animated }) => {
+        const offsetObj = calculateInitialOffset(index);
+        const offset = horizontal ? { x: offsetObj, y: 0 } : { x: 0, y: offsetObj };
+        refScroller.current.scrollTo({ ...offset, animated });
+      };
+      return {
+        getNativeScrollRef: () => refScroller.current,
+        getScrollableNode: refScroller.current.getScrollableNode,
+        getScrollResponder: refScroller.current.getScrollResponder,
+        flashScrollIndicators: refScroller.current.flashScrollIndicators,
+        scrollToIndex,
+        scrollToOffset: ({ offset, animated }) => {
+          const offsetObj = horizontal ? { x: offset, y: 0 } : { x: 0, y: offset };
+          refScroller.current.scrollTo({ ...offsetObj, animated });
+        },
+        scrollToItem: ({ item, animated }) => {
+          const index = data.indexOf(item);
+          if (index !== -1) {
+            scrollToIndex({ index, animated });
+          }
+        },
+        scrollToEnd: refScroller.current.scrollToEnd
+      };
+    },
+    []
+  );
   return /* @__PURE__ */ React6.createElement(
     ListComponent,
     {
@@ -882,7 +920,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.3",
+  "version": "0.4.5",
   "description": "legend-list",
   "sideEffects": false,
   "private": false,