@legendapp/list 0.4.4 → 0.4.5

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;
@@ -52,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;
@@ -52,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);
 }
@@ -256,13 +260,7 @@ var ListComponent = React6__namespace.memo(function ListComponent2({
       },
       getComponent(ListHeaderComponent)
     ),
-    ListEmptyComponent && /* @__PURE__ */ React6__namespace.createElement(
-      reactNative.View,
-      {
-        style: ListEmptyComponentStyle
-      },
-      getComponent(ListEmptyComponent)
-    ),
+    ListEmptyComponent && /* @__PURE__ */ React6__namespace.createElement(reactNative.View, { style: ListEmptyComponentStyle }, getComponent(ListEmptyComponent)),
     /* @__PURE__ */ React6__namespace.createElement(
       Containers,
       {
@@ -276,17 +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 mapViewabilityValues = /* @__PURE__ */ new Map();
-var mapViewabilityAmountCallbacks = /* @__PURE__ */ new Map();
-var mapViewabilityAmountValues = /* @__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) {
@@ -352,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 });
@@ -392,8 +403,8 @@ function isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, index)
     position: top,
     scrollSize
   };
-  mapViewabilityAmountValues.set(containerId, value);
-  const cb = mapViewabilityAmountCallbacks.get(containerId);
+  ctx.mapViewabilityAmountValues.set(containerId, value);
+  const cb = ctx.mapViewabilityAmountCallbacks.get(containerId);
   if (cb) {
     cb(value);
   }
@@ -409,25 +420,12 @@ function findContainerId(state, ctx, index) {
   }
   return -1;
 }
-function maybeUpdateViewabilityCallback(configId, viewToken) {
+function maybeUpdateViewabilityCallback(ctx, configId, viewToken) {
   const key = viewToken.key + configId;
-  mapViewabilityValues.set(key, viewToken);
-  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;
@@ -522,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) => {
@@ -548,83 +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.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(() => {
-          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;
@@ -775,7 +785,7 @@ var LegendListInner = React6.forwardRef(function LegendListInner2(props, forward
       }
     });
   }, []);
-  React6.useMemo(() => {
+  useInit(() => {
     var _a2, _b2;
     refState.current.viewabilityConfigCallbackPairs = setupViewability(props);
     const scrollLength = refState.current.scrollLength;
@@ -794,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;
@@ -887,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,
     {

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);
 }
@@ -235,13 +239,7 @@ var ListComponent = React6.memo(function ListComponent2({
       },
       getComponent(ListHeaderComponent)
     ),
-    ListEmptyComponent && /* @__PURE__ */ React6.createElement(
-      View,
-      {
-        style: ListEmptyComponentStyle
-      },
-      getComponent(ListEmptyComponent)
-    ),
+    ListEmptyComponent && /* @__PURE__ */ React6.createElement(View, { style: ListEmptyComponentStyle }, getComponent(ListEmptyComponent)),
     /* @__PURE__ */ React6.createElement(
       Containers,
       {
@@ -255,17 +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 mapViewabilityValues = /* @__PURE__ */ new Map();
-var mapViewabilityAmountCallbacks = /* @__PURE__ */ new Map();
-var mapViewabilityAmountValues = /* @__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) {
@@ -331,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 });
@@ -371,8 +382,8 @@ function isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, index)
     position: top,
     scrollSize
   };
-  mapViewabilityAmountValues.set(containerId, value);
-  const cb = mapViewabilityAmountCallbacks.get(containerId);
+  ctx.mapViewabilityAmountValues.set(containerId, value);
+  const cb = ctx.mapViewabilityAmountCallbacks.get(containerId);
   if (cb) {
     cb(value);
   }
@@ -388,25 +399,12 @@ function findContainerId(state, ctx, index) {
   }
   return -1;
 }
-function maybeUpdateViewabilityCallback(configId, viewToken) {
+function maybeUpdateViewabilityCallback(ctx, configId, viewToken) {
   const key = viewToken.key + configId;
-  mapViewabilityValues.set(key, viewToken);
-  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;
@@ -501,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) => {
@@ -527,83 +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) => {
-        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(() => {
-          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;
@@ -754,7 +764,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       }
     });
   }, []);
-  useMemo(() => {
+  useInit(() => {
     var _a2, _b2;
     refState.current.viewabilityConfigCallbackPairs = setupViewability(props);
     const scrollLength = refState.current.scrollLength;
@@ -773,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;
@@ -866,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,
     {

package/package.json

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