Fix onEndReached not being called when getItemLayout is present and w…

…e scroll past render window (#46736)

Summary:
Pull Request resolved: #46736

Copying the comment in code:

> 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.

Changelog:
[General][Fixed] - Fix onEndReached not being called when getItemLayout is present and we scroll past render window

Differential Revision: D63643856

packages/virtualized-lists/Lists/VirtualizedList.js

@@ -1181,6 +1181,12 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
     if (hiPriInProgress) {
       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.
+    this._maybeCallOnEdgeReached();
   }
 
   _cellRefs: {[string]: null | CellRenderer<any>} = {};
@@ -1491,11 +1497,20 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
     const {
       data,
       getItemCount,
+      getItemLayout,
       onStartReached,
       onStartReachedThreshold,
       onEndReached,
       onEndReachedThreshold,
     } = this.props;
+    // Wait until we have real metrics
+    if (
+      !this._listMetrics.hasContentLength() ||
+      this._scrollMetrics.visibleLength === 0
+    ) {
+      return;
+    }
+
     // If we have any pending scroll updates it means that the scroll metrics
     // are out of date and we should not call any of the edge reached callbacks.
     if (this.state.pendingScrollUpdateCount > 0) {
@@ -1538,6 +1553,9 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
     if (
       onEndReached &&
       this.state.cellsAroundViewport.last === getItemCount(data) - 1 &&
+      (getItemLayout != null ||
+        this._listMetrics.getHighestMeasuredCellIndex() ===
+          getItemCount(data) - 1) &&
       isWithinEndThreshold &&
       this._listMetrics.getContentLength() !== this._sentEndForContentLength
     ) {

packages/virtualized-lists/Lists/__tests__/VirtualizedList-test.js

@@ -663,11 +663,6 @@ describe('VirtualizedList', () => {
       renderItem: ({item}) => <item value={item.key} />,
       getItem: (items, index) => items[index],
       getItemCount: items => items.length,
-      getItemLayout: (items, index) => ({
-        length: ITEM_HEIGHT,
-        offset: ITEM_HEIGHT * index,
-        index,
-      }),
       onEndReached,
     };
 
@@ -694,6 +689,15 @@ describe('VirtualizedList', () => {
     expect(onEndReached).not.toHaveBeenCalled();
 
     await act(() => {
+      for (let i = 0; i < 20; ++i) {
+        simulateCellLayout(component, data, i, {
+          width: 10,
+          height: ITEM_HEIGHT,
+          x: 0,
+          y: i * ITEM_HEIGHT,
+        });
+      }
+
       instance._onScroll({
         timeStamp: 1000,
         nativeEvent: {