@legendapp/list 0.3.7 → 0.4.0

package/index.d.mts

@@ -18,7 +18,7 @@ type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset
         distanceFromEnd: number;
     }) => void) | null | undefined;
     keyExtractor?: (item: T, index: number) => string;
-    renderItem?: (props: LegendListRenderItemInfo<T>) => ReactNode;
+    renderItem?: (props: LegendListRenderItemProps<T>) => ReactNode;
     onViewableRangeChanged?: (range: ViewableRange<T>) => void;
     ListHeaderComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
     ListHeaderComponentStyle?: StyleProp<ViewStyle> | undefined;
@@ -59,9 +59,12 @@ interface ViewableRange<T> {
     end: number;
     items: T[];
 }
-interface LegendListRenderItemInfo<ItemT> {
+interface LegendListRenderItemProps<ItemT> {
     item: ItemT;
     index: number;
+    useViewability: (configId: string, callback: ViewabilityCallback) => void;
+    useRecyclingEffect: (effect: (info: LegendListRecyclingState<ItemT>) => void | (() => void)) => void;
+    useRecyclingState: <T>(updateState: (info: LegendListRecyclingState<ItemT>) => T) => [T, React.Dispatch<T>];
 }
 type LegendListRef = {
     /**
@@ -106,7 +109,7 @@ interface ViewToken<ItemT = any> {
 }
 interface ViewabilityConfigCallbackPair {
     viewabilityConfig: ViewabilityConfig;
-    onViewableItemsChanged: OnViewableItemsChanged;
+    onViewableItemsChanged?: OnViewableItemsChanged;
 }
 type ViewabilityConfigCallbackPairs = ViewabilityConfigCallbackPair[];
 type OnViewableItemsChanged = ((info: {
@@ -114,6 +117,10 @@ type OnViewableItemsChanged = ((info: {
     changed: Array<ViewToken>;
 }) => void) | null;
 interface ViewabilityConfig {
+    /**
+     * A unique ID to identify this viewability config
+     */
+    id: string;
     /**
      * Minimum amount of time (in milliseconds) that an item must be physically viewable before the
      * viewability callback will be fired. A high number means that scrolling through content without
@@ -138,9 +145,16 @@ interface ViewabilityConfig {
      */
     waitForInteraction?: boolean | undefined;
 }
+type ViewabilityCallback = (viewToken: ViewToken) => void;
+interface LegendListRecyclingState<T> {
+    item: T;
+    prevItem: T | undefined;
+    index: number;
+    prevIndex: number | undefined;
+}
 
 declare const LegendList: <T>(props: LegendListProps<T> & {
     ref?: ForwardedRef<LegendListRef>;
 }) => ReactElement;
 
-export { type InternalState, LegendList, type LegendListProps, type LegendListRef, type LegendListRenderItemInfo, type OnViewableItemsChanged, type ViewToken, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange };
+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 };

package/index.d.ts

@@ -18,7 +18,7 @@ type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset
         distanceFromEnd: number;
     }) => void) | null | undefined;
     keyExtractor?: (item: T, index: number) => string;
-    renderItem?: (props: LegendListRenderItemInfo<T>) => ReactNode;
+    renderItem?: (props: LegendListRenderItemProps<T>) => ReactNode;
     onViewableRangeChanged?: (range: ViewableRange<T>) => void;
     ListHeaderComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
     ListHeaderComponentStyle?: StyleProp<ViewStyle> | undefined;
@@ -59,9 +59,12 @@ interface ViewableRange<T> {
     end: number;
     items: T[];
 }
