first commit

node_modules/react-native/Libraries/Lists/FillRateHelper.js

@@ -0,0 +1,19 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+import VirtualizedLists from '@react-native/virtualized-lists';
+
+type FillRateHelperType = typeof VirtualizedLists.FillRateHelper;
+const FillRateHelper: FillRateHelperType = VirtualizedLists.FillRateHelper;
+
+export type {FillRateInfo} from '@react-native/virtualized-lists';
+export default FillRateHelper;

node_modules/react-native/Libraries/Lists/FlatList.d.ts

@@ -0,0 +1,248 @@
+/**
+ * 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,
+  ViewabilityConfig,
+} from '@react-native/virtualized-lists';
+import type {ScrollViewComponent} from '../Components/ScrollView/ScrollView';
+import type {StyleProp} from '../StyleSheet/StyleSheet';
+import type {ViewStyle} from '../StyleSheet/StyleSheetTypes';
+import type {View} from '../Components/View/View';
+
+export interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
+  /**
+   * 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;
+
+  /**
+   * An array (or array-like list) of items to render. Other data types can be
+   * used by targeting VirtualizedList directly.
+   */
+  data: ArrayLike<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 | undefined;
+
+  /**
+   * `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: ArrayLike<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;
+
+  /**
+   * 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<ItemT>>;
+        changed: Array<ViewToken<ItemT>>;
+      }) => 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?: ViewabilityConfig | 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;
+
+  /**
+   * Controls the fading effect at the edges of the scroll content.
+   *
+   * A value greater than 0 will apply the fading effect, indicating more content is available
+   * to scroll.
+   *
+   * You can specify a single number to apply the same fading length to both edges.
+   * Alternatively, use an object with `start` and `end` properties to set different
+   * fading lengths for the start and end of the scroll content.
+   *
+   * The default value is 0.
+   *
+   * @platform android
+   */
+  fadingEdgeLength?: number | {start: number; end: number} | undefined;
+}
+
+export abstract class FlatListComponent<
+  ItemT,
+  Props,
+> extends React.Component<Props> {
+  /**
+   * 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;
+    viewOffset?: number | undefined;
+    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: () => React.JSX.Element | null | undefined;
+
+  /**
+   * Provides a reference to the underlying host component
+   */
+  getNativeScrollRef: () =>
+    | React.ComponentRef<typeof View>
+    | React.ComponentRef<typeof ScrollViewComponent>
+    | null
+    | undefined;
+
+  getScrollableNode: () => any;
+
+  setNativeProps: (props: {[key: string]: unknown}) => void;
+}
+
+export class FlatList<ItemT = any> extends FlatListComponent<
+  ItemT,
+  FlatListProps<ItemT>
+> {}

node_modules/react-native/Libraries/Lists/FlatList.js

