react-native 0.70.3 → 0.71.0-rc.0

package/Libraries/Lists/VirtualizedListCellRenderer.js

@@ -0,0 +1,259 @@
+/**
+ * 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
+ */
+
+import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+import type {FocusEvent, LayoutEvent} from '../Types/CoreEventTypes';
+import type FillRateHelper from './FillRateHelper';
+import type {RenderItemType} from './VirtualizedListProps';
+
+import View from '../Components/View/View';
+import StyleSheet from '../StyleSheet/StyleSheet';
+import {VirtualizedListCellContextProvider} from './VirtualizedListContext.js';
+import invariant from 'invariant';
+import * as React from 'react';
+
+export type Props<ItemT> = {
+  CellRendererComponent?: ?React.ComponentType<any>,
+  ItemSeparatorComponent: ?React.ComponentType<
+    any | {highlighted: boolean, leadingItem: ?ItemT},
+  >,
+  ListItemComponent?: ?(React.ComponentType<any> | React.Element<any>),
+  cellKey: string,
+  debug?: ?boolean,
+  fillRateHelper: FillRateHelper,
+  getItemLayout?: (
+    data: any,
+    index: number,
+  ) => {
+    length: number,
+    offset: number,
+    index: number,
+    ...
+  },
+  horizontal: ?boolean,
+  index: number,
+  inversionStyle: ViewStyleProp,
+  item: ItemT,
+  onCellLayout: (event: LayoutEvent, cellKey: string, index: number) => void,
+  onCellFocusCapture?: (event: FocusEvent) => void,
+  onUnmount: (cellKey: string) => void,
+  onUpdateSeparators: (
+    cellKeys: Array<?string>,
+    props: $Shape<SeparatorProps<ItemT>>,
+  ) => void,
+  prevCellKey: ?string,
+  renderItem?: ?RenderItemType<ItemT>,
+  ...
+};
+
+type SeparatorProps<ItemT> = $ReadOnly<{|
+  highlighted: boolean,
+  leadingItem: ?ItemT,
+|}>;
+
+type State<ItemT> = {
+  separatorProps: SeparatorProps<ItemT>,
+  ...
+};
+
+export default class CellRenderer<ItemT> extends React.Component<
+  Props<ItemT>,
+  State<ItemT>,
+> {
+  state: State<ItemT> = {
+    separatorProps: {
+      highlighted: false,
+      leadingItem: this.props.item,
+    },
+  };
+
+  static getDerivedStateFromProps(
+    props: Props<ItemT>,
+    prevState: State<ItemT>,
+  ): ?State<ItemT> {
+    return {
+      separatorProps: {
+        ...prevState.separatorProps,
+        leadingItem: props.item,
+      },
+    };
+  }
+
+  // TODO: consider factoring separator stuff out of VirtualizedList into FlatList since it's not
+  // reused by SectionList and we can keep VirtualizedList simpler.
+  // $FlowFixMe[missing-local-annot]
+  _separators = {
+    highlight: () => {
+      const {cellKey, prevCellKey} = this.props;
+      this.props.onUpdateSeparators([cellKey, prevCellKey], {
+        highlighted: true,
+      });
+    },
+    unhighlight: () => {
+      const {cellKey, prevCellKey} = this.props;
+      this.props.onUpdateSeparators([cellKey, prevCellKey], {
+        highlighted: false,
+      });
+    },
+    updateProps: (
+      select: 'leading' | 'trailing',
+      newProps: SeparatorProps<ItemT>,
+    ) => {
+      const {cellKey, prevCellKey} = this.props;
+      this.props.onUpdateSeparators(
+        [select === 'leading' ? prevCellKey : cellKey],
+        newProps,
+      );
+    },
+  };
+
+  updateSeparatorProps(newProps: SeparatorProps<ItemT>) {
+    this.setState(state => ({
+      separatorProps: {...state.separatorProps, ...newProps},
+    }));
+  }
+
+  componentWillUnmount() {
+    this.props.onUnmount(this.props.cellKey);
+  }
+
+  _onLayout = (nativeEvent: LayoutEvent): void => {
+    this.props.onCellLayout &&
+      this.props.onCellLayout(
+        nativeEvent,
+        this.props.cellKey,
+        this.props.index,
+      );
+  };
+
+  _renderElement(
+    renderItem: ?RenderItemType<ItemT>,
+    ListItemComponent: any,
+    item: ItemT,
+    index: number,
+  ): React.Node {
+    if (renderItem && ListItemComponent) {
+      console.warn(
+        'VirtualizedList: Both ListItemComponent and renderItem props are present. ListItemComponent will take' +
+          ' precedence over renderItem.',
+      );
+    }
+
+    if (ListItemComponent) {
+      /* $FlowFixMe[not-a-component] (>=0.108.0 site=react_native_fb) This
+       * comment suppresses an error found when Flow v0.108 was deployed. To
+       * see the error, delete this comment and run Flow. */
+      /* $FlowFixMe[incompatible-type-arg] (>=0.108.0 site=react_native_fb)
+       * This comment suppresses an error found when Flow v0.108 was deployed.
+       * To see the error, delete this comment and run Flow. */
+      return React.createElement(ListItemComponent, {
+        item,
+        index,
+        separators: this._separators,
+      });
+    }
+
+    if (renderItem) {
+      return renderItem({
+        item,
+        index,
+        separators: this._separators,
+      });
+    }
+
+    invariant(
+      false,
+      'VirtualizedList: Either ListItemComponent or renderItem props are required but none were found.',
+    );
+  }
+
+  render(): React.Node {
+    const {
+      CellRendererComponent,
+      ItemSeparatorComponent,
+      ListItemComponent,
+      debug,
+      fillRateHelper,
+      getItemLayout,
+      horizontal,
+      item,
+      index,
+      inversionStyle,
+      onCellFocusCapture,
+      renderItem,
+    } = this.props;
+    const element = this._renderElement(
+      renderItem,
+      ListItemComponent,
+      item,
+      index,
+    );
+
+    const onLayout =
+      (getItemLayout && !debug && !fillRateHelper.enabled()) ||
+      !this.props.onCellLayout
+        ? undefined
+        : this._onLayout;
+    // NOTE: that when this is a sticky header, `onLayout` will get automatically extracted and
+    // called explicitly by `ScrollViewStickyHeader`.
+    const itemSeparator = React.isValidElement(ItemSeparatorComponent)
+      ? ItemSeparatorComponent
+      : ItemSeparatorComponent && (
+          <ItemSeparatorComponent {...this.state.separatorProps} />
+        );
+    const cellStyle = inversionStyle
+      ? horizontal
+        ? [styles.rowReverse, inversionStyle]
+        : [styles.columnReverse, inversionStyle]
+      : horizontal
+      ? [styles.row, inversionStyle]
+      : inversionStyle;
+    const result = !CellRendererComponent ? (
+      <View
+        style={cellStyle}
+        onLayout={onLayout}
+        onFocusCapture={onCellFocusCapture}
+        /* $FlowFixMe[incompatible-type-arg] (>=0.89.0 site=react_native_fb) *
+        This comment suppresses an error found when Flow v0.89 was deployed. *
+        To see the error, delete this comment and run Flow. */
+      >
+        {element}
+        {itemSeparator}
+      </View>
+    ) : (
+      <CellRendererComponent
+        {...this.props}
+        style={cellStyle}
+        onLayout={onLayout}
+        onFocusCapture={onCellFocusCapture}>
+        {element}
+        {itemSeparator}
+      </CellRendererComponent>
+    );
+
+    return (
+      <VirtualizedListCellContextProvider cellKey={this.props.cellKey}>
+        {result}
+      </VirtualizedListCellContextProvider>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+  },
+  rowReverse: {
+    flexDirection: 'row-reverse',
+  },
+  columnReverse: {
+    flexDirection: 'column-reverse',
+  },
+});

