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

…e scroll past render window (#46990)

Summary:

This is a reattempt land D63643856 to fix the scroll onendreached event not firing.

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

Reviewed By: NickGerleman

Differential Revision: D64222424

packages/virtualized-lists/Lists/VirtualizedList.js

@@ -1160,7 +1160,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
   }
 
   componentDidUpdate(prevProps: Props) {
-    const {data, extraData} = this.props;
+    const {data, extraData, getItemLayout} = this.props;
     if (data !== prevProps.data || extraData !== prevProps.extraData) {
       // clear the viewableIndices cache to also trigger
       // the onViewableItemsChanged callback with the new data
@@ -1181,6 +1181,14 @@ 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.
+    if (getItemLayout != null) {
+      this._maybeCallOnEdgeReached();
+    }
   }
 
   _cellRefs: {[string]: null | CellRenderer<any>} = {};
@@ -1496,6 +1504,11 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
       onEndReached,
       onEndReachedThreshold,
     } = this.props;
+    // Wait until we have real metrics
+    if (!this._listMetrics.hasContentLength()) {
+      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) {

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: {