@react-native/virtualized-lists 0.74.0 → 0.74.1

package/Lists/FillRateHelper.js

@@ -11,6 +11,7 @@
 'use strict';
 
 import type {CellMetricProps} from './ListMetricsAggregator';
+
 import ListMetricsAggregator from './ListMetricsAggregator';
 
 export type FillRateInfo = Info;

package/Lists/ListMetricsAggregator.js

@@ -8,10 +8,10 @@
  * @format
  */
 
-import type {Layout} from 'react-native/Libraries/Types/CoreEventTypes';
 import type {Props as VirtualizedListProps} from './VirtualizedListProps';
-import {keyExtractor as defaultKeyExtractor} from './VirtualizeUtils';
+import type {Layout} from 'react-native/Libraries/Types/CoreEventTypes';
 
+import {keyExtractor as defaultKeyExtractor} from './VirtualizeUtils';
 import invariant from 'invariant';
 
 export type CellMetrics = {

package/Lists/ViewabilityHelper.js

@@ -11,6 +11,7 @@
 'use strict';
 
 import type {CellMetricProps} from './ListMetricsAggregator';
+
 import ListMetricsAggregator from './ListMetricsAggregator';
 
 const invariant = require('invariant');

package/Lists/VirtualizedList.d.ts

@@ -18,8 +18,8 @@ import type {
   ScrollView,
 } from 'react-native';
 
-export interface ViewToken {
-  item: any;
+export interface ViewToken<ItemT = any> {
+  item: ItemT;
   key: string;
   index: number | null;
   isViewable: boolean;
@@ -330,8 +330,8 @@ export interface VirtualizedListWithoutRenderItemProps<ItemT>
    */
   onViewableItemsChanged?:
     | ((info: {
-        viewableItems: Array<ViewToken>;
-        changed: Array<ViewToken>;
+        viewableItems: Array<ViewToken<ItemT>>;
+        changed: Array<ViewToken<ItemT>>;
       }) => void)
     | null
     | undefined;

package/Lists/VirtualizedList.js

@@ -8,12 +8,7 @@
  * @format
  */
 
-import type {ScrollResponderType} from 'react-native/Libraries/Components/ScrollView/ScrollView';
-import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
-import type {
-  LayoutEvent,
-  ScrollEvent,
-} from 'react-native/Libraries/Types/CoreEventTypes';
+import type {CellMetricProps, ListOrientation} from './ListMetricsAggregator';
 import type {ViewToken} from './ViewabilityHelper';
 import type {
   Item,
@@ -22,17 +17,13 @@ import type {
   RenderItemType,
   Separators,
 } from './VirtualizedListProps';
-import type {CellMetricProps, ListOrientation} from './ListMetricsAggregator';
+import type {ScrollResponderType} from 'react-native/Libraries/Components/ScrollView/ScrollView';
+import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
+import type {
+  LayoutEvent,
+  ScrollEvent,
+} from 'react-native/Libraries/Types/CoreEventTypes';
 
-import {
-  I18nManager,
-  Platform,
-  RefreshControl,
-  ScrollView,
-  View,
-  StyleSheet,
-  findNodeHandle,
-} from 'react-native';
 import Batchinator from '../Interaction/Batchinator';
 import clamp from '../Utilities/clamp';
 import infoLog from '../Utilities/infoLog';
@@ -48,6 +39,14 @@ import {
   VirtualizedListContext,
   VirtualizedListContextProvider,
 } from './VirtualizedListContext.js';
+import {
+  horizontalOrDefault,
+  initialNumToRenderOrDefault,
+  maxToRenderPerBatchOrDefault,
+  onEndReachedThresholdOrDefault,
+  onStartReachedThresholdOrDefault,
+  windowSizeOrDefault,
+} from './VirtualizedListProps';
 import {
   computeWindowedRenderLimits,
   keyExtractor as defaultKeyExtractor,
@@ -55,15 +54,15 @@ import {
 import invariant from 'invariant';
 import nullthrows from 'nullthrows';
 import * as React from 'react';
-
 import {
-  horizontalOrDefault,
-  initialNumToRenderOrDefault,
-  maxToRenderPerBatchOrDefault,
-  onStartReachedThresholdOrDefault,
-  onEndReachedThresholdOrDefault,
-  windowSizeOrDefault,
-} from './VirtualizedListProps';
+  I18nManager,
+  Platform,
+  RefreshControl,
+  ScrollView,
+  StyleSheet,
+  View,
+  findNodeHandle,
+} from 'react-native';
 
 export type {RenderItemProps, RenderItemType, Separators};
 
@@ -91,19 +90,6 @@ type State = {
   pendingScrollUpdateCount: number,
 };
 
-function findLastWhere<T>(
-  arr: $ReadOnlyArray<T>,
-  predicate: (element: T) => boolean,
-): T | null {
-  for (let i = arr.length - 1; i >= 0; i--) {
-    if (predicate(arr[i])) {
-      return arr[i];
-    }
-  }
-
-  return null;
-}
-
 function getScrollingThreshold(threshold: number, visibleLength: number) {
   return (threshold * visibleLength) / 2;
 }
@@ -825,7 +811,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
           key={key}
           prevCellKey={prevCellKey}
           onUpdateSeparators={this._onUpdateSeparators}
-          onCellFocusCapture={e => this._onCellFocusCapture(key)}
+          onCellFocusCapture={this._onCellFocusCapture}
           onUnmount={this._onCellUnmount}
           ref={ref => {
             this._cellRefs[key] = ref;
@@ -969,10 +955,12 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
           {React.cloneElement(element, {
             onLayout: (event: LayoutEvent) => {
               this._onLayoutEmpty(event);
+              // $FlowFixMe[prop-missing] React.Element internal inspection
               if (element.props.onLayout) {
                 element.props.onLayout(event);
               }
             },
+            // $FlowFixMe[prop-missing] React.Element internal inspection
             style: StyleSheet.compose(inversionStyle, element.props.style),
           })}
         </VirtualizedListCellContextProvider>,
@@ -986,7 +974,8 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
       const spacerKey = this._getSpacerKey(!horizontal);
 
       const renderRegions = this.state.renderMask.enumerateRegions();
-      const lastSpacer = findLastWhere(renderRegions, r => r.isSpacer);
+      const lastRegion = renderRegions[renderRegions.length - 1];
+      const lastSpacer = lastRegion?.isSpacer ? lastRegion : null;
 
       for (const section of renderRegions) {
         if (section.isSpacer) {
@@ -1146,7 +1135,6 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
               this.context == null &&
               this.props.scrollEnabled !== false
             ) {
-              // TODO (T46547044): use React.warn once 16.9 is sync'd: https://github.com/facebook/react/pull/15170
               console.error(
                 'VirtualizedLists should never be nested inside plain ScrollViews with the same ' +
                   'orientation because it can break windowing and other functionality - use another ' +
@@ -1255,8 +1243,10 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
   _defaultRenderScrollComponent = props => {
     const onRefresh = props.onRefresh;
     if (this._isNestedWithSameOrientation()) {
-      // $FlowFixMe[prop-missing] - Typing ReactNativeComponent revealed errors
-      return <View {...props} />;
+      // Prevent VirtualizedList._onContentSizeChange from being triggered by a bubbling onContentSizeChange event.
+      // This could lead to internal inconsistencies within VirtualizedList.
+      const {onContentSizeChange, ...otherProps} = props;
+      return <View {...otherProps} />;
     } else if (onRefresh) {
       invariant(
         typeof props.refreshing === 'boolean',
@@ -1311,10 +1301,10 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
     this._updateViewableItems(this.props, this.state.cellsAroundViewport);
   };
 
-  _onCellFocusCapture(cellKey: string) {
+  _onCellFocusCapture = (cellKey: string) => {
     this._lastFocusedCellKey = cellKey;
     this._updateCellsToRender();
-  }
+  };
 
   _onCellUnmount = (cellKey: string) => {
     delete this._cellRefs[cellKey];
@@ -1558,7 +1548,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
     // 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
-    else if (
+    if (
       onStartReached != null &&
       this.state.cellsAroundViewport.first === 0 &&
       isWithinStartThreshold &&
@@ -1570,13 +1560,11 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
 
     // If the user scrolls away from the start or end and back again,
     // cause onStartReached or onEndReached to be triggered again
-    else {
-      this._sentStartForContentLength = isWithinStartThreshold
-        ? this._sentStartForContentLength
-        : 0;
-      this._sentEndForContentLength = isWithinEndThreshold
-        ? this._sentEndForContentLength
-        : 0;
+    if (!isWithinStartThreshold) {
+      this._sentStartForContentLength = 0;
+    }
+    if (!isWithinEndThreshold) {
+      this._sentEndForContentLength = 0;
     }
   }
 
@@ -1748,8 +1736,9 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
     // If this is triggered in an `componentDidUpdate` followed by a hiPri cellToRenderUpdate
     // We shouldn't do another hipri cellToRenderUpdate
     if (
+      (this._listMetrics.getAverageCellLength() > 0 ||
+        this.props.getItemLayout != null) &&
       this._shouldRenderWithPriority() &&
-      (this._listMetrics.getAverageCellLength() || this.props.getItemLayout) &&
       !this._hiPriInProgress
     ) {
       this._hiPriInProgress = true;

package/Lists/VirtualizedListCellRenderer.js

@@ -8,17 +8,17 @@
  * @format
  */
 
+import type {CellRendererProps, RenderItemType} from './VirtualizedListProps';
 import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
 import type {
   FocusEvent,
   LayoutEvent,
 } from 'react-native/Libraries/Types/CoreEventTypes';
-import type {CellRendererProps, RenderItemType} from './VirtualizedListProps';
 
-import {View, StyleSheet} from 'react-native';
 import {VirtualizedListCellContextProvider} from './VirtualizedListContext.js';
 import invariant from 'invariant';
 import * as React from 'react';
+import {StyleSheet, View} from 'react-native';
 
 export type Props<ItemT> = {
   CellRendererComponent?: ?React.ComponentType<CellRendererProps<ItemT>>,
@@ -32,7 +32,7 @@ export type Props<ItemT> = {
   inversionStyle: ViewStyleProp,
   item: ItemT,
   onCellLayout?: (event: LayoutEvent, cellKey: string, index: number) => void,
-  onCellFocusCapture?: (event: FocusEvent) => void,
+  onCellFocusCapture?: (cellKey: string) => void,
   onUnmount: (cellKey: string) => void,
   onUpdateSeparators: (
     cellKeys: Array<?string>,
@@ -115,12 +115,15 @@ export default class CellRenderer<ItemT> extends React.Component<
   }
 
   _onLayout = (nativeEvent: LayoutEvent): void => {
-    this.props.onCellLayout &&
-      this.props.onCellLayout(
-        nativeEvent,
-        this.props.cellKey,
-        this.props.index,
-      );
+    this.props.onCellLayout?.(
+      nativeEvent,
+      this.props.cellKey,
+      this.props.index,
+    );
+  };
+
+  _onCellFocusCapture = (e: FocusEvent): void => {
+    this.props.onCellFocusCapture?.(this.props.cellKey);
   };
 
   _renderElement(
@@ -174,7 +177,6 @@ export default class CellRenderer<ItemT> extends React.Component<
       item,
       index,
       inversionStyle,
-      onCellFocusCapture,
       onCellLayout,
       renderItem,
     } = this.props;
@@ -206,7 +208,7 @@ export default class CellRenderer<ItemT> extends React.Component<
     const result = !CellRendererComponent ? (
       <View
         style={cellStyle}
-        onFocusCapture={onCellFocusCapture}
+        onFocusCapture={this._onCellFocusCapture}
         {...(onCellLayout && {onLayout: this._onLayout})}>
         {element}
         {itemSeparator}
@@ -217,7 +219,7 @@ export default class CellRenderer<ItemT> extends React.Component<
         index={index}
         item={item}
         style={cellStyle}
-        onFocusCapture={onCellFocusCapture}
+        onFocusCapture={this._onCellFocusCapture}
         {...(onCellLayout && {onLayout: this._onLayout})}>
         {element}
         {itemSeparator}

package/Lists/VirtualizedListProps.js

@@ -8,19 +8,19 @@
  * @format
  */
 
-import {typeof ScrollView} from 'react-native';
-import type {
-  FocusEvent,
-  LayoutEvent,
-} from 'react-native/Libraries/Types/CoreEventTypes';
-import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
 import type {
   ViewabilityConfig,
   ViewabilityConfigCallbackPair,
   ViewToken,
 } from './ViewabilityHelper';
+import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
+import type {
+  FocusEvent,
+  LayoutEvent,
+} from 'react-native/Libraries/Types/CoreEventTypes';
 
 import * as React from 'react';
+import {typeof ScrollView} from 'react-native';
 
 export type Item = any;
 

package/Lists/VirtualizedSectionList.js

@@ -10,11 +10,11 @@
 
 import type {ViewToken} from './ViewabilityHelper';
 
-import {View} from 'react-native';
 import VirtualizedList from './VirtualizedList';
 import {keyExtractor as defaultKeyExtractor} from './VirtualizeUtils';
 import invariant from 'invariant';
 import * as React from 'react';
+import {View} from 'react-native';
 
 type Item = any;
 

package/index.js

@@ -10,13 +10,13 @@
 
 'use strict';
 
-import {keyExtractor} from './Lists/VirtualizeUtils';
-
+import typeof FillRateHelper from './Lists/FillRateHelper';
+import typeof ViewabilityHelper from './Lists/ViewabilityHelper';
 import typeof VirtualizedList from './Lists/VirtualizedList';
 import typeof VirtualizedSectionList from './Lists/VirtualizedSectionList';
+
 import {typeof VirtualizedListContextResetter} from './Lists/VirtualizedListContext';
-import typeof ViewabilityHelper from './Lists/ViewabilityHelper';
-import typeof FillRateHelper from './Lists/FillRateHelper';
+import {keyExtractor} from './Lists/VirtualizeUtils';
 
 export type {
   ViewToken,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native/virtualized-lists",
-  "version": "0.74.0",
+  "version": "0.74.1",
   "description": "Virtualized lists for React Native.",
   "license": "MIT",
   "repository": {
@@ -27,6 +27,7 @@
     "react-test-renderer": "18.2.0"
   },
   "peerDependencies": {
+    "react": "*",
     "react-native": "*"
   }
 }