Fix onEndReached bugs for FlatList

Libraries/Lists/VirtualizedList.js

@@ -1077,8 +1077,6 @@ class VirtualizedList extends React.PureComponent<Props, State> {
   componentDidUpdate(prevProps: Props) {
     const {data, extraData} = this.props;
     if (data !== prevProps.data || extraData !== prevProps.extraData) {
-      this._hasDataChangedSinceEndReached = true;
-
       // clear the viewableIndices cache to also trigger
       // the onViewableItemsChanged callback with the new data
       this._viewabilityTuples.forEach(tuple => {
@@ -1107,7 +1105,6 @@ class VirtualizedList extends React.PureComponent<Props, State> {
   _fillRateHelper: FillRateHelper;
   _frames = {};
   _footerLength = 0;
-  _hasDataChangedSinceEndReached = true;
   _hasDoneInitialScroll = false;
   _hasInteracted = false;
   _hasMore = false;
@@ -1372,29 +1369,39 @@ class VirtualizedList extends React.PureComponent<Props, State> {
   }
 
   _maybeCallOnEndReached() {
-    const {
-      data,
-      getItemCount,
-      onEndReached,
-      onEndReachedThreshold,
-    } = this.props;
-    const {contentLength, visibleLength, offset} = this._scrollMetrics;
+    const {onEndReached, onEndReachedThreshold} = this.props;
+    if (!onEndReached) {
+      return;
+    }
+
+    const {contentLength, visibleLength, offset, dOffset} = this._scrollMetrics;
+
+    // Scrolled in a direction that doesn't require a check,
+    // such as scrolling up in the vertical list
+    if (offset <= 0 || dOffset <= 0) {
+      return;
+    }
+
+    // contentLength did not change because no new data was added
+    if (contentLength === this._sentEndForContentLength) {
+      return;
+    }
+
     const distanceFromEnd = contentLength - visibleLength - offset;
-    if (
-      onEndReached &&
-      this.state.last === getItemCount(data) - 1 &&
-      /* $FlowFixMe(>=0.63.0 site=react_native_fb) This comment suppresses an
-       * error found when Flow v0.63 was deployed. To see the error delete this
-       * comment and run Flow. */
-      distanceFromEnd < onEndReachedThreshold * visibleLength &&
-      (this._hasDataChangedSinceEndReached ||
-        this._scrollMetrics.contentLength !== this._sentEndForContentLength)
-    ) {
-      // Only call onEndReached once for a given dataset + content length.
-      this._hasDataChangedSinceEndReached = false;
-      this._sentEndForContentLength = this._scrollMetrics.contentLength;
-      onEndReached({distanceFromEnd});
+
+    // If the distance is farther than can be seen on the screen
+    if (distanceFromEnd >= visibleLength) {
+      return;
+    }
+
+    // $FlowFixMe
+    const minimumDistanceFromEnd = onEndReachedThreshold * visibleLength;
+    if (distanceFromEnd >= minimumDistanceFromEnd) {
+      return;
     }
+
+    this._sentEndForContentLength = contentLength;
+    onEndReached({distanceFromEnd});
   }
 
   _onContentSizeChange = (width: number, height: number) => {

Libraries/Lists/__tests__/VirtualizedList-test.js

@@ -273,4 +273,149 @@ describe('VirtualizedList', () => {
       }),
     );
   });
+
+  it('OnEndReached should not be called after initial rendering', () => {
+    const ITEM_HEIGHT = 100;
+    const APPENDED_ITEM_COUNT = 10;
+    const data = appendNewItems([], 10);
+    const onEndReached = jest.fn(function() {
+      appendNewItems(data, APPENDED_ITEM_COUNT);
+    });
+
+    const props = createPropsWithonEndReached(data, ITEM_HEIGHT, onEndReached);
+
+    const component = ReactTestRenderer.create(<VirtualizedList {...props} />);
+    const instance = component.getInstance();
+
+    const scroll = createScrollMethod(instance, ITEM_HEIGHT);
+    scroll(data, 0);
+
+    expect(onEndReached).not.toHaveBeenCalled();
+    expect(data.length).toBe(10);
+  });
+
+  it('OnEndReached should be called once after scrolling by 200', () => {
+    const ITEM_HEIGHT = 100;
+    const APPENDED_ITEM_COUNT = 10;
+    const data = appendNewItems([], 10);
+    const onEndReached = jest.fn(function() {
+      appendNewItems(data, APPENDED_ITEM_COUNT);
+    });
+
+    const props = createPropsWithonEndReached(data, ITEM_HEIGHT, onEndReached);
+
+    const component = ReactTestRenderer.create(<VirtualizedList {...props} />);
+    const instance = component.getInstance();
+
+    const scroll = createScrollMethod(instance, ITEM_HEIGHT);
+    scroll(data, 200);
+
+    expect(onEndReached).toHaveBeenCalledTimes(1);
+    expect(onEndReached).toHaveBeenLastCalledWith({
+      distanceFromEnd: 200,
+    });
+    expect(data.length).toBe(20);
+  });
+
+  it('OnEndReached should not be called twice in a short period while scrolling fast', () => {
+    const ITEM_HEIGHT = 100;
+    const APPENDED_ITEM_COUNT = 10;
+    const data = appendNewItems([], 10);
+    const onEndReached = jest.fn(function() {
+      appendNewItems(data, APPENDED_ITEM_COUNT);
+    });
+
+    const props = createPropsWithonEndReached(data, ITEM_HEIGHT, onEndReached);
+
+    const component = ReactTestRenderer.create(<VirtualizedList {...props} />);
+    const instance = component.getInstance();
+
+    const scroll = createScrollMethod(instance, ITEM_HEIGHT);
+    scroll(data, 200);
+    scroll(data, 300, 50);
+
+    expect(onEndReached).toHaveBeenCalledTimes(1);
+    expect(onEndReached).toHaveBeenLastCalledWith({
+      distanceFromEnd: 200,
+    });
+    expect(data.length).toBe(20);
+  });
+
+  it('OnEndReached should be called when required to load more items', () => {
+    const ITEM_HEIGHT = 100;
+    const APPENDED_ITEM_COUNT = 10;
+    const data = appendNewItems([], 10);
+    const onEndReached = jest.fn(function() {
+      appendNewItems(data, APPENDED_ITEM_COUNT);
+    });
+
+    const props = createPropsWithonEndReached(data, ITEM_HEIGHT, onEndReached);
+
+    const component = ReactTestRenderer.create(<VirtualizedList {...props} />);
+    const instance = component.getInstance();
+
+    const scroll = createScrollMethod(instance, ITEM_HEIGHT);
+    scroll(data, 200);
+    expect(onEndReached).toHaveBeenCalledTimes(1);
+    expect(data.length).toBe(20);
+
+    scroll(data, 1000);
+    expect(onEndReached).toHaveBeenCalledTimes(2);
+    expect(onEndReached).toHaveBeenLastCalledWith({
+      distanceFromEnd: 400,
+    });
+    expect(data.length).toBe(30);
+  });
 });
+
+function createPropsWithonEndReached(data, itemHeight, onEndReached) {
+  const props = {
+    data,
+    renderItem: ({item}) => <item value={item.key} />,
+    getItem: (items, index) => items[index],
+    getItemCount: items => items.length,
+    getItemLayout: (items, index) => ({
+      length: itemHeight,
+      offset: itemHeight * index,
+      index,
+    }),
+    onEndReached,
+  };
+
+  return props;
+}
+
+function appendNewItems(items, count) {
+  const nextId = (items.length > 0 ? items[items.length - 1].id : 0) + 1;
+
+  for (let loop = 1; loop <= count; loop++) {
+    const id = nextId + loop;
+    items.push({
+      id: id,
+      key: `k${id}`,
+    });
+  }
+
+  return items;
+}
+
+function createScrollMethod(instance, itemHeight) {
+  let scrollTimeStamp = 0;
+
+  return function scroll(items, y, delay = 1000) {
+    scrollTimeStamp += delay;
+
+    const nativeEvent = {
+      contentOffset: {y, x: 0},
+      layoutMeasurement: {width: 300, height: 600},
+      contentSize: {width: 300, height: items.length * itemHeight},
+      zoomScale: 1,
+      contentInset: {right: 0, top: 0, left: 0, bottom: 0},
+    };
+
+    instance._onScroll({
+      timeStamp: scrollTimeStamp,
+      nativeEvent,
+    });
+  };
+}