From c16fd269c4e8a7c66171e882300f16d88cbcc557 Mon Sep 17 00:00:00 2001 From: MoOx Date: Thu, 4 Apr 2019 14:54:13 +0200 Subject: [PATCH 1/4] Fix for VirtualizedSectionList/SectionList: replace enableVirtualization prop by correct underlying disableVirtualisation 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. Another proof: - [disableVirtualization is being used](https://github.com/facebook/react-native/search?q=disableVirtualization&unscoped_q=disableVirtualization) - - [enableVirtualization isn't!](https://github.com/facebook/react-native/search?q= enableVirtualization&unscoped_q= enableVirtualization) (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). --- Libraries/Lists/VirtualizedSectionList.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Libraries/Lists/VirtualizedSectionList.js b/Libraries/Lists/VirtualizedSectionList.js index c1e76e1228f4..c52395954482 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, /** From 9bbf08bd141935b776cc1b052450511a1b0ed529 Mon Sep 17 00:00:00 2001 From: MoOx Date: Thu, 4 Apr 2019 15:00:03 +0200 Subject: [PATCH 2/4] Fix example for VirtualizedSectionList/SectionList: replace enableVirtualization prop annotation by correct underlying disableVirtualisation of VirtualizedList --- RNTester/js/SectionListExample.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/RNTester/js/SectionListExample.js b/RNTester/js/SectionListExample.js index be4179f7e6c1..455b1d36efcc 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} From 4a3211773f6c8069ad334e5a7acfb29b9e51e38b Mon Sep 17 00:00:00 2001 From: MoOx Date: Thu, 4 Apr 2019 22:11:05 +0200 Subject: [PATCH 3/4] Fix flow annotation of disableVirtualisation in VirtualizedList to match VirtualizedSectionList/SectionList fix --- Libraries/Lists/VirtualizedList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Libraries/Lists/VirtualizedList.js b/Libraries/Lists/VirtualizedList.js index c3a72ab7a931..270360d7a5e0 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 From f5dc9547fdc6b3f6392a7f39dd511303e4cee2ab Mon Sep 17 00:00:00 2001 From: MoOx Date: Thu, 4 Apr 2019 22:28:28 +0200 Subject: [PATCH 4/4] makes flow happy --- Libraries/Lists/VirtualizedList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Libraries/Lists/VirtualizedList.js b/Libraries/Lists/VirtualizedList.js index 270360d7a5e0..85f22f2675cb 100644 --- a/Libraries/Lists/VirtualizedList.js +++ b/Libraries/Lists/VirtualizedList.js @@ -705,7 +705,7 @@ class VirtualizedList extends React.PureComponent { }; _isVirtualizationDisabled(): boolean { - return this.props.disableVirtualization; + return this.props.disableVirtualization || false; } _isNestedWithSameOrientation(): boolean {