@legendapp/list 0.4.1 → 0.4.3

package/index.d.mts

@@ -63,6 +63,7 @@ interface LegendListRenderItemProps<ItemT> {
     item: ItemT;
     index: number;
     useViewability: (configId: string, callback: ViewabilityCallback) => void;
+    useViewabilityAmount: (callback: ViewabilityAmountCallback) => void;
     useRecyclingEffect: (effect: (info: LegendListRecyclingState<ItemT>) => void | (() => void)) => void;
     useRecyclingState: <T>(updateState: (info: LegendListRecyclingState<ItemT>) => T) => [T, React.Dispatch<T>];
 }
@@ -107,6 +108,14 @@ interface ViewToken<ItemT = any> {
     index: number;
     isViewable: boolean;
 }
+interface ViewAmountToken<ItemT = any> extends ViewToken<ItemT> {
+    sizeVisible: number;
+    size: number;
+    percentVisible: number;
+    percentOfScroller: number;
+    position: number;
+    scrollSize: number;
+}
 interface ViewabilityConfigCallbackPair {
     viewabilityConfig: ViewabilityConfig;
     onViewableItemsChanged?: OnViewableItemsChanged;
@@ -146,6 +155,7 @@ interface ViewabilityConfig {
     waitForInteraction?: boolean | undefined;
 }
 type ViewabilityCallback = (viewToken: ViewToken) => void;
+type ViewabilityAmountCallback = (viewToken: ViewAmountToken) => void;
 interface LegendListRecyclingState<T> {
     item: T;
     prevItem: T | undefined;
@@ -157,4 +167,4 @@ declare const LegendList: <T>(props: LegendListProps<T> & {
     ref?: ForwardedRef<LegendListRef>;
 }) => ReactElement;
 
-export { type InternalState, LegendList, type LegendListProps, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type ViewToken, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange };
+export { type InternalState, LegendList, type LegendListProps, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange };

package/index.d.ts

@@ -63,6 +63,7 @@ interface LegendListRenderItemProps<ItemT> {
     item: ItemT;
     index: number;
     useViewability: (configId: string, callback: ViewabilityCallback) => void;
+    useViewabilityAmount: (callback: ViewabilityAmountCallback) => void;
     useRecyclingEffect: (effect: (info: LegendListRecyclingState<ItemT>) => void | (() => void)) => void;
     useRecyclingState: <T>(updateState: (info: LegendListRecyclingState<ItemT>) => T) => [T, React.Dispatch<T>];
 }
@@ -107,6 +108,14 @@ interface ViewToken<ItemT = any> {
     index: number;
     isViewable: boolean;
 }
+interface ViewAmountToken<ItemT = any> extends ViewToken<ItemT> {
+    sizeVisible: number;
+    size: number;
+    percentVisible: number;
+    percentOfScroller: number;
+    position: number;
+    scrollSize: number;
+}
 interface ViewabilityConfigCallbackPair {
     viewabilityConfig: ViewabilityConfig;
     onViewableItemsChanged?: OnViewableItemsChanged;
@@ -146,6 +155,7 @@ interface ViewabilityConfig {
     waitForInteraction?: boolean | undefined;
 }
 type ViewabilityCallback = (viewToken: ViewToken) => void;
+type ViewabilityAmountCallback = (viewToken: ViewAmountToken) => void;
 interface LegendListRecyclingState<T> {
     item: T;
     prevItem: T | undefined;
@@ -157,4 +167,4 @@ declare const LegendList: <T>(props: LegendListProps<T> & {
     ref?: ForwardedRef<LegendListRef>;
 }) => ReactElement;
 
-export { type InternalState, LegendList, type LegendListProps, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type ViewToken, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange };
+export { type InternalState, LegendList, type LegendListProps, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange };

package/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React7 = require('react');
+var React6 = require('react');
 var reactNative = require('react-native');
 
 function _interopNamespace(e) {
@@ -21,28 +21,28 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React7__namespace = /*#__PURE__*/_interopNamespace(React7);
+var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
 
 // src/LegendList.tsx
-var LeanView = React7__namespace.forwardRef((props, ref) => {
-  return React7__namespace.createElement("RCTView", { ...props, ref });
+var LeanView = React6__namespace.forwardRef((props, ref) => {
+  return React6__namespace.createElement("RCTView", { ...props, ref });
 });
 LeanView.displayName = "RCTView";
-var ContextState = React7__namespace.createContext(null);
+var ContextState = React6__namespace.createContext(null);
 function StateProvider({ children }) {
-  const [value] = React7__namespace.useState(() => ({
+  const [value] = React6__namespace.useState(() => ({
     hooks: /* @__PURE__ */ new Map(),
     listeners: /* @__PURE__ */ new Map(),
     values: /* @__PURE__ */ new Map()
   }));
-  return /* @__PURE__ */ React7__namespace.createElement(ContextState.Provider, { value }, children);
+  return /* @__PURE__ */ React6__namespace.createElement(ContextState.Provider, { value }, children);
 }
 function useStateContext() {
-  return React7__namespace.useContext(ContextState);
+  return React6__namespace.useContext(ContextState);
 }
 function use$(signalName) {
-  const { hooks, values } = React7__namespace.useContext(ContextState);
-  const [, forceUpdate] = React7__namespace.useReducer((x) => x + 1, 0);
+  const { hooks, values } = React6__namespace.useContext(ContextState);
+  const [, forceUpdate] = React6__namespace.useReducer((x) => x + 1, 0);
   hooks.set(signalName, forceUpdate);
   return values.get(signalName);
 }
@@ -79,7 +79,7 @@ function set$(ctx, signalName, value) {
 function $View({ $key, $style, ...rest }) {
   use$($key);
   const style = $style();
-  return /* @__PURE__ */ React7__namespace.createElement(LeanView, { style, ...rest });
+  return /* @__PURE__ */ React6__namespace.createElement(LeanView, { style, ...rest });
 }
 function InnerContainer({ id, getRenderedItem, recycleItems, ItemSeparatorComponent }) {
   const itemIndex = use$(`containerIndex${id}`);
@@ -87,7 +87,7 @@ function InnerContainer({ id, getRenderedItem, recycleItems, ItemSeparatorCompon
   if (itemIndex < 0) {
     return null;
   }
-  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);
+  return /* @__PURE__ */ React6__namespace.createElement(React6__namespace.Fragment, { key: recycleItems ? void 0 : itemIndex }, /* @__PURE__ */ React6__namespace.createElement(RenderedItem, { itemIndex, id, getRenderedItem }), ItemSeparatorComponent && itemIndex < numItems - 1 && ItemSeparatorComponent);
 }
 function RenderedItem({
   itemIndex,
@@ -123,7 +123,7 @@ var Container = ({
       opacity: position < 0 ? 0 : 1
     };
   };
-  return /* @__PURE__ */ React7__namespace.createElement(
+  return /* @__PURE__ */ React6__namespace.createElement(
     $View,
     {
       $key: `containerPosition${id}`,
@@ -136,7 +136,7 @@ var Container = ({
         }
       }
     },
-    /* @__PURE__ */ React7__namespace.createElement(
+    /* @__PURE__ */ React6__namespace.createElement(
       InnerContainer,
       {
         id,
@@ -149,7 +149,7 @@ var Container = ({
 };
 
 // src/Containers.tsx
-var Containers = React7__namespace.memo(function Containers2({
+var Containers = React6__namespace.memo(function Containers2({
   horizontal,
   recycleItems,
   ItemSeparatorComponent,
@@ -161,7 +161,7 @@ var Containers = React7__namespace.memo(function Containers2({
   const containers = [];
   for (let i = 0; i < numContainers; i++) {
     containers.push(
-      /* @__PURE__ */ React7__namespace.createElement(
+      /* @__PURE__ */ React6__namespace.createElement(
         Container,
         {
           id: i,
@@ -175,7 +175,7 @@ var Containers = React7__namespace.memo(function Containers2({
       )
     );
   }
-  return /* @__PURE__ */ React7__namespace.createElement(
+  return /* @__PURE__ */ React6__namespace.createElement(
     $View,
     {
       $key: "totalSize",
@@ -191,15 +191,15 @@ var Containers = React7__namespace.memo(function Containers2({
 
 // src/ListComponent.tsx
 var getComponent = (Component) => {
-  if (React7__namespace.isValidElement(Component)) {
+  if (React6__namespace.isValidElement(Component)) {
     return Component;
   }
   if (Component) {
-    return /* @__PURE__ */ React7__namespace.createElement(Component, null);
+    return /* @__PURE__ */ React6__namespace.createElement(Component, null);
   }
   return null;
 };
-var ListComponent = React7__namespace.memo(function ListComponent2({
+var ListComponent = React6__namespace.memo(function ListComponent2({
   style,
   contentContainerStyle,
   horizontal,
@@ -220,7 +220,7 @@ var ListComponent = React7__namespace.memo(function ListComponent2({
   ...rest
 }) {
   const ctx = useStateContext();
-  return /* @__PURE__ */ React7__namespace.createElement(
+  return /* @__PURE__ */ React6__namespace.createElement(
     reactNative.ScrollView,
     {
       ...rest,
@@ -238,8 +238,8 @@ var ListComponent = React7__namespace.memo(function ListComponent2({
       contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
       ref: refScroller
     },
-    alignItemsAtEnd && /* @__PURE__ */ React7__namespace.createElement($View, { $key: "paddingTop", $style: () => ({ height: peek$(ctx, "paddingTop") }) }),
-    ListHeaderComponent && /* @__PURE__ */ React7__namespace.createElement(
+    alignItemsAtEnd && /* @__PURE__ */ React6__namespace.createElement($View, { $key: "paddingTop", $style: () => ({ height: peek$(ctx, "paddingTop") }) }),
+    ListHeaderComponent && /* @__PURE__ */ React6__namespace.createElement(
       reactNative.View,
       {
         style: ListHeaderComponentStyle,
@@ -254,7 +254,7 @@ var ListComponent = React7__namespace.memo(function ListComponent2({
       },
       getComponent(ListHeaderComponent)
     ),
-    /* @__PURE__ */ React7__namespace.createElement(
+    /* @__PURE__ */ React6__namespace.createElement(
       Containers,
       {
         horizontal,
@@ -264,13 +264,14 @@ var ListComponent = React7__namespace.memo(function ListComponent2({
         updateItemSize
       }
     ),
-    ListFooterComponent && /* @__PURE__ */ React7__namespace.createElement(reactNative.View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
+    ListFooterComponent && /* @__PURE__ */ React6__namespace.createElement(reactNative.View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
   );
 });
 
 // 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 || [
@@ -315,7 +316,7 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
   const changed = [];
   if (previousViewableItems) {
     for (const viewToken of previousViewableItems) {
-      if (!isViewable(state, ctx, viewabilityConfig, viewToken.key, scrollSize)) {
+      if (!isViewable(state, ctx, viewabilityConfig, viewToken.key, scrollSize, viewToken.item, viewToken.index)) {
         viewToken.isViewable = false;
         changed.push(viewToken);
       }
@@ -326,7 +327,7 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
     const item = data[i];
     if (item) {
       const key = getId(i);
-      if (isViewable(state, ctx, viewabilityConfig, key, scrollSize)) {
+      if (isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, i)) {
         const viewToken = {
           item,
           key,
@@ -342,7 +343,6 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
   }
   Object.assign(viewabilityState, { viewableItems, previousStart: start, previousEnd: end });
   if (changed.length > 0) {
-    console.log("changed", changed);
     viewabilityState.viewableItems = viewableItems;
     for (let i = 0; i < changed.length; i++) {
       const change = changed[i];
@@ -353,7 +353,7 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
     }
   }
 }
-function isViewable(state, ctx, viewabilityConfig, key, scrollSize) {
+function isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, index) {
   const { sizes, positions, scroll } = state;
   const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
   const { itemVisiblePercentThreshold, viewAreaCoveragePercentThreshold } = viewabilityConfig;
@@ -363,33 +363,65 @@ function isViewable(state, ctx, viewabilityConfig, key, scrollSize) {
   const size = sizes.get(key) || 0;
   const bottom = top + size;
   const isEntirelyVisible = top >= 0 && bottom <= scrollSize && bottom > top;
-  if (isEntirelyVisible) {
-    return true;
+  const sizeVisible = isEntirelyVisible ? size : Math.min(bottom, scrollSize) - Math.max(top, 0);
+  const percentVisible = size ? isEntirelyVisible ? 100 : 100 * (sizeVisible / size) : 0;
+  const percentOfScroller = size ? 100 * (sizeVisible / scrollSize) : 0;
+  const percent = isEntirelyVisible ? 100 : viewAreaMode ? percentOfScroller : percentVisible;
+  const isViewable2 = percent >= viewablePercentThreshold;
+  const containerId = findContainerId(state, ctx, index);
+  const cb = mapViewabilityAmountCallbacks.get(containerId);
+  if (cb) {
+    cb({
+      index,
+      isViewable: isViewable2,
+      item,
+      key,
+      percentVisible,
+      percentOfScroller,
+      sizeVisible,
+      size,
+      position: top,
+      scrollSize
+    });
+  }
+  return isViewable2;
+}
+function findContainerId(state, ctx, index) {
+  const numContainers = peek$(ctx, "numContainers");
+  for (let i = 0; i < numContainers; i++) {
+    const itemIndex = peek$(ctx, `containerIndex${i}`);
+    if (itemIndex === index) {
+      return i;
+    }
   }
-  const visibleHeight = Math.min(bottom, scrollSize) - Math.max(top, 0);
-  const percent = 100 * (visibleHeight / (viewAreaMode ? scrollSize : size));
-  return percent >= viewablePercentThreshold;
+  return -1;
 }
 function maybeUpdateViewabilityCallback(configId, viewToken) {
   const key = viewToken.key + configId;
   const cb = mapViewabilityCallbacks.get(key);
   cb == null ? void 0 : cb(viewToken);
 }
-function registerViewabilityCallback(itemKey, configId, callback) {
-  const key = itemKey + configId;
+function registerViewabilityCallback(containerId, configId, callback) {
+  const key = containerId + configId;
   mapViewabilityCallbacks.set(key, callback);
   return () => {
     mapViewabilityCallbacks.delete(key);
   };
 }
+function registerViewabilityAmountCallback(containerId, callback) {
+  mapViewabilityAmountCallbacks.set(containerId, callback);
+  return () => {
+    mapViewabilityAmountCallbacks.delete(containerId);
+  };
+}
 
 // src/LegendList.tsx
 var DEFAULT_SCROLL_BUFFER = 0;
 var POSITION_OUT_OF_VIEW = -1e4;
-var LegendList = React7.forwardRef(function LegendList2(props, forwardedRef) {
-  return /* @__PURE__ */ React.createElement(StateProvider, null, /* @__PURE__ */ React.createElement(LegendListInner, { ...props, ref: forwardedRef }));
+var LegendList = React6.forwardRef(function LegendList2(props, forwardedRef) {
+  return /* @__PURE__ */ React6__namespace.createElement(StateProvider, null, /* @__PURE__ */ React6__namespace.createElement(LegendListInner, { ...props, ref: forwardedRef }));
 });
-var LegendListInner = React7.forwardRef(function LegendListInner2(props, forwardedRef) {
+var LegendListInner = React6.forwardRef(function LegendListInner2(props, forwardedRef) {
   var _a, _b;
   const {
     data,
@@ -415,17 +447,17 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
     ...rest
   } = props;
   const ctx = useStateContext();
-  const internalRef = React7.useRef(null);
+  const internalRef = React6.useRef(null);
   const refScroller = internalRef;
   const scrollBuffer = drawDistance != null ? drawDistance : DEFAULT_SCROLL_BUFFER;
   const styleFlattened = reactNative.StyleSheet.flatten(styleProp);
-  const style = React7.useMemo(() => styleFlattened, [JSON.stringify(styleFlattened)]);
+  const style = React6.useMemo(() => styleFlattened, [JSON.stringify(styleFlattened)]);
   const contentContainerStyleFlattened = reactNative.StyleSheet.flatten(contentContainerStyleProp);
-  const contentContainerStyle = React7.useMemo(
+  const contentContainerStyle = React6.useMemo(
     () => contentContainerStyleFlattened,
     [JSON.stringify(contentContainerStyleProp)]
   );
-  const refState = React7.useRef();
+  const refState = React6.useRef();
   const getId = (index) => {
     var _a2;
     const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
@@ -453,7 +485,7 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
     }
     return void 0;
   };
-  const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : React7.useMemo(calculateInitialOffset, []);
+  const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : React6.useMemo(calculateInitialOffset, []);
   if (!refState.current) {
     refState.current = {
       sizes: /* @__PURE__ */ new Map(),
@@ -483,7 +515,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 = React7.useCallback((add) => {
+  const addTotalSize = React6.useCallback((add) => {
     const prev = refState.current.totalSize;
     refState.current.totalSize += add;
     const totalSize = refState.current.totalSize;
@@ -502,19 +534,21 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
       refState.current.animFrameTotalSize = requestAnimationFrame(doAdd);
     }
   }, []);
-  const getRenderedItem = React7.useCallback(
+  const getRenderedItem = React6.useCallback(
     (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), []);
+        React6.useEffect(() => registerViewabilityCallback(containerIndex, configId, callback), []);
+      };
+      const useViewabilityAmount = (callback) => {
+        React6.useEffect(() => registerViewabilityAmountCallback(containerIndex, callback), []);
       };
       const useRecyclingEffect = (effect) => {
-        React7.useEffect(() => {
+        React6.useEffect(() => {
           let prevIndex = index;
           let prevItem = data2[index];
           const signal = `containerIndex${containerIndex}`;
@@ -539,7 +573,7 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
         }, []);
       };
       const useRecyclingState = (updateState) => {
-        const stateInfo = React7.useState(
+        const stateInfo = React6.useState(
           () => updateState({
             index,
             item: data2[index],
@@ -549,7 +583,6 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
         );
         useRecyclingEffect((state) => {
           const newState = updateState(state);
-          console.log("setting state", newState);
           stateInfo[1](newState);
         });
         return stateInfo;
@@ -558,6 +591,7 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
         item: data2[index],
         index,
         useViewability,
+        useViewabilityAmount,
         useRecyclingEffect,
         useRecyclingState
       });
@@ -565,7 +599,7 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
     },
     [renderItem]
   );
-  const calculateItemsInView = React7.useCallback(() => {
+  const calculateItemsInView = React6.useCallback(() => {
     reactNative.unstable_batchedUpdates(() => {
       var _a2, _b2, _c;
       const {
@@ -726,7 +760,7 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
       }
     });
   }, [data]);
-  React7.useMemo(() => {
+  React6.useMemo(() => {
     var _a2, _b2;
     refState.current.viewabilityConfigCallbackPairs = setupViewability(props);
     const scrollLength = refState.current.scrollLength;
@@ -763,14 +797,14 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
       }
     }
   };
-  React7.useEffect(() => {
+  React6.useEffect(() => {
     if (refState.current) {
       refState.current.isEndReached = false;
     }
     calculateItemsInView();
     checkAtBottom();
   }, [data]);
-  const updateItemSize = React7.useCallback((index, size) => {
+  const updateItemSize = React6.useCallback((index, size) => {
     var _a2, _b2, _c, _d;
     const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
     if (!data2) {
@@ -800,18 +834,18 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
       }
     }
   }, []);
-  const handleScrollDebounced = React7.useCallback(() => {
+  const handleScrollDebounced = React6.useCallback(() => {
     calculateItemsInView();
     checkAtBottom();
     if (refState.current) {
       refState.current.animFrameScroll = null;
     }
   }, []);
-  const onLayout = React7.useCallback((event) => {
+  const onLayout = React6.useCallback((event) => {
     const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
     refState.current.scrollLength = scrollLength;
   }, []);
-  const handleScroll = React7.useCallback(
+  const handleScroll = React6.useCallback(
     (event, fromSelf) => {
       var _a2, _b2, _c;
       if (((_b2 = (_a2 = event.nativeEvent) == null ? void 0 : _a2.contentSize) == null ? void 0 : _b2.height) === 0 && ((_c = event.nativeEvent.contentSize) == null ? void 0 : _c.width) === 0) {
@@ -829,7 +863,7 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
     },
     []
   );
-  React7.useImperativeHandle(forwardedRef, () => {
+  React6.useImperativeHandle(forwardedRef, () => {
     const scrollToIndex = ({ index, animated }) => {
       const offsetObj = calculateInitialOffset(index);
       const offset = horizontal ? { x: offsetObj, y: 0 } : { x: 0, y: offsetObj };
@@ -854,7 +888,7 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
       scrollToEnd: refScroller.current.scrollToEnd
     };
   }, []);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React6__namespace.createElement(
     ListComponent,
     {
       ...rest,

package/index.mjs

@@ -1,27 +1,27 @@
-import * as React7 from 'react';
+import * as React6 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
-var LeanView = React7.forwardRef((props, ref) => {
-  return React7.createElement("RCTView", { ...props, ref });
+var LeanView = React6.forwardRef((props, ref) => {
+  return React6.createElement("RCTView", { ...props, ref });
 });
 LeanView.displayName = "RCTView";
-var ContextState = React7.createContext(null);
+var ContextState = React6.createContext(null);
 function StateProvider({ children }) {
-  const [value] = React7.useState(() => ({
+  const [value] = React6.useState(() => ({
     hooks: /* @__PURE__ */ new Map(),
     listeners: /* @__PURE__ */ new Map(),
     values: /* @__PURE__ */ new Map()
   }));
-  return /* @__PURE__ */ React7.createElement(ContextState.Provider, { value }, children);
+  return /* @__PURE__ */ React6.createElement(ContextState.Provider, { value }, children);
 }
 function useStateContext() {
-  return React7.useContext(ContextState);
+  return React6.useContext(ContextState);
 }
 function use$(signalName) {
-  const { hooks, values } = React7.useContext(ContextState);
-  const [, forceUpdate] = React7.useReducer((x) => x + 1, 0);
+  const { hooks, values } = React6.useContext(ContextState);
+  const [, forceUpdate] = React6.useReducer((x) => x + 1, 0);
   hooks.set(signalName, forceUpdate);
   return values.get(signalName);
 }
@@ -58,7 +58,7 @@ function set$(ctx, signalName, value) {
 function $View({ $key, $style, ...rest }) {
   use$($key);
   const style = $style();
-  return /* @__PURE__ */ React7.createElement(LeanView, { style, ...rest });
+  return /* @__PURE__ */ React6.createElement(LeanView, { style, ...rest });
 }
 function InnerContainer({ id, getRenderedItem, recycleItems, ItemSeparatorComponent }) {
   const itemIndex = use$(`containerIndex${id}`);
@@ -66,7 +66,7 @@ function InnerContainer({ id, getRenderedItem, recycleItems, ItemSeparatorCompon
   if (itemIndex < 0) {
     return null;
   }
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, { key: recycleItems ? void 0 : itemIndex }, /* @__PURE__ */ React7.createElement(RenderedItem, { itemIndex, id, getRenderedItem }), ItemSeparatorComponent && itemIndex < numItems - 1 && ItemSeparatorComponent);
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, { key: recycleItems ? void 0 : itemIndex }, /* @__PURE__ */ React6.createElement(RenderedItem, { itemIndex, id, getRenderedItem }), ItemSeparatorComponent && itemIndex < numItems - 1 && ItemSeparatorComponent);
 }
 function RenderedItem({
   itemIndex,
@@ -102,7 +102,7 @@ var Container = ({
       opacity: position < 0 ? 0 : 1
     };
   };
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React6.createElement(
     $View,
     {
       $key: `containerPosition${id}`,
@@ -115,7 +115,7 @@ var Container = ({
         }
       }
     },
-    /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React6.createElement(
       InnerContainer,
       {
         id,
@@ -128,7 +128,7 @@ var Container = ({
 };
 
 // src/Containers.tsx
-var Containers = React7.memo(function Containers2({
+var Containers = React6.memo(function Containers2({
   horizontal,
   recycleItems,
   ItemSeparatorComponent,
@@ -140,7 +140,7 @@ var Containers = React7.memo(function Containers2({
   const containers = [];
   for (let i = 0; i < numContainers; i++) {
     containers.push(
-      /* @__PURE__ */ React7.createElement(
+      /* @__PURE__ */ React6.createElement(
         Container,
         {
           id: i,
@@ -154,7 +154,7 @@ var Containers = React7.memo(function Containers2({
       )
     );
   }
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React6.createElement(
     $View,
     {
       $key: "totalSize",
@@ -170,15 +170,15 @@ var Containers = React7.memo(function Containers2({
 
 // src/ListComponent.tsx
 var getComponent = (Component) => {
-  if (React7.isValidElement(Component)) {
+  if (React6.isValidElement(Component)) {
     return Component;
   }
   if (Component) {
-    return /* @__PURE__ */ React7.createElement(Component, null);
+    return /* @__PURE__ */ React6.createElement(Component, null);
   }
   return null;
 };
-var ListComponent = React7.memo(function ListComponent2({
+var ListComponent = React6.memo(function ListComponent2({
   style,
   contentContainerStyle,
   horizontal,
@@ -199,7 +199,7 @@ var ListComponent = React7.memo(function ListComponent2({
   ...rest
 }) {
   const ctx = useStateContext();
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React6.createElement(
     ScrollView,
     {
       ...rest,
@@ -217,8 +217,8 @@ var ListComponent = React7.memo(function ListComponent2({
       contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
       ref: refScroller
     },
-    alignItemsAtEnd && /* @__PURE__ */ React7.createElement($View, { $key: "paddingTop", $style: () => ({ height: peek$(ctx, "paddingTop") }) }),
-    ListHeaderComponent && /* @__PURE__ */ React7.createElement(
+    alignItemsAtEnd && /* @__PURE__ */ React6.createElement($View, { $key: "paddingTop", $style: () => ({ height: peek$(ctx, "paddingTop") }) }),
+    ListHeaderComponent && /* @__PURE__ */ React6.createElement(
       View,
       {
         style: ListHeaderComponentStyle,
@@ -233,7 +233,7 @@ var ListComponent = React7.memo(function ListComponent2({
       },
       getComponent(ListHeaderComponent)
     ),
-    /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React6.createElement(
       Containers,
       {
         horizontal,
@@ -243,13 +243,14 @@ var ListComponent = React7.memo(function ListComponent2({
         updateItemSize
       }
     ),
-    ListFooterComponent && /* @__PURE__ */ React7.createElement(View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
+    ListFooterComponent && /* @__PURE__ */ React6.createElement(View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
   );
 });
 
 // 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 || [
@@ -294,7 +295,7 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
   const changed = [];
   if (previousViewableItems) {
     for (const viewToken of previousViewableItems) {
-      if (!isViewable(state, ctx, viewabilityConfig, viewToken.key, scrollSize)) {
+      if (!isViewable(state, ctx, viewabilityConfig, viewToken.key, scrollSize, viewToken.item, viewToken.index)) {
         viewToken.isViewable = false;
         changed.push(viewToken);
       }
@@ -305,7 +306,7 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
     const item = data[i];
     if (item) {
       const key = getId(i);
-      if (isViewable(state, ctx, viewabilityConfig, key, scrollSize)) {
+      if (isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, i)) {
         const viewToken = {
           item,
           key,
@@ -321,7 +322,6 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
   }
   Object.assign(viewabilityState, { viewableItems, previousStart: start, previousEnd: end });
   if (changed.length > 0) {
-    console.log("changed", changed);
     viewabilityState.viewableItems = viewableItems;
     for (let i = 0; i < changed.length; i++) {
       const change = changed[i];
@@ -332,7 +332,7 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
     }
   }
 }
-function isViewable(state, ctx, viewabilityConfig, key, scrollSize) {
+function isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, index) {
   const { sizes, positions, scroll } = state;
   const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
   const { itemVisiblePercentThreshold, viewAreaCoveragePercentThreshold } = viewabilityConfig;
@@ -342,31 +342,63 @@ function isViewable(state, ctx, viewabilityConfig, key, scrollSize) {
   const size = sizes.get(key) || 0;
   const bottom = top + size;
   const isEntirelyVisible = top >= 0 && bottom <= scrollSize && bottom > top;
-  if (isEntirelyVisible) {
-    return true;
+  const sizeVisible = isEntirelyVisible ? size : Math.min(bottom, scrollSize) - Math.max(top, 0);
+  const percentVisible = size ? isEntirelyVisible ? 100 : 100 * (sizeVisible / size) : 0;
+  const percentOfScroller = size ? 100 * (sizeVisible / scrollSize) : 0;
+  const percent = isEntirelyVisible ? 100 : viewAreaMode ? percentOfScroller : percentVisible;
+  const isViewable2 = percent >= viewablePercentThreshold;
+  const containerId = findContainerId(state, ctx, index);
+  const cb = mapViewabilityAmountCallbacks.get(containerId);
+  if (cb) {
+    cb({
+      index,
+      isViewable: isViewable2,
+      item,
+      key,
+      percentVisible,
+      percentOfScroller,
+      sizeVisible,
+      size,
+      position: top,
+      scrollSize
+    });
+  }
+  return isViewable2;
+}
+function findContainerId(state, ctx, index) {
+  const numContainers = peek$(ctx, "numContainers");
+  for (let i = 0; i < numContainers; i++) {
+    const itemIndex = peek$(ctx, `containerIndex${i}`);
+    if (itemIndex === index) {
+      return i;
+    }
   }
-  const visibleHeight = Math.min(bottom, scrollSize) - Math.max(top, 0);
-  const percent = 100 * (visibleHeight / (viewAreaMode ? scrollSize : size));
-  return percent >= viewablePercentThreshold;
+  return -1;
 }
 function maybeUpdateViewabilityCallback(configId, viewToken) {
   const key = viewToken.key + configId;
   const cb = mapViewabilityCallbacks.get(key);
   cb == null ? void 0 : cb(viewToken);
 }
-function registerViewabilityCallback(itemKey, configId, callback) {
-  const key = itemKey + configId;
+function registerViewabilityCallback(containerId, configId, callback) {
+  const key = containerId + configId;
   mapViewabilityCallbacks.set(key, callback);
   return () => {
     mapViewabilityCallbacks.delete(key);
   };
 }
+function registerViewabilityAmountCallback(containerId, callback) {
+  mapViewabilityAmountCallbacks.set(containerId, callback);
+  return () => {
+    mapViewabilityAmountCallbacks.delete(containerId);
+  };
+}
 
 // src/LegendList.tsx
 var DEFAULT_SCROLL_BUFFER = 0;
 var POSITION_OUT_OF_VIEW = -1e4;
 var LegendList = forwardRef(function LegendList2(props, forwardedRef) {
-  return /* @__PURE__ */ React.createElement(StateProvider, null, /* @__PURE__ */ React.createElement(LegendListInner, { ...props, ref: forwardedRef }));
+  return /* @__PURE__ */ React6.createElement(StateProvider, null, /* @__PURE__ */ React6.createElement(LegendListInner, { ...props, ref: forwardedRef }));
 });
 var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef) {
   var _a, _b;
@@ -488,9 +520,11 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       if (!data2) {
         return null;
       }
-      const itemKey = getId(index);
       const useViewability = (configId, callback) => {
-        useEffect(() => registerViewabilityCallback(itemKey, configId, callback), []);
+        useEffect(() => registerViewabilityCallback(containerIndex, configId, callback), []);
+      };
+      const useViewabilityAmount = (callback) => {
+        useEffect(() => registerViewabilityAmountCallback(containerIndex, callback), []);
       };
       const useRecyclingEffect = (effect) => {
         useEffect(() => {
@@ -528,7 +562,6 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         );
         useRecyclingEffect((state) => {
           const newState = updateState(state);
-          console.log("setting state", newState);
           stateInfo[1](newState);
         });
         return stateInfo;
@@ -537,6 +570,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         item: data2[index],
         index,
         useViewability,
+        useViewabilityAmount,
         useRecyclingEffect,
         useRecyclingState
       });
@@ -833,7 +867,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       scrollToEnd: refScroller.current.scrollToEnd
     };
   }, []);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React6.createElement(
     ListComponent,
     {
       ...rest,

package/package.json

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