From fcd45231006224d23334da156edf3f14e8801cb8 Mon Sep 17 00:00:00 2001
From: Peter Abbondanzo <abbo@meta.com>
Date: Thu, 1 Oct 2026 06:45:39 -0700
Subject: [PATCH] Fire VirtualizedList edge callbacks after programmatic
 scrolling (#58657)

Summary:

Programmatic list scrolling can move to an edge before asynchronously scheduled cells finish rendering. The scroll handler then skips the edge callback because the terminal cell is not yet in the render window, and no later scroll or layout event is guaranteed.

Recheck edge callbacks after post-scroll render updates. Deduplicate each edge by item count and edge item key, re-arm on real movement away from the edge, and allow data-backed layout growth to start a new end-edge generation without treating measurement-only churn as a new callback.

Changelog:
[General][Fixed] - Fire `VirtualizedList` edge callbacks after programmatic scrolling

Differential Revision: D100870075
---
 .../examples/FlatList/BaseFlatListExample.js  |   3 +-
 .../FlatList/FlatList-onEndReached.js         | 126 ++++++++--
 .../Lists/VirtualizedList.js                  | 151 +++++++++---
 .../Lists/__tests__/VirtualizedList-test.js   | 227 ++++++++++++++++++
 4 files changed, 459 insertions(+), 48 deletions(-)

diff --git a/packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js b/packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js
index 1c77581facfd..ff6b3fb27798 100644
--- a/packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js
+++ b/packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js
@@ -60,6 +60,7 @@ const Item = ({item, separators}: ListRenderItemInfo<string>) => {
 };
 
 type Props = Readonly<{
+  data?: ReadonlyArray<string>,
   exampleProps: Partial<React.ElementConfig<typeof FlatList>>,
   exampleTestID?: ?string,
   onTest?: ?() => void,
@@ -95,7 +96,7 @@ const BaseFlatListExample: component(
         ref={ref}
         testID="flat_list"
         // $FlowFixMe[incompatible-type]
-        data={DATA}
+        data={props.data ?? DATA}
         keyExtractor={(item, index) => item + index}
         style={styles.list}
         // $FlowFixMe[incompatible-type]
diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-onEndReached.js b/packages/rn-tester/js/examples/FlatList/FlatList-onEndReached.js
index 132778d07b87..2a60d653160f 100644
--- a/packages/rn-tester/js/examples/FlatList/FlatList-onEndReached.js
+++ b/packages/rn-tester/js/examples/FlatList/FlatList-onEndReached.js
@@ -12,33 +12,129 @@
 
 import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 
-import BaseFlatListExample from './BaseFlatListExample';
+import BaseFlatListExample, {ITEM_HEIGHT} from './BaseFlatListExample';
 import * as React from 'react';
 import {useRef, useState} from 'react';
+import {Button, FlatList} from 'react-native';
+
+const DATA = Array.from({length: 20}, (_, index) => `Item ${index}`);
+const SCROLL_TO_ITEM = DATA[18];
+
+type EventCounts = {
+  dragEvents: number,
+  onEndReached: number,
+  onMomentumScrollEnd: number,
+  onStartReached: number,
+};
 
 export component FlatList_onEndReached() {
-  const [output, setOutput] = useState('');
-  const exampleProps = {
-    onEndReached: (info: {distanceFromEnd: number, ...}) =>
-      setOutput('onEndReached'),
-    onEndReachedThreshold: 0,
+  const [output, setOutput] = useState('ready');
+  const listRef = useRef<?FlatList<string>>(null);
+  const actionRef = useRef<'end' | 'start'>('end');
+  const attemptsRef = useRef(0);
+  const eventCountsRef = useRef<EventCounts>({
+    dragEvents: 0,
+    onEndReached: 0,
+    onMomentumScrollEnd: 0,
+    onStartReached: 0,
+  });
+  const recordEventsRef = useRef(false);
+  const momentumEndedRef = useRef(false);
+
+  const report = () => {
+    const {dragEvents, onEndReached, onMomentumScrollEnd, onStartReached} =
+      eventCountsRef.current;
+    setOutput(
+      `${actionRef.current}: attempts=${attemptsRef.current}, ` +
+        `onEndReached=${onEndReached}, onStartReached=${onStartReached}, ` +
+        `onMomentumScrollEnd=${onMomentumScrollEnd}, dragEvents=${dragEvents}`,
+    );
+  };
+
+  const onEndReached = () => {
+    if (recordEventsRef.current) {
+      eventCountsRef.current.onEndReached++;
+      if (momentumEndedRef.current) {
+        report();
+      }
+    }
+  };
+
+  const onStartReached = () => {
+    if (recordEventsRef.current) {
+      eventCountsRef.current.onStartReached++;
+      if (momentumEndedRef.current) {
+        report();
+      }
+    }
   };
-  const ref = useRef<any>(null);
 
-  const onTest = () => {
-    const scrollResponder = ref?.current?.getScrollResponder();
-    if (scrollResponder != null) {
-      scrollResponder.scrollToEnd();
+  const onMomentumScrollEnd = () => {
+    if (recordEventsRef.current) {
+      eventCountsRef.current.onMomentumScrollEnd++;
+      momentumEndedRef.current = true;
+      report();
     }
   };
 
+  const onDragEvent = () => {
+    if (recordEventsRef.current) {
+      eventCountsRef.current.dragEvents++;
+    }
+  };
+
+  const scrollToEnd = () => {
+    recordEventsRef.current = true;
+    momentumEndedRef.current = false;
+    actionRef.current = 'end';
+    attemptsRef.current++;
+    setOutput('running');
+    listRef.current?.scrollToItem({
+      animated: true,
+      item: SCROLL_TO_ITEM,
+      viewOffset: -ITEM_HEIGHT,
+    });
+  };
+
+  const scrollToStart = () => {
+    momentumEndedRef.current = false;
+    actionRef.current = 'start';
+    attemptsRef.current++;
+    setOutput('running');
+    listRef.current?.scrollToOffset({animated: true, offset: 0});
+  };
+
+  const exampleProps = {
+    initialNumToRender: 19,
+    onEndReached,
+    onEndReachedThreshold: 0.2,
+    onMomentumScrollEnd,
+    onScrollBeginDrag: onDragEvent,
+    onScrollEndDrag: onDragEvent,
+    onStartReached,
+    onStartReachedThreshold: 0.1,
+    windowSize: 2,
+  };
+
   return (
     <BaseFlatListExample
-      ref={ref}
+      ref={listRef}
+      data={DATA}
       exampleProps={exampleProps}
       testOutput={output}
-      onTest={onTest}
-    />
+      onTest={scrollToEnd}
+      testLabel="Scroll to item">
+      <Button
+        testID="scroll_to_start"
+        onPress={scrollToStart}
+        title="Scroll to start"
+      />
+      <Button
+        testID="scroll_to_end"
+        onPress={scrollToEnd}
+        title="Scroll to item"
+      />
+    </BaseFlatListExample>
   );
 }
 
@@ -46,7 +142,7 @@ export default {
   title: 'onEndReached',
   name: 'onEndReached',
   description:
-    'Scroll to end of list or tap Test button to see `onEndReached` triggered.',
+    'Programmatic scrolling calls edge callbacks once and does not emit drag callbacks.',
   render: function () {
     return <FlatList_onEndReached />;
   },
diff --git a/packages/virtualized-lists/Lists/VirtualizedList.js b/packages/virtualized-lists/Lists/VirtualizedList.js
index 601419b1e804..61f22d5790cf 100644
--- a/packages/virtualized-lists/Lists/VirtualizedList.js
+++ b/packages/virtualized-lists/Lists/VirtualizedList.js
@@ -1195,7 +1195,10 @@ class VirtualizedList extends StateSafePureComponent<
   }
 
   componentDidUpdate(prevProps: VirtualizedListProps) {
-    const {data, extraData, getItemLayout} = this.props;
+    const {data, extraData} = this.props;
+    if (data !== prevProps.data) {
+      this._dataChangeCount++;
+    }
     if (data !== prevProps.data || extraData !== prevProps.extraData) {
       // clear the viewableIndices cache to also trigger
       // the onViewableItemsChanged callback with the new data
@@ -1217,11 +1220,14 @@ class VirtualizedList extends StateSafePureComponent<
       this._hiPriInProgress = false;
     }
 
-    // We only call `onEndReached` after we render the last cell, but when
-    // getItemLayout is present, we can scroll past the last rendered cell, and
-    // never trigger a new layout or bounds change, so we need to check again
-    // after rendering more cells.
-    if (getItemLayout != null) {
+    // We only call `onEndReached` after we render the last cell, but
+    // programmatic scrolling (e.g. scrollToItem, scrollToIndex) or using
+    // getItemLayout can scroll past the last rendered cell, and never
+    // trigger a new layout or bounds change, so we need to check again
+    // after rendering more cells. We gate on having received at least one
+    // scroll event (timestamp > 0) to avoid false onEndReached calls
+    // during initial render.
+    if (this.props.getItemLayout != null || this._scrollMetrics.timestamp > 0) {
       this._maybeCallOnEdgeReached();
     }
   }
@@ -1264,8 +1270,16 @@ class VirtualizedList extends StateSafePureComponent<
     zoomScale: 1,
   };
   _scrollRef: ?React.ElementRef<typeof ScrollView> = null;
-  _sentStartForContentLength = 0;
-  _sentEndForContentLength = 0;
+  _contentLengthDataChangeCount: number = 0;
+  _dataChangeCount: number = 0;
+  _sentStartForFirstItemKey: ?string = null;
+  _sentStartForItemCount: ?number = null;
+  _sentStartForOffset: ?number = null;
+  _sentEndForContentLength: ?number = null;
+  _sentEndForDataChangeCount: ?number = null;
+  _sentEndForItemCount: ?number = null;
+  _sentEndForLastItemKey: ?string = null;
+  _sentEndForOffset: ?number = null;
   _updateCellsToRenderTimeoutID: ?ReturnType<typeof setTimeout> = null;
   _viewabilityTuples: Array<ViewabilityHelperCallbackTuple> = [];
 
@@ -1557,9 +1571,10 @@ class VirtualizedList extends StateSafePureComponent<
     };
   }
 
-  _maybeCallOnEdgeReached() {
+  _maybeCallOnEdgeReached(isScrollEvent: boolean = false) {
     const {
       data,
+      getItem,
       getItemCount,
       onStartReached,
       onStartReachedThreshold,
@@ -1581,9 +1596,9 @@ class VirtualizedList extends StateSafePureComponent<
     }
 
     const {visibleLength, offset} = this._scrollMetrics;
+    const contentLength = this._listMetrics.getContentLength();
     let distanceFromStart = offset;
-    let distanceFromEnd =
-      this._listMetrics.getContentLength() - visibleLength - offset;
+    let distanceFromEnd = contentLength - visibleLength - offset;
 
     // Especially when oERT is zero it's necessary to 'floor' very small distance values to be 0
     // since debouncing causes us to not fire this event for every single "pixel" we scroll and can thus
@@ -1610,39 +1625,102 @@ class VirtualizedList extends StateSafePureComponent<
     const isWithinStartThreshold = distanceFromStart <= startThreshold;
     const isWithinEndThreshold = distanceFromEnd <= endThreshold;
 
-    // First check if the user just scrolled within the end threshold
-    // and call onEndReached only once for a given content length,
-    // and only if onStartReached is not being executed
+    const itemCount = getItemCount(data);
+
     if (
       onEndReached &&
-      this.state.cellsAroundViewport.last === getItemCount(data) - 1 &&
-      isWithinEndThreshold &&
-      this._listMetrics.getContentLength() !== this._sentEndForContentLength
+      this.state.cellsAroundViewport.last === itemCount - 1 &&
+      isWithinEndThreshold
     ) {
-      this._sentEndForContentLength = this._listMetrics.getContentLength();
-      onEndReached({distanceFromEnd});
+      const lastItemKey =
+        itemCount > 0
+          ? VirtualizedList._keyExtractor(
+              getItem(data, itemCount - 1),
+              itemCount - 1,
+              this.props,
+            )
+          : null;
+      // A changed edge may represent a new callback generation even if the
+      // item count is unchanged.
+      if (
+        itemCount !== this._sentEndForItemCount ||
+        lastItemKey !== this._sentEndForLastItemKey ||
+        (this._dataChangeCount !== this._sentEndForDataChangeCount &&
+          this._contentLengthDataChangeCount === this._dataChangeCount &&
+          contentLength !== this._sentEndForContentLength) ||
+        (isScrollEvent &&
+          this._sentEndForContentLength != null &&
+          this._sentEndForOffset != null &&
+          contentLength > this._sentEndForContentLength &&
+          offset > this._sentEndForOffset)
+      ) {
+        this._sentEndForContentLength = contentLength;
+        this._sentEndForDataChangeCount = this._dataChangeCount;
+        this._sentEndForItemCount = itemCount;
+        this._sentEndForLastItemKey = lastItemKey;
+        this._sentEndForOffset = offset;
+        onEndReached({distanceFromEnd});
+      }
     }
 
-    // Next check if the user just scrolled within the start threshold
-    // and call onStartReached only once for a given content length,
-    // and only if onEndReached is not being executed
     if (
       onStartReached != null &&
       this.state.cellsAroundViewport.first === 0 &&
-      isWithinStartThreshold &&
-      this._listMetrics.getContentLength() !== this._sentStartForContentLength
+      isWithinStartThreshold
     ) {
-      this._sentStartForContentLength = this._listMetrics.getContentLength();
-      onStartReached({distanceFromStart});
+      const firstItemKey =
+        itemCount > 0
+          ? VirtualizedList._keyExtractor(getItem(data, 0), 0, this.props)
+          : null;
+      // The start edge changes only when its item identity or count changes.
+      if (
+        itemCount !== this._sentStartForItemCount ||
+        firstItemKey !== this._sentStartForFirstItemKey
+      ) {
+        this._sentStartForFirstItemKey = firstItemKey;
+        this._sentStartForItemCount = itemCount;
+        this._sentStartForOffset = offset;
+        onStartReached({distanceFromStart});
+      }
     }
 
     // If the user scrolls away from the start or end and back again,
     // cause onStartReached or onEndReached to be triggered again
-    if (!isWithinStartThreshold) {
-      this._sentStartForContentLength = 0;
+    if (isScrollEvent && this._sentStartForOffset != null) {
+      if (offset < this._sentStartForOffset) {
+        this._sentStartForOffset = offset;
+      } else if (!isWithinStartThreshold && offset > this._sentStartForOffset) {
+        this._sentStartForFirstItemKey = null;
+        this._sentStartForItemCount = null;
+        this._sentStartForOffset = null;
+      }
     }
-    if (!isWithinEndThreshold) {
-      this._sentEndForContentLength = 0;
+    if (this._sentEndForOffset != null) {
+      if (
+        !isScrollEvent &&
+        this._dataChangeCount !== this._sentEndForDataChangeCount &&
+        this._contentLengthDataChangeCount === this._dataChangeCount &&
+        contentLength !== this._sentEndForContentLength &&
+        !isWithinEndThreshold
+      ) {
+        this._sentEndForContentLength = null;
+        this._sentEndForDataChangeCount = null;
+        this._sentEndForItemCount = null;
+        this._sentEndForLastItemKey = null;
+        this._sentEndForOffset = null;
+      } else if (isScrollEvent && offset > this._sentEndForOffset) {
+        this._sentEndForOffset = offset;
+      } else if (
+        isScrollEvent &&
+        !isWithinEndThreshold &&
+        offset < this._sentEndForOffset
+      ) {
+        this._sentEndForContentLength = null;
+        this._sentEndForDataChangeCount = null;
+        this._sentEndForItemCount = null;
+        this._sentEndForLastItemKey = null;
+        this._sentEndForOffset = null;
+      }
     }
   }
 
@@ -1651,6 +1729,7 @@ class VirtualizedList extends StateSafePureComponent<
       layout: {width, height},
       orientation: this._orientation(),
     });
+    this._contentLengthDataChangeCount = this._dataChangeCount;
 
     this._maybeScrollToInitialScrollIndex(width, height);
 
@@ -1784,13 +1863,21 @@ class VirtualizedList extends StateSafePureComponent<
       zoomScale,
     };
     if (this.state.pendingScrollUpdateCount > 0) {
-      this.setState<'pendingScrollUpdateCount'>({pendingScrollUpdateCount: 0});
+      this.setState<'pendingScrollUpdateCount'>(
+        {pendingScrollUpdateCount: 0},
+        () => {
+          if (!this.props) {
+            return;
+          }
+          this._maybeCallOnEdgeReached(true);
+        },
+      );
     }
     this._updateViewableItems(this.props, this.state.cellsAroundViewport);
     if (!this.props) {
       return;
     }
-    this._maybeCallOnEdgeReached();
+    this._maybeCallOnEdgeReached(true);
     if (velocity !== 0) {
       this._fillRateHelper.activate();
     }
diff --git a/packages/virtualized-lists/Lists/__tests__/VirtualizedList-test.js b/packages/virtualized-lists/Lists/__tests__/VirtualizedList-test.js
index e270af4649c9..2192f68ae84e 100644
--- a/packages/virtualized-lists/Lists/__tests__/VirtualizedList-test.js
+++ b/packages/virtualized-lists/Lists/__tests__/VirtualizedList-test.js
@@ -799,6 +799,233 @@ describe('VirtualizedList', () => {
     expect(onEndReached).toHaveBeenCalled();
   });
 
+  describe('edge callback deduplication', () => {
+    const ITEM_HEIGHT = 40;
+    const layout = {width: 300, height: 600};
+    let component;
+    let data;
+    let instance;
+    let onEndReached;
+    let onStartReached;
+    let props;
+
+    beforeEach(async () => {
+      data = Array(40)
+        .fill()
+        .map((_, index) => ({key: `key-${index}`}));
+      onEndReached = jest.fn();
+      onStartReached = jest.fn();
+      props = {
+        data,
+        initialNumToRender: 10,
+        onEndReachedThreshold: 1,
+        onStartReachedThreshold: 1,
+        windowSize: 2,
+        renderItem: ({item}) => <item value={item.key} />,
+        getItem: (items, index) => items[index],
+        getItemCount: items => items.length,
+        onEndReached,
+        onStartReached,
+      };
+
+      await act(() => {
+        component = create(<VirtualizedList {...props} />);
+      });
+      instance = component.getInstance();
+
+      await act(() => {
+        instance._onLayout({nativeEvent: {layout, zoomScale: 1}});
+        instance._onContentSizeChange(300, getContentHeight());
+        for (let i = 0; i < props.initialNumToRender; i++) {
+          simulateCellLayout(component, data, i, {
+            width: layout.width,
+            height: ITEM_HEIGHT,
+            x: 0,
+            y: i * ITEM_HEIGHT,
+          });
+        }
+        performAllBatches();
+      });
+    });
+
+    function getContentHeight() {
+      return data.length * ITEM_HEIGHT;
+    }
+
+    async function beginProgrammaticScroll() {
+      await act(() => {
+        instance.setState({pendingScrollUpdateCount: 1});
+      });
+    }
+
+    async function scrollToOffset(
+      offset,
+      timeStamp,
+      contentHeight = getContentHeight(),
+      sendSettledEvent = false,
+    ) {
+      await act(() => {
+        const nativeEvent = {
+          contentOffset: {y: offset, x: 0},
+          layoutMeasurement: layout,
+          contentSize: {...layout, height: contentHeight},
+          zoomScale: 1,
+          contentInset: {right: 0, top: 0, left: 0, bottom: 0},
+        };
+        instance._onScroll({timeStamp, nativeEvent});
+        if (sendSettledEvent) {
+          instance._onScroll({timeStamp: timeStamp + 1, nativeEvent});
+        }
+        performAllBatches();
+      });
+    }
+
+    async function scrollToEnd(timeStamp, sendSettledEvent = false) {
+      await scrollToOffset(
+        getContentHeight() - layout.height,
+        timeStamp,
+        getContentHeight(),
+        sendSettledEvent,
+      );
+    }
+
+    async function scrollToStart(timeStamp, sendSettledEvent = false) {
+      await scrollToOffset(0, timeStamp, getContentHeight(), sendSettledEvent);
+    }
+
+    async function updateContentHeight(contentHeight) {
+      await act(() => {
+        instance._onContentSizeChange(300, contentHeight);
+        performAllBatches();
+      });
+    }
+
+    async function updateData(nextData) {
+      data = nextData;
+      await act(() => {
+        component.update(<VirtualizedList {...props} data={data} />);
+        performAllBatches();
+      });
+    }
+
+    it('fires once when each edge is first reached', async () => {
+      expect(onEndReached).not.toHaveBeenCalled();
+      expect(onStartReached).toHaveBeenCalledTimes(1);
+
+      await scrollToEnd(1000);
+      expect(onEndReached).toHaveBeenCalledTimes(1);
+      expect(onEndReached).toHaveBeenLastCalledWith({distanceFromEnd: 0});
+
+      await beginProgrammaticScroll();
+      await scrollToStart(2000);
+      expect(onStartReached).toHaveBeenCalledTimes(2);
+
+      await beginProgrammaticScroll();
+      await scrollToEnd(3000);
+      expect(onEndReached).toHaveBeenCalledTimes(2);
+    });
+
+    it('does not re-fire for settled events at the same edge', async () => {
+      await scrollToEnd(1000, true);
+      expect(onEndReached).toHaveBeenCalledTimes(1);
+
+      await beginProgrammaticScroll();
+      await scrollToStart(2000, true);
+      expect(onStartReached).toHaveBeenCalledTimes(2);
+    });
+
+    it('re-arms only after real movement away from the end', async () => {
+      await scrollToEnd(1000);
+      expect(onEndReached).toHaveBeenCalledTimes(1);
+
+      const endOffset = getContentHeight() - layout.height;
+      const deepestEndOffset = endOffset + 100;
+      const expandedContentHeight = getContentHeight() + layout.height * 2 + 1;
+
+      await scrollToOffset(deepestEndOffset, 2000);
+      expect(onEndReached).toHaveBeenCalledTimes(1);
+
+      await updateContentHeight(expandedContentHeight);
+      await scrollToOffset(deepestEndOffset, 3000, expandedContentHeight);
+      await updateContentHeight(getContentHeight());
+      expect(onEndReached).toHaveBeenCalledTimes(1);
+
+      await updateContentHeight(expandedContentHeight);
+      await scrollToOffset(deepestEndOffset - 50, 4000, expandedContentHeight);
+      await updateContentHeight(getContentHeight());
+      expect(onEndReached).toHaveBeenCalledTimes(2);
+    });
+
+    it('starts a new end generation for appended data', async () => {
+      await scrollToEnd(1000);
+      expect(onEndReached).toHaveBeenCalledTimes(1);
+
+      const endOffset = getContentHeight() - layout.height;
+      const deepestEndOffset = endOffset + 100;
+      const expandedContentHeight = getContentHeight() + layout.height * 2 + 1;
+      await scrollToOffset(deepestEndOffset, 2000);
+      await updateContentHeight(expandedContentHeight);
+      await scrollToOffset(deepestEndOffset - 50, 3000, expandedContentHeight);
+      await updateContentHeight(getContentHeight());
+      expect(onEndReached).toHaveBeenCalledTimes(2);
+
+      await updateData([...data, {key: `key-${data.length}`}]);
+      expect(onEndReached).toHaveBeenCalledTimes(3);
+
+      await updateContentHeight(getContentHeight());
+      await scrollToEnd(4000);
+      expect(onEndReached).toHaveBeenCalledTimes(3);
+    });
+
+    it('starts a new end generation after content growth', async () => {
+      await scrollToEnd(1000);
+      expect(onEndReached).toHaveBeenCalledTimes(1);
+
+      const expandedContentHeight = getContentHeight() + layout.height * 2 + 1;
+      await updateContentHeight(expandedContentHeight);
+      expect(onEndReached).toHaveBeenCalledTimes(1);
+
+      await scrollToOffset(
+        expandedContentHeight - layout.height,
+        2000,
+        expandedContentHeight,
+      );
+      expect(onEndReached).toHaveBeenCalledTimes(2);
+
+      await updateContentHeight(getContentHeight());
+      await scrollToEnd(3000);
+      expect(onEndReached).toHaveBeenCalledTimes(2);
+    });
+
+    it('uses edge item identity instead of data reference identity', async () => {
+      await scrollToEnd(1000);
+      expect(onEndReached).toHaveBeenCalledTimes(1);
+
+      await updateData([...data]);
+      expect(onEndReached).toHaveBeenCalledTimes(1);
+
+      await updateData(
+        data.map((item, index) =>
+          index === data.length - 1 ? {key: `replacement-${index}`} : item,
+        ),
+      );
+      expect(onEndReached).toHaveBeenCalledTimes(2);
+
+      await scrollToStart(2000);
+      expect(onStartReached).toHaveBeenCalledTimes(2);
+
+      await updateData([...data]);
+      expect(onStartReached).toHaveBeenCalledTimes(2);
+
+      await updateData(
+        data.map((item, index) =>
+          index === 0 ? {key: `replacement-${index}`} : item,
+        ),
+      );
+      expect(onStartReached).toHaveBeenCalledTimes(3);
+    });
+  });
+
   it('does not call onEndReached when onContentSizeChange happens after onLayout', async () => {
     const ITEM_HEIGHT = 40;
     const layout = {width: 300, height: 600};