package/Libraries/Lists/VirtualizedListContext.js

@@ -8,34 +8,10 @@
  * @format
  */
 
-import type VirtualizedList from './VirtualizedList.js';
-import * as React from 'react';
-import {useMemo, useContext} from 'react';
-
-type Frame = $ReadOnly<{
-  offset: number,
-  length: number,
-  index: number,
-  inLayout: boolean,
-}>;
-
-export type ChildListState = $ReadOnly<{
-  first: number,
-  last: number,
-  frames: {[key: number]: Frame},
-}>;
+import typeof VirtualizedList from './VirtualizedList';
 
-// Data propagated through nested lists (regardless of orientation) that is
-// useful for producing diagnostics for usage errors involving nesting (e.g
-// missing/duplicate keys).
-export type ListDebugInfo = $ReadOnly<{
-  cellKey: string,
-  listKey: string,
-  parent: ?ListDebugInfo,
-  // We include all ancestors regardless of orientation, so this is not always
-  // identical to the child's orientation.
-  horizontal: boolean,
-}>;
+import * as React from 'react';
+import {useContext, useMemo} from 'react';
 
 type Context = $ReadOnly<{
   cellKey: ?string,
@@ -50,19 +26,14 @@ type Context = $ReadOnly<{
     zoomScale: number,
   },
   horizontal: ?boolean,
-  getOutermostParentListRef: () => VirtualizedList,
-  getNestedChildState: string => ?ChildListState,
+  getOutermostParentListRef: () => React.ElementRef<VirtualizedList>,
   registerAsNestedChild: ({
     cellKey: string,
-    key: string,
-    ref: VirtualizedList,
-    parentDebugInfo: ListDebugInfo,
-  }) => ?ChildListState,
+    ref: React.ElementRef<VirtualizedList>,
+  }) => void,
   unregisterAsNestedChild: ({
-    key: string,
-    state: ChildListState,
+    ref: React.ElementRef<VirtualizedList>,
   }) => void,