@@ -0,0 +1,712 @@
+/**
+ * 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 ScrollViewNativeComponent from '../Components/ScrollView/ScrollViewNativeComponent';
+import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+import type {
+  ListRenderItem,
+  ListRenderItemInfo,
+  ListViewToken,
+  ViewabilityConfigCallbackPair,
+  VirtualizedListProps,
+} from '@react-native/virtualized-lists';
+
+import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
+import {type ScrollResponderType} from '../Components/ScrollView/ScrollView';
+import View from '../Components/View/View';
+import VirtualizedLists from '@react-native/virtualized-lists';
+import memoizeOne from 'memoize-one';
+import * as React from 'react';
+
+const StyleSheet = require('../StyleSheet/StyleSheet').default;
+const deepDiffer = require('../Utilities/differ/deepDiffer').default;
+const Platform = require('../Utilities/Platform').default;
+const invariant = require('invariant');
+
+const VirtualizedList = VirtualizedLists.VirtualizedList;
+const defaultKeyExtractor = VirtualizedLists.keyExtractor;
+
+type RequiredFlatListProps<ItemT> = {
+  /**
+   * An array (or array-like list) of items to render. Other data types can be
+   * used by targeting VirtualizedList directly.
+   */
+  data: ?$ReadOnly<$ArrayLike<ItemT>>,
+};
+type OptionalFlatListProps<ItemT> = {
+  /**
+   * 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'}]}
+   *       renderItem={({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.
+   */
+  renderItem?: ?ListRenderItem<ItemT>,
+
+  /**
+   * Optional custom style for multi-item rows generated when numColumns > 1.
+   */
+  columnWrapperStyle?: ViewStyleProp,
+  /**
+   * 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 optimizations that let 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}
+   *     )}
+   *
+   * Adding `getItemLayout` can be a great performance boost for lists of several hundred items.
+   * Remember to include separator length (height or width) in your offset calculation if you
+   * specify `ItemSeparatorComponent`.
+   */
+  getItemLayout?: (
+    data: ?$ReadOnly<$ArrayLike<ItemT>>,
+    index: number,
+  ) => {
+    length: number,
+    offset: number,
+    index: number,
+    ...
+  },
+  /**
+   * If true, renders items next to each other horizontally instead of stacked vertically.
+   */
+  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,
+  /**
+   * 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,
+  /**
+   * 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.
+   *
+   * The default value is 1.
+   */
+  numColumns?: number,
+  /**
+   * Note: may have bugs (missing content) in some circumstances - use at your own risk.
+   *
+   * This may improve scroll performance for large lists.
+   *
+   * The default value is true for Android.
+   */
+  removeClippedSubviews?: boolean,
+  /**
+   * See `ScrollView` for flow type and further documentation.
+   */
+  fadingEdgeLength?: ?number | {start: number, end: number},
+  /**
+   * Enable an optimization to memoize the item renderer to prevent unnecessary rerenders.
+   */
+  strictMode?: boolean,
+};
+
+/**
+ * Default Props Helper Functions
+ * Use the following helper functions for default values
+ */
+
+// removeClippedSubviewsOrDefault(this.props.removeClippedSubviews)
+function removeClippedSubviewsOrDefault(removeClippedSubviews: ?boolean) {
+  if (ReactNativeFeatureFlags.shouldUseRemoveClippedSubviewsAsDefaultOnIOS()) {
+    return removeClippedSubviews ?? true;
+  } else {
+    return removeClippedSubviews ?? Platform.OS === 'android';
+  }
+}
+
+// numColumnsOrDefault(this.props.numColumns)
+function numColumnsOrDefault(numColumns: ?number) {
+  return numColumns ?? 1;
+}
+
+function isArrayLike(data: mixed): boolean {
+  // $FlowExpectedError[incompatible-use]
+  return typeof Object(data).length === 'number';
+}
+
+type FlatListBaseProps<ItemT> = {
+  ...RequiredFlatListProps<ItemT>,
+  ...OptionalFlatListProps<ItemT>,
+};
+
+export type FlatListProps<ItemT> = {
+  ...Omit<
+    VirtualizedListProps,
+    | 'data'
+    | 'getItem'
+    | 'getItemCount'
+    | 'getItemLayout'
+    | 'renderItem'
+    | 'keyExtractor',
+  >,
+  ...FlatListBaseProps<ItemT>,
+  ...
+};
+
+/**
+ * A performant interface for rendering simple, flat lists, supporting the most handy features:
+ *
+ *  - Fully cross-platform.
+ *  - Optional horizontal mode.
+ *  - Configurable viewability callbacks.
+ *  - Header support.
+ *  - Footer support.
+ *  - Separator support.
+ *  - Pull to Refresh.
+ *  - Scroll loading.
+ *  - ScrollToIndex support.
+ *
+ * If you need section support, use [`<SectionList>`](docs/sectionlist.html).
+ *
+ * Minimal Example:
+ *
+ *     <FlatList
+ *       data={[{key: 'a'}, {key: 'b'}]}
+ *       renderItem={({item}) => <Text>{item.key}</Text>}
+ *     />
+ *
+ * More complex, multi-select example demonstrating `PureComponent` usage for perf optimization and avoiding bugs.
+ *
+ * - By binding the `onPressItem` handler, the props will remain `===` and `PureComponent` will
+ *   prevent wasteful re-renders unless the actual `id`, `selected`, or `title` props change, even
+ *   if the components rendered in `MyListItem` did not have such optimizations.
+ * - By passing `extraData={this.state}` to `FlatList` we make sure `FlatList` itself will re-render
+ *   when the `state.selected` changes. Without setting this prop, `FlatList` would not know it
+ *   needs to re-render any items because it is also a `PureComponent` and the prop comparison will
+ *   not show any changes.
+ * - `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property.
+ *
+ *
+ *     class MyListItem extends React.PureComponent {
+ *       _onPress = () => {
+ *         this.props.onPressItem(this.props.id);
+ *       };
+ *
+ *       render() {
+ *         const textColor = this.props.selected ? "red" : "black";
+ *         return (
+ *           <TouchableOpacity onPress={this._onPress}>
+ *             <View>
+ *               <Text style={{ color: textColor }}>
+ *                 {this.props.title}
+ *               </Text>
+ *             </View>
+ *           </TouchableOpacity>
+ *         );
+ *       }
+ *     }
+ *
+ *     class MultiSelectList extends React.PureComponent {
+ *       state = {selected: (new Map(): Map<string, boolean>)};
+ *
+ *       _keyExtractor = (item, index) => item.id;
+ *
+ *       _onPressItem = (id: string) => {
+ *         // updater functions are preferred for transactional updates
+ *         this.setState((state) => {
+ *           // copy the map rather than modifying state.
+ *           const selected = new Map(state.selected);
+ *           selected.set(id, !selected.get(id)); // toggle
+ *           return {selected};
+ *         });
+ *       };
+ *
+ *       _renderItem = ({item}) => (
+ *         <MyListItem
+ *           id={item.id}
+ *           onPressItem={this._onPressItem}
+ *           selected={!!this.state.selected.get(item.id)}
+ *           title={item.title}
+ *         />
+ *       );
+ *
+ *       render() {
+ *         return (
+ *           <FlatList
+ *             data={this.props.data}
+ *             extraData={this.state}
+ *             keyExtractor={this._keyExtractor}
+ *             renderItem={this._renderItem}
+ *           />
+ *         );
+ *       }
+ *     }
+ *
+ * This is a convenience wrapper around [`<VirtualizedList>`](docs/virtualizedlist.html),
+ * and thus inherits its props (as well as those of `ScrollView`) that aren't explicitly listed
+ * here, along with the following caveats:
+ *
+ * - Internal state is not preserved when content scrolls out of the render window. Make sure all
+ *   your data is captured in the item data or external stores like Flux, Redux, or Relay.
+ * - This is a `PureComponent` which means that it will not re-render if `props` remain shallow-
+ *   equal. Make sure that everything your `renderItem` function depends on is passed as a prop
+ *   (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on
+ *   changes. This includes the `data` prop and parent component state.
+ * - In order to constrain memory and enable smooth scrolling, content is rendered asynchronously
+ *   offscreen. This means it's possible to scroll faster than the fill rate ands momentarily see
+ *   blank content. This is a tradeoff that can be adjusted to suit the needs of each application,
+ *   and we are working on improving it behind the scenes.
+ * - By default, the list looks for a `key` prop on each item and uses that for the React key.
+ *   Alternatively, you can provide a custom `keyExtractor` prop.
+ *
+ * Also inherits [ScrollView Props](docs/scrollview.html#props), unless it is nested in another FlatList of same orientation.
+ */
+class FlatList<ItemT = any> extends React.PureComponent<FlatListProps<ItemT>> {
+  /**
+   * Scrolls to the end of the content. May be janky without `getItemLayout` prop.
+   */
+  scrollToEnd(params?: ?{animated?: ?boolean, ...}) {
+    if (this._listRef) {
+      this._listRef.scrollToEnd(params);
+    }
+  }
+
+  /**
+   * 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. `viewOffset` is a fixed number of pixels to offset the final target position.
+   *
+   * Note: cannot scroll to locations outside the render window without specifying the
+   * `getItemLayout` prop.
+   */
+  scrollToIndex(params: {
+    animated?: ?boolean,
+    index: number,
+    viewOffset?: number,
+    viewPosition?: number,
+    ...
+  }) {
+    if (this._listRef) {
+      this._listRef.scrollToIndex(params);
+    }
+  }
+
+  /**
+   * Requires linear scan through data - use `scrollToIndex` instead if possible.
+   *
+   * Note: cannot scroll to locations outside the render window without specifying the
+   * `getItemLayout` prop.
+   */
+  scrollToItem(params: {
+    animated?: ?boolean,
+    item: ItemT,
+    viewOffset?: number,
+    viewPosition?: number,
+    ...
+  }) {
+    if (this._listRef) {
+      this._listRef.scrollToItem(params);
+    }
+  }
+
+  /**
+   * Scroll to a specific content pixel offset in the list.
+   *
+   * Check out [scrollToOffset](docs/virtualizedlist.html#scrolltooffset) of VirtualizedList
+   */
+  scrollToOffset(params: {animated?: ?boolean, offset: number, ...}) {
+    if (this._listRef) {
+      this._listRef.scrollToOffset(params);
+    }
+  }
+
+  /**
+   * 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() {
+    if (this._listRef) {
+      this._listRef.recordInteraction();
+    }
+  }
+
+  /**
+   * Displays the scroll indicators momentarily.
+   *
+   * @platform ios
+   */
+  flashScrollIndicators() {
+    if (this._listRef) {
+      this._listRef.flashScrollIndicators();
+    }
+  }
+
+  /**
+   * Provides a handle to the underlying scroll responder.
+   */
+  getScrollResponder(): ?ScrollResponderType {
+    if (this._listRef) {
+      return this._listRef.getScrollResponder();
+    }
+  }
+
+  /**
+   * Provides a reference to the underlying host component
+   */
+  getNativeScrollRef():
+    | ?React.ElementRef<typeof View>
+    | ?React.ElementRef<ScrollViewNativeComponent> {
+    if (this._listRef) {
+      /* $FlowFixMe[incompatible-return] Suppresses errors found when fixing
+       * TextInput typing */
+      return this._listRef.getScrollRef();
+    }
+  }
+
+  getScrollableNode(): any {
+    if (this._listRef) {
+      return this._listRef.getScrollableNode();
+    }
+  }
+
+  setNativeProps(props: {[string]: mixed, ...}) {
+    if (this._listRef) {
+      this._listRef.setNativeProps(props);
+    }
+  }
+
+  constructor(props: FlatListProps<ItemT>) {
+    super(props);
+    this._checkProps(this.props);
+    if (this.props.viewabilityConfigCallbackPairs) {
+      this._virtualizedListPairs =
+        this.props.viewabilityConfigCallbackPairs.map(pair => ({
+          viewabilityConfig: pair.viewabilityConfig,
+          onViewableItemsChanged: this._createOnViewableItemsChanged(
+            pair.onViewableItemsChanged,
+          ),
+        }));
+    } else if (this.props.onViewableItemsChanged) {
+      this._virtualizedListPairs.push({
+        /* $FlowFixMe[incompatible-type] (>=0.63.0 site=react_native_fb) This
+         * comment suppresses an error found when Flow v0.63 was deployed. To
+         * see the error delete this comment and run Flow. */
+        viewabilityConfig: this.props.viewabilityConfig,
+        onViewableItemsChanged: this._createOnViewableItemsChanged(
+          // NOTE: we use a wrapper function to allow the actual callback to change
+          // while still keeping the function provided to native to be stable
+          (...args) => {
+            invariant(
+              this.props.onViewableItemsChanged,
+              'Changing the nullability of onViewableItemsChanged is not supported. ' +
+                'Once a function or null is supplied that cannot be changed.',
+            );
+            return this.props.onViewableItemsChanged(...args);
+          },
+        ),
+      });
+    }
+  }
+
+  // $FlowFixMe[missing-local-annot]
+  componentDidUpdate(prevProps: FlatListProps<ItemT>) {
+    invariant(
+      prevProps.numColumns === this.props.numColumns,
+      'Changing numColumns on the fly is not supported. Change the key prop on FlatList when ' +
+        'changing the number of columns to force a fresh render of the component.',
+    );
+    invariant(
+      (prevProps.onViewableItemsChanged == null) ===
+        (this.props.onViewableItemsChanged == null),
+      'Changing onViewableItemsChanged nullability on the fly is not supported',
+    );
+    invariant(
+      !deepDiffer(prevProps.viewabilityConfig, this.props.viewabilityConfig),
+      'Changing viewabilityConfig on the fly is not supported',
+    );
+    invariant(
+      prevProps.viewabilityConfigCallbackPairs ===
+        this.props.viewabilityConfigCallbackPairs,
+      'Changing viewabilityConfigCallbackPairs on the fly is not supported',
+    );
+
+    this._checkProps(this.props);
+  }
+
+  _listRef: ?VirtualizedList;
+  _virtualizedListPairs: Array<ViewabilityConfigCallbackPair> = [];
+
+  _captureRef = (ref: ?VirtualizedList) => {
+    this._listRef = ref;
+  };
+
+  // $FlowFixMe[missing-local-annot]
+  _checkProps(props: FlatListProps<ItemT>) {
+    const {
+      // $FlowFixMe[prop-missing] this prop doesn't exist, is only used for an invariant
+      getItem,
+      // $FlowFixMe[prop-missing] this prop doesn't exist, is only used for an invariant
+      getItemCount,
+      horizontal,
+      columnWrapperStyle,
+      onViewableItemsChanged,
+      viewabilityConfigCallbackPairs,
+    } = props;
+    const numColumns = numColumnsOrDefault(this.props.numColumns);
+    invariant(
+      !getItem && !getItemCount,
+      'FlatList does not support custom data formats.',
+    );
+    if (numColumns > 1) {
+      invariant(!horizontal, 'numColumns does not support horizontal.');
+    } else {
+      invariant(
+        !columnWrapperStyle,
+        'columnWrapperStyle not supported for single column lists',
+      );
+    }
+    invariant(
+      !(onViewableItemsChanged && viewabilityConfigCallbackPairs),
+      'FlatList does not support setting both onViewableItemsChanged and ' +
+        'viewabilityConfigCallbackPairs.',
+    );
+  }
+
+  _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 itemIndex = index * numColumns + kk;
+        if (itemIndex < data.length) {
+          const item = data[itemIndex];
+          ret.push(item);
+        }
+      }
+      return ret;
+    } else {
+      return data[index];
+    }
+  };
+
+  _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 {
+      return 0;
+    }
+  };
+
+  _keyExtractor = (items: ItemT | Array<ItemT>, index: number): string => {
+    const numColumns = numColumnsOrDefault(this.props.numColumns);
+    const keyExtractor = this.props.keyExtractor ?? defaultKeyExtractor;
+
+    if (numColumns > 1) {
+      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-type] Can't call keyExtractor with an array
+    return keyExtractor(items, index);
+  };
+
+  _pushMultiColumnViewable(arr: Array<ListViewToken>, v: ListViewToken): void {
+    const numColumns = numColumnsOrDefault(this.props.numColumns);
+    const keyExtractor = this.props.keyExtractor ?? defaultKeyExtractor;
+    v.item.forEach((item, ii) => {
+      invariant(v.index != null, 'Missing index!');
+      const index = v.index * numColumns + ii;
+      arr.push({...v, item, key: keyExtractor(item, index), index});
+    });
+  }
+
+  _createOnViewableItemsChanged(
+    onViewableItemsChanged: ?(info: {
+      viewableItems: Array<ListViewToken>,
+      changed: Array<ListViewToken>,
+      ...
+    }) => void,
+    // $FlowFixMe[missing-local-annot]
+  ) {
+    return (info: {
+      viewableItems: Array<ListViewToken>,
+      changed: Array<ListViewToken>,
+      ...
+    }) => {
+      const numColumns = numColumnsOrDefault(this.props.numColumns);
+      if (onViewableItemsChanged) {
+        if (numColumns > 1) {
+          const changed: Array<ListViewToken> = [];
+          const viewableItems: Array<ListViewToken> = [];
+          info.viewableItems.forEach(v =>
+            this._pushMultiColumnViewable(viewableItems, v),
+          );
+          info.changed.forEach(v => this._pushMultiColumnViewable(changed, v));
+          onViewableItemsChanged({viewableItems, changed});
+        } else {
+          onViewableItemsChanged(info);
+        }
+      }
+    };
+  }
+
+  _renderer = (
+    ListItemComponent: ?(React.ComponentType<any> | React.MixedElement),
+    renderItem: ?ListRenderItem<ItemT>,
+    columnWrapperStyle: ?ViewStyleProp,
+    numColumns: ?number,
+    extraData: ?any,
+    // $FlowFixMe[missing-local-annot]
+  ) => {
+    const cols = numColumnsOrDefault(numColumns);
+
+    const render = (props: ListRenderItemInfo<ItemT>): React.Node => {
+      if (ListItemComponent) {
+        // $FlowFixMe[not-a-component] Component isn't valid
+        // $FlowFixMe[incompatible-type] Component isn't valid
+        return <ListItemComponent {...props} />;
+      } else if (renderItem) {
+        // $FlowFixMe[incompatible-type]
+        return renderItem(props);
+      } else {
+        return null;
+      }
+    };
+
+    const renderProp = (info: ListRenderItemInfo<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-type]
+                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};
+  };
+
+  _memoizedRenderer: ReturnType<typeof memoizeOne> = memoizeOne(this._renderer);
+
+  render(): React.Node {
+    const {
+      numColumns,
+      columnWrapperStyle,
+      removeClippedSubviews: _removeClippedSubviews,
+      strictMode = false,
+      ...restProps
+    } = this.props;
+
+    const renderer = strictMode ? this._memoizedRenderer : this._renderer;
+
+    return (
+      // $FlowFixMe[incompatible-exact] - `restProps` (`Props`) is inexact.
+      <VirtualizedList
+        {...restProps}
+        getItem={this._getItem}
+        getItemCount={this._getItemCount}
+        keyExtractor={this._keyExtractor}
+        ref={this._captureRef}
+        viewabilityConfigCallbackPairs={this._virtualizedListPairs}
+        removeClippedSubviews={removeClippedSubviewsOrDefault(
+          _removeClippedSubviews,
+        )}
+        {...renderer(
+          this.props.ListItemComponent,
+          this.props.renderItem,
+          columnWrapperStyle,
+          numColumns,
+          this.props.extraData,
+        )}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  row: {flexDirection: 'row'},
+});
+
+export default FlatList;

