From e980d83389caa3e017ddc8a6cd9603cd680ccc26 Mon Sep 17 00:00:00 2001 From: MoOx Date: Thu, 4 Apr 2019 14:26:28 -0700 Subject: [PATCH] - VirtualizedSectionList/SectionList: replace enableVirtualization prop annotation by correct underlying disableVirtualisation of VirtualizedList (#24312) Summary: It seems (I used git history to confirm) that FlatList/VirtualizedList have ([since the begining](https://github.com/facebook/react-native/blame/c13f5d48cfe3e7c0f6c6d0b745b50a089d6993ef/Libraries/Lists/VirtualizedList.js#L79)) a `disableVirtualization` prop. SectionList ([since it's begining](https://github.com/facebook/react-native/blame/abe737fe746406533798f9670e8e243cb18d5634/Libraries/Lists/VirtualizedSectionList.js#L98)) have a `enableVirtualization` prop, but since SectionList is VirtualizedSectionList which use VirtualizedList, this prop probably never did something. This fix just rename the prop properly so it can have an effect on the underlying VirtualizedList when you use a SectionList. Since props are spread it's kind of working already, but the flow annotation are wrong (so it tells you it won't work/ you can't use it) which sucks. (NB: I am doing this since I was trying to use a SectionList with react-native-web & server side rendering to get the all list, you can laugh). [General] [Fixed] - VirtualizedSectionList/SectionList: replace enableVirtualization prop annotation by correct underlying disableVirtualisation of VirtualizedList Pull Request resolved: https://github.com/facebook/react-native/pull/24312 Differential Revision: D14779449 Pulled By: cpojer fbshipit-source-id: e51e1d639d2bb265b5b286786010d01ffd9d90e0 --- Libraries/Lists/VirtualizedList.js | 4 ++-- Libraries/Lists/VirtualizedSectionList.js | 8 ++++---- RNTester/js/SectionListExample.js | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/Libraries/Lists/VirtualizedList.js b/Libraries/Lists/VirtualizedList.js index c3a72ab7a93..85f22f2675c 100644 --- a/Libraries/Lists/VirtualizedList.js +++ b/Libraries/Lists/VirtualizedList.js @@ -76,7 +76,7 @@ type OptionalProps = { * unmounts react instances that are outside of the render window. You should only need to disable * this for debugging purposes. */ - disableVirtualization: boolean, + 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 @@ -705,7 +705,7 @@ class VirtualizedList extends React.PureComponent { }; _isVirtualizationDisabled(): boolean { - return this.props.disableVirtualization; + return this.props.disableVirtualization || false; } _isNestedWithSameOrientation(): boolean { diff --git a/Libraries/Lists/VirtualizedSectionList.js b/Libraries/Lists/VirtualizedSectionList.js index c1e76e1228f..c5239595448 100644 --- a/Libraries/Lists/VirtualizedSectionList.js +++ b/Libraries/Lists/VirtualizedSectionList.js @@ -91,11 +91,11 @@ type OptionalProps = { */ ItemSeparatorComponent?: ?React.ComponentType, /** - * Warning: Virtualization can drastically improve memory consumption for long lists, but trashes - * the state of items when they scroll out of the render window, so make sure all relavent data is - * stored outside of the recursive `renderItem` instance tree. + * 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. */ - enableVirtualization?: ?boolean, + disableVirtualization?: ?boolean, keyExtractor: (item: Item, index: number) => string, onEndReached?: ?({distanceFromEnd: number}) => void, /** diff --git a/RNTester/js/SectionListExample.js b/RNTester/js/SectionListExample.js index be4179f7e6c..455b1d36efc 100644 --- a/RNTester/js/SectionListExample.js +++ b/RNTester/js/SectionListExample.js @@ -149,7 +149,7 @@ class SectionListExample extends React.PureComponent<{}, $FlowFixMeState> { )} debug={this.state.debug} inverted={this.state.inverted} - enableVirtualization={this.state.virtualized} + disableVirtualization={!this.state.virtualized} onRefresh={() => Alert.alert('onRefresh: nothing to refresh :P')} onScroll={this._scrollSinkY} onViewableItemsChanged={this._onViewableItemsChanged}