react-native-tvos 0.69.8-2 → 0.71.7-0rc0

package/Libraries/Lists/FlatList.js

@@ -8,32 +8,32 @@
  * @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
-   * immutable list, use the underlying `VirtualizedList` directly.
+   * An array (or array-like list) of items to render. Other data types can be
+   * used by targetting VirtualizedList directly.
    */
-  data: ?$ReadOnlyArray<ItemT>,
+  data: ?$ArrayLike<ItemT>,
 |};
 type OptionalProps<ItemT> = {|
   /**
@@ -163,6 +163,11 @@ function numColumnsOrDefault(numColumns: ?number) {
   return numColumns ?? 1;
 }
 
+function isArrayLike(data: mixed): boolean {
+  // $FlowExpectedError[incompatible-use]
+  return typeof Object(data).length === 'number';
+}
+
 type FlatListProps<ItemT> = {|
   ...RequiredProps<ItemT>,
   ...OptionalProps<ItemT>,
@@ -334,6 +339,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
   scrollToItem(params: {
     animated?: ?boolean,
     item: ItemT,
+    viewOffset?: number,
     viewPosition?: number,
     ...
   }) {
@@ -433,6 +439,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     }
   }
 
+  // $FlowFixMe[missing-local-annot]
   componentDidUpdate(prevProps: Props<ItemT>) {
     invariant(
       prevProps.numColumns === this.props.numColumns,
@@ -459,10 +466,11 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
   _listRef: ?React.ElementRef<typeof VirtualizedList>;
   _virtualizedListPairs: Array<ViewabilityConfigCallbackPair> = [];
 
-  _captureRef = ref => {
+  _captureRef = (ref: ?React.ElementRef<typeof VirtualizedList>) => {
     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 +502,17 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     );
   }
 
-  _getItem = (data: Array<ItemT>, index: number) => {
+  _getItem = (
+    data: $ArrayLike<ItemT>,
+    index: number,
+  ): ?(ItemT | $ReadOnlyArray<ItemT>) => {
     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);
         }
       }
@@ -510,8 +522,14 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     }
   };
 
-  _getItemCount = (data: ?Array<ItemT>): number => {
-    if (data) {
+  _getItemCount = (data: ?$ArrayLike<ItemT>): number => {
+    // Legacy behavior of FlatList was to forward "undefined" length if invalid
+    // data like a non-arraylike object is passed. VirtualizedList would then
+    // coerce this, and the math would work out to no-op. For compatibility, if
+    // invalid data is passed, we tell VirtualizedList there are zero items
+    // available to prevent it from trying to read from the invalid data
+    // (without propagating invalidly typed data).
+    if (data != null && isArrayLike(data)) {
       const numColumns = numColumnsOrDefault(this.props.numColumns);
       return numColumns > 1 ? Math.ceil(data.length / numColumns) : data.length;
     } else {
@@ -519,29 +537,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 +575,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 +585,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 +605,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): 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,38 +623,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({
-                  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 {
@@ -656,6 +670,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}

package/Libraries/Lists/FlatList.js.flow

@@ -0,0 +1,115 @@
+/**
+ * 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.
+ *
+ * @flow
+ * @format
+ */
+
+const React = require('react');
+const View = require('../Components/View/View');
+
+import typeof ScrollViewNativeComponent from '../Components/ScrollView/ScrollViewNativeComponent';
+import {type ScrollResponderType} from '../Components/ScrollView/ScrollView';
+import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+import type {
+  ViewToken,
+  ViewabilityConfigCallbackPair,
+} from './ViewabilityHelper';
+import type {RenderItemType, RenderItemProps} from './VirtualizedList';
+import typeof VirtualizedList from './VirtualizedList';
+
+type RequiredProps<ItemT> = {|
+  /**
+   * 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>,
+|};
+type OptionalProps<ItemT> = {|
+  renderItem?: ?RenderItemType<ItemT>,
+  columnWrapperStyle?: ViewStyleProp,
+  extraData?: any,
+  getItemLayout?: (
+    data: ?Array<ItemT>,
+    index: number,
+  ) => {
+    length: number,
+    offset: number,
+    index: number,
+    ...
+  },
+  horizontal?: ?boolean,
+  initialNumToRender?: ?number,
+  initialScrollIndex?: ?number,
+  inverted?: ?boolean,
+  keyExtractor?: ?(item: ItemT, index: number) => string,
+  numColumns?: number,
+  removeClippedSubviews?: boolean,
+  fadingEdgeLength?: ?number,
+  strictMode?: boolean,
+|};
+
+/**
+ * Default Props Helper Functions
+ * Use the following helper functions for default values
+ */
+type FlatListProps<ItemT> = {|
+  ...RequiredProps<ItemT>,
+  ...OptionalProps<ItemT>,
+|};
+
+type VirtualizedListProps = React.ElementConfig<VirtualizedList>;
+
+export type Props<ItemT> = {
+  ...$Diff<
+    VirtualizedListProps,
+    {
+      getItem: $PropertyType<VirtualizedListProps, 'getItem'>,
+      getItemCount: $PropertyType<VirtualizedListProps, 'getItemCount'>,
+      getItemLayout: $PropertyType<VirtualizedListProps, 'getItemLayout'>,
+      renderItem: $PropertyType<VirtualizedListProps, 'renderItem'>,
+      keyExtractor: $PropertyType<VirtualizedListProps, 'keyExtractor'>,
+      ...
+    },
+  >,
+  ...FlatListProps<ItemT>,
+  ...
+};
+
+declare class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
+  scrollToEnd(params?: ?{animated?: ?boolean, ...}): void;
+
+  scrollToIndex(params: {
+    animated?: ?boolean,
+    index: number,
+    viewOffset?: number,
+    viewPosition?: number,
+    ...
+  }): void;
+  scrollToItem(params: {
+    animated?: ?boolean,
+    item: ItemT,
+    viewPosition?: number,
+    ...
+  }): void;
+  scrollToOffset(params: {animated?: ?boolean, offset: number, ...}): void;
+  recordInteraction(): void;
+
+  /**
+   * Displays the scroll indicators momentarily.
+   *
+   * @platform ios
+   */
+  flashScrollIndicators(): void;
+  getScrollResponder(): ?ScrollResponderType;
+  getNativeScrollRef():
+    | ?React.ElementRef<typeof View>
+    | ?React.ElementRef<ScrollViewNativeComponent>;
+  getScrollableNode(): any;
+  setNativeProps(props: {[string]: mixed, ...}): void;
+}
+
+module.exports = FlatList;

package/Libraries/Lists/SectionList.d.ts

@@ -0,0 +1,258 @@
+/**
+ * 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 {
+  ListRenderItemInfo,
+  VirtualizedListWithoutRenderItemProps,
+} from './VirtualizedList';
+import type {
+  ScrollView,
+  ScrollViewProps,
+} from '../Components/ScrollView/ScrollView';
+import {NodeHandle} from '../ReactNative/RendererProxy';
+import {StyleProp} from '../StyleSheet/StyleSheet';
+import {ViewStyle} from '../StyleSheet/StyleSheetTypes';
+
+/**
+ * @see https://reactnative.dev/docs/sectionlist
+ */
+
+type DefaultSectionT = {
+  [key: string]: any;
+};
+
+export interface SectionBase<ItemT, SectionT = DefaultSectionT> {
+  data: ReadonlyArray<ItemT>;
+
+  key?: string | undefined;
+
+  renderItem?: SectionListRenderItem<ItemT, SectionT> | undefined;
+
+  ItemSeparatorComponent?: React.ComponentType<any> | null | undefined;
+
+  keyExtractor?: ((item: ItemT, index: number) => string) | undefined;
+}
+
+export type SectionListData<ItemT, SectionT = DefaultSectionT> = SectionBase<
+  ItemT,
+  SectionT
+> &
+  SectionT;
+
+/**
+ * @see https://reactnative.dev/docs/sectionlist.html#props
+ */
+
+export interface SectionListRenderItemInfo<ItemT, SectionT = DefaultSectionT>
+  extends ListRenderItemInfo<ItemT> {
+  section: SectionListData<ItemT, SectionT>;
+}
+
+export type SectionListRenderItem<ItemT, SectionT = DefaultSectionT> = (
+  info: SectionListRenderItemInfo<ItemT, SectionT>,
+) => React.ReactElement | null;
+
+export interface SectionListProps<ItemT, SectionT = DefaultSectionT>
+  extends VirtualizedListWithoutRenderItemProps<ItemT> {
+  /**
+   * Rendered in between each section.
+   */
+  SectionSeparatorComponent?:
+    | React.ComponentType<any>
+    | React.ReactElement
+    | 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}
+   * )}
+   * ```
+   */
+  getItemLayout?:
+    | ((
+        data: SectionListData<ItemT, SectionT>[] | null,
+        index: number,
+      ) => {length: number; offset: number; index: number})
+    | undefined;
+
+  /**
+   * How many items to render in the initial batch
+   */
+  initialNumToRender?: number | undefined;
+
+  /**
+   * Reverses the direction of scroll. Uses scale transforms of -1.
+   */
+  inverted?: boolean | 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;
+
+  /**
+   * 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;
+
+  /**
+   * Used to handle failures when scrolling to an index that has not been measured yet.
+   * Recommended action is to either compute your own offset and `scrollTo` it, or scroll as far
+   * as possible and then try again after more items have been rendered.
+   */
+  onScrollToIndexFailed?:
+    | ((info: {
+        index: number;
+        highestMeasuredFrameIndex: number;
+        averageItemLength: number;
+      }) => void)
+    | undefined;
+
+  /**
+   * Set this true while waiting for new data from a refresh.
+   */
+  refreshing?: boolean | null | undefined;
+
+  /**
+   * Default renderer for every item in every section. Can be over-ridden on a per-section basis.
+   */
+  renderItem?: SectionListRenderItem<ItemT, SectionT> | undefined;
+
+  /**
+   * Rendered at the top of each section. Sticky headers are not yet supported.
+   */
+  renderSectionHeader?:
+    | ((info: {
+        section: SectionListData<ItemT, SectionT>;
+      }) => React.ReactElement | null)
+    | undefined;
+
+  /**
+   * Rendered at the bottom of each section.
+   */
+  renderSectionFooter?:
+    | ((info: {
+        section: SectionListData<ItemT, SectionT>;
+      }) => React.ReactElement | null)
+    | undefined;
+
+  /**
+   * An array of objects with data for each section.
+   */
+  sections: ReadonlyArray<SectionListData<ItemT, SectionT>>;
+
+  /**
+   * Render a custom scroll component, e.g. with a differently styled `RefreshControl`.
+   */
+  renderScrollComponent?:
+    | ((props: ScrollViewProps) => React.ReactElement<ScrollViewProps>)
+    | undefined;
+
+  /**
+   * 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;
+
+  /**
+   * Makes section headers stick to the top of the screen until the next one pushes it off.
+   * Only enabled by default on iOS because that is the platform standard there.
+   */
+  stickySectionHeadersEnabled?: boolean | undefined;
+
+  /**
+   * Uses legacy MetroListView instead of default VirtualizedSectionList
+   */
+  legacyImplementation?: boolean | undefined;
+}
+
+export interface SectionListScrollParams {
+  animated?: boolean | undefined;
+  itemIndex: number;
+  sectionIndex: number;
+  viewOffset?: number | undefined;
+  viewPosition?: number | undefined;
+}
+
+export class SectionList<
+  ItemT = any,
+  SectionT = DefaultSectionT,
+> extends React.Component<SectionListProps<ItemT, SectionT>> {
+  /**
+   * Scrolls to the item at the specified sectionIndex and itemIndex (within the section)
+   * positioned in the viewable area such that viewPosition 0 places it at the top
+   * (and may be covered by a sticky header), 1 at the bottom, and 0.5 centered in the middle.
+   */
+  scrollToLocation(params: SectionListScrollParams): 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.
+   *
+   * @platform ios
+   */
+  flashScrollIndicators(): void;
+
+  /**
+   * Provides a handle to the underlying scroll responder.
+   */
+  getScrollResponder(): ScrollView | undefined;
+
+  /**
+   * Provides a handle to the underlying scroll node.
+   */
+  getScrollableNode(): NodeHandle | undefined;
+}
+
+/* This definition is deprecated because it extends the wrong base type */
+export interface SectionListStatic<ItemT, SectionT = DefaultSectionT>
+  extends React.ComponentClass<SectionListProps<ItemT, SectionT>> {
+  /**
+   * Scrolls to the item at the specified sectionIndex and itemIndex (within the section)
+   * positioned in the viewable area such that viewPosition 0 places it at the top
+   * (and may be covered by a sticky header), 1 at the bottom, and 0.5 centered in the middle.
+   */
+  scrollToLocation?(params: SectionListScrollParams): void;
+}

package/Libraries/Lists/SectionList.js

@@ -10,17 +10,17 @@
 
 'use strict';
 
-import Platform from '../Utilities/Platform';
-import * as React from 'react';
-import VirtualizedSectionList from './VirtualizedSectionList';
-
 import type {ScrollResponderType} from '../Components/ScrollView/ScrollView';
 import type {
-  SectionBase as _SectionBase,
   Props as VirtualizedSectionListProps,
   ScrollToLocationParamsType,
+  SectionBase as _SectionBase,
 } from './VirtualizedSectionList';
 
+import Platform from '../Utilities/Platform';
+import VirtualizedSectionList from './VirtualizedSectionList';
+import * as React from 'react';
+
 type Item = any;
 
 export type SectionBase<SectionItemT> = _SectionBase<SectionItemT>;
@@ -255,6 +255,8 @@ export default class SectionList<
   }
 
   _wrapperListRef: ?React.ElementRef<typeof VirtualizedSectionList>;
+  /* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
+   * LTI update could not be added via codemod */
   _captureRef = ref => {
     this._wrapperListRef = ref;
   };