-interface LegendListRenderItemInfo<ItemT> {
+interface LegendListRenderItemProps<ItemT> {
     item: ItemT;
     index: number;
+    useViewability: (configId: string, callback: ViewabilityCallback) => void;
+    useRecyclingEffect: (effect: (info: LegendListRecyclingState<ItemT>) => void | (() => void)) => void;
+    useRecyclingState: <T>(updateState: (info: LegendListRecyclingState<ItemT>) => T) => [T, React.Dispatch<T>];
 }
 type LegendListRef = {
     /**
@@ -106,7 +109,7 @@ interface ViewToken<ItemT = any> {
 }
 interface ViewabilityConfigCallbackPair {
     viewabilityConfig: ViewabilityConfig;
-    onViewableItemsChanged: OnViewableItemsChanged;
+    onViewableItemsChanged?: OnViewableItemsChanged;
 }
 type ViewabilityConfigCallbackPairs = ViewabilityConfigCallbackPair[];
 type OnViewableItemsChanged = ((info: {
@@ -114,6 +117,10 @@ type OnViewableItemsChanged = ((info: {
     changed: Array<ViewToken>;
 }) => void) | null;
 interface ViewabilityConfig {
+    /**
+     * A unique ID to identify this viewability config
+     */
+    id: string;
     /**
      * Minimum amount of time (in milliseconds) that an item must be physically viewable before the
      * viewability callback will be fired. A high number means that scrolling through content without
@@ -138,9 +145,16 @@ interface ViewabilityConfig {
      */
     waitForInteraction?: boolean | undefined;
 }
+type ViewabilityCallback = (viewToken: ViewToken) => void;
+interface LegendListRecyclingState<T> {
+    item: T;
+    prevItem: T | undefined;
+    index: number;
+    prevIndex: number | undefined;
+}
 
 declare const LegendList: <T>(props: LegendListProps<T> & {
     ref?: ForwardedRef<LegendListRef>;
 }) => ReactElement;
 
-export { type InternalState, LegendList, type LegendListProps, type LegendListRef, type LegendListRenderItemInfo, type OnViewableItemsChanged, type ViewToken, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange };
+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 };

package/index.js