node_modules/react-native/Libraries/Lists/SectionList.d.ts

@@ -0,0 +1,271 @@
+/**
+ * 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 '@react-native/virtualized-lists';
+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>
+    | React.ReactElement
+    | 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;
+
+type VirtualizedListWithoutPreConfiguredProps<ItemT> = Omit<
+  VirtualizedListWithoutRenderItemProps<ItemT>,
+  'stickyHeaderIndices'
+>;
+
+export interface SectionListProps<ItemT, SectionT = DefaultSectionT>
+  extends VirtualizedListWithoutPreConfiguredProps<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 | undefined;
+
+  /**
+   * `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 abstract class SectionListComponent<
+  Props,
+> extends React.Component<Props> {
+  /**
+   * 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;
+}
+
+export class SectionList<
+  ItemT = any,
+  SectionT = DefaultSectionT,
+> extends SectionListComponent<SectionListProps<ItemT, SectionT>> {}
+
+/* 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;
+}

node_modules/react-native/Libraries/Lists/SectionList.js

@@ -0,0 +1,266 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+import type {ScrollResponderType} from '../Components/ScrollView/ScrollView';
+import type {
+  ListRenderItemInfo,
+  ScrollToLocationParamsType,
+  SectionBase as _SectionBase,
+  SectionData,
+  VirtualizedSectionListProps,
+} from '@react-native/virtualized-lists';
+
+import Platform from '../Utilities/Platform';
+import VirtualizedLists from '@react-native/virtualized-lists';
+import * as React from 'react';
+
+const VirtualizedSectionList = VirtualizedLists.VirtualizedSectionList;
+
+type DefaultSectionT = {
+  [key: string]: any,
+};
+
+export type SectionBase<
+  SectionItemT,
+  SectionT = DefaultSectionT,
+> = _SectionBase<SectionItemT, SectionT>;
+
+export type {
+  SectionData as SectionListData,
+  ScrollToLocationParamsType as SectionListScrollParams,
+};
+
+type RequiredSectionListProps<ItemT, SectionT = DefaultSectionT> = {
+  /**
+   * The actual data to render, akin to the `data` prop in [`<FlatList>`](https://reactnative.dev/docs/flatlist).
+   *
+   * General shape:
+   *
+   *     sections: $ReadOnlyArray<{
+   *       data: $ReadOnlyArray<SectionItem>,
+   *       renderItem?: ({item: SectionItem, ...}) => ?React.MixedElement,
+   *       ItemSeparatorComponent?: ?ReactClass<{highlighted: boolean, ...}>,
+   *     }>
+   */
+  sections: $ReadOnlyArray<SectionData<ItemT, SectionT>>,
+};
+
+export type SectionListRenderItemInfo<ItemT, SectionT = DefaultSectionT> = {
+  ...ListRenderItemInfo<ItemT>,
+  section: SectionData<ItemT, SectionT>,
+  ...
+};
+
+export type SectionListRenderItem<ItemT, SectionT = DefaultSectionT> = (
+  info: SectionListRenderItemInfo<ItemT, SectionT>,
+) => React.Node | null;
+
+type OptionalSectionListProps<ItemT, SectionT = DefaultSectionT> = {
+  /**
+   * Default renderer for every item in every section. Can be over-ridden on a per-section basis.
+   */
+  renderItem?: SectionListRenderItem<ItemT, SectionT>,
+  /**
+   * 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,
+  /**
+   * 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,
+  /**
+   * Reverses the direction of scroll. Uses scale transforms of -1.
+   */
+  inverted?: ?boolean,
+  /**
+   * 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. Note that this sets keys for each item, but
+   * each overall section still needs its own key.
+   */
+  keyExtractor?: ?(item: ItemT, index: number) => string,
+  /**
+   * Called once when the scroll position gets within `onEndReachedThreshold` of the rendered
+   * content.
+   */
+  onEndReached?: ?(info: {distanceFromEnd: number, ...}) => void,
+  /**
+   * Note: may have bugs (missing content) in some circumstances - use at your own risk.
+   *
+   * This may improve scroll performance for large lists.
+   */
+  removeClippedSubviews?: boolean,
+};
+
+export type SectionListProps<ItemT, SectionT = DefaultSectionT> = {
+  ...Omit<
+    VirtualizedSectionListProps<ItemT, SectionT>,
+    'getItem' | 'getItemCount' | 'renderItem' | 'keyExtractor',
+  >,
+  ...RequiredSectionListProps<ItemT, SectionT>,
+  ...OptionalSectionListProps<ItemT, SectionT>,
+};
+
+/**
+ * A performant interface for rendering sectioned lists, supporting the most handy features:
+ *
+ *  - Fully cross-platform.
+ *  - Configurable viewability callbacks.
+ *  - List header support.
+ *  - List footer support.
+ *  - Item separator support.
+ *  - Section header support.
+ *  - Section separator support.
+ *  - Heterogeneous data and item rendering support.
+ *  - Pull to Refresh.
+ *  - Scroll loading.
+ *
+ * If you don't need section support and want a simpler interface, use
+ * [`<FlatList>`](https://reactnative.dev/docs/flatlist).
+ *
+ * Simple Examples:
+ *
+ *     <SectionList
+ *       renderItem={({item}) => <ListItem title={item} />}
+ *       renderSectionHeader={({section}) => <Header title={section.title} />}
+ *       sections={[ // homogeneous rendering between sections
+ *         {data: [...], title: ...},
+ *         {data: [...], title: ...},
+ *         {data: [...], title: ...},
+ *       ]}
+ *     />
+ *
+ *     <SectionList
+ *       sections={[ // heterogeneous rendering between sections
+ *         {data: [...], renderItem: ...},
+ *         {data: [...], renderItem: ...},
+ *         {data: [...], renderItem: ...},
+ *       ]}
+ *     />
+ *
+ * This is a convenience wrapper around [`<VirtualizedList>`](docs/virtualizedlist),
+ * and thus inherits its props (as well as those of `ScrollView`) that aren't explicitly listed
+ * here, along with the following caveats:
+ *
+ * - Internal state is not preserved when content scrolls out of the render window. Make sure all
+ *   your data is captured in the item data or external stores like Flux, Redux, or Relay.
+ * - This is a `PureComponent` which means that it will not re-render if `props` remain shallow-
+ *   equal. Make sure that everything your `renderItem` function depends on is passed as a prop
+ *   (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on
+ *   changes. This includes the `data` prop and parent component state.
+ * - In order to constrain memory and enable smooth scrolling, content is rendered asynchronously
+ *   offscreen. This means it's possible to scroll faster than the fill rate and momentarily see
+ *   blank content. This is a tradeoff that can be adjusted to suit the needs of each application,
+ *   and we are working on improving it behind the scenes.
+ * - By default, the list looks for a `key` prop on each item and uses that for the React key.
+ *   Alternatively, you can provide a custom `keyExtractor` prop.
+ *
+ */
+export default class SectionList<
+  ItemT = any,
+  SectionT = DefaultSectionT,
+> extends React.PureComponent<SectionListProps<ItemT, SectionT>> {
+  props: 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. `viewOffset` is a
+   * fixed number of pixels to offset the final target position, e.g. to compensate for sticky
+   * headers.
+   *
+   * Note: cannot scroll to locations outside the render window without specifying the
+   * `getItemLayout` prop.
+   */
+  scrollToLocation(params: ScrollToLocationParamsType) {
+    if (this._wrapperListRef != null) {
+      this._wrapperListRef.scrollToLocation(params);
+    }
+  }
+
+  /**
+   * 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() {
+    const listRef = this._wrapperListRef && this._wrapperListRef.getListRef();
+    listRef && listRef.recordInteraction();
+  }
+
+  /**
+   * Displays the scroll indicators momentarily.
+   *
+   * @platform ios
+   */
+  flashScrollIndicators() {
+    const listRef = this._wrapperListRef && this._wrapperListRef.getListRef();
+    listRef && listRef.flashScrollIndicators();
+  }
+
+  /**
+   * Provides a handle to the underlying scroll responder.
+   */
+  getScrollResponder(): ?ScrollResponderType {
+    const listRef = this._wrapperListRef && this._wrapperListRef.getListRef();
+    if (listRef) {
+      return listRef.getScrollResponder();
+    }
+  }
+
+  getScrollableNode(): any {
+    const listRef = this._wrapperListRef && this._wrapperListRef.getListRef();
+    if (listRef) {
+      return listRef.getScrollableNode();
+    }
+  }
+
+  setNativeProps(props: Object) {
+    const listRef = this._wrapperListRef && this._wrapperListRef.getListRef();
+    if (listRef) {
+      listRef.setNativeProps(props);
+    }
+  }
+
+  render(): React.Node {
+    const {
+      stickySectionHeadersEnabled: _stickySectionHeadersEnabled,
+      ...restProps
+    } = this.props;
+    const stickySectionHeadersEnabled =
+      _stickySectionHeadersEnabled ?? Platform.OS === 'ios';
+    return (
+      /* $FlowFixMe[incompatible-type] Error revealed after improved builtin
+       * React utility types */
+      /* $FlowFixMe[incompatible-type] Error revealed after improved builtin
+       * React utility types */
+      <VirtualizedSectionList
+        {...restProps}
+        stickySectionHeadersEnabled={stickySectionHeadersEnabled}
+        ref={this._captureRef}
+        // $FlowFixMe[missing-local-annot]
+        getItemCount={items => items.length}
+        // $FlowFixMe[missing-local-annot]
+        getItem={(items, index) => items[index]}
+      />
+    );
+  }
+
+  _wrapperListRef: ?React.ElementRef<typeof VirtualizedSectionList>;
+  _captureRef = (ref: ?React.RefOf<VirtualizedSectionList>) => {
+    this._wrapperListRef = ref;
+  };
+}

