Fix onStartReached not called in some cases

Expensify · Jul 27, 2024 · 2ee37d8 · 2ee37d8
1 parent 904e950
commit 2ee37d8
Show file tree

Hide file tree

Showing 2 changed files with 226 additions and 9 deletions.
diff --git a/patches/@react-native+virtualized-lists+0.73.4+002+osr-improvement.patch b/patches/@react-native+virtualized-lists+0.73.4+002+osr-improvement.patch
@@ -1,8 +1,87 @@
 diff --git a/node_modules/@react-native/virtualized-lists/Lists/VirtualizedList.js b/node_modules/@react-native/virtualized-lists/Lists/VirtualizedList.js
-index e338d90..70a59bf 100644
+index e338d90..238989f 100644
 --- a/node_modules/@react-native/virtualized-lists/Lists/VirtualizedList.js
 +++ b/node_modules/@react-native/virtualized-lists/Lists/VirtualizedList.js
-@@ -1219,7 +1219,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
+@@ -89,6 +89,7 @@ type State = {
+   firstVisibleItemKey: ?string,
+   // When > 0 the scroll position available in JS is considered stale and should not be used.
+   pendingScrollUpdateCount: number,
++  lastItemCount: number,
+ };
+
+ function getScrollingThreshold(threshold: number, visibleLength: number) {
+@@ -404,12 +405,13 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
+
+     const minIndexForVisible =
+       this.props.maintainVisibleContentPosition?.minIndexForVisible ?? 0;
++    const itemCount = this.props.getItemCount(this.props.data);
+
+     this.state = {
+       cellsAroundViewport: initialRenderRegion,
+       renderMask: VirtualizedList._createRenderMask(props, initialRenderRegion),
+       firstVisibleItemKey:
+-        this.props.getItemCount(this.props.data) > minIndexForVisible
++        itemCount > minIndexForVisible
+           ? VirtualizedList._getItemKey(this.props, minIndexForVisible)
+           : null,
+       // When we have a non-zero initialScrollIndex, we will receive a
+@@ -420,6 +422,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
+         this.props.initialScrollIndex > 0
+           ? 1
+           : 0,
++      lastItemCount: itemCount,
+     };
+   }
+
+@@ -701,16 +704,15 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
+     // first and last could be stale (e.g. if a new, shorter items props is passed in), so we make
+     // sure we're rendering a reasonable range here.
+     const itemCount = newProps.getItemCount(newProps.data);
+-    if (itemCount === prevState.renderMask.numCells()) {
++    if (itemCount === prevState.renderMask.numCells() && itemCount === prevState.lastItemCount) {
+       return prevState;
+     }
+-
+     let maintainVisibleContentPositionAdjustment: ?number = null;
+     const prevFirstVisibleItemKey = prevState.firstVisibleItemKey;
+     const minIndexForVisible =
+       newProps.maintainVisibleContentPosition?.minIndexForVisible ?? 0;
+     const newFirstVisibleItemKey =
+-      newProps.getItemCount(newProps.data) > minIndexForVisible
++      itemCount > minIndexForVisible
+         ? VirtualizedList._getItemKey(newProps, minIndexForVisible)
+         : null;
+     if (
+@@ -758,6 +760,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
+         maintainVisibleContentPositionAdjustment != null
+           ? prevState.pendingScrollUpdateCount + 1
+           : prevState.pendingScrollUpdateCount,
++      lastItemCount: itemCount,
+     };
+   }
+
+@@ -1159,7 +1162,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
+     }
+   }
+
+-  componentDidUpdate(prevProps: Props) {
++  componentDidUpdate(prevProps: Props, prevState: State) {
+     const {data, extraData} = this.props;
+     if (data !== prevProps.data || extraData !== prevProps.extraData) {
+       // clear the viewableIndices cache to also trigger
+@@ -1181,6 +1184,11 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
+     if (hiPriInProgress) {
+       this._hiPriInProgress = false;
+     }
++
++    if (this.state.cellsAroundViewport.first !== prevState.cellsAroundViewport.first ||
++        this.state.cellsAroundViewport.last !== prevState.cellsAroundViewport.last) {
++      this._maybeCallOnEdgeReached();
++    }
+   }
+
+   _cellRefs: {[string]: null | CellRenderer<any>} = {};
+@@ -1219,7 +1227,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
      zoomScale: 1,
    };
    _scrollRef: ?React.ElementRef<any> = null;
@@ -11,7 +90,7 @@ index e338d90..70a59bf 100644
    _sentEndForContentLength = 0;
    _updateCellsToRenderBatcher: Batchinator;
    _viewabilityTuples: Array<ViewabilityHelperCallbackTuple> = [];
-@@ -1550,16 +1550,16 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
+@@ -1550,16 +1558,16 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
        onStartReached != null &&
        this.state.cellsAroundViewport.first === 0 &&
        isWithinStartThreshold &&

diff --git a/patches/react-native-web+0.19.12+005+osr-improvement.patch b/patches/react-native-web+0.19.12+005+osr-improvement.patch
@@ -1,5 +1,5 @@
 diff --git a/node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js b/node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js
-index b05da08..80aea85 100644
+index bede95b..2aef4c6 100644
 --- a/node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js
 +++ b/node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js
 @@ -332,7 +332,7 @@ class VirtualizedList extends StateSafePureComponent {
@@ -11,7 +11,75 @@ index b05da08..80aea85 100644
      this._sentEndForContentLength = 0;
      this._totalCellLength = 0;
      this._totalCellsMeasured = 0;
-@@ -1397,8 +1397,8 @@ class VirtualizedList extends StateSafePureComponent {
+@@ -684,16 +684,18 @@ class VirtualizedList extends StateSafePureComponent {
+         });
+       }
+     }
++    var itemCount = this.props.getItemCount(this.props.data);
+     var initialRenderRegion = VirtualizedList._initialRenderRegion(_props);
+     var minIndexForVisible = (_this$props$maintainV = (_this$props$maintainV2 = this.props.maintainVisibleContentPosition) == null ? void 0 : _this$props$maintainV2.minIndexForVisible) !== null && _this$props$maintainV !== void 0 ? _this$props$maintainV : 0;
+     this.state = {
+       cellsAroundViewport: initialRenderRegion,
+       renderMask: VirtualizedList._createRenderMask(_props, initialRenderRegion),
+-      firstVisibleItemKey: this.props.getItemCount(this.props.data) > minIndexForVisible ? VirtualizedList._getItemKey(this.props, minIndexForVisible) : null,
++      firstVisibleItemKey: itemCount > minIndexForVisible ? VirtualizedList._getItemKey(this.props, minIndexForVisible) : null,
+       // When we have a non-zero initialScrollIndex, we will receive a
+       // scroll event later so this will prevent the window from updating
+       // until we get a valid offset.
+-      pendingScrollUpdateCount: this.props.initialScrollIndex != null && this.props.initialScrollIndex > 0 ? 1 : 0
++      pendingScrollUpdateCount: this.props.initialScrollIndex != null && this.props.initialScrollIndex > 0 ? 1 : 0,
++      lastItemCount: itemCount
+     };
+
+     // REACT-NATIVE-WEB patch to preserve during future RN merges: Support inverted wheel scroller.
+@@ -919,13 +921,13 @@ class VirtualizedList extends StateSafePureComponent {
+     // first and last could be stale (e.g. if a new, shorter items props is passed in), so we make
+     // sure we're rendering a reasonable range here.
+     var itemCount = newProps.getItemCount(newProps.data);
+-    if (itemCount === prevState.renderMask.numCells()) {
++    if (itemCount === prevState.renderMask.numCells() && itemCount === prevState.lastItemCount) {
+       return prevState;
+     }
+     var maintainVisibleContentPositionAdjustment = null;
+     var prevFirstVisibleItemKey = prevState.firstVisibleItemKey;
+     var minIndexForVisible = (_newProps$maintainVis = (_newProps$maintainVis2 = newProps.maintainVisibleContentPosition) == null ? void 0 : _newProps$maintainVis2.minIndexForVisible) !== null && _newProps$maintainVis !== void 0 ? _newProps$maintainVis : 0;
+-    var newFirstVisibleItemKey = newProps.getItemCount(newProps.data) > minIndexForVisible ? VirtualizedList._getItemKey(newProps, minIndexForVisible) : null;
++    var newFirstVisibleItemKey = itemCount > minIndexForVisible ? VirtualizedList._getItemKey(newProps, minIndexForVisible) : null;
+     if (newProps.maintainVisibleContentPosition != null && prevFirstVisibleItemKey != null && newFirstVisibleItemKey != null) {
+       if (newFirstVisibleItemKey !== prevFirstVisibleItemKey) {
+         // Fast path if items were added at the start of the list.
+@@ -944,7 +946,8 @@ class VirtualizedList extends StateSafePureComponent {
+       cellsAroundViewport: constrainedCells,
+       renderMask: VirtualizedList._createRenderMask(newProps, constrainedCells),
+       firstVisibleItemKey: newFirstVisibleItemKey,
+-      pendingScrollUpdateCount: maintainVisibleContentPositionAdjustment != null ? prevState.pendingScrollUpdateCount + 1 : prevState.pendingScrollUpdateCount
++      pendingScrollUpdateCount: maintainVisibleContentPositionAdjustment != null ? prevState.pendingScrollUpdateCount + 1 : prevState.pendingScrollUpdateCount,
++      lastItemCount: itemCount
+     };
+   }
+   _pushCells(cells, stickyHeaderIndices, stickyIndicesFromProps, first, last, inversionStyle) {
+@@ -1220,7 +1223,7 @@ class VirtualizedList extends StateSafePureComponent {
+       return ret;
+     }
+   }
+-  componentDidUpdate(prevProps) {
++  componentDidUpdate(prevProps, prevState) {
+     var _this$props7 = this.props,
+       data = _this$props7.data,
+       extraData = _this$props7.extraData;
+@@ -1244,6 +1247,11 @@ class VirtualizedList extends StateSafePureComponent {
+     if (hiPriInProgress) {
+       this._hiPriInProgress = false;
+     }
++
++    if (this.state.cellsAroundViewport.first !== prevState.cellsAroundViewport.first ||
++        this.state.cellsAroundViewport.last !== prevState.cellsAroundViewport.last) {
++      this._maybeCallOnEdgeReached();
++    }
+   }
+
+   // Used for preventing scrollToIndex from being called multiple times for initialScrollIndex
+@@ -1407,8 +1415,8 @@ class VirtualizedList extends StateSafePureComponent {
      // 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
@@ -22,7 +90,7 @@ index b05da08..80aea85 100644
        onStartReached({
          distanceFromStart
        });
-@@ -1407,7 +1407,7 @@ class VirtualizedList extends StateSafePureComponent {
+@@ -1417,7 +1425,7 @@ class VirtualizedList extends StateSafePureComponent {
      // If the user scrolls away from the start or end and back again,
      // cause onStartReached or onEndReached to be triggered again
      else {
@@ -32,10 +100,80 @@ index b05da08..80aea85 100644
      }
    }
 diff --git a/node_modules/react-native-web/src/vendor/react-native/VirtualizedList/index.js b/node_modules/react-native-web/src/vendor/react-native/VirtualizedList/index.js
-index 459f017..799a6ee 100644
+index 459f017..d20115c 100644
 --- a/node_modules/react-native-web/src/vendor/react-native/VirtualizedList/index.js
 +++ b/node_modules/react-native-web/src/vendor/react-native/VirtualizedList/index.js
-@@ -1325,7 +1325,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
+@@ -79,6 +79,7 @@ type State = {
+   firstVisibleItemKey: ?string,
+   // When > 0 the scroll position available in JS is considered stale and should not be used.
+   pendingScrollUpdateCount: number,
++  lastItemCount: number,
+ };
+
+ /**
+@@ -453,12 +454,13 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
+
+     const minIndexForVisible =
+       this.props.maintainVisibleContentPosition?.minIndexForVisible ?? 0;
++    const itemCount = this.props.getItemCount(this.props.data);
+
+     this.state = {
+       cellsAroundViewport: initialRenderRegion,
+       renderMask: VirtualizedList._createRenderMask(props, initialRenderRegion),
+       firstVisibleItemKey:
+-        this.props.getItemCount(this.props.data) > minIndexForVisible
++        itemCount > minIndexForVisible
+           ? VirtualizedList._getItemKey(this.props, minIndexForVisible)
+           : null,
+       // When we have a non-zero initialScrollIndex, we will receive a
+@@ -469,6 +471,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
+         this.props.initialScrollIndex > 0
+           ? 1
+           : 0,
++      lastItemCount: itemCount,
+     };
+
+       // REACT-NATIVE-WEB patch to preserve during future RN merges: Support inverted wheel scroller.
+@@ -809,16 +812,15 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
+     // first and last could be stale (e.g. if a new, shorter items props is passed in), so we make
+     // sure we're rendering a reasonable range here.
+     const itemCount = newProps.getItemCount(newProps.data);
+-    if (itemCount === prevState.renderMask.numCells()) {
++    if (itemCount === prevState.renderMask.numCells() && itemCount === prevState.lastItemCount) {
+       return prevState;
+     }
+-
+     let maintainVisibleContentPositionAdjustment: ?number = null;
+     const prevFirstVisibleItemKey = prevState.firstVisibleItemKey;
+     const minIndexForVisible =
+       newProps.maintainVisibleContentPosition?.minIndexForVisible ?? 0;
+     const newFirstVisibleItemKey =
+-      newProps.getItemCount(newProps.data) > minIndexForVisible
++      itemCount > minIndexForVisible
+         ? VirtualizedList._getItemKey(newProps, minIndexForVisible)
+         : null;
+     if (
+@@ -866,6 +868,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
+         maintainVisibleContentPositionAdjustment != null
+           ? prevState.pendingScrollUpdateCount + 1
+           : prevState.pendingScrollUpdateCount,
++      lastItemCount: itemCount,
+     };
+   }
+
+@@ -1285,6 +1288,11 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
+     if (hiPriInProgress) {
+       this._hiPriInProgress = false;
+     }
++
++    if (this.state.cellsAroundViewport.first !== prevState.cellsAroundViewport.first ||
++        this.state.cellsAroundViewport.last !== prevState.cellsAroundViewport.last) {
++      this._maybeCallOnEdgeReached();
++    }
+   }
+
+   _averageCellLength = 0;
+@@ -1325,7 +1333,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
      zoomScale: 1,
    };
    _scrollRef: ?React.ElementRef<any> = null;
@@ -44,7 +182,7 @@ index 459f017..799a6ee 100644
    _sentEndForContentLength = 0;
    _totalCellLength = 0;
    _totalCellsMeasured = 0;
-@@ -1675,18 +1675,18 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
+@@ -1675,18 +1683,18 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
        onStartReached != null &&
        this.state.cellsAroundViewport.first === 0 &&
        isWithinStartThreshold &&