@office-iss/react-native-win32 0.70.2 → 0.71.0-preview.1

package/Libraries/Lists/FillRateHelper.js

@@ -10,6 +10,8 @@
 
 'use strict';
 
+import type {FrameMetricProps} from './VirtualizedListProps';
+
 export type FillRateInfo = Info;
 
 class Info {
@@ -47,12 +49,12 @@ 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);
+  _getFrameMetrics: (index: number, props: FrameMetricProps) => ?FrameMetrics;
+  _info: Info = new Info();
+  _mostlyBlankStartTime: ?number = null;
+  _samplesStartTime: ?number = null;
 
   static addListener(callback: FillRateInfo => void): {
     remove: () => void,
@@ -77,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();
@@ -124,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});
@@ -134,12 +139,11 @@ class FillRateHelper {
 
   computeBlankness(
     props: {
-      data: any,
-      getItemCount: (data: any) => number,
+      ...FrameMetricProps,
       initialNumToRender?: ?number,
       ...
     },
-    state: {
+    cellsAroundViewport: {
       first: number,
       last: number,
       ...
@@ -155,6 +159,7 @@ class FillRateHelper {
     if (
       !this._enabled ||
       props.getItemCount(props.data) === 0 ||
+      cellsAroundViewport.last < cellsAroundViewport.first ||
       this._samplesStartTime == null
     ) {
       return 0;
@@ -180,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
@@ -195,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

package/Libraries/Lists/FlatList.d.ts

@@ -0,0 +1,292 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import type * as React from 'react';
+import type {
+  ListRenderItem,
+  ViewToken,
+  VirtualizedListProps,
+} from './VirtualizedList';
+import type {ScrollViewComponent} from '../Components/ScrollView/ScrollView';
+import {StyleProp} from '../StyleSheet/StyleSheet';
+import {ViewStyle} from '../StyleSheet/StyleSheetTypes';
+import {View} from '../Components/View/View';
+
+export interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
+  /**
+   * Rendered in between each item, but not at the top or bottom
+   */
+  ItemSeparatorComponent?: React.ComponentType<any> | null | undefined;
+
+  /**
+   * Rendered when the list is empty.
+   */
+  ListEmptyComponent?:
+    | React.ComponentType<any>
+    | React.ReactElement
+    | null
+    | undefined;
+
+  /**
+   * Rendered at the very end of the list.
+   */
+  ListFooterComponent?:
+    | React.ComponentType<any>
+    | React.ReactElement
+    | null
+    | undefined;
+
+  /**
+   * Styling for internal View for ListFooterComponent
+   */
+  ListFooterComponentStyle?: StyleProp<ViewStyle> | undefined;
+
+  /**
+   * Rendered at the very beginning of the list.
+   */
+  ListHeaderComponent?:
+    | React.ComponentType<any>
+    | React.ReactElement
+    | null
+    | undefined;
+
+  /**
+   * Styling for internal View for ListHeaderComponent
+   */
+  ListHeaderComponentStyle?: StyleProp<ViewStyle> | undefined;
+
+  /**
+   * Optional custom style for multi-item rows generated when numColumns > 1
+   */
+  columnWrapperStyle?: StyleProp<ViewStyle> | undefined;
+
+  /**
+   * Determines when the keyboard should stay visible after a tap.
+   * - 'never' (the default), tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When this happens, children won't receive the tap.
+   * - 'always', the keyboard will not dismiss automatically, and the scroll view will not catch taps, but children of the scroll view can catch taps.
+   * - 'handled', the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor).
+   * - false, deprecated, use 'never' instead
+   * - true, deprecated, use 'always' instead
+   */
+  keyboardShouldPersistTaps?:
+    | boolean
+    | 'always'
+    | 'never'
+    | 'handled'
+    | undefined;
+
+  /**
+   * For simplicity, data is just a plain array. If you want to use something else,
+   * like an immutable list, use the underlying VirtualizedList directly.
+   */
+  data: ReadonlyArray<ItemT> | null | undefined;
+
+  /**
+   * A marker property for telling the list to re-render (since it implements PureComponent).
+   * If any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the `data` prop,
+   * stick it here and treat it immutably.
+   */
+  extraData?: any;
+
+  /**
+   * `getItemLayout` is an optional optimization that lets us skip measurement of dynamic
+   * content if you know the height of items a priori. getItemLayout is the most efficient,
+   * and is easy to use if you have fixed height items, for example:
+   * ```
+   * getItemLayout={(data, index) => (
+   *   {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
+   * )}
+   * ```
+   * Remember to include separator length (height or width) in your offset calculation if you specify
+   * `ItemSeparatorComponent`.
+   */
+  getItemLayout?:
+    | ((
+        data: Array<ItemT> | null | undefined,
+        index: number,
+      ) => {length: number; offset: number; index: number})
+    | undefined;
+
+  /**
+   * If true, renders items next to each other horizontally instead of stacked vertically.
+   */
+  horizontal?: boolean | null | undefined;
+
+  /**
+   * How many items to render in the initial batch
+   */
+  initialNumToRender?: number | undefined;
+
+  /**
+   * Instead of starting at the top with the first item, start at initialScrollIndex
+   */
+  initialScrollIndex?: number | null | undefined;
+
+  /**
+   * Used to extract a unique key for a given item at the specified index. Key is used for caching
+   * and as the react key to track item re-ordering. The default extractor checks `item.key`, then
+   * falls back to using the index, like React does.
+   */
+  keyExtractor?: ((item: ItemT, index: number) => string) | undefined;
+
+  /**
+   * Uses legacy MetroListView instead of default VirtualizedSectionList
+   */
+  legacyImplementation?: boolean | undefined;
+
+  /**
+   * Multiple columns can only be rendered with `horizontal={false}` and will zig-zag like a `flexWrap` layout.
+   * Items should all be the same height - masonry layouts are not supported.
+   */
+  numColumns?: number | undefined;
+
+  /**
+   * Called once when the scroll position gets within onEndReachedThreshold of the rendered content.
+   */
+  onEndReached?: ((info: {distanceFromEnd: number}) => void) | null | undefined;
+
+  /**
+   * How far from the end (in units of visible length of the list) the bottom edge of the
+   * list must be from the end of the content to trigger the `onEndReached` callback.
+   * Thus a value of 0.5 will trigger `onEndReached` when the end of the content is
+   * within half the visible length of the list.
+   */
+  onEndReachedThreshold?: number | null | undefined;
+
+  /**
+   * If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality.
+   * Make sure to also set the refreshing prop correctly.
+   */
+  onRefresh?: (() => void) | null | undefined;
+
+  /**
+   * Called when the viewability of rows changes, as defined by the `viewablePercentThreshold` prop.
+   */
+  onViewableItemsChanged?:
+    | ((info: {
+        viewableItems: Array<ViewToken>;
+        changed: Array<ViewToken>;
+      }) => void)
+    | null
+    | undefined;
+
+  /**
+   * Set this true while waiting for new data from a refresh.
+   */
+  refreshing?: boolean | null | undefined;
+
+  /**
+   * Takes an item from data and renders it into the list. Typical usage:
+   * ```
+   * _renderItem = ({item}) => (
+   *   <TouchableOpacity onPress={() => this._onPress(item)}>
+   *     <Text>{item.title}</Text>
+   *   <TouchableOpacity/>
+   * );
+   * ...
+   * <FlatList data={[{title: 'Title Text', key: 'item1'}]} renderItem={this._renderItem} />
+   * ```
+   * Provides additional metadata like `index` if you need it.
+   */
+  renderItem: ListRenderItem<ItemT> | null | undefined;
+
+  /**
+   * See `ViewabilityHelper` for flow type and further documentation.
+   */
+  viewabilityConfig?: any;
+
+  /**
+   * Note: may have bugs (missing content) in some circumstances - use at your own risk.
+   *
+   * This may improve scroll performance for large lists.
+   */
+  removeClippedSubviews?: boolean | undefined;
+
+  /**
+   * Fades out the edges of the scroll content.
+   *
+   * If the value is greater than 0, the fading edges will be set accordingly
+   * to the current scroll direction and position,
+   * indicating if there is more content to show.
+   *
+   * The default value is 0.
+   * @platform android
+   */
+  fadingEdgeLength?: number | undefined;
+}
+
+export class FlatList<ItemT = any> extends React.Component<
+  FlatListProps<ItemT>
+> {
+  /**
+   * Scrolls to the end of the content. May be janky without `getItemLayout` prop.
+   */
+  scrollToEnd: (params?: {animated?: boolean | null | undefined}) => void;
+
+  /**
+   * Scrolls to the item at the specified index such that it is positioned in the viewable area
+   * such that viewPosition 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle.
+   * Cannot scroll to locations outside the render window without specifying the getItemLayout prop.
+   */
+  scrollToIndex: (params: {
+    animated?: boolean | null | undefined;
+    index: number;
+    viewOffset?: number | undefined;
+    viewPosition?: number | undefined;
+  }) => void;
+
+  /**
+   * Requires linear scan through data - use `scrollToIndex` instead if possible.
+   * May be janky without `getItemLayout` prop.
+   */
+  scrollToItem: (params: {
+    animated?: boolean | null | undefined;
+    item: ItemT;
+    viewPosition?: number | undefined;
+  }) => void;
+
+  /**
+   * Scroll to a specific content pixel offset, like a normal `ScrollView`.
+   */
+  scrollToOffset: (params: {
+    animated?: boolean | null | undefined;
+    offset: number;
+  }) => void;
+
+  /**
+   * Tells the list an interaction has occurred, which should trigger viewability calculations,
+   * e.g. if waitForInteractions is true and the user has not scrolled. This is typically called
+   * by taps on items or by navigation actions.
+   */
+  recordInteraction: () => void;
+
+  /**
+   * Displays the scroll indicators momentarily.
+   */
+  flashScrollIndicators: () => void;
+
+  /**
+   * Provides a handle to the underlying scroll responder.
+   */
+  getScrollResponder: () => JSX.Element | null | undefined;
+
+  /**
+   * Provides a reference to the underlying host component
+   */
+  getNativeScrollRef: () =>
+    | React.ElementRef<typeof View>
+    | React.ElementRef<typeof ScrollViewComponent>
+    | null
+    | undefined;
+
+  getScrollableNode: () => any;
+
+  // TODO: use `unknown` instead of `any` for Typescript >= 3.0
+  setNativeProps: (props: {[key: string]: any}) => void;
+}

package/Libraries/Lists/FlatList.js

@@ -8,26 +8,26 @@
  * @format
  */
 
-const Platform = require('../Utilities/Platform');
-const deepDiffer = require('../Utilities/differ/deepDiffer');
-const React = require('react');
-const View = require('../Components/View/View');
-const VirtualizedList = require('./VirtualizedList');
-const StyleSheet = require('../StyleSheet/StyleSheet');
-
-const invariant = require('invariant');
-
 import typeof ScrollViewNativeComponent from '../Components/ScrollView/ScrollViewNativeComponent';
-import {type ScrollResponderType} from '../Components/ScrollView/ScrollView';
 import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {
-  ViewToken,
   ViewabilityConfigCallbackPair,
+  ViewToken,
 } from './ViewabilityHelper';
-import type {RenderItemType, RenderItemProps} from './VirtualizedList';
+import type {RenderItemProps, RenderItemType} from './VirtualizedList';
+
+import {type ScrollResponderType} from '../Components/ScrollView/ScrollView';
+import VirtualizedList from './VirtualizedList';
 import {keyExtractor as defaultKeyExtractor} from './VirtualizeUtils';
 import memoizeOne from 'memoize-one';
 
+const View = require('../Components/View/View');
+const StyleSheet = require('../StyleSheet/StyleSheet');
+const deepDiffer = require('../Utilities/differ/deepDiffer');
+const Platform = require('../Utilities/Platform');
+const invariant = require('invariant');
+const React = require('react');
+
 type RequiredProps<ItemT> = {|
   /**
    * For simplicity, data is just a plain array. If you want to use something else, like an
@@ -433,6 +433,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     }
   }
 
+  // $FlowFixMe[missing-local-annot]
   componentDidUpdate(prevProps: Props<ItemT>) {
     invariant(
       prevProps.numColumns === this.props.numColumns,
@@ -463,6 +464,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     this._listRef = ref;
   };
 
+  // $FlowFixMe[missing-local-annot]
   _checkProps(props: Props<ItemT>) {
     const {
       // $FlowFixMe[prop-missing] this prop doesn't exist, is only used for an invariant
@@ -494,13 +496,15 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     );
   }
 
+  // $FlowFixMe[missing-local-annot]
   _getItem = (data: Array<ItemT>, index: number) => {
     const numColumns = numColumnsOrDefault(this.props.numColumns);
     if (numColumns > 1) {
       const ret = [];
       for (let kk = 0; kk < numColumns; kk++) {
-        const item = data[index * numColumns + kk];
-        if (item != null) {
+        const itemIndex = index * numColumns + kk;
+        if (itemIndex < data.length) {
+          const item = data[itemIndex];
           ret.push(item);
         }
       }
@@ -511,7 +515,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
   };
 
   _getItemCount = (data: ?Array<ItemT>): number => {
-    if (data) {
+    if (Array.isArray(data)) {
       const numColumns = numColumnsOrDefault(this.props.numColumns);
       return numColumns > 1 ? Math.ceil(data.length / numColumns) : data.length;
     } else {
@@ -519,29 +523,26 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     }
   };
 
-  _keyExtractor = (items: ItemT | Array<ItemT>, index: number) => {
+  _keyExtractor = (items: ItemT | Array<ItemT>, index: number): string => {
     const numColumns = numColumnsOrDefault(this.props.numColumns);
     const keyExtractor = this.props.keyExtractor ?? defaultKeyExtractor;
 
     if (numColumns > 1) {
-      if (Array.isArray(items)) {
-        return items
-          .map((item, kk) =>
-            keyExtractor(((item: $FlowFixMe): ItemT), index * numColumns + kk),
-          )
-          .join(':');
-      } else {
-        invariant(
-          Array.isArray(items),
-          'FlatList: Encountered internal consistency error, expected each item to consist of an ' +
-            'array with 1-%s columns; instead, received a single item.',
-          numColumns,
-        );
-      }
-    } else {
-      // $FlowFixMe[incompatible-call] Can't call keyExtractor with an array
-      return keyExtractor(items, index);
+      invariant(
+        Array.isArray(items),
+        'FlatList: Encountered internal consistency error, expected each item to consist of an ' +
+          'array with 1-%s columns; instead, received a single item.',
+        numColumns,
+      );
+      return items
+        .map((item, kk) =>
+          keyExtractor(((item: $FlowFixMe): ItemT), index * numColumns + kk),
+        )
+        .join(':');
     }
+
+    // $FlowFixMe[incompatible-call] Can't call keyExtractor with an array
+    return keyExtractor(items, index);
   };
 
   _pushMultiColumnViewable(arr: Array<ViewToken>, v: ViewToken): void {
@@ -560,6 +561,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
       changed: Array<ViewToken>,
       ...
     }) => void,
+    // $FlowFixMe[missing-local-annot]
   ) {
     return (info: {
       viewableItems: Array<ViewToken>,
@@ -569,8 +571,8 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
       const numColumns = numColumnsOrDefault(this.props.numColumns);
       if (onViewableItemsChanged) {
         if (numColumns > 1) {
-          const changed = [];
-          const viewableItems = [];
+          const changed: Array<ViewToken> = [];
+          const viewableItems: Array<ViewToken> = [];
           info.viewableItems.forEach(v =>
             this._pushMultiColumnViewable(viewableItems, v),
           );
@@ -589,14 +591,11 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     columnWrapperStyle: ?ViewStyleProp,
     numColumns: ?number,
     extraData: ?any,
+    // $FlowFixMe[missing-local-annot]
   ) => {
     const cols = numColumnsOrDefault(numColumns);
 
-    let virtualizedListRenderKey = ListItemComponent
-      ? 'ListItemComponent'
-      : 'renderItem';
-
-    const renderer = (props: RenderItemProps<ItemT>): React.Node => {
+    const render = (props: RenderItemProps<ItemT>): React.Node => {
       if (ListItemComponent) {
         // $FlowFixMe[not-a-component] Component isn't valid
         // $FlowFixMe[incompatible-type-arg] Component isn't valid
@@ -610,39 +609,39 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
       }
     };
 
-    return {
-      /* $FlowFixMe[invalid-computed-prop] (>=0.111.0 site=react_native_fb)
-       * This comment suppresses an error found when Flow v0.111 was deployed.
-       * To see the error, delete this comment and run Flow. */
-      [virtualizedListRenderKey]: (info: RenderItemProps<ItemT>) => {
-        if (cols > 1) {
-          const {item, index} = info;
-          invariant(
-            Array.isArray(item),
-            'Expected array of items with numColumns > 1',
-          );
-          return (
-            <View style={StyleSheet.compose(styles.row, columnWrapperStyle)}>
-              {item.map((it, kk) => {
-                const element = renderer({
-                  // $FlowFixMe[incompatible-call]
-                  item: it,
-                  index: index * cols + kk,
-                  separators: info.separators,
-                });
-                return element != null ? (
-                  <React.Fragment key={kk}>{element}</React.Fragment>
-                ) : null;
-              })}
-            </View>
-          );
-        } else {
-          return renderer(info);
-        }
-      },
+    const renderProp = (info: RenderItemProps<ItemT>) => {
+      if (cols > 1) {
+        const {item, index} = info;
+        invariant(
+          Array.isArray(item),
+          'Expected array of items with numColumns > 1',
+        );
+        return (
+          <View style={StyleSheet.compose(styles.row, columnWrapperStyle)}>
+            {item.map((it, kk) => {
+              const element = render({
+                // $FlowFixMe[incompatible-call]
+                item: it,
+                index: index * cols + kk,
+                separators: info.separators,
+              });
+              return element != null ? (
+                <React.Fragment key={kk}>{element}</React.Fragment>
+              ) : null;
+            })}
+          </View>
+        );
+      } else {
+        return render(info);
+      }
     };
+
+    return ListItemComponent
+      ? {ListItemComponent: renderProp}
+      : {renderItem: renderProp};
   };
 
+  // $FlowFixMe[missing-local-annot]
   _memoizedRenderer = memoizeOne(this._renderer);
 
   render(): React.Node {
@@ -657,6 +656,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     const renderer = strictMode ? this._memoizedRenderer : this._renderer;
 
     return (
+      // $FlowFixMe[incompatible-exact] - `restProps` (`Props`) is inexact.
       <VirtualizedList
         {...restProps}
         getItem={this._getItem}