From 17ce59e4ca4e75e47557af84ff75aa9eaec7a5a7 Mon Sep 17 00:00:00 2001 From: Pranav Yadav Date: Mon, 21 Nov 2022 15:30:05 +0000 Subject: [PATCH] Feat: Move `FlatList`s 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] --- .../Animated/components/AnimatedFlatList.js | 2 +- .../components/AnimatedSectionList.js | 2 +- Libraries/Inspector/NetworkOverlay.js | 2 +- index.js | 11 +- .../flat-lists}/Lists/FlatList.d.ts | 11 +- .../flat-lists}/Lists/FlatList.js | 25 +- .../flat-lists}/Lists/FlatList.js.flow | 15 +- .../flat-lists}/Lists/SectionList.d.ts | 2 +- .../flat-lists}/Lists/SectionList.js | 13 +- .../flat-lists}/Lists/SectionListModern.js | 15 +- .../Lists/__flowtests__/FlatList-flowtest.js | 2 +- .../__flowtests__/SectionList-flowtest.js | 2 +- .../Lists/__tests__/FlatList-test.js | 6 +- .../Lists/__tests__/SectionList-test.js | 2 +- .../__snapshots__/FlatList-test.js.snap | 0 .../__snapshots__/SectionList-test.js.snap | 0 packages/flat-lists/index.d.ts | 10 + packages/flat-lists/index.js | 26 ++ packages/flat-lists/package.json | 17 ++ .../js/examples/FlatList/FlatList-basic.js | 2 +- .../js/examples/FlatList/FlatList-nested.js | 2 +- .../FlatList-onViewableItemsChanged.js | 2 +- packages/rn-tester/package.json | 3 +- types/__typetests__/index.tsx | 266 ------------------ types/index.d.ts | 2 - types/public/DeprecatedPropertiesAlias.d.ts | 8 - 26 files changed, 115 insertions(+), 333 deletions(-) rename {Libraries => packages/flat-lists}/Lists/FlatList.d.ts (96%) rename {Libraries => packages/flat-lists}/Lists/FlatList.js (97%) rename {Libraries => packages/flat-lists}/Lists/FlatList.js.flow (83%) rename {Libraries => packages/flat-lists}/Lists/SectionList.d.ts (99%) rename {Libraries => packages/flat-lists}/Lists/SectionList.js (96%) rename {Libraries => packages/flat-lists}/Lists/SectionListModern.js (96%) rename {Libraries => packages/flat-lists}/Lists/__flowtests__/FlatList-flowtest.js (100%) rename {Libraries => packages/flat-lists}/Lists/__flowtests__/SectionList-flowtest.js (100%) rename {Libraries => packages/flat-lists}/Lists/__tests__/FlatList-test.js (97%) rename {Libraries => packages/flat-lists}/Lists/__tests__/SectionList-test.js (100%) rename {Libraries => packages/flat-lists}/Lists/__tests__/__snapshots__/FlatList-test.js.snap (100%) rename {Libraries => packages/flat-lists}/Lists/__tests__/__snapshots__/SectionList-test.js.snap (100%) create mode 100644 packages/flat-lists/index.d.ts create mode 100644 packages/flat-lists/index.js create mode 100644 packages/flat-lists/package.json diff --git a/Libraries/Animated/components/AnimatedFlatList.js b/Libraries/Animated/components/AnimatedFlatList.js index afe8bd88061cec..bee9dbddae7128 100644 --- a/Libraries/Animated/components/AnimatedFlatList.js +++ b/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'; /** diff --git a/Libraries/Animated/components/AnimatedSectionList.js b/Libraries/Animated/components/AnimatedSectionList.js index 955691f6e2b278..5d66cd01283804 100644 --- a/Libraries/Animated/components/AnimatedSectionList.js +++ b/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'; /** diff --git a/Libraries/Inspector/NetworkOverlay.js b/Libraries/Inspector/NetworkOverlay.js index 169318cea27f28..e10915d93e6114 100644 --- a/Libraries/Inspector/NetworkOverlay.js +++ b/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; diff --git a/index.js b/index.js index fd55a216d1fba5..b13409992b7a77 100644 --- a/index.js +++ b/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', diff --git a/Libraries/Lists/FlatList.d.ts b/packages/flat-lists/Lists/FlatList.d.ts similarity index 96% rename from Libraries/Lists/FlatList.d.ts rename to packages/flat-lists/Lists/FlatList.d.ts index 0cb4302f1ee080..c4cdff4832556a 100644 --- a/Libraries/Lists/FlatList.d.ts +++ b/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 extends VirtualizedListProps { /** diff --git a/Libraries/Lists/FlatList.js b/packages/flat-lists/Lists/FlatList.js similarity index 97% rename from Libraries/Lists/FlatList.js rename to packages/flat-lists/Lists/FlatList.js index 3da7714a670b29..209519dc9138cf 100644 --- a/Libraries/Lists/FlatList.js +++ b/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'); diff --git a/Libraries/Lists/FlatList.js.flow b/packages/flat-lists/Lists/FlatList.js.flow similarity index 83% rename from Libraries/Lists/FlatList.js.flow rename to packages/flat-lists/Lists/FlatList.js.flow index 4a0ee0be1d7269..23fc0f3fdb5514 100644 --- a/Libraries/Lists/FlatList.js.flow +++ b/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 = {| /** diff --git a/Libraries/Lists/SectionList.d.ts b/packages/flat-lists/Lists/SectionList.d.ts similarity index 99% rename from Libraries/Lists/SectionList.d.ts rename to packages/flat-lists/Lists/SectionList.d.ts index 48c24b1a60f9d2..e5457df66458c9 100644 --- a/Libraries/Lists/SectionList.d.ts +++ b/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, diff --git a/Libraries/Lists/SectionList.js b/packages/flat-lists/Lists/SectionList.js similarity index 96% rename from Libraries/Lists/SectionList.js rename to packages/flat-lists/Lists/SectionList.js index 3520b31eca9829..40213bcefc6ce2 100644 --- a/Libraries/Lists/SectionList.js +++ b/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; diff --git a/Libraries/Lists/SectionListModern.js b/packages/flat-lists/Lists/SectionListModern.js similarity index 96% rename from Libraries/Lists/SectionListModern.js rename to packages/flat-lists/Lists/SectionListModern.js index c7856e13d9a666..fbb088ff02228e 100644 --- a/Libraries/Lists/SectionListModern.js +++ b/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; diff --git a/Libraries/Lists/__flowtests__/FlatList-flowtest.js b/packages/flat-lists/Lists/__flowtests__/FlatList-flowtest.js similarity index 100% rename from Libraries/Lists/__flowtests__/FlatList-flowtest.js rename to packages/flat-lists/Lists/__flowtests__/FlatList-flowtest.js index fb62a18ca4f430..0935b1a2cf1587 100644 --- a/Libraries/Lists/__flowtests__/FlatList-flowtest.js +++ b/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, ...}, diff --git a/Libraries/Lists/__flowtests__/SectionList-flowtest.js b/packages/flat-lists/Lists/__flowtests__/SectionList-flowtest.js similarity index 100% rename from Libraries/Lists/__flowtests__/SectionList-flowtest.js rename to packages/flat-lists/Lists/__flowtests__/SectionList-flowtest.js index 9f878d89b0607d..0860556f489b29 100644 --- a/Libraries/Lists/__flowtests__/SectionList-flowtest.js +++ b/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, ...}, diff --git a/Libraries/Lists/__tests__/FlatList-test.js b/packages/flat-lists/Lists/__tests__/FlatList-test.js similarity index 97% rename from Libraries/Lists/__tests__/FlatList-test.js rename to packages/flat-lists/Lists/__tests__/FlatList-test.js index bc7c9d1faf16cc..7d3f8d15993244 100644 --- a/Libraries/Lists/__tests__/FlatList-test.js +++ b/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 ; diff --git a/Libraries/Lists/__tests__/SectionList-test.js b/packages/flat-lists/Lists/__tests__/SectionList-test.js similarity index 100% rename from Libraries/Lists/__tests__/SectionList-test.js rename to packages/flat-lists/Lists/__tests__/SectionList-test.js index 9eb6e340e30d16..2064f2e50f7e43 100644 --- a/Libraries/Lists/__tests__/SectionList-test.js +++ b/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', () => { diff --git a/Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap b/packages/flat-lists/Lists/__tests__/__snapshots__/FlatList-test.js.snap similarity index 100% rename from Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap rename to packages/flat-lists/Lists/__tests__/__snapshots__/FlatList-test.js.snap diff --git a/Libraries/Lists/__tests__/__snapshots__/SectionList-test.js.snap b/packages/flat-lists/Lists/__tests__/__snapshots__/SectionList-test.js.snap similarity index 100% rename from Libraries/Lists/__tests__/__snapshots__/SectionList-test.js.snap rename to packages/flat-lists/Lists/__tests__/__snapshots__/SectionList-test.js.snap diff --git a/packages/flat-lists/index.d.ts b/packages/flat-lists/index.d.ts new file mode 100644 index 00000000000000..7c3818a661781f --- /dev/null +++ b/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'; diff --git a/packages/flat-lists/index.js b/packages/flat-lists/index.js new file mode 100644 index 00000000000000..d4cb0f61ac19da --- /dev/null +++ b/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'); + }, +}; diff --git a/packages/flat-lists/package.json b/packages/flat-lists/package.json new file mode 100644 index 00000000000000..1ef69f22c755aa --- /dev/null +++ b/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": "git@github.com: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" + } + } diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-basic.js b/packages/rn-tester/js/examples/FlatList/FlatList-basic.js index 64f2800a355451..706c6136c64344 100644 --- a/packages/rn-tester/js/examples/FlatList/FlatList-basic.js +++ b/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'; diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-nested.js b/packages/rn-tester/js/examples/FlatList/FlatList-nested.js index f2d1282a5a72b1..29888163c1b680 100644 --- a/packages/rn-tester/js/examples/FlatList/FlatList-nested.js +++ b/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'; diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged.js b/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged.js index 76e29fac105fe1..f65111e16596ba 100644 --- a/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged.js +++ b/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'; diff --git a/packages/rn-tester/package.json b/packages/rn-tester/package.json index 6f4b740cd47400..77d4619d18e337 100644 --- a/packages/rn-tester/package.json +++ b/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", diff --git a/types/__typetests__/index.tsx b/types/__typetests__/index.tsx index 5e95a30edc5c10..4a755534714f14 100644 --- a/types/__typetests__/index.tsx +++ b/types/__typetests__/index.tsx @@ -632,272 +632,6 @@ InteractionManager.runAfterInteractions(() => { // ... }).then(() => 'done'); -export class FlatListTest extends React.Component, {}> { - list: FlatList | null = null; - - componentDidMount(): void { - if (this.list) { - this.list.flashScrollIndicators(); - } - } - - _renderItem = (rowData: any) => { - return ( - - {rowData.item} - - ); - }; - _cellRenderer = ({children}: any) => { - return {children}; - }; - - _renderSeparator = () => ( - - ); - - render() { - return ( - (this.list = list)} - data={[1, 2, 3, 4, 5]} - renderItem={this._renderItem} - ItemSeparatorComponent={this._renderSeparator} - ListFooterComponent={null} - ListFooterComponentStyle={[ - {padding: 8}, - [{backgroundColor: 'transparent'}], - ]} - ListHeaderComponent={null} - ListHeaderComponentStyle={[ - {padding: 8}, - [{backgroundColor: 'transparent'}], - ]} - CellRendererComponent={this._cellRenderer} - fadingEdgeLength={200} - /> - ); - } -} - -export class SectionListTest extends React.Component< - SectionListProps, - {} -> { - myList: React.RefObject>; - - constructor(props: SectionListProps) { - super(props); - this.myList = React.createRef(); - } - - scrollMe = () => { - this.myList.current && - this.myList.current.scrollToLocation({itemIndex: 0, sectionIndex: 1}); - }; - - render() { - const sections = [ - { - title: 'Section 1', - data: ['A', 'B', 'C', 'D', 'E'], - }, - { - title: 'Section 2', - data: ['A2', 'B2', 'C2', 'D2', 'E2'], - renderItem: (info: {item: string}) => ( - - {info.item} - - ), - }, - ]; - - const cellRenderer = ({children}: any) => { - return {children}; - }; - - return ( - -