-  debugInfo: ListDebugInfo,
 }>;
 
 export const VirtualizedListContext: React.Context<?Context> =
@@ -103,27 +74,15 @@ export function VirtualizedListContextProvider({
       getScrollMetrics: value.getScrollMetrics,
       horizontal: value.horizontal,
       getOutermostParentListRef: value.getOutermostParentListRef,
-      getNestedChildState: value.getNestedChildState,
       registerAsNestedChild: value.registerAsNestedChild,
       unregisterAsNestedChild: value.unregisterAsNestedChild,
-      debugInfo: {
-        cellKey: value.debugInfo.cellKey,
-        horizontal: value.debugInfo.horizontal,
-        listKey: value.debugInfo.listKey,
-        parent: value.debugInfo.parent,
-      },
     }),
     [
       value.getScrollMetrics,
       value.horizontal,
       value.getOutermostParentListRef,
-      value.getNestedChildState,
       value.registerAsNestedChild,
       value.unregisterAsNestedChild,
-      value.debugInfo.cellKey,
-      value.debugInfo.horizontal,
-      value.debugInfo.listKey,
-      value.debugInfo.parent,
     ],
   );
   return (

package/Libraries/Lists/VirtualizedListProps.js

@@ -0,0 +1,279 @@
+/**
+ * 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
+ */
+
+import typeof ScrollView from '../Components/ScrollView/ScrollView';
+import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+import type {
+  ViewabilityConfig,
+  ViewabilityConfigCallbackPair,
+  ViewToken,
+} from './ViewabilityHelper';
+
+import * as React from 'react';
+
+export type Item = any;
+
+export type Separators = {
+  highlight: () => void,
+  unhighlight: () => void,
+  updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
+  ...
+};
+
+export type RenderItemProps<ItemT> = {
+  item: ItemT,
+  index: number,
+  separators: Separators,
+  ...
+};
+
+export type RenderItemType<ItemT> = (
+  info: RenderItemProps<ItemT>,
+) => React.Node;
+
+type RequiredProps = {|
+  /**
+   * The default accessor functions assume this is an Array<{key: string} | {id: string}> but you can override
+   * getItem, getItemCount, and keyExtractor to handle any type of index-based data.
+   */
+  data?: any,
+  /**
+   * A generic accessor for extracting an item from any sort of data blob.
+   */
+  getItem: (data: any, index: number) => ?Item,
+  /**
+   * Determines how many items are in the data blob.
+   */
+  getItemCount: (data: any) => number,
+|};
+type OptionalProps = {|
+  renderItem?: ?RenderItemType<Item>,
+  /**
+   * `debug` will turn on extra logging and visual overlays to aid with debugging both usage and
+   * implementation, but with a significant perf hit.
+   */
+  debug?: ?boolean,
+  /**
+   * DEPRECATED: Virtualization provides significant performance and memory optimizations, but fully
+   * unmounts react instances that are outside of the render window. You should only need to disable
+   * this for debugging purposes. Defaults to false.
+   */
+  disableVirtualization?: ?boolean,
+  /**
+   * 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,
+  // e.g. height, y
+  getItemLayout?: (
+    data: any,
+    index: number,
+  ) => {
+    length: number,
+    offset: number,
+    index: number,
+    ...
+  },
+  horizontal?: ?boolean,
+  /**
+   * How many items to render in the initial batch. This should be enough to fill the screen but not
+   * much more. Note these items will never be unmounted as part of the windowed rendering in order
+   * to improve perceived performance of scroll-to-top actions.
+   */
+  initialNumToRender?: ?number,
+  /**
+   * Instead of starting at the top with the first item, start at `initialScrollIndex`. This
+   * disables the "scroll to top" optimization that keeps the first `initialNumToRender` items
+   * always rendered and immediately renders the items starting at this initial index. Requires
+   * `getItemLayout` to be implemented.
+   */
+  initialScrollIndex?: ?number,
+  /**
+   * Reverses the direction of scroll. Uses scale transforms of -1.
+   */
+  inverted?: ?boolean,
+  keyExtractor?: ?(item: Item, index: number) => string,
+  /**
+   * Each cell is rendered using this element. Can be a React Component Class,
+   * or a render function. Defaults to using View.
+   */
+  CellRendererComponent?: ?React.ComponentType<any>,
+  /**
+   * Rendered in between each item, but not at the top or bottom. By default, `highlighted` and
+   * `leadingItem` props are provided. `renderItem` provides `separators.highlight`/`unhighlight`
+   * which will update the `highlighted` prop, but you can also add custom props with
+   * `separators.updateProps`.
+   */
+  ItemSeparatorComponent?: ?React.ComponentType<any>,
+  /**
+   * Takes an item from `data` and renders it into the list. Example usage:
+   *
+   *     <FlatList
+   *       ItemSeparatorComponent={Platform.OS !== 'android' && ({highlighted}) => (
+   *         <View style={[style.separator, highlighted && {marginLeft: 0}]} />
+   *       )}
+   *       data={[{title: 'Title Text', key: 'item1'}]}
+   *       ListItemComponent={({item, separators}) => (
+   *         <TouchableHighlight
+   *           onPress={() => this._onPress(item)}
+   *           onShowUnderlay={separators.highlight}
+   *           onHideUnderlay={separators.unhighlight}>
+   *           <View style={{backgroundColor: 'white'}}>
+   *             <Text>{item.title}</Text>
+   *           </View>
+   *         </TouchableHighlight>
+   *       )}
+   *     />
+   *
+   * Provides additional metadata like `index` if you need it, as well as a more generic
+   * `separators.updateProps` function which let's you set whatever props you want to change the
+   * rendering of either the leading separator or trailing separator in case the more common
+   * `highlight` and `unhighlight` (which set the `highlighted: boolean` prop) are insufficient for
+   * your use-case.
+   */
+  ListItemComponent?: ?(React.ComponentType<any> | React.Element<any>),
+  /**
+   * Rendered when the list is empty. Can be a React Component Class, a render function, or
+   * a rendered element.
+   */
+  ListEmptyComponent?: ?(React.ComponentType<any> | React.Element<any>),
+  /**
+   * Rendered at the bottom of all the items. Can be a React Component Class, a render function, or
+   * a rendered element.
+   */
+  ListFooterComponent?: ?(React.ComponentType<any> | React.Element<any>),
+  /**
+   * Styling for internal View for ListFooterComponent
+   */
+  ListFooterComponentStyle?: ViewStyleProp,
+  /**
+   * Rendered at the top of all the items. Can be a React Component Class, a render function, or
+   * a rendered element.
+   */
+  ListHeaderComponent?: ?(React.ComponentType<any> | React.Element<any>),
+  /**
+   * Styling for internal View for ListHeaderComponent
+   */
+  ListHeaderComponentStyle?: ViewStyleProp,
+  /**
+   * The maximum number of items to render in each incremental render batch. The more rendered at
+   * once, the better the fill rate, but responsiveness may suffer because rendering content may
+   * interfere with responding to button taps or other interactions.
+   */
+  maxToRenderPerBatch?: ?number,
+  /**
+   * Called once when the scroll position gets within `onEndReachedThreshold` of the rendered
+   * content.
+   */
+  onEndReached?: ?(info: {distanceFromEnd: number, ...}) => void,
+  /**
+   * 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. A value of 0 will not trigger until scrolling
+   * to the very end of the list.
+   */
+  onEndReachedThreshold?: ?number,
+  /**
+   * If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make
+   * sure to also set the `refreshing` prop correctly.
+   */
+  onRefresh?: ?() => void,
+  /**
+   * 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,
+  /**
+   * Called when the viewability of rows changes, as defined by the
+   * `viewabilityConfig` prop.
+   */
+  onViewableItemsChanged?: ?(info: {
+    viewableItems: Array<ViewToken>,
+    changed: Array<ViewToken>,
+    ...
+  }) => void,
+  persistentScrollbar?: ?boolean,
+  /**
+   * Set this when offset is needed for the loading indicator to show correctly.
+   */
+  progressViewOffset?: number,
+  /**
+   * A custom refresh control element. When set, it overrides the default
+   * <RefreshControl> component built internally. The onRefresh and refreshing
+   * props are also ignored. Only works for vertical VirtualizedList.
+   */
+  refreshControl?: ?React.Element<any>,
+  /**
+   * Set this true while waiting for new data from a refresh.
+   */
+  refreshing?: ?boolean,
+  /**
+   * Note: may have bugs (missing content) in some circumstances - use at your own risk.
+   *
+   * This may improve scroll performance for large lists.
+   */
+  removeClippedSubviews?: boolean,
+  /**
+   * Render a custom scroll component, e.g. with a differently styled `RefreshControl`.
+   */
+  renderScrollComponent?: (props: Object) => React.Element<any>,
+  /**
+   * Amount of time between low-pri item render batches, e.g. for rendering items quite a ways off
+   * screen. Similar fill rate/responsiveness tradeoff as `maxToRenderPerBatch`.
+   */
+  updateCellsBatchingPeriod?: ?number,
+  /**
+   * See `ViewabilityHelper` for flow type and further documentation.
+   */
+  viewabilityConfig?: ViewabilityConfig,
+  /**
+   * List of ViewabilityConfig/onViewableItemsChanged pairs. A specific onViewableItemsChanged
+   * will be called when its corresponding ViewabilityConfig's conditions are met.
+   */
+  viewabilityConfigCallbackPairs?: Array<ViewabilityConfigCallbackPair>,
+  /**
+   * Determines the maximum number of items rendered outside of the visible area, in units of
+   * visible lengths. So if your list fills the screen, then `windowSize={21}` (the default) will
+   * render the visible screen area plus up to 10 screens above and 10 below the viewport. Reducing
+   * this number will reduce memory consumption and may improve performance, but will increase the
+   * chance that fast scrolling may reveal momentary blank areas of unrendered content.
+   */
+  windowSize?: ?number,
+  /**
+   * The legacy implementation is no longer supported.
+   */
+  legacyImplementation?: empty,
+|};
+
+export type Props = {|
+  ...React.ElementConfig<ScrollView>,
+  ...RequiredProps,
+  ...OptionalProps,
+|};
+
+/**
+ * Subset of properties needed to calculate frame metrics
+ */
+export type FrameMetricProps = {
+  data: RequiredProps['data'],
+  getItemCount: RequiredProps['getItemCount'],
+  getItem: RequiredProps['getItem'],
+  getItemLayout?: OptionalProps['getItemLayout'],
+  keyExtractor?: OptionalProps['keyExtractor'],
+  ...
+};

package/Libraries/Lists/VirtualizedSectionList.js

@@ -10,10 +10,11 @@
 
 import type {ViewToken} from './ViewabilityHelper';
 
+import View from '../Components/View/View';
+import VirtualizedList from './VirtualizedList';
 import {keyExtractor as defaultKeyExtractor} from './VirtualizeUtils';
 import invariant from 'invariant';
 import * as React from 'react';
-import {View, VirtualizedList} from 'react-native';
 
 type Item = any;
 
@@ -140,6 +141,7 @@ class VirtualizedSectionList<
     if (params.itemIndex > 0 && this.props.stickySectionHeadersEnabled) {
       const frame = this._listRef.__getFrameMetricsApprox(
         index - params.itemIndex,
+        this._listRef.props,
       );
       viewOffset += frame.length;
     }
@@ -171,7 +173,7 @@ class VirtualizedSectionList<
     const listHeaderOffset = this.props.ListHeaderComponent ? 1 : 0;
 
     const stickyHeaderIndices = this.props.stickySectionHeadersEnabled
-      ? []
+      ? ([]: Array<number>)
       : undefined;
 
     let itemCount = 0;
@@ -236,6 +238,7 @@ class VirtualizedSectionList<
     return null;
   }
 
+  // $FlowFixMe[missing-local-annot]
   _keyExtractor = (item: Item, index: number) => {
     const info = this._subExtractor(index);
     return (info && info.key) || String(index);
@@ -339,7 +342,7 @@ class VirtualizedSectionList<
   };
 
   _renderItem =
-    (listItemCount: number) =>
+    (listItemCount: number): $FlowFixMe =>
     // eslint-disable-next-line react/no-unstable-nested-components
     ({item, index}: {item: Item, index: number, ...}) => {
       const info = this._subExtractor(index);

package/Libraries/Lists/__flowtests__/SectionList-flowtest.js

@@ -10,8 +10,8 @@
 
 'use strict';
 
-import * as React from 'react';
 import SectionList from '../SectionList';
+import * as React from 'react';
 
 function renderMyListItem(info: {
   item: {title: string, ...},