[fix] VirtualizedList sync from react-native

Fix #2432
Close #2167
Close #2502

Author: LucioChavezFuentes

configs/.flowconfig

@@ -6,11 +6,14 @@
 <PROJECT_ROOT>/packages/.*/dist/.*
 <PROJECT_ROOT>/packages/react-native-web-docs/.*
 <PROJECT_ROOT>/packages/react-native-web-examples/.*
-.*/node_modules/.*/.*.json
 
 [include]
 
+[declarations]
+.*/node_modules/.*
+
 [libs]
 
 [options]
+indexed_access=true
 munge_underscores=true

package-lock.json

@@ -25,7 +25,9 @@
     "@babel/runtime": "^7.18.6",
     "fbjs": "^3.0.4",
     "inline-style-prefixer": "^6.0.1",
+    "memoize-one": "^6.0.0",
     "normalize-css-color": "^1.0.2",
+    "nullthrows": "^1.1.1",
     "postcss-value-parser": "^4.2.0",
     "styleq": "^0.1.2"
   },

packages/react-native-web/package.json

@@ -37,7 +37,7 @@ import InteractionManager from '../../../exports/InteractionManager';
 class Batchinator {
   _callback: () => void;
   _delay: number;
-  _taskHandle: ?{cancel: () => void};
+  _taskHandle: ?{cancel: () => void, ...};
   constructor(callback: () => void, delayMS: number) {
     this._delay = delayMS;
     this._callback = callback;
@@ -48,7 +48,7 @@ class Batchinator {
    * By default, if there is a pending task the callback is run immediately. Set the option abort to
    * true to not call the callback if it was pending.
    */
-  dispose(options: {abort: boolean} = {abort: false}) {
+  dispose(options: {abort: boolean, ...} = {abort: false}) {
     if (this._taskHandle) {
       this._taskHandle.cancel();
       if (!options.abort) {

packages/react-native-web/src/vendor/react-native/Batchinator/index.js

@@ -10,6 +10,8 @@
 
 'use strict';
 
+import type {FrameMetricProps} from '../VirtualizedList/VirtualizedListProps';
+
 export type FillRateInfo = Info;
 
 class Info {
@@ -47,16 +49,17 @@ let _sampleRate = DEBUG ? 1 : null;
  * `SceneTracker.getActiveScene` to determine the context of the events.
  */
 class FillRateHelper {
-  _anyBlankStartTime = (null: ?number);
+  _anyBlankStartTime: ?number = null;
   _enabled = false;
-  _getFrameMetrics: (index: number) => ?FrameMetrics;
-  _info = new Info();
-  _mostlyBlankStartTime = (null: ?number);
-  _samplesStartTime = (null: ?number);
-
-  static addListener(
-    callback: FillRateInfo => void,
-  ): {remove: () => void, ...} {
+  _getFrameMetrics: (index: number, props: FrameMetricProps) => ?FrameMetrics;
+  _info: Info = new Info();
+  _mostlyBlankStartTime: ?number = null;
+  _samplesStartTime: ?number = null;
+
+  static addListener(callback: FillRateInfo => void): {
+    remove: () => void,
+    ...
+  } {
     if (_sampleRate === null) {
       console.warn('Call `FillRateHelper.setSampleRate` before `addListener`.');
     }
@@ -76,7 +79,9 @@ class FillRateHelper {
     _minSampleCount = minSampleCount;
   }
 
-  constructor(getFrameMetrics: (index: number) => ?FrameMetrics) {
+  constructor(
+    getFrameMetrics: (index: number, props: FrameMetricProps) => ?FrameMetrics,
+  ) {
     this._getFrameMetrics = getFrameMetrics;
     this._enabled = (_sampleRate || 0) > Math.random();
     this._resetData();
@@ -123,6 +128,7 @@ class FillRateHelper {
         mostly_blank_time_frac: this._info.mostly_blank_ms / total_time_spent,
       };
       for (const key in derived) {
+        // $FlowFixMe[prop-missing]
         derived[key] = Math.round(1000 * derived[key]) / 1000;
       }
       console.debug('FillRateHelper deactivateAndFlush: ', {derived, info});
@@ -133,12 +139,11 @@ class FillRateHelper {
 
   computeBlankness(
     props: {
-      data: any,
-      getItemCount: (data: any) => number,
-      initialNumToRender: number,
+      ...FrameMetricProps,
+      initialNumToRender?: ?number,
       ...
     },
-    state: {
+    cellsAroundViewport: {
       first: number,
       last: number,
       ...
@@ -154,6 +159,7 @@ class FillRateHelper {
     if (
       !this._enabled ||
       props.getItemCount(props.data) === 0 ||
+      cellsAroundViewport.last < cellsAroundViewport.first ||
       this._samplesStartTime == null
     ) {
       return 0;
@@ -179,10 +185,13 @@ class FillRateHelper {
     this._mostlyBlankStartTime = null;
 
     let blankTop = 0;
-    let first = state.first;
-    let firstFrame = this._getFrameMetrics(first);
-    while (first <= state.last && (!firstFrame || !firstFrame.inLayout)) {
-      firstFrame = this._getFrameMetrics(first);
+    let first = cellsAroundViewport.first;
+    let firstFrame = this._getFrameMetrics(first, props);
+    while (
+      first <= cellsAroundViewport.last &&
+      (!firstFrame || !firstFrame.inLayout)
+    ) {
+      firstFrame = this._getFrameMetrics(first, props);
       first++;
     }
     // Only count blankTop if we aren't rendering the first item, otherwise we will count the header
@@ -194,10 +203,13 @@ class FillRateHelper {
       );
     }
     let blankBottom = 0;
-    let last = state.last;
-    let lastFrame = this._getFrameMetrics(last);
-    while (last >= state.first && (!lastFrame || !lastFrame.inLayout)) {
-      lastFrame = this._getFrameMetrics(last);
+    let last = cellsAroundViewport.last;
+    let lastFrame = this._getFrameMetrics(last, props);
+    while (
+      last >= cellsAroundViewport.first &&
+      (!lastFrame || !lastFrame.inLayout)
+    ) {
+      lastFrame = this._getFrameMetrics(last, props);
       last--;
     }
     // Only count blankBottom if we aren't rendering the last item, otherwise we will count the
@@ -238,4 +250,4 @@ class FillRateHelper {
   }
 }
 
-export default FillRateHelper;
+export default FillRateHelper;