@legendapp/list 1.0.11 → 1.0.12

package/index.mjs

@@ -1,12 +1,12 @@
-import * as React2 from 'react';
-import React2__default, { useReducer, useEffect, createContext, useMemo, useRef, useCallback, useImperativeHandle, useContext, useState, forwardRef, memo, useLayoutEffect } from 'react';
+import * as React3 from 'react';
+import React3__default, { useReducer, useEffect, createContext, useMemo, useRef, useCallback, useImperativeHandle, useContext, useState, forwardRef, memo, useLayoutEffect } from 'react';
 import { View, Text, Platform, Animated, ScrollView, StyleSheet, Dimensions, RefreshControl } from 'react-native';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
 // src/LegendList.tsx
-var ContextState = React2.createContext(null);
+var ContextState = React3.createContext(null);
 function StateProvider({ children }) {
-  const [value] = React2.useState(() => ({
+  const [value] = React3.useState(() => ({
     listeners: /* @__PURE__ */ new Map(),
     values: /* @__PURE__ */ new Map([
       ["paddingTop", 0],
@@ -21,10 +21,10 @@ function StateProvider({ children }) {
     columnWrapperStyle: void 0,
     viewRefs: /* @__PURE__ */ new Map()
   }));
-  return /* @__PURE__ */ React2.createElement(ContextState.Provider, { value }, children);
+  return /* @__PURE__ */ React3.createElement(ContextState.Provider, { value }, children);
 }
 function useStateContext() {
-  return React2.useContext(ContextState);
+  return React3.useContext(ContextState);
 }
 function createSelectorFunctionsArr(ctx, signalNames) {
   let lastValues = [];
@@ -94,17 +94,17 @@ function getContentSize(ctx) {
   return headerSize + footerSize + totalSize + stylePaddingTop;
 }
 function useArr$(signalNames) {
-  const ctx = React2.useContext(ContextState);
-  const { subscribe, get } = React2.useMemo(() => createSelectorFunctionsArr(ctx, signalNames), [ctx, signalNames]);
+  const ctx = React3.useContext(ContextState);
+  const { subscribe, get } = React3.useMemo(() => createSelectorFunctionsArr(ctx, signalNames), [ctx, signalNames]);
   const value = useSyncExternalStore(subscribe, get);
   return value;
 }
 
 // src/DebugView.tsx
 var DebugRow = ({ children }) => {
-  return /* @__PURE__ */ React2.createElement(View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" } }, children);
+  return /* @__PURE__ */ React3.createElement(View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" } }, children);
 };
-var DebugView = React2.memo(function DebugView2({ state }) {
+var DebugView = React3.memo(function DebugView2({ state }) {
   const ctx = useStateContext();
   const [
     totalSize = 0,
@@ -128,7 +128,7 @@ var DebugView = React2.memo(function DebugView2({ state }) {
   useInterval(() => {
     forceUpdate();
   }, 100);
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement(
     View,
     {
       style: {
@@ -144,15 +144,15 @@ var DebugView = React2.memo(function DebugView2({ state }) {
       },
       pointerEvents: "none"
     },
-    /* @__PURE__ */ React2.createElement(DebugRow, null, /* @__PURE__ */ React2.createElement(Text, null, "TotalSize:"), /* @__PURE__ */ React2.createElement(Text, null, totalSize.toFixed(2))),
-    /* @__PURE__ */ React2.createElement(DebugRow, null, /* @__PURE__ */ React2.createElement(Text, null, "ContentSize:"), /* @__PURE__ */ React2.createElement(Text, null, contentSize.toFixed(2))),
-    /* @__PURE__ */ React2.createElement(DebugRow, null, /* @__PURE__ */ React2.createElement(Text, null, "At end:"), /* @__PURE__ */ React2.createElement(Text, null, String(state.isAtBottom))),
-    /* @__PURE__ */ React2.createElement(Text, null),
-    /* @__PURE__ */ React2.createElement(DebugRow, null, /* @__PURE__ */ React2.createElement(Text, null, "ScrollAdjust:"), /* @__PURE__ */ React2.createElement(Text, null, scrollAdjust.toFixed(2))),
-    /* @__PURE__ */ React2.createElement(DebugRow, null, /* @__PURE__ */ React2.createElement(Text, null, "TotalSizeReal: "), /* @__PURE__ */ React2.createElement(Text, null, totalSizeWithScrollAdjust.toFixed(2))),
-    /* @__PURE__ */ React2.createElement(Text, null),
-    /* @__PURE__ */ React2.createElement(DebugRow, null, /* @__PURE__ */ React2.createElement(Text, null, "RawScroll: "), /* @__PURE__ */ React2.createElement(Text, null, rawScroll.toFixed(2))),
-    /* @__PURE__ */ React2.createElement(DebugRow, null, /* @__PURE__ */ React2.createElement(Text, null, "ComputedScroll: "), /* @__PURE__ */ React2.createElement(Text, null, scroll.toFixed(2)))
+    /* @__PURE__ */ React3.createElement(DebugRow, null, /* @__PURE__ */ React3.createElement(Text, null, "TotalSize:"), /* @__PURE__ */ React3.createElement(Text, null, totalSize.toFixed(2))),
+    /* @__PURE__ */ React3.createElement(DebugRow, null, /* @__PURE__ */ React3.createElement(Text, null, "ContentSize:"), /* @__PURE__ */ React3.createElement(Text, null, contentSize.toFixed(2))),
+    /* @__PURE__ */ React3.createElement(DebugRow, null, /* @__PURE__ */ React3.createElement(Text, null, "At end:"), /* @__PURE__ */ React3.createElement(Text, null, String(state.isAtBottom))),
+    /* @__PURE__ */ React3.createElement(Text, null),
+    /* @__PURE__ */ React3.createElement(DebugRow, null, /* @__PURE__ */ React3.createElement(Text, null, "ScrollAdjust:"), /* @__PURE__ */ React3.createElement(Text, null, scrollAdjust.toFixed(2))),
+    /* @__PURE__ */ React3.createElement(DebugRow, null, /* @__PURE__ */ React3.createElement(Text, null, "TotalSizeReal: "), /* @__PURE__ */ React3.createElement(Text, null, totalSizeWithScrollAdjust.toFixed(2))),
+    /* @__PURE__ */ React3.createElement(Text, null),
+    /* @__PURE__ */ React3.createElement(DebugRow, null, /* @__PURE__ */ React3.createElement(Text, null, "RawScroll: "), /* @__PURE__ */ React3.createElement(Text, null, rawScroll.toFixed(2))),
+    /* @__PURE__ */ React3.createElement(DebugRow, null, /* @__PURE__ */ React3.createElement(Text, null, "ComputedScroll: "), /* @__PURE__ */ React3.createElement(Text, null, scroll.toFixed(2)))
   );
 });
 function useInterval(callback, delay) {
@@ -280,8 +280,8 @@ function useRecyclingState(valueOrFun) {
   );
   return [refState.current.value, setState];
 }
-var LeanViewComponent = React2.forwardRef((props, ref) => {
-  return React2.createElement("RCTView", { ...props, ref });
+var LeanViewComponent = React3.forwardRef((props, ref) => {
+  return React3.createElement("RCTView", { ...props, ref });
 });
 LeanViewComponent.displayName = "RCTView";
 var LeanView = Platform.OS === "android" || Platform.OS === "ios" ? LeanViewComponent : View;
@@ -421,16 +421,16 @@ var Container = ({
     ctx.viewRefs.set(id, ref);
     return { containerId: id, itemKey, index, value: data, triggerLayout };
   }, [id, itemKey, index, data]);
-  const contentFragment = /* @__PURE__ */ React2__default.createElement(React2__default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React2__default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && !lastItemKeys.includes(itemKey) && /* @__PURE__ */ React2__default.createElement(ItemSeparatorComponent, { leadingItem: renderedItemInfo.item })));
+  const contentFragment = /* @__PURE__ */ React3__default.createElement(React3__default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React3__default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && !lastItemKeys.includes(itemKey) && /* @__PURE__ */ React3__default.createElement(ItemSeparatorComponent, { leadingItem: renderedItemInfo.item })));
   if (maintainVisibleContentPosition) {
     const anchorStyle = position.type === "top" ? { position: "absolute", top: 0, left: 0, right: 0 } : { position: "absolute", bottom: 0, left: 0, right: 0 };
     if (__DEV__ && ENABLE_DEVMODE) {
       anchorStyle.borderColor = position.type === "top" ? "red" : "blue";
       anchorStyle.borderWidth = 1;
     }
-    return /* @__PURE__ */ React2__default.createElement(LeanView, { style }, /* @__PURE__ */ React2__default.createElement(LeanView, { style: anchorStyle, onLayout, ref }, contentFragment, __DEV__ && ENABLE_DEVMODE && /* @__PURE__ */ React2__default.createElement(Text, { style: { position: "absolute", top: 0, left: 0, zIndex: 1e3 } }, position.top)));
+    return /* @__PURE__ */ React3__default.createElement(LeanView, { style }, /* @__PURE__ */ React3__default.createElement(LeanView, { style: [anchorStyle, paddingStyles], onLayout, ref }, contentFragment, __DEV__ && ENABLE_DEVMODE && /* @__PURE__ */ React3__default.createElement(Text, { style: { position: "absolute", top: 0, left: 0, zIndex: 1e3 } }, position.top)));
   }
-  return /* @__PURE__ */ React2__default.createElement(LeanView, { style, onLayout, ref }, contentFragment);
+  return /* @__PURE__ */ React3__default.createElement(LeanView, { style, onLayout, ref }, contentFragment);
 };
 var typedForwardRef = forwardRef;
 var typedMemo = memo;
@@ -483,7 +483,7 @@ var Containers = typedMemo(function Containers2({
   const containers = [];
   for (let i = 0; i < numContainers; i++) {
     containers.push(
-      /* @__PURE__ */ React2.createElement(
+      /* @__PURE__ */ React3.createElement(
         Container,
         {
           id: i,
@@ -512,16 +512,41 @@ var Containers = typedMemo(function Containers2({
       }
     }
   }
-  return /* @__PURE__ */ React2.createElement(Animated.View, { style }, containers);
+  return /* @__PURE__ */ React3.createElement(Animated.View, { style }, containers);
 });
+function ListHeaderComponentContainer({
+  children,
+  style,
+  ctx,
+  horizontal,
+  waitForInitialLayout
+}) {
+  const scrollAdjust = useValue$("scrollAdjust", (v) => v, true);
+  const animOpacity = waitForInitialLayout ? useValue$("containersDidLayout", (value) => value ? 1 : 0) : void 0;
+  const additionalSize = {
+    transform: [{ translateY: Animated.multiply(scrollAdjust, -1) }],
+    opacity: animOpacity
+  };
+  return /* @__PURE__ */ React.createElement(
+    Animated.View,
+    {
+      style: [style, additionalSize],
+      onLayout: (event) => {
+        const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
+        set$(ctx, "headerSize", size);
+      }
+    },
+    children
+  );
+}
 
 // src/ListComponent.tsx
 var getComponent = (Component) => {
-  if (React2.isValidElement(Component)) {
+  if (React3.isValidElement(Component)) {
     return Component;
   }
   if (Component) {
-    return /* @__PURE__ */ React2.createElement(Component, null);
+    return /* @__PURE__ */ React3.createElement(Component, null);
   }
   return null;
 };
@@ -529,12 +554,12 @@ var PaddingAndAdjust = () => {
   const animPaddingTop = useValue$("paddingTop", (v) => v, true);
   const animScrollAdjust = useValue$("scrollAdjust", (v) => v, true);
   const additionalSize = { marginTop: animScrollAdjust, paddingTop: animPaddingTop };
-  return /* @__PURE__ */ React2.createElement(Animated.View, { style: additionalSize });
+  return /* @__PURE__ */ React3.createElement(Animated.View, { style: additionalSize });
 };
 var PaddingAndAdjustDevMode = () => {
   const animPaddingTop = useValue$("paddingTop", (v) => v, true);
   const animScrollAdjust = useValue$("scrollAdjust", (v) => v, true);
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Animated.View, { style: { marginTop: animScrollAdjust } }), /* @__PURE__ */ React2.createElement(Animated.View, { style: { paddingTop: animPaddingTop } }), /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Animated.View, { style: { marginTop: animScrollAdjust } }), /* @__PURE__ */ React3.createElement(Animated.View, { style: { paddingTop: animPaddingTop } }), /* @__PURE__ */ React3.createElement(
     Animated.View,
     {
       style: {
@@ -546,7 +571,7 @@ var PaddingAndAdjustDevMode = () => {
         backgroundColor: "green"
       }
     }
-  ), /* @__PURE__ */ React2.createElement(
+  ), /* @__PURE__ */ React3.createElement(
     Animated.View,
     {
       style: {
@@ -558,7 +583,7 @@ var PaddingAndAdjustDevMode = () => {
         backgroundColor: "lightblue"
       }
     }
-  ), /* @__PURE__ */ React2.createElement(
+  ), /* @__PURE__ */ React3.createElement(
     Animated.View,
     {
       style: {
@@ -604,10 +629,10 @@ var ListComponent = typedMemo(function ListComponent2({
 }) {
   const ctx = useStateContext();
   const ScrollComponent = renderScrollComponent ? useMemo(
-    () => React2.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
+    () => React3.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
     [renderScrollComponent]
   ) : ScrollView;
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement(
     ScrollComponent,
     {
       ...rest,
@@ -625,20 +650,19 @@ var ListComponent = typedMemo(function ListComponent2({
       contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
       ref: refScrollView
     },
-    !ListEmptyComponent && (ENABLE_DEVMODE ? /* @__PURE__ */ React2.createElement(PaddingAndAdjustDevMode, null) : /* @__PURE__ */ React2.createElement(PaddingAndAdjust, null)),
-    ListHeaderComponent && /* @__PURE__ */ React2.createElement(
-      View,
+    !ListEmptyComponent && (ENABLE_DEVMODE ? /* @__PURE__ */ React3.createElement(PaddingAndAdjustDevMode, null) : /* @__PURE__ */ React3.createElement(PaddingAndAdjust, null)),
+    ListHeaderComponent && /* @__PURE__ */ React3.createElement(
+      ListHeaderComponentContainer,
       {
         style: ListHeaderComponentStyle,
-        onLayout: (event) => {
-          const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
-          set$(ctx, "headerSize", size);
-        }
+        ctx,
+        horizontal,
+        waitForInitialLayout
       },
       getComponent(ListHeaderComponent)
     ),
     ListEmptyComponent && getComponent(ListEmptyComponent),
-    /* @__PURE__ */ React2.createElement(
+    /* @__PURE__ */ React3.createElement(
       Containers,
       {
         horizontal,
@@ -649,7 +673,7 @@ var ListComponent = typedMemo(function ListComponent2({
         updateItemSize
       }
     ),
-    ListFooterComponent && /* @__PURE__ */ React2.createElement(
+    ListFooterComponent && /* @__PURE__ */ React3.createElement(
       View,
       {
         style: ListFooterComponentStyle,
@@ -931,7 +955,7 @@ function createColumnWrapperStyle(contentContainerStyle) {
   }
 }
 var LegendList = typedForwardRef(function LegendList2(props, forwardedRef) {
-  return /* @__PURE__ */ React2.createElement(StateProvider, null, /* @__PURE__ */ React2.createElement(LegendListInner, { ...props, ref: forwardedRef }));
+  return /* @__PURE__ */ React3.createElement(StateProvider, null, /* @__PURE__ */ React3.createElement(LegendListInner, { ...props, ref: forwardedRef }));
 });
 var LegendListInner = typedForwardRef(function LegendListInner2(props, forwardedRef) {
   const {
@@ -1051,7 +1075,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         offset = index * estimatedItemSize;
       }
       const adjust = peek$(ctx, "containersDidLayout") ? ((_a = refState.current) == null ? void 0 : _a.scrollAdjustHandler.getAppliedAdjust()) || 0 : 0;
-      return offset / numColumnsProp - adjust;
+      const topPad = peek$(ctx, "stylePaddingTop") + peek$(ctx, "headerSize");
+      return offset / numColumnsProp - adjust + topPad;
     }
     return 0;
   };
@@ -1084,6 +1109,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       scrollPrev: 0,
       scrollPrevTime: 0,
       scrollTime: 0,
+      scrollPending: 0,
       indexByKey: /* @__PURE__ */ new Map(),
       scrollHistory: [],
       scrollVelocity: 0,
@@ -1152,11 +1178,12 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     const firstIndexOffset = calculateOffsetForIndex(index);
     let firstIndexScrollPostion = firstIndexOffset - viewOffset;
     const diff = Math.abs(state.scroll - firstIndexScrollPostion);
+    const topPad = peek$(ctx, "stylePaddingTop") + peek$(ctx, "headerSize");
     const needsReanchoring = maintainVisibleContentPosition && diff > 100;
     state.scrollForNextCalculateItemsInView = void 0;
     if (needsReanchoring) {
       const id = getId(index);
-      state.anchorElement = { id, coordinate: firstIndexOffset };
+      state.anchorElement = { id, coordinate: firstIndexOffset - topPad };
       (_a = state.belowAnchorElementPositions) == null ? void 0 : _a.clear();
       state.positions.clear();
       calcTotalSizesAndPositions({ forgetPositions: true });
@@ -1276,6 +1303,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       state.scrollHistory.length = 0;
       setTimeout(() => {
         state.disableScrollJumpsFrom = void 0;
+        if (state.scrollPending !== void 0 && state.scrollPending !== state.scroll) {
+          updateScroll(state.scrollPending);
+        }
       }, timeout);
     }
   };
@@ -1389,7 +1419,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     const numColumns = peek$(ctx, "numColumns");
     const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
     let scrollState = state.scroll;
-    const scrollExtra = Math.max(-16, Math.min(16, speed)) * 24;
+    const scrollExtra = 0;
     const useAverageSize = !state.disableScrollJumpsFrom && speed >= 0 && peek$(ctx, "containersDidLayout");
     if (!state.queuedInitialLayout && initialScrollIndex) {
       const updatedOffset = calculateOffsetForIndex(initialScrollIndex);
@@ -1698,6 +1728,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       if (paddingTop > 0) {
         state.scroll = 0;
       }
+      state.disableScrollJumpsFrom = void 0;
       requestAnimationFrame(() => {
         var _a;
         state.maintainingScrollAtEnd = true;
@@ -1787,8 +1818,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (state) {
       state.data = dataProp;
       if (!isFirst2) {
-        disableScrollJumps(2e3);
-        refState.current.scrollForNextCalculateItemsInView = void 0;
+        const totalSizeBefore = state.previousTotalSize;
+        const totalSizeAfter = state.totalSize;
+        const scrollDiff = state.scroll - state.scrollPrev;
+        const sizeDiff = totalSizeAfter - totalSizeBefore;
+        if (Math.abs(scrollDiff - sizeDiff) < 10) {
+          disableScrollJumps(1e3);
+        }
         const numContainers = peek$(ctx, "numContainers");
         for (let i = 0; i < numContainers; i++) {
           const itemKey = peek$(ctx, `containerItemKey${i}`);
@@ -1999,6 +2035,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       refState.current.sizes.clear();
       refState.current.positions.clear();
     }
+    refState.current.previousTotalSize = peek$(ctx, "totalSize");
     calcTotalSizesAndPositions({ forgetPositions: false });
   }
   useEffect(() => {
@@ -2206,73 +2243,76 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
   }, []);
   const handleScroll = useCallback(
-    (event, fromSelf) => {
+    (event) => {
       var _a, _b, _c, _d;
       if (((_b = (_a = event.nativeEvent) == null ? void 0 : _a.contentSize) == null ? void 0 : _b.height) === 0 && ((_c = event.nativeEvent.contentSize) == null ? void 0 : _c.width) === 0) {
         return;
       }
       const state = refState.current;
-      const scrollingToOffset = state.scrollingToOffset;
       const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
+      state.scrollPending = newScroll;
       if (state.ignoreScrollFromCalcTotal && newScroll !== 0) {
         return;
       }
-      if (scrollingToOffset !== void 0 && Math.abs(newScroll - scrollingToOffset) < 10) {
-        finishScrollTo();
-      }
-      if (state.disableScrollJumpsFrom !== void 0) {
-        const scrollMinusAdjust = newScroll - state.scrollAdjustHandler.getAppliedAdjust();
-        if (Math.abs(scrollMinusAdjust - state.disableScrollJumpsFrom) > 200) {
-          return;
-        }
-        state.disableScrollJumpsFrom = void 0;
+      updateScroll(newScroll);
+      (_d = state.onScroll) == null ? void 0 : _d.call(state, event);
+    },
+    []
+  );
+  const updateScroll = useCallback((newScroll) => {
+    const state = refState.current;
+    const scrollingToOffset = state.scrollingToOffset;
+    if (scrollingToOffset !== void 0 && Math.abs(newScroll - scrollingToOffset) < 10) {
+      finishScrollTo();
+    }
+    if (state.disableScrollJumpsFrom !== void 0) {
+      const scrollMinusAdjust = newScroll - state.scrollAdjustHandler.getAppliedAdjust();
+      if (Math.abs(scrollMinusAdjust - state.disableScrollJumpsFrom) > 200) {
+        return;
       }
-      state.hasScrolled = true;
-      state.lastBatchingAction = Date.now();
-      const currentTime = performance.now();
-      if (scrollingToOffset === void 0 && !(state.scrollHistory.length === 0 && newScroll === initialContentOffset)) {
-        state.scrollHistory.push({ scroll: newScroll, time: currentTime });
-      }
-      if (state.scrollHistory.length > 5) {
-        state.scrollHistory.shift();
-      }
-      if (state.scrollTimer !== void 0) {
-        clearTimeout(state.scrollTimer);
-      }
-      state.scrollTimer = setTimeout(() => {
-        state.scrollVelocity = 0;
-      }, 500);
-      let velocity = 0;
-      if (state.scrollHistory.length >= 2) {
-        const newest = state.scrollHistory[state.scrollHistory.length - 1];
-        let oldest;
-        for (let i = 0; i < state.scrollHistory.length - 1; i++) {
-          const entry = state.scrollHistory[i];
-          if (newest.time - entry.time <= 100) {
-            oldest = entry;
-            break;
-          }
-        }
-        if (oldest) {
-          const scrollDiff = newest.scroll - oldest.scroll;
-          const timeDiff = newest.time - oldest.time;
-          velocity = timeDiff > 0 ? scrollDiff / timeDiff : 0;
+      state.disableScrollJumpsFrom = void 0;
+    }
+    state.hasScrolled = true;
+    state.lastBatchingAction = Date.now();
+    const currentTime = performance.now();
+    if (scrollingToOffset === void 0 && !(state.scrollHistory.length === 0 && newScroll === initialContentOffset)) {
+      state.scrollHistory.push({ scroll: newScroll, time: currentTime });
+    }
+    if (state.scrollHistory.length > 5) {
+      state.scrollHistory.shift();
+    }
+    if (state.scrollTimer !== void 0) {
+      clearTimeout(state.scrollTimer);
+    }
+    state.scrollTimer = setTimeout(() => {
+      state.scrollVelocity = 0;
+    }, 500);
+    let velocity = 0;
+    if (state.scrollHistory.length >= 2) {
+      const newest = state.scrollHistory[state.scrollHistory.length - 1];
+      let oldest;
+      for (let i = 0; i < state.scrollHistory.length - 1; i++) {
+        const entry = state.scrollHistory[i];
+        if (newest.time - entry.time <= 100) {
+          oldest = entry;
+          break;
         }
       }
-      state.scrollPrev = state.scroll;
-      state.scrollPrevTime = state.scrollTime;
-      state.scroll = newScroll;
-      state.scrollTime = currentTime;
-      state.scrollVelocity = velocity;
-      calculateItemsInView();
-      checkAtBottom();
-      checkAtTop();
-      if (!fromSelf) {
-        (_d = state.onScroll) == null ? void 0 : _d.call(state, event);
+      if (oldest) {
+        const scrollDiff = newest.scroll - oldest.scroll;
+        const timeDiff = newest.time - oldest.time;
+        velocity = timeDiff > 0 ? scrollDiff / timeDiff : 0;
       }
-    },
-    []
-  );
+    }
+    state.scrollPrev = state.scroll;
+    state.scrollPrevTime = state.scrollTime;
+    state.scroll = newScroll;
+    state.scrollTime = currentTime;
+    state.scrollVelocity = velocity;
+    calculateItemsInView();
+    checkAtBottom();
+    checkAtTop();
+  }, []);
   useImperativeHandle(
     forwardedRef,
     () => {
@@ -2346,7 +2386,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       }
     }, []);
   }
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
     ListComponent,
     {
       ...rest,
@@ -2385,7 +2425,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       maintainVisibleContentPosition,
       scrollEventThrottle: Platform.OS === "web" ? 16 : void 0,
       waitForInitialLayout,
-      refreshControl: refreshControl != null ? refreshControl : onRefresh && /* @__PURE__ */ React2.createElement(
+      refreshControl: refreshControl != null ? refreshControl : onRefresh && /* @__PURE__ */ React3.createElement(
         RefreshControl,
         {
           refreshing: !!refreshing,
@@ -2396,7 +2436,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       style,
       contentContainerStyle
     }
-  ), __DEV__ && ENABLE_DEBUG_VIEW && /* @__PURE__ */ React2.createElement(DebugView, { state: refState.current }));
+  ), __DEV__ && ENABLE_DEBUG_VIEW && /* @__PURE__ */ React3.createElement(DebugView, { state: refState.current }));
 });
 
 export { LegendList, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "Legend List is a drop-in replacement for FlatList with much better performance and supporting dynamically sized items.",
   "sideEffects": false,
   "private": false,