diff --git a/packages/react-native/ReactNativeApi.d.ts b/packages/react-native/ReactNativeApi.d.ts index bfebffaa6fc..4d477137c89 100644 --- a/packages/react-native/ReactNativeApi.d.ts +++ b/packages/react-native/ReactNativeApi.d.ts @@ -4,7 +4,7 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * - * @generated SignedSource<<20bbe8284af4b8863a39651a46b7a53a>> + * @generated SignedSource<> * * This file was generated by scripts/js-api/build-types/index.js. */ @@ -3406,7 +3406,6 @@ declare type OptionalSectionListProps = { declare type OptionalVirtualizedListProps = { CellRendererComponent?: React.ComponentType> debug?: boolean - disableVirtualization?: boolean extraData?: any horizontal?: boolean initialNumToRender?: number @@ -5919,7 +5918,7 @@ export { AlertOptions, // a0cdac0f AlertType, // 5ab91217 AndroidKeyboardEvent, // e03becc8 - Animated, // 1ac00401 + Animated, // a3d1d649 AppConfig, // 35c0ca70 AppRegistry, // 7ef8e53a AppState, // 12012be5 @@ -5969,9 +5968,9 @@ export { EventSubscription, // b8d084aa ExtendedExceptionData, // 5a6ccf5a FilterFunction, // bf24c0e3 - FlatList, // b5cfde24 - FlatListInstance, // 8f76f3b2 - FlatListProps, // 3725656d + FlatList, // cc8679e2 + FlatListInstance, // 64354e60 + FlatListProps, // 10085d10 FocusEvent, // 850f1517 FontVariant, // 7c7558bb GestureResponderEvent, // 14d3e77a @@ -6119,10 +6118,10 @@ export { ScrollViewPropsIOS, // da991b9a ScrollViewScrollToOptions, // 3313411e SectionBase, // dca83594 - SectionList, // 626263b4 + SectionList, // 2c5dc428 SectionListData, // e0d79987 - SectionListInstance, // 019cdaef - SectionListProps, // 4cb9dfa9 + SectionListInstance, // f94c3498 + SectionListProps, // 9bd7f8d1 SectionListRenderItem, // 466e3e87 SectionListRenderItemInfo, // d809238e Separators, // 6a45f7e3 @@ -6196,10 +6195,10 @@ export { VirtualViewMode, // 6be59722 VirtualizedList, // 68c7345e VirtualizedListInstance, // 423ee7c0 - VirtualizedListProps, // 29367911 + VirtualizedListProps, // 14094746 VirtualizedSectionList, // 9fd9cd61 VirtualizedSectionListInstance, // 12b706d5 - VirtualizedSectionListProps, // 6b9d9c05 + VirtualizedSectionListProps, // bb4c282f WrapperComponentProvider, // 4b8c7962 codegenNativeCommands, // 628a7c0a codegenNativeComponent, // 32a1bca6 diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-basic.js b/packages/rn-tester/js/examples/FlatList/FlatList-basic.js index cdcef788d21..d80e78a8db3 100644 --- a/packages/rn-tester/js/examples/FlatList/FlatList-basic.js +++ b/packages/rn-tester/js/examples/FlatList/FlatList-basic.js @@ -64,7 +64,6 @@ type State = { filterText: string, fixedHeight: boolean, logViewable: boolean, - virtualized: boolean, empty: boolean, useFlatListItemComponent: boolean, fadingEdgeLength: number, @@ -89,7 +88,6 @@ class FlatListExample extends React.PureComponent { filterText: '', fixedHeight: true, logViewable: false, - virtualized: true, empty: false, useFlatListItemComponent: false, fadingEdgeLength: 0, @@ -166,11 +164,6 @@ class FlatListExample extends React.PureComponent { /> - {renderSmallSwitchOption( - 'Virtualized', - this.state.virtualized, - this._setBooleanValue('virtualized'), - )} {renderSmallSwitchOption( 'Horizontal', this.state.horizontal, @@ -260,7 +253,6 @@ class FlatListExample extends React.PureComponent { // $FlowFixMe[missing-empty-array-annot] data={this.state.empty ? [] : filteredData} debug={this.state.debug} - disableVirtualization={!this.state.virtualized} getItemLayout={ this.state.fixedHeight ? this._getItemLayout : undefined } diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js b/packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js index 4b54ba987c8..9f92ef80efd 100644 --- a/packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js +++ b/packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js @@ -37,7 +37,6 @@ component MultiColumnExample() { const [fixedHeight, setFixedHeight] = useState(true); const [logViewable, setLogViewable] = useState(false); const [numColumns, setNumColumns] = useState(2); - const [virtualized, setVirtualized] = useState(true); const _onChangeFilterText = (_filterText: string) => { setFilterText(_filterText); @@ -48,9 +47,6 @@ component MultiColumnExample() { const _setBooleanValue = (key: string) => (value: boolean) => { switch (key) { - case 'virtualized': - setVirtualized(value); - break; case 'fixedHeight': setFixedHeight(value); break; @@ -138,11 +134,6 @@ component MultiColumnExample() { /> - {renderSmallSwitchOption( - 'Virtualized', - virtualized, - _setBooleanValue('virtualized'), - )} {renderSmallSwitchOption( 'Fixed Height', fixedHeight, @@ -168,7 +159,6 @@ component MultiColumnExample() { } refreshing={false} renderItem={_renderItemComponent} - disableVirtualization={virtualized} onViewableItemsChanged={_onViewableItemsChanged} /> diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js b/packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js index e9db925ecf7..7096b0fad93 100644 --- a/packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js +++ b/packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js @@ -179,7 +179,6 @@ export component SectionList_scrollable() { {useNativeDriver: true}, ); const [filterText, setFilterText] = useState(''); - const [virtualized, setVirtualized] = useState(true); const [logViewable, setLogViewable] = useState(false); const [debug, setDebug] = useState(false); const [inverted, setInverted] = useState(false); @@ -253,7 +252,6 @@ export component SectionList_scrollable() { value={filterText} /> - {renderSmallSwitchOption('Virtualized', virtualized, setVirtualized)} {renderSmallSwitchOption('Log Viewable', logViewable, setLogViewable)} {renderSmallSwitchOption('Debug', debug, setDebug)} {renderSmallSwitchOption('Inverted', inverted, setInverted)} @@ -299,7 +297,6 @@ export component SectionList_scrollable() { accessibilityRole="list" debug={debug} inverted={inverted} - disableVirtualization={!virtualized} onRefresh={() => Alert.alert('onRefresh: nothing to refresh :P')} onScroll={scrollSinkY} onViewableItemsChanged={onViewableItemsChanged} diff --git a/packages/virtualized-lists/Lists/VirtualizedList.d.ts b/packages/virtualized-lists/Lists/VirtualizedList.d.ts index 31a95a3b4ad..9af014f225a 100644 --- a/packages/virtualized-lists/Lists/VirtualizedList.d.ts +++ b/packages/virtualized-lists/Lists/VirtualizedList.d.ts @@ -210,13 +210,6 @@ export interface VirtualizedListWithoutRenderItemProps */ debug?: boolean | undefined; - /** - * DEPRECATED: Virtualization provides significant performance and memory optimizations, but fully - * unmounts react instances that are outside of the render window. You should only need to disable - * this for debugging purposes. - */ - disableVirtualization?: boolean | 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 diff --git a/packages/virtualized-lists/Lists/VirtualizedList.js b/packages/virtualized-lists/Lists/VirtualizedList.js index 298331a0b83..c1c4342271f 100644 --- a/packages/virtualized-lists/Lists/VirtualizedList.js +++ b/packages/virtualized-lists/Lists/VirtualizedList.js @@ -609,12 +609,8 @@ class VirtualizedList extends StateSafePureComponent< pendingScrollUpdateCount: number, ): {first: number, last: number} { const {data, getItemCount} = props; - const onEndReachedThreshold = onEndReachedThresholdOrDefault( - props.onEndReachedThreshold, - ); - const {offset, visibleLength} = this._scrollMetrics; + const {visibleLength} = this._scrollMetrics; const contentLength = this._listMetrics.getContentLength(); - const distanceFromEnd = contentLength - visibleLength - offset; // Wait until the scroll view metrics have been set up. And until then, // we will trust the initialNumToRender suggestion @@ -624,43 +620,27 @@ class VirtualizedList extends StateSafePureComponent< : cellsAroundViewport; } - let newCellsAroundViewport: {first: number, last: number}; - if (props.disableVirtualization) { - const renderAhead = - distanceFromEnd < onEndReachedThreshold * visibleLength - ? maxToRenderPerBatchOrDefault(props.maxToRenderPerBatch) - : 0; - - newCellsAroundViewport = { - first: 0, - last: Math.min( - cellsAroundViewport.last + renderAhead, - getItemCount(data) - 1, - ), - }; - } else { - // If we have a pending scroll update, we should not adjust the render window as it - // might override the correct window. - if (pendingScrollUpdateCount > 0) { - return cellsAroundViewport.last >= getItemCount(data) - ? VirtualizedList._constrainToItemCount(cellsAroundViewport, props) - : cellsAroundViewport; - } - - newCellsAroundViewport = computeWindowedRenderLimits( - props, - maxToRenderPerBatchOrDefault(props.maxToRenderPerBatch), - windowSizeOrDefault(props.windowSize), - cellsAroundViewport, - this._listMetrics, - this._scrollMetrics, - ); - invariant( - newCellsAroundViewport.last < getItemCount(data), - 'computeWindowedRenderLimits() should return range in-bounds', - ); + // If we have a pending scroll update, we should not adjust the render window as it + // might override the correct window. + if (pendingScrollUpdateCount > 0) { + return cellsAroundViewport.last >= getItemCount(data) + ? VirtualizedList._constrainToItemCount(cellsAroundViewport, props) + : cellsAroundViewport; } + const newCellsAroundViewport = computeWindowedRenderLimits( + props, + maxToRenderPerBatchOrDefault(props.maxToRenderPerBatch), + windowSizeOrDefault(props.windowSize), + cellsAroundViewport, + this._listMetrics, + this._scrollMetrics, + ); + invariant( + newCellsAroundViewport.last < getItemCount(data), + 'computeWindowedRenderLimits() should return range in-bounds', + ); + if (this._nestedChildLists.size() > 0) { // If some cell in the new state has a child list in it, we should only render // up through that item, so that we give that list a chance to render. @@ -1015,12 +995,6 @@ class VirtualizedList extends StateSafePureComponent< for (const section of renderRegions) { if (section.isSpacer) { - // Legacy behavior is to avoid spacers when virtualization is - // disabled (including head spacers on initial render). - if (this.props.disableVirtualization) { - continue; - } - // Without getItemLayout, we limit our tail spacer to the _highestMeasuredFrameIndex to // prevent the user for hyperscrolling into un-measured area because otherwise content will // likely jump around as it renders in above the viewport. diff --git a/packages/virtualized-lists/Lists/VirtualizedListProps.js b/packages/virtualized-lists/Lists/VirtualizedListProps.js index f5675959f85..036666ba4d0 100644 --- a/packages/virtualized-lists/Lists/VirtualizedListProps.js +++ b/packages/virtualized-lists/Lists/VirtualizedListProps.js @@ -75,12 +75,6 @@ type OptionalVirtualizedListProps = { * implementation, but with a significant perf hit. */ debug?: ?boolean, - /** - * DEPRECATED: Virtualization provides significant performance and memory optimizations, but fully - * unmounts react instances that are outside of the render window. You should only need to disable - * this for debugging purposes. Defaults to false. - */ - disableVirtualization?: ?boolean, /** * A marker property for telling the list to re-render (since it implements `PureComponent`). If * any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the diff --git a/packages/virtualized-lists/Lists/__tests__/VirtualizedList-test.js b/packages/virtualized-lists/Lists/__tests__/VirtualizedList-test.js index 133b80f9820..e2fcd19538a 100644 --- a/packages/virtualized-lists/Lists/__tests__/VirtualizedList-test.js +++ b/packages/virtualized-lists/Lists/__tests__/VirtualizedList-test.js @@ -1716,51 +1716,6 @@ it('renders new items when data is updated with non-zero initialScrollIndex', as expect(component).toMatchSnapshot(); }); -it('renders initialNumToRender cells when virtualization disabled', async () => { - const items = generateItems(10); - const ITEM_HEIGHT = 10; - - let component; - await act(() => { - component = create( - , - ); - }); - // We should render initialNumToRender items with no spacers on initial render - // when virtualization is disabled - expect(component).toMatchSnapshot(); -}); - -it('renders no spacers up to initialScrollIndex on first render when virtualization disabled', async () => { - const items = generateItems(10); - const ITEM_HEIGHT = 10; - - let component; - await act(() => { - component = create( - , - ); - }); - - // There should be no spacers present in an offset initial render with - // virtualization disabled. Only initialNumToRender items starting at - // initialScrollIndex. - expect(component).toMatchSnapshot(); -}); - it('expands first in viewport to render up to maxToRenderPerBatch on initial render', async () => { const items = generateItems(10); const ITEM_HEIGHT = 10; @@ -1784,72 +1739,6 @@ it('expands first in viewport to render up to maxToRenderPerBatch on initial ren expect(component).toMatchSnapshot(); }); -it('renders items before initialScrollIndex on first batch tick when virtualization disabled', async () => { - const items = generateItems(10); - const ITEM_HEIGHT = 10; - - let component; - await act(() => { - component = create( - , - ); - }); - - await act(() => { - simulateLayout(component, { - viewport: {width: 10, height: 50}, - content: {width: 10, height: 100}, - }); - performNextBatch(); - }); - - // When virtualization is disabled, we render "maxToRenderPerBatch" items - // sequentially per batch tick. Any items not yet rendered before - // initialScrollIndex are currently rendered at this time. Expect the first - // tick to render all items before initialScrollIndex, along with - // maxToRenderPerBatch after. - expect(component).toMatchSnapshot(); -}); - -it('eventually renders all items when virtualization disabled', async () => { - const items = generateItems(10); - const ITEM_HEIGHT = 10; - - let component; - await act(() => { - component = create( - , - ); - }); - - await act(() => { - simulateLayout(component, { - viewport: {width: 10, height: 50}, - content: {width: 10, height: 100}, - }); - performAllBatches(); - }); - - // After all batch ticks, all items should eventually be rendered when\ - // virtualization is disabled. - expect(component).toMatchSnapshot(); -}); - it('retains initial render region when an item is appended', async () => { const items = generateItems(10); const ITEM_HEIGHT = 10; diff --git a/packages/virtualized-lists/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap b/packages/virtualized-lists/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap index 80eb159051d..a8544c59b65 100644 --- a/packages/virtualized-lists/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap +++ b/packages/virtualized-lists/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap @@ -2628,146 +2628,6 @@ exports[`does not over-render when there is less than initialNumToRender cells 1 `; -exports[`eventually renders all items when virtualization disabled 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; - exports[`expands first in viewport to render up to maxToRenderPerBatch on initial render 1`] = ` `; -exports[`renders initialNumToRender cells when virtualization disabled 1`] = ` - - - - - - - - - - - - - - - - - - - -`; - -exports[`renders items before initialScrollIndex on first batch tick when virtualization disabled 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - -`; - exports[`renders new items when data is updated with non-zero initialScrollIndex 1`] = ` `; -exports[`renders no spacers up to initialScrollIndex on first render when virtualization disabled 1`] = ` - - - - - - - - - - -`; - exports[`renders offset cells in initial render when initialScrollIndex set 1`] = `