node_modules/react-native/Libraries/Lists/SectionListModern.js

@@ -0,0 +1,248 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+import type {ScrollResponderType} from '../Components/ScrollView/ScrollView';
+import type {
+  ScrollToLocationParamsType,
+  SectionBase as _SectionBase,
+  SectionData,
+  VirtualizedSectionListProps,
+} from '@react-native/virtualized-lists';
+
+import Platform from '../Utilities/Platform';
+import VirtualizedLists from '@react-native/virtualized-lists';
+import * as React from 'react';
+import {useImperativeHandle, useRef} from 'react';
+
+const VirtualizedSectionList = VirtualizedLists.VirtualizedSectionList;
+
+type DefaultSectionT = {
+  [key: string]: any,
+};
+
+export type SectionBase<
+  SectionItemT,
+  SectionT = DefaultSectionT,
+> = _SectionBase<SectionItemT, SectionT>;
+
+type RequiredProps<ItemT, SectionT = DefaultSectionT> = {
+  /**
+   * The actual data to render, akin to the `data` prop in [`<FlatList>`](https://reactnative.dev/docs/flatlist).
+   *
+   * General shape:
+   *
+   *     sections: $ReadOnlyArray<{
+   *       data: $ReadOnlyArray<SectionItem>,
+   *       renderItem?: ({item: SectionItem, ...}) => ?React.MixedElement,
+   *       ItemSeparatorComponent?: ?ReactClass<{highlighted: boolean, ...}>,
+   *     }>
+   */
+  sections: $ReadOnlyArray<SectionData<ItemT, SectionT>>,
+};
+
+type OptionalProps<ItemT, SectionT = DefaultSectionT> = {
+  /**
+   * Default renderer for every item in every section. Can be over-ridden on a per-section basis.
+   */
+  renderItem?: (info: {
+    item: ItemT,
+    index: number,
+    section: SectionData<ItemT, SectionT>,
+    separators: {
+      highlight: () => void,
+      unhighlight: () => void,
+      updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
+      ...
+    },
+    ...
+  }) => null | React.MixedElement,
+  /**
+   * 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,
+  /**
+   * 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,
+  /**
+   * Reverses the direction of scroll. Uses scale transforms of -1.
+   */
+  inverted?: ?boolean,
+  /**
+   * 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. Note that this sets keys for each item, but
+   * each overall section still needs its own key.
+   */
+  keyExtractor?: ?(item: ItemT, index: number) => string,
+  /**
+   * Called once when the scroll position gets within `onEndReachedThreshold` of the rendered
+   * content.
+   */
+  onEndReached?: ?(info: {distanceFromEnd: number, ...}) => void,
+  /**
+   * Note: may have bugs (missing content) in some circumstances - use at your own risk.
+   *
+   * This may improve scroll performance for large lists.
+   */
+  removeClippedSubviews?: boolean,
+};
+
+export type Props<ItemT, SectionT = DefaultSectionT> = $ReadOnly<{
+  ...Omit<
+    VirtualizedSectionListProps<ItemT, SectionT>,
+    'getItem' | 'getItemCount' | 'renderItem' | 'keyExtractor',
+  >,
+  ...RequiredProps<ItemT, SectionT>,
+  ...OptionalProps<ItemT, SectionT>,
+}>;
+
+/**
+ * A performant interface for rendering sectioned lists, supporting the most handy features:
+ *
+ *  - Fully cross-platform.
+ *  - Configurable viewability callbacks.
+ *  - List header support.
+ *  - List footer support.
+ *  - Item separator support.
+ *  - Section header support.
+ *  - Section separator support.
+ *  - Heterogeneous data and item rendering support.
+ *  - Pull to Refresh.
+ *  - Scroll loading.
+ *
+ * If you don't need section support and want a simpler interface, use
+ * [`<FlatList>`](https://reactnative.dev/docs/flatlist).
+ *
+ * Simple Examples:
+ *
+ *     <SectionList
+ *       renderItem={({item}) => <ListItem title={item} />}
+ *       renderSectionHeader={({section}) => <Header title={section.title} />}
+ *       sections={[ // homogeneous rendering between sections
+ *         {data: [...], title: ...},
+ *         {data: [...], title: ...},
+ *         {data: [...], title: ...},
+ *       ]}
+ *     />
+ *
+ *     <SectionList
+ *       sections={[ // heterogeneous rendering between sections
+ *         {data: [...], renderItem: ...},
+ *         {data: [...], renderItem: ...},
+ *         {data: [...], renderItem: ...},
+ *       ]}
+ *     />
+ *
+ * This is a convenience wrapper around [`<VirtualizedList>`](docs/virtualizedlist),
+ * and thus inherits its props (as well as those of `ScrollView`) that aren't explicitly listed
+ * here, along with the following caveats:
+ *
+ * - Internal state is not preserved when content scrolls out of the render window. Make sure all
+ *   your data is captured in the item data or external stores like Flux, Redux, or Relay.
+ * - This is a `PureComponent` which means that it will not re-render if `props` remain shallow-
+ *   equal. Make sure that everything your `renderItem` function depends on is passed as a prop
+ *   (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on
+ *   changes. This includes the `data` prop and parent component state.
+ * - In order to constrain memory and enable smooth scrolling, content is rendered asynchronously
+ *   offscreen. This means it's possible to scroll faster than the fill rate and momentarily see
+ *   blank content. This is a tradeoff that can be adjusted to suit the needs of each application,
+ *   and we are working on improving it behind the scenes.
+ * - By default, the list looks for a `key` prop on each item and uses that for the React key.
+ *   Alternatively, you can provide a custom `keyExtractor` prop.
+ *
+ */
+const SectionList: component(
+  ref?: React.RefSetter<any>,
+  ...Props<any, DefaultSectionT>
+) = ({
+  ref,
+  ...props
+}: {
+  ref?: React.RefSetter<any>,
+  ...Props<any, DefaultSectionT>,
+}) => {
+  const propsWithDefaults = {
+    stickySectionHeadersEnabled: Platform.OS === 'ios',
+    ...props,
+  };
+
+  const wrapperRef = useRef<?React.ElementRef<typeof VirtualizedSectionList>>();
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      /**
+       * 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. `viewOffset` is a
+       * fixed number of pixels to offset the final target position, e.g. to compensate for sticky
+       * headers.
+       *
+       * Note: cannot scroll to locations outside the render window without specifying the
+       * `getItemLayout` prop.
+       */
+      scrollToLocation(params: ScrollToLocationParamsType) {
+        wrapperRef.current?.scrollToLocation(params);
+      },
+
+      /**
+       * 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() {
+        wrapperRef.current?.getListRef()?.recordInteraction();
+      },
+
+      /**
+       * Displays the scroll indicators momentarily.
+       *
+       * @platform ios
+       */
+      flashScrollIndicators() {
+        wrapperRef.current?.getListRef()?.flashScrollIndicators();
+      },
+
+      /**
+       * Provides a handle to the underlying scroll responder.
+       */
+      getScrollResponder(): ?ScrollResponderType {
+        wrapperRef.current?.getListRef()?.getScrollResponder();
+      },
+
+      getScrollableNode(): any {
+        wrapperRef.current?.getListRef()?.getScrollableNode();
+      },
+
+      setNativeProps(nativeProps: Object) {
+        wrapperRef.current?.getListRef()?.setNativeProps(nativeProps);
+      },
+    }),
+    [wrapperRef],
+  );
+
+  return (
+    <VirtualizedSectionList
+      {...propsWithDefaults}
+      ref={wrapperRef}
+      getItemCount={items => items.length}
+      getItem={(items, index) => items[index]}
+    />
+  );
+};
+
+export default SectionList;

