Feat: Move FlatLists to @react-native/flat-lists package

Summary: This diff moves `FlatList` and `SectionList` to a new package `@react-native/flat-lists`.
         This is a first step towards moving all the `FlatList`-related code to a separate package.
         This will allow us to make changes to the `FlatList` implementation without affecting the rest of the React Native codebase.

Changelog:  [General] [Changed] - Move `FlatList`s to `@react-native/flat-lists` package.
            `FlatList` and `SectionList` are now available in `@react-native/flat-lists` package.
            **Warning**: This is a breaking change, and you will need to update your imports to use the new package.

Libraries/Animated/components/AnimatedFlatList.js

@@ -10,7 +10,7 @@
 
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
-import FlatList from '../../Lists/FlatList';
+import FlatList from '@react-native/flat-lists/Lists/FlatList';
 import createAnimatedComponent from '../createAnimatedComponent';
 import * as React from 'react';
 

Libraries/Animated/components/AnimatedSectionList.js

@@ -10,7 +10,7 @@
 
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
-import SectionList from '../../Lists/SectionList';
+import SectionList from '@react-native/flat-lists/Lists/FlatList';
 import createAnimatedComponent from '../createAnimatedComponent';
 import * as React from 'react';
 

Libraries/Inspector/NetworkOverlay.js

@@ -15,7 +15,7 @@ import type {RenderItemProps} from '../Lists/VirtualizedList';
 const ScrollView = require('../Components/ScrollView/ScrollView');
 const TouchableHighlight = require('../Components/Touchable/TouchableHighlight');
 const View = require('../Components/View/View');
-const FlatList = require('../Lists/FlatList');
+const FlatList = require('@react-native/flat-lists/Lists/FlatList');
 const XHRInterceptor = require('../Network/XHRInterceptor');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Text = require('../Text/Text');

Libraries/Lists/VirtualizedList.js

@@ -11,7 +11,7 @@
 import type {ScrollResponderType} from '../Components/ScrollView/ScrollView';
 import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {LayoutEvent, ScrollEvent} from '../Types/CoreEventTypes';
-import type {ViewToken} from './ViewabilityHelper';
+import type {ViewToken} from '@react-native/flat-lists/Lists/ViewabilityHelper';
 import type {
   FrameMetricProps,
   Item,
@@ -30,11 +30,11 @@ import flattenStyle from '../StyleSheet/flattenStyle';
 import StyleSheet from '../StyleSheet/StyleSheet';
 import clamp from '../Utilities/clamp';
 import infoLog from '../Utilities/infoLog';
-import {CellRenderMask} from './CellRenderMask';
-import ChildListCollection from './ChildListCollection';
-import FillRateHelper from './FillRateHelper';
-import StateSafePureComponent from './StateSafePureComponent';
-import ViewabilityHelper from './ViewabilityHelper';
+import {CellRenderMask} from '@react-native/flat-lists/Lists/CellRenderMask';
+import ChildListCollection from '@react-native/flat-lists/Lists/ChildListCollection';
+import FillRateHelper from '@react-native/flat-lists/Lists/FillRateHelper';
+import StateSafePureComponent from '@react-native/flat-lists/Lists/StateSafePureComponent';
+import ViewabilityHelper from '@react-native/flat-lists/Lists/ViewabilityHelper';
 import CellRenderer from './VirtualizedListCellRenderer';
 import {
   VirtualizedListCellContextProvider,

Libraries/Lists/VirtualizedListCellRenderer.js

@@ -10,7 +10,7 @@
 
 import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {FocusEvent, LayoutEvent} from '../Types/CoreEventTypes';
-import type FillRateHelper from './FillRateHelper';
+import type FillRateHelper from '@react-native/flat-lists/Lists/FillRateHelper';
 import type {RenderItemType} from './VirtualizedListProps';
 
 import View from '../Components/View/View';

Libraries/Lists/VirtualizedListProps.js

@@ -14,7 +14,7 @@ import type {
   ViewabilityConfig,
   ViewabilityConfigCallbackPair,
   ViewToken,
-} from './ViewabilityHelper';
+} from '@react-native/flat-lists/Lists/ViewabilityHelper';
 
 import * as React from 'react';
 

Libraries/Lists/VirtualizedSectionList.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {ViewToken} from './ViewabilityHelper';
+import type {ViewToken} from '@react-native/flat-lists/Lists/ViewabilityHelper';
 
 import View from '../Components/View/View';
 import VirtualizedList from './VirtualizedList';

index.js

@@ -16,7 +16,10 @@ import typeof ActivityIndicator from './Libraries/Components/ActivityIndicator/A
 import typeof Button from './Libraries/Components/Button';
 import typeof DatePickerIOS from './Libraries/Components/DatePicker/DatePickerIOS';
 import typeof DrawerLayoutAndroid from './Libraries/Components/DrawerAndroid/DrawerLayoutAndroid';
-import typeof FlatList from './Libraries/Lists/FlatList';
+import {
+  typeof FlatList,
+  typeof SectionList,
+} from '@react-native/flat-lists/Lists';
 import typeof Image from './Libraries/Image/Image';
 import typeof ImageBackground from './Libraries/Image/ImageBackground';
 import typeof InputAccessoryView from './Libraries/Components/TextInput/InputAccessoryView';
@@ -27,7 +30,6 @@ import typeof ProgressBarAndroid from './Libraries/Components/ProgressBarAndroid
 import typeof RefreshControl from './Libraries/Components/RefreshControl/RefreshControl';
 import typeof SafeAreaView from './Libraries/Components/SafeAreaView/SafeAreaView';
 import typeof ScrollView from './Libraries/Components/ScrollView/ScrollView';
-import typeof SectionList from './Libraries/Lists/SectionList';
 import typeof Slider from './Libraries/Components/Slider/Slider';
 import typeof StatusBar from './Libraries/Components/StatusBar/StatusBar';
 import typeof Switch from './Libraries/Components/Switch/Switch';
@@ -128,7 +130,10 @@ module.exports = {
     return require('./Libraries/Components/DrawerAndroid/DrawerLayoutAndroid');
   },
   get FlatList(): FlatList {
-    return require('./Libraries/Lists/FlatList');
+    return require('@react-native/flat-lists/Lists/FlatList');
+  },
+  get SectionList(): SectionList {
+    return require('@react-native/flat-lists/Lists/SectionList').default;
   },
   get Image(): Image {
     return require('./Libraries/Image/Image');
@@ -168,9 +173,6 @@ module.exports = {
   get ScrollView(): ScrollView {
     return require('./Libraries/Components/ScrollView/ScrollView');
   },
-  get SectionList(): SectionList {
-    return require('./Libraries/Lists/SectionList').default;
-  },
   get Slider(): Slider {
     warnOnce(
       'slider-moved',

Libraries/Lists/FillRateHelper.js → packages/flat-lists/Lists/FillRateHelper.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import type {FrameMetricProps} from './VirtualizedListProps';
+import type {FrameMetricProps} from 'react-native/Libraries/Lists/VirtualizedListProps';
 
 export type FillRateInfo = Info;
 

Libraries/Lists/FlatList.d.ts → packages/flat-lists/Lists/FlatList.d.ts

@@ -12,11 +12,11 @@ import type {
   ListRenderItem,
   ViewToken,
   VirtualizedListProps,
-} from './VirtualizedList';
-import type {ScrollViewComponent} from '../Components/ScrollView/ScrollView';
-import {StyleProp} from '../StyleSheet/StyleSheet';
-import {ViewStyle} from '../StyleSheet/StyleSheetTypes';
-import {View} from '../Components/View/View';
+} from '../../../Libraries/Lists/VirtualizedList';
+import type {ScrollViewComponent} from '../../../Libraries/Components/ScrollView/ScrollView';
+import {StyleProp} from '../../../Libraries/StyleSheet/StyleSheet';
+import {ViewStyle} from '../../../Libraries/StyleSheet/StyleSheetTypes';
+import {View} from '../../../Libraries/Components/View/View';
 
 export interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
   /**

Libraries/Lists/FlatList.js → packages/flat-lists/Lists/FlatList.js

@@ -8,23 +8,26 @@
  * @format
  */
 
-import typeof ScrollViewNativeComponent from '../Components/ScrollView/ScrollViewNativeComponent';
-import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+import typeof ScrollViewNativeComponent from 'react-native/Libraries/Components/ScrollView/ScrollViewNativeComponent';
+import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
 import type {
   ViewabilityConfigCallbackPair,
   ViewToken,
 } from './ViewabilityHelper';
-import type {RenderItemProps, RenderItemType} from './VirtualizedList';
+import type {
+  RenderItemProps,
+  RenderItemType,
+} from 'react-native/Libraries/Lists/VirtualizedList';
 
-import {type ScrollResponderType} from '../Components/ScrollView/ScrollView';
-import VirtualizedList from './VirtualizedList';
-import {keyExtractor as defaultKeyExtractor} from './VirtualizeUtils';
+import {type ScrollResponderType} from 'react-native/Libraries/Components/ScrollView/ScrollView';
+import VirtualizedList from 'react-native/Libraries/Lists/VirtualizedList';
+import {keyExtractor as defaultKeyExtractor} from 'react-native/Libraries/Lists/VirtualizeUtils';
 import memoizeOne from 'memoize-one';
 
-const View = require('../Components/View/View');
-const StyleSheet = require('../StyleSheet/StyleSheet');
-const deepDiffer = require('../Utilities/differ/deepDiffer');
-const Platform = require('../Utilities/Platform');
+const View = require('react-native/Libraries/Components/View/View');
+const StyleSheet = require('react-native/Libraries/StyleSheet/StyleSheet');
+const deepDiffer = require('react-native/Libraries/Utilities/differ/deepDiffer');
+const Platform = require('react-native/Libraries/Utilities/Platform');
 const invariant = require('invariant');
 const React = require('react');
 

Libraries/Lists/FlatList.js.flow → packages/flat-lists/Lists/FlatList.js.flow

@@ -9,17 +9,20 @@
  */
 
 const React = require('react');
-const View = require('../Components/View/View');
+const View = require('react-native/Libraries/Components/View/View');
 
-import typeof ScrollViewNativeComponent from '../Components/ScrollView/ScrollViewNativeComponent';
-import {type ScrollResponderType} from '../Components/ScrollView/ScrollView';
-import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+import typeof ScrollViewNativeComponent from 'react-native/Libraries/Components/ScrollView/ScrollViewNativeComponent';
+import {type ScrollResponderType} from 'react-native/Libraries/Components/ScrollView/ScrollView';
+import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
 import type {
   ViewToken,
   ViewabilityConfigCallbackPair,
 } from './ViewabilityHelper';
-import type {RenderItemType, RenderItemProps} from './VirtualizedList';
-import typeof VirtualizedList from './VirtualizedList';
+import type {
+  RenderItemType,
+  RenderItemProps,
+} from 'react-native/Libraries/Lists/VirtualizedList';
+import typeof VirtualizedList from 'react-native/Libraries/Lists/VirtualizedList';
 
 type RequiredProps<ItemT> = {|
   /**

Libraries/Lists/SectionList.js → packages/flat-lists/Lists/SectionList.js

@@ -9,16 +9,15 @@
  */
 
 'use strict';
-
-import type {ScrollResponderType} from '../Components/ScrollView/ScrollView';
+import type {ScrollResponderType} from 'react-native/Libraries/Components/ScrollView/ScrollView';
 import type {
   Props as VirtualizedSectionListProps,
   ScrollToLocationParamsType,
   SectionBase as _SectionBase,
-} from './VirtualizedSectionList';
+} from 'react-native/Libraries/Lists/VirtualizedSectionList';
 
-import Platform from '../Utilities/Platform';
-import VirtualizedSectionList from './VirtualizedSectionList';
+import Platform from 'react-native/Libraries/Utilities/Platform';
+import VirtualizedSectionList from 'react-native/Libraries/Lists/VirtualizedSectionList';
 import * as React from 'react';
 
 type Item = any;

Libraries/Lists/SectionListModern.js → packages/flat-lists/Lists/SectionListModern.js

@@ -10,16 +10,16 @@
 
 'use strict';
 
-import type {ScrollResponderType} from '../Components/ScrollView/ScrollView';
+import type {ScrollResponderType} from 'react-native/Libraries/Components/ScrollView/ScrollView';
 import type {
   Props as VirtualizedSectionListProps,
   ScrollToLocationParamsType,
   SectionBase as _SectionBase,
-} from './VirtualizedSectionList';
+} from 'react-native/Libraries/Lists/VirtualizedSectionList';
 import type {AbstractComponent, Element, ElementRef} from 'react';
 
-import Platform from '../Utilities/Platform';
-import VirtualizedSectionList from './VirtualizedSectionList';
+import Platform from 'react-native/Libraries/Utilities/Platform';
+import VirtualizedSectionList from 'react-native/Libraries/Lists/VirtualizedSectionList';
 import React, {forwardRef, useImperativeHandle, useRef} from 'react';
 
 type Item = any;

Libraries/Lists/ViewabilityHelper.js → packages/flat-lists/Lists/ViewabilityHelper.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import type {FrameMetricProps} from './VirtualizedListProps';
+import type {FrameMetricProps} from '../../../Libraries/Lists/VirtualizedListProps';
 
 const invariant = require('invariant');
 

packages/flat-lists/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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
+ */
+
+export * from './Lists/FlatList';

packages/flat-lists/index.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
+ * @format
+ */
+
+'use strict';
+
+import typeof FlatList from './Lists/FlatList';
+import typeof SectionList from './Lists/SectionList';
+
+module.exports = {
+  get FlatList(): FlatList {
+    return require('./Lists/FlatList');
+  },
+  get SectionList(): SectionList {
+    return require('./Lists/SectionList').default;
+  },
+  get SectionListModern(): $FlowFixMe {
+    return require('./Lists/SectionListModern');
+  },
+};

packages/flat-lists/package.json

@@ -0,0 +1,16 @@
+{
+    "name": "@react-native/flat-lists",
+    "version": "1.0.0",
+    "description": "Flat lists for React Native.",
+    "repository": {
+      "type": "git",
+      "url": "[email protected]:facebook/react-native.git",
+      "directory": "packages/flat-lists"
+    },
+    "license": "MIT",
+    "peerDependencies": {
+      "react": "18.2.0",
+      "react-native": "*",
+      "react-test-renderer": "18.2.0"
+    }
+  }

packages/rn-tester/js/examples/FlatList/FlatList-basic.js

@@ -11,7 +11,7 @@
 'use strict';
 
 import type {AnimatedComponentType} from 'react-native/Libraries/Animated/createAnimatedComponent';
-import typeof FlatListType from 'react-native/Libraries/Lists/FlatList';
+import typeof FlatListType from '@react-native/flat-lists/Lists/FlatList';
 import type {RenderItemProps} from 'react-native/Libraries/Lists/VirtualizedListProps';
 
 import type {RNTesterModuleExample} from '../../types/RNTesterTypes';

packages/rn-tester/js/examples/FlatList/FlatList-nested.js

@@ -16,7 +16,7 @@ import {FlatList, StyleSheet, Text, View} from 'react-native';
 
 import RNTesterPage from '../../components/RNTesterPage';
 import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
-import type {ViewToken} from '../../../../../Libraries/Lists/ViewabilityHelper';
+import type {ViewToken} from '@react-native/flat-lists/Lists/ViewabilityHelper';
 
 type OuterItem = 'head' | 'vertical' | 'horizontal' | 'filler';
 

packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import type {ViewToken} from '../../../../../Libraries/Lists/ViewabilityHelper';
+import type {ViewToken} from '@react-native/flat-lists/Lists/ViewabilityHelper';
 import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 
 import BaseFlatListExample from './BaseFlatListExample';

packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged.js

@@ -8,7 +8,7 @@
  * @flow
  */
 
-import type {ViewToken} from 'react-native/Libraries/Lists/ViewabilityHelper';
+import type {ViewToken} from '@react-native/flat-lists/Lists/ViewabilityHelper';
 
 import SectionListBaseExample from './SectionListBaseExample';
 import * as React from 'react';

packages/rn-tester/package.json

@@ -25,7 +25,8 @@
   },
   "peerDependencies": {
     "react": "18.2.0",
-    "react-native": "*"
+    "react-native": "*",
+    "@react-native/virtualized-lists":"*"
   },
   "devDependencies": {
     "connect": "^3.6.5",