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.

[TEMP]: Skipping CI temp.

[skip ci]

Libraries/Animated/components/AnimatedFlatList.js

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

Libraries/Animated/components/AnimatedSectionList.js

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

Libraries/Inspector/NetworkOverlay.js

@@ -15,11 +15,11 @@ 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 XHRInterceptor = require('../Network/XHRInterceptor');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Text = require('../Text/Text');
 const WebSocketInterceptor = require('../WebSocket/WebSocketInterceptor');
+const FlatList = require('@react-native/flat-lists/Lists/FlatList');
 const React = require('react');
 
 const LISTVIEW_CELL_HEIGHT = 15;

index.js

@@ -16,7 +16,7 @@ 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';
 import typeof Image from './Libraries/Image/Image';
 import typeof ImageBackground from './Libraries/Image/ImageBackground';
 import typeof InputAccessoryView from './Libraries/Components/TextInput/InputAccessoryView';
@@ -27,7 +27,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 +127,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 +170,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/FlatList.d.ts → packages/flat-lists/Lists/FlatList.d.ts

@@ -12,11 +12,12 @@ 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 '@react-native/virtualized-lists';
+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';
+import type {ViewStyleProp} from 'react-native';
 import type {
+  RenderItemProps,
+  RenderItemType,
   ViewabilityConfigCallbackPair,
   ViewToken,
-} from './ViewabilityHelper';
-import type {RenderItemProps, RenderItemType} from './VirtualizedList';
+} from '@react-native/virtualized-lists';
 
-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,
+  keyExtractor as defaultKeyExtractor,
+} from '@react-native/virtualized-lists';
 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,18 @@
  */
 
 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 {
+  RenderItemType,
+  RenderItemProps,
   ViewToken,
   ViewabilityConfigCallbackPair,
-} from './ViewabilityHelper';
-import type {RenderItemType, RenderItemProps} from './VirtualizedList';
-import typeof VirtualizedList from './VirtualizedList';
+} from '@react-native/virtualized-lists';
+import typeof VirtualizedList from '@react-native/virtualized-lists/List/VirtualizedList';
 
 type RequiredProps<ItemT> = {|
   /**

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

@@ -11,7 +11,7 @@ import type * as React from 'react';
 import type {
   ListRenderItemInfo,
   VirtualizedListWithoutRenderItemProps,
-} from './VirtualizedList';
+} from '@react-native/virtualized-lists';
 import type {
   ScrollView,
   ScrollViewProps,

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

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

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

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

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

@@ -10,8 +10,8 @@
 
 'use strict';
 
-const FlatList = require('../FlatList');
 const React = require('react');
+const FlatList = require('../FlatList');
 
 function renderMyListItem(info: {
   item: {title: string, ...},

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

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

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

@@ -10,8 +10,8 @@
 
 'use strict';
 
-const FlatList = require('../FlatList');
 const React = require('react');
+const FlatList = require('../FlatList');
 const ReactTestRenderer = require('react-test-renderer');
 
 describe('FlatList', () => {
@@ -94,7 +94,7 @@ describe('FlatList', () => {
   });
   it('getNativeScrollRef for case where it returns a native view', () => {
     jest.resetModules();
-    jest.unmock('../../Components/ScrollView/ScrollView');
+    jest.unmock('react-native/Libraries/Components/ScrollView/ScrollView');
 
     const listRef = React.createRef(null);
 
@@ -127,7 +127,7 @@ describe('FlatList', () => {
 
   it('getNativeScrollRef for case where it returns a native scroll view', () => {
     jest.resetModules();
-    jest.unmock('../../Components/ScrollView/ScrollView');
+    jest.unmock('react-native/Libraries/Components/ScrollView/ScrollView');
 
     function ListItemComponent({item}) {
       return <item value={item.key} />;

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

@@ -10,8 +10,8 @@
 
 'use strict';
 
-import SectionList from '../SectionList';
 import * as React from 'react';
+import SectionList from '../SectionList';
 import ReactTestRenderer from 'react-test-renderer';
 
 describe('SectionList', () => {

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,17 @@
+{
+    "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-native/virtualized-lists": "*",
+      "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/Libraries/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/Libraries/Lists/ViewabilityHelper';
 import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 
 import BaseFlatListExample from './BaseFlatListExample';

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",