node_modules/react-native/Libraries/Lists/ViewabilityHelper.js

@@ -0,0 +1,25 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+export type {
+  ListViewToken as ViewToken,
+  ViewabilityConfig,
+  ViewabilityConfigCallbackPair,
+} from '@react-native/virtualized-lists';
+
+import VirtualizedLists from '@react-native/virtualized-lists';
+
+type ViewabilityHelperType = typeof VirtualizedLists.ViewabilityHelper;
+const ViewabilityHelper: ViewabilityHelperType =
+  VirtualizedLists.ViewabilityHelper;
+
+export default ViewabilityHelper;

node_modules/react-native/Libraries/Lists/VirtualizeUtils.js

@@ -0,0 +1,16 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+import VirtualizedLists from '@react-native/virtualized-lists';
+
+type KeyExtractorType = typeof VirtualizedLists.keyExtractor;
+export const keyExtractor: KeyExtractorType = VirtualizedLists.keyExtractor;

node_modules/react-native/Libraries/Lists/VirtualizedList.js

@@ -0,0 +1,26 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+import VirtualizedLists from '@react-native/virtualized-lists';
+
+type VirtualizedListType = typeof VirtualizedLists.VirtualizedList;
+const VirtualizedListComponent: VirtualizedListType =
+  VirtualizedLists.VirtualizedList;
+
+export type {
+  ListRenderItemInfo,
+  ListRenderItem,
+  ListViewToken,
+  Separators,
+  VirtualizedListProps,
+} from '@react-native/virtualized-lists';
+export default VirtualizedListComponent;

node_modules/react-native/Libraries/Lists/VirtualizedListContext.js

@@ -0,0 +1,18 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+import VirtualizedLists from '@react-native/virtualized-lists';
+
+type VirtualizedListContextResetterType =
+  typeof VirtualizedLists.VirtualizedListContextResetter;
+export const VirtualizedListContextResetter: VirtualizedListContextResetterType =
+  VirtualizedLists.VirtualizedListContextResetter;

node_modules/react-native/Libraries/Lists/VirtualizedSectionList.js

@@ -0,0 +1,25 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+import VirtualizedLists from '@react-native/virtualized-lists';
+
+type VirtualizedSectionListType =
+  typeof VirtualizedLists.VirtualizedSectionList;
+const VirtualizedSectionList: VirtualizedSectionListType =
+  VirtualizedLists.VirtualizedSectionList;
+
+export type {
+  SectionBase,
+  ScrollToLocationParamsType,
+  VirtualizedSectionListProps,
+} from '@react-native/virtualized-lists';
+export default VirtualizedSectionList;