@@ -31,6 +31,7 @@ LeanView.displayName = "RCTView";
 var ContextState = React7__namespace.createContext(null);
 function StateProvider({ children }) {
   const [value] = React7__namespace.useState(() => ({
+    hooks: /* @__PURE__ */ new Map(),
     listeners: /* @__PURE__ */ new Map(),
     values: /* @__PURE__ */ new Map()
   }));
@@ -40,21 +41,37 @@ function useStateContext() {
   return React7__namespace.useContext(ContextState);
 }
 function use$(signalName) {
-  const { listeners, values } = React7__namespace.useContext(ContextState);
+  const { hooks, values } = React7__namespace.useContext(ContextState);
   const [, forceUpdate] = React7__namespace.useReducer((x) => x + 1, 0);
-  listeners.set(signalName, forceUpdate);
+  hooks.set(signalName, forceUpdate);
   return values.get(signalName);
 }
+function listen$(ctx, signalName, cb) {
+  const { listeners } = ctx;
+  let setListeners = listeners.get(signalName);
+  if (!setListeners) {
+    setListeners = /* @__PURE__ */ new Set();
+    listeners.set(signalName, setListeners);
+  }
+  setListeners.add(cb);
+  return () => setListeners.delete(cb);
+}
 function peek$(ctx, signalName) {
   const { values } = ctx;
   return values.get(signalName);
 }
 function set$(ctx, signalName, value) {
   var _a;
-  const { listeners, values } = ctx;
+  const { listeners, hooks, values } = ctx;
   if (values.get(signalName) !== value) {
     values.set(signalName, value);
-    (_a = listeners.get(signalName)) == null ? void 0 : _a();
+    (_a = hooks.get(signalName)) == null ? void 0 : _a();
+    const setListeners = listeners.get(signalName);
+    if (setListeners) {
+      for (const listener of setListeners) {
+        listener(value);
+      }
+    }
   }
 }
 
@@ -70,8 +87,15 @@ function InnerContainer({ id, getRenderedItem, recycleItems, ItemSeparatorCompon
   if (itemIndex < 0) {
     return null;
   }
-  const renderedItem = getRenderedItem(itemIndex);
-  return /* @__PURE__ */ React7__namespace.createElement(React7__namespace.Fragment, { key: recycleItems ? void 0 : itemIndex }, renderedItem, ItemSeparatorComponent && itemIndex < numItems - 1 && ItemSeparatorComponent);
+  return /* @__PURE__ */ React7__namespace.createElement(React7__namespace.Fragment, { key: recycleItems ? void 0 : itemIndex }, /* @__PURE__ */ React7__namespace.createElement(RenderedItem, { itemIndex, id, getRenderedItem }), ItemSeparatorComponent && itemIndex < numItems - 1 && ItemSeparatorComponent);
+}
+function RenderedItem({
+  itemIndex,
+  id,
+  getRenderedItem
+}) {
+  const renderedItem = getRenderedItem(itemIndex, id);
+  return renderedItem;
 }
 var Container = ({
   id,
@@ -191,6 +215,7 @@ var ListComponent = React7__namespace.memo(function ListComponent2({
   ListFooterComponentStyle,
   getRenderedItem,
   updateItemSize,
+  addTotalSize,
   refScroller,
   ...rest
 }) {
@@ -214,7 +239,21 @@ var ListComponent = React7__namespace.memo(function ListComponent2({
       ref: refScroller
     },
     alignItemsAtEnd && /* @__PURE__ */ React7__namespace.createElement($View, { $key: "paddingTop", $style: () => ({ height: peek$(ctx, "paddingTop") }) }),
-    ListHeaderComponent && /* @__PURE__ */ React7__namespace.createElement(reactNative.View, { style: ListHeaderComponentStyle }, getComponent(ListHeaderComponent)),
+    ListHeaderComponent && /* @__PURE__ */ React7__namespace.createElement(
+      reactNative.View,
+      {
+        style: ListHeaderComponentStyle,
+        onLayout: (event) => {
+          const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
+          const prevSize = peek$(ctx, "headerSize") || 0;
+          if (size !== prevSize) {
+            set$(ctx, "headerSize", size);
+            addTotalSize(size - prevSize);
+          }
+        }
+      },
+      getComponent(ListHeaderComponent)
+    ),
     /* @__PURE__ */ React7__namespace.createElement(
       Containers,
       {
@@ -230,15 +269,16 @@ var ListComponent = React7__namespace.memo(function ListComponent2({
 });
 
 // src/viewability.ts
-var mapViewabilityConfigCallbackPairs = /* @__PURE__ */ new WeakMap();
+var mapViewabilityConfigCallbackPairs = /* @__PURE__ */ new Map();
+var mapViewabilityCallbacks = /* @__PURE__ */ new Map();
 function setupViewability(props) {
   let { viewabilityConfig, viewabilityConfigCallbackPairs, onViewableItemsChanged } = props;
-  viewabilityConfigCallbackPairs = viewabilityConfigCallbackPairs || onViewableItemsChanged && [
+  viewabilityConfigCallbackPairs = viewabilityConfigCallbackPairs || [
     { viewabilityConfig: viewabilityConfig || { viewAreaCoveragePercentThreshold: 0 }, onViewableItemsChanged }
   ];
   if (viewabilityConfigCallbackPairs) {
     for (const pair of viewabilityConfigCallbackPairs) {
-      mapViewabilityConfigCallbackPairs.set(pair, {
+      mapViewabilityConfigCallbackPairs.set(pair.viewabilityConfig.id, {
         viewableItems: [],
         start: -1,
         end: -1,
@@ -251,7 +291,9 @@ function setupViewability(props) {
 }
 function updateViewableItems(state, ctx, viewabilityConfigCallbackPairs, getId, scrollSize, start, end) {
   for (const viewabilityConfigCallbackPair of viewabilityConfigCallbackPairs) {
-    const viewabilityState = mapViewabilityConfigCallbackPairs.get(viewabilityConfigCallbackPair);
+    const viewabilityState = mapViewabilityConfigCallbackPairs.get(
+      viewabilityConfigCallbackPair.viewabilityConfig.id
+    );
     viewabilityState.start = start;
     viewabilityState.end = end;
     if (viewabilityConfigCallbackPair.viewabilityConfig.minimumViewTime) {
@@ -266,13 +308,14 @@ function updateViewableItems(state, ctx, viewabilityConfigCallbackPairs, getId,
   }
 }
 function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getId, state, ctx, scrollSize) {
-  var _a;
-  const viewabilityState = mapViewabilityConfigCallbackPairs.get(viewabilityConfigCallbackPair);
+  const { viewabilityConfig, onViewableItemsChanged } = viewabilityConfigCallbackPair;
+  const configId = viewabilityConfig.id;
+  const viewabilityState = mapViewabilityConfigCallbackPairs.get(configId);
   const { viewableItems: previousViewableItems, start, previousStart, end, previousEnd } = viewabilityState;
   const changed = [];
   if (previousViewableItems) {
     for (const viewToken of previousViewableItems) {
-      if (viewToken.index < start || viewToken.index > end) {
+      if (!isViewable(state, ctx, viewabilityConfig, viewToken.key, scrollSize)) {
         viewToken.isViewable = false;
         changed.push(viewToken);
       }
@@ -283,7 +326,7 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
     const item = data[i];
     if (item) {
       const key = getId(i);
-      if (isViewable(state, ctx, viewabilityConfigCallbackPair.viewabilityConfig, key, scrollSize)) {
+      if (isViewable(state, ctx, viewabilityConfig, key, scrollSize)) {
         const viewToken = {
           item,
           key,
@@ -299,7 +342,15 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
   }
   Object.assign(viewabilityState, { viewableItems, previousStart: start, previousEnd: end });
   if (changed.length > 0) {
-    (_a = viewabilityConfigCallbackPair.onViewableItemsChanged) == null ? void 0 : _a.call(viewabilityConfigCallbackPair, { viewableItems, changed });
+    console.log("changed", changed);
+    viewabilityState.viewableItems = viewableItems;
+    for (let i = 0; i < changed.length; i++) {
+      const change = changed[i];
+      maybeUpdateViewabilityCallback(configId, change);
+    }
+    if (onViewableItemsChanged) {
+      onViewableItemsChanged({ viewableItems, changed });
+    }
   }
 }
 function isViewable(state, ctx, viewabilityConfig, key, scrollSize) {
@@ -319,6 +370,18 @@ function isViewable(state, ctx, viewabilityConfig, key, scrollSize) {
   const percent = 100 * (visibleHeight / (viewAreaMode ? scrollSize : size));
   return percent >= viewablePercentThreshold;
 }
+function maybeUpdateViewabilityCallback(configId, viewToken) {
+  const key = viewToken.key + configId;
+  const cb = mapViewabilityCallbacks.get(key);
+  cb == null ? void 0 : cb(viewToken);
+}
+function registerViewabilityCallback(itemKey, configId, callback) {
+  const key = itemKey + configId;
+  mapViewabilityCallbacks.set(key, callback);
+  return () => {
+    mapViewabilityCallbacks.delete(key);
+  };
+}
 
 // src/LegendList.tsx
 var DEFAULT_SCROLL_BUFFER = 0;
@@ -420,7 +483,7 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
   refState.current.data = data;
   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 = (add) => {
+  const addTotalSize = React7.useCallback((add) => {
     const prev = refState.current.totalSize;
     refState.current.totalSize += add;
     const totalSize = refState.current.totalSize;
@@ -438,17 +501,65 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
     } else if (!refState.current.animFrameTotalSize) {
       refState.current.animFrameTotalSize = requestAnimationFrame(doAdd);
     }
-  };
+  }, []);
   const getRenderedItem = React7.useCallback(
-    (index) => {
+    (index, containerIndex) => {
       var _a2;
       const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
       if (!data2) {
         return null;
       }
+      const itemKey = getId(index);
+      const useViewability = (configId, callback) => {
+        React7.useEffect(() => registerViewabilityCallback(itemKey, configId, callback), []);
+      };
+      const useRecyclingEffect = (effect) => {
+        React7.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 useRecyclingState = (updateState) => {
+        const stateInfo = React7.useState(
+          () => updateState({
+            index,
+            item: data2[index],
+            prevIndex: void 0,
+            prevItem: void 0
+          })
+        );
+        useRecyclingEffect((state) => {
+          const newState = updateState(state);
+          console.log("setting state", newState);
+          stateInfo[1](newState);
+        });
+        return stateInfo;
+      };
       const renderedItem = renderItem == null ? void 0 : renderItem({
         item: data2[index],
-        index
+        index,
+        useViewability,
+        useRecyclingEffect,
+        useRecyclingState
       });
       return renderedItem;
     },
@@ -757,7 +868,8 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
       handleScroll,
       onLayout,
       recycleItems,
-      alignItemsAtEnd
+      alignItemsAtEnd,
+      addTotalSize
     }
   );
 });

package/index.mjs

@@ -1,5 +1,5 @@
 import * as React7 from 'react';
-import { forwardRef, useRef, useMemo, useCallback, useEffect, useImperativeHandle } from 'react';
+import { forwardRef, useRef, useMemo, useCallback, useEffect, useImperativeHandle, useState } from 'react';
 import { ScrollView, View, StyleSheet, Dimensions, unstable_batchedUpdates } from 'react-native';
 
 // src/LegendList.tsx
@@ -10,6 +10,7 @@ LeanView.displayName = "RCTView";
 var ContextState = React7.createContext(null);
 function StateProvider({ children }) {
   const [value] = React7.useState(() => ({
+    hooks: /* @__PURE__ */ new Map(),
     listeners: /* @__PURE__ */ new Map(),
     values: /* @__PURE__ */ new Map()
   }));
@@ -19,21 +20,37 @@ function useStateContext() {
   return React7.useContext(ContextState);
 }
 function use$(signalName) {
-  const { listeners, values } = React7.useContext(ContextState);
+  const { hooks, values } = React7.useContext(ContextState);
   const [, forceUpdate] = React7.useReducer((x) => x + 1, 0);
-  listeners.set(signalName, forceUpdate);
+  hooks.set(signalName, forceUpdate);
   return values.get(signalName);
 }
+function listen$(ctx, signalName, cb) {
+  const { listeners } = ctx;
+  let setListeners = listeners.get(signalName);
+  if (!setListeners) {
+    setListeners = /* @__PURE__ */ new Set();
+    listeners.set(signalName, setListeners);
+  }
+  setListeners.add(cb);
+  return () => setListeners.delete(cb);
+}
 function peek$(ctx, signalName) {
   const { values } = ctx;
   return values.get(signalName);
 }
 function set$(ctx, signalName, value) {
   var _a;
-  const { listeners, values } = ctx;
+  const { listeners, hooks, values } = ctx;
   if (values.get(signalName) !== value) {
     values.set(signalName, value);
-    (_a = listeners.get(signalName)) == null ? void 0 : _a();
+    (_a = hooks.get(signalName)) == null ? void 0 : _a();
+    const setListeners = listeners.get(signalName);
+    if (setListeners) {
+      for (const listener of setListeners) {
+        listener(value);
+      }
+    }
   }
 }
 
@@ -49,8 +66,15 @@ function InnerContainer({ id, getRenderedItem, recycleItems, ItemSeparatorCompon
   if (itemIndex < 0) {
     return null;
   }
-  const renderedItem = getRenderedItem(itemIndex);
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, { key: recycleItems ? void 0 : itemIndex }, renderedItem, ItemSeparatorComponent && itemIndex < numItems - 1 && ItemSeparatorComponent);
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, { key: recycleItems ? void 0 : itemIndex }, /* @__PURE__ */ React7.createElement(RenderedItem, { itemIndex, id, getRenderedItem }), ItemSeparatorComponent && itemIndex < numItems - 1 && ItemSeparatorComponent);
+}
+function RenderedItem({
+  itemIndex,
+  id,
+  getRenderedItem
+}) {
+  const renderedItem = getRenderedItem(itemIndex, id);
+  return renderedItem;
 }
 var Container = ({
   id,
@@ -170,6 +194,7 @@ var ListComponent = React7.memo(function ListComponent2({
   ListFooterComponentStyle,
   getRenderedItem,
   updateItemSize,
+  addTotalSize,
   refScroller,
   ...rest
 }) {
@@ -193,7 +218,21 @@ var ListComponent = React7.memo(function ListComponent2({
       ref: refScroller
     },
     alignItemsAtEnd && /* @__PURE__ */ React7.createElement($View, { $key: "paddingTop", $style: () => ({ height: peek$(ctx, "paddingTop") }) }),
-    ListHeaderComponent && /* @__PURE__ */ React7.createElement(View, { style: ListHeaderComponentStyle }, getComponent(ListHeaderComponent)),
+    ListHeaderComponent && /* @__PURE__ */ React7.createElement(
+      View,
+      {
+        style: ListHeaderComponentStyle,
+        onLayout: (event) => {
+          const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
+          const prevSize = peek$(ctx, "headerSize") || 0;
+          if (size !== prevSize) {
+            set$(ctx, "headerSize", size);
+            addTotalSize(size - prevSize);
+          }
+        }
+      },
+      getComponent(ListHeaderComponent)
+    ),
     /* @__PURE__ */ React7.createElement(
       Containers,
       {
@@ -209,15 +248,16 @@ var ListComponent = React7.memo(function ListComponent2({
 });
 
 // src/viewability.ts
-var mapViewabilityConfigCallbackPairs = /* @__PURE__ */ new WeakMap();
+var mapViewabilityConfigCallbackPairs = /* @__PURE__ */ new Map();
+var mapViewabilityCallbacks = /* @__PURE__ */ new Map();
 function setupViewability(props) {
   let { viewabilityConfig, viewabilityConfigCallbackPairs, onViewableItemsChanged } = props;
-  viewabilityConfigCallbackPairs = viewabilityConfigCallbackPairs || onViewableItemsChanged && [
+  viewabilityConfigCallbackPairs = viewabilityConfigCallbackPairs || [
     { viewabilityConfig: viewabilityConfig || { viewAreaCoveragePercentThreshold: 0 }, onViewableItemsChanged }
   ];
   if (viewabilityConfigCallbackPairs) {
     for (const pair of viewabilityConfigCallbackPairs) {
-      mapViewabilityConfigCallbackPairs.set(pair, {
+      mapViewabilityConfigCallbackPairs.set(pair.viewabilityConfig.id, {
         viewableItems: [],
         start: -1,
         end: -1,
@@ -230,7 +270,9 @@ function setupViewability(props) {
 }
 function updateViewableItems(state, ctx, viewabilityConfigCallbackPairs, getId, scrollSize, start, end) {
   for (const viewabilityConfigCallbackPair of viewabilityConfigCallbackPairs) {
-    const viewabilityState = mapViewabilityConfigCallbackPairs.get(viewabilityConfigCallbackPair);
+    const viewabilityState = mapViewabilityConfigCallbackPairs.get(
+      viewabilityConfigCallbackPair.viewabilityConfig.id
+    );
     viewabilityState.start = start;
     viewabilityState.end = end;
     if (viewabilityConfigCallbackPair.viewabilityConfig.minimumViewTime) {
@@ -245,13 +287,14 @@ function updateViewableItems(state, ctx, viewabilityConfigCallbackPairs, getId,
   }
 }
 function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getId, state, ctx, scrollSize) {
-  var _a;
-  const viewabilityState = mapViewabilityConfigCallbackPairs.get(viewabilityConfigCallbackPair);
+  const { viewabilityConfig, onViewableItemsChanged } = viewabilityConfigCallbackPair;
+  const configId = viewabilityConfig.id;
+  const viewabilityState = mapViewabilityConfigCallbackPairs.get(configId);
   const { viewableItems: previousViewableItems, start, previousStart, end, previousEnd } = viewabilityState;
   const changed = [];
   if (previousViewableItems) {
     for (const viewToken of previousViewableItems) {
-      if (viewToken.index < start || viewToken.index > end) {
+      if (!isViewable(state, ctx, viewabilityConfig, viewToken.key, scrollSize)) {
         viewToken.isViewable = false;
         changed.push(viewToken);
       }
@@ -262,7 +305,7 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
     const item = data[i];
     if (item) {
       const key = getId(i);
-      if (isViewable(state, ctx, viewabilityConfigCallbackPair.viewabilityConfig, key, scrollSize)) {
+      if (isViewable(state, ctx, viewabilityConfig, key, scrollSize)) {
         const viewToken = {
           item,
           key,
@@ -278,7 +321,15 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
   }
   Object.assign(viewabilityState, { viewableItems, previousStart: start, previousEnd: end });
   if (changed.length > 0) {
-    (_a = viewabilityConfigCallbackPair.onViewableItemsChanged) == null ? void 0 : _a.call(viewabilityConfigCallbackPair, { viewableItems, changed });
+    console.log("changed", changed);
+    viewabilityState.viewableItems = viewableItems;
+    for (let i = 0; i < changed.length; i++) {
+      const change = changed[i];
+      maybeUpdateViewabilityCallback(configId, change);
+    }
+    if (onViewableItemsChanged) {
+      onViewableItemsChanged({ viewableItems, changed });
+    }
   }
 }
 function isViewable(state, ctx, viewabilityConfig, key, scrollSize) {
@@ -298,6 +349,18 @@ function isViewable(state, ctx, viewabilityConfig, key, scrollSize) {
   const percent = 100 * (visibleHeight / (viewAreaMode ? scrollSize : size));
   return percent >= viewablePercentThreshold;
 }
+function maybeUpdateViewabilityCallback(configId, viewToken) {
+  const key = viewToken.key + configId;
+  const cb = mapViewabilityCallbacks.get(key);
+  cb == null ? void 0 : cb(viewToken);
+}
+function registerViewabilityCallback(itemKey, configId, callback) {
+  const key = itemKey + configId;
+  mapViewabilityCallbacks.set(key, callback);
+  return () => {
+    mapViewabilityCallbacks.delete(key);
+  };
+}
 
 // src/LegendList.tsx
 var DEFAULT_SCROLL_BUFFER = 0;
@@ -399,7 +462,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
   refState.current.data = data;
   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 = (add) => {
+  const addTotalSize = useCallback((add) => {
     const prev = refState.current.totalSize;
     refState.current.totalSize += add;
     const totalSize = refState.current.totalSize;
@@ -417,17 +480,65 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     } else if (!refState.current.animFrameTotalSize) {
       refState.current.animFrameTotalSize = requestAnimationFrame(doAdd);
     }
-  };
+  }, []);
   const getRenderedItem = useCallback(
-    (index) => {
+    (index, containerIndex) => {
       var _a2;
       const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
       if (!data2) {
         return null;
       }
+      const itemKey = getId(index);
+      const useViewability = (configId, callback) => {
+        useEffect(() => registerViewabilityCallback(itemKey, configId, 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 useRecyclingState = (updateState) => {
+        const stateInfo = useState(
+          () => updateState({
+            index,
+            item: data2[index],
+            prevIndex: void 0,
+            prevItem: void 0
+          })
+        );
+        useRecyclingEffect((state) => {
+          const newState = updateState(state);
+          console.log("setting state", newState);
+          stateInfo[1](newState);
+        });
+        return stateInfo;
+      };
       const renderedItem = renderItem == null ? void 0 : renderItem({
         item: data2[index],
-        index
+        index,
+        useViewability,
+        useRecyclingEffect,
+        useRecyclingState
       });
       return renderedItem;
     },
@@ -736,7 +847,8 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       handleScroll,
       onLayout,
       recycleItems,
-      alignItemsAtEnd
+      alignItemsAtEnd,
+      addTotalSize
     }
   );
 });

package/package.json

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