@react-native/virtualized-lists 0.72.0

package/Lists/VirtualizedListCellRenderer.js

@@ -0,0 +1,265 @@
+/**
+ * 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 'react-native/Libraries/StyleSheet/StyleSheet';
+import type {
+  FocusEvent,
+  LayoutEvent,
+} from 'react-native/Libraries/Types/CoreEventTypes';
+import type FillRateHelper from './FillRateHelper';
+import type {RenderItemType} from './VirtualizedListProps';
+
+import {View, StyleSheet} from 'react-native';
+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.Node = React.isValidElement(
+      ItemSeparatorComponent,
+    )
+      ? // $FlowFixMe[incompatible-type]
+        ItemSeparatorComponent
+      : // $FlowFixMe[incompatible-type]
+        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/Lists/VirtualizedListContext.js

@@ -0,0 +1,116 @@
+/**
+ * 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 strict-local
+ * @format
+ */
+
+import typeof VirtualizedList from './VirtualizedList';
+
+import * as React from 'react';
+import {useContext, useMemo} from 'react';
+
+type Context = $ReadOnly<{
+  cellKey: ?string,
+  getScrollMetrics: () => {
+    contentLength: number,
+    dOffset: number,
+    dt: number,
+    offset: number,
+    timestamp: number,
+    velocity: number,
+    visibleLength: number,
+    zoomScale: number,
+  },
+  horizontal: ?boolean,
+  getOutermostParentListRef: () => React.ElementRef<VirtualizedList>,
+  registerAsNestedChild: ({
+    cellKey: string,
+    ref: React.ElementRef<VirtualizedList>,
+  }) => void,
+  unregisterAsNestedChild: ({
+    ref: React.ElementRef<VirtualizedList>,
+  }) => void,
+}>;
+
+export const VirtualizedListContext: React.Context<?Context> =
+  React.createContext(null);
+if (__DEV__) {
+  VirtualizedListContext.displayName = 'VirtualizedListContext';
+}
+
+/**
+ * Resets the context. Intended for use by portal-like components (e.g. Modal).
+ */
+export function VirtualizedListContextResetter({
+  children,
+}: {
+  children: React.Node,
+}): React.Node {
+  return (
+    <VirtualizedListContext.Provider value={null}>
+      {children}
+    </VirtualizedListContext.Provider>
+  );
+}
+
+/**
+ * Sets the context with memoization. Intended to be used by `VirtualizedList`.
+ */
+export function VirtualizedListContextProvider({
+  children,
+  value,
+}: {
+  children: React.Node,
+  value: Context,
+}): React.Node {
+  // Avoid setting a newly created context object if the values are identical.
+  const context = useMemo(
+    () => ({
+      cellKey: null,
+      getScrollMetrics: value.getScrollMetrics,
+      horizontal: value.horizontal,
+      getOutermostParentListRef: value.getOutermostParentListRef,
+      registerAsNestedChild: value.registerAsNestedChild,
+      unregisterAsNestedChild: value.unregisterAsNestedChild,
+    }),
+    [
+      value.getScrollMetrics,
+      value.horizontal,
+      value.getOutermostParentListRef,
+      value.registerAsNestedChild,
+      value.unregisterAsNestedChild,
+    ],
+  );
+  return (
+    <VirtualizedListContext.Provider value={context}>
+      {children}
+    </VirtualizedListContext.Provider>
+  );
+}
+
+/**
+ * Sets the `cellKey`. Intended to be used by `VirtualizedList` for each cell.
+ */
+export function VirtualizedListCellContextProvider({
+  cellKey,
+  children,
+}: {
+  cellKey: string,
+  children: React.Node,
+}): React.Node {
+  // Avoid setting a newly created context object if the values are identical.
+  const currContext = useContext(VirtualizedListContext);
+  const context = useMemo(
+    () => (currContext == null ? null : {...currContext, cellKey}),
+    [currContext, cellKey],
+  );
+  return (
+    <VirtualizedListContext.Provider value={context}>
+      {children}
+    </VirtualizedListContext.Provider>
+  );
+}

package/Lists/VirtualizedListProps.js

@@ -0,0 +1,290 @@
+/**
+ * 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 'react-native';
+import type {ViewStyleProp} from 'react-native/Libraries/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 within `onEndReachedThreshold`
+   * from the logical end of the list.
+   */
+  onEndReached?: ?(info: {distanceFromEnd: number, ...}) => void,
+  /**
+   * How far from the end (in units of visible length of the list) the trailing 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,
+  /**
+   * 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 once when the scroll position gets within within `onStartReachedThreshold`
+   * from the logical start of the list.
+   */
+  onStartReached?: ?(info: {distanceFromStart: number, ...}) => void,
+  /**
+   * How far from the start (in units of visible length of the list) the leading edge of the
+   * list must be from the start of the content to trigger the `onStartReached` callback.
+   * Thus, a value of 0.5 will trigger `onStartReached` when the start of the content is
+   * within half the visible length of the list.
+   */
+  onStartReachedThreshold?: ?number,
+  /**
+   * 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'],
+  ...
+};