From 46be292f671c70aac4ecc178c96e3a2a6a3d16da Mon Sep 17 00:00:00 2001 From: Kacie Bawiec Date: Tue, 10 Nov 2020 09:05:52 -0800 Subject: [PATCH] Fix nested FlatList not firing onScrollDragEnd and onMomentum methods Summary: With nested FlatLists, three methods aren't firing: `onMomentumScrollBegin`, `onMomentumScrollEnd`, and `onScrollDragEnd`. This is because the nested child lists' methods are not being called. This copies the solution for this from `onScrollBeginDrag` to the other three methods. Changelog: [Fixed] Fix nested FlatList not firing onScrollDragEnd and onMomentum methods Reviewed By: nadiia Differential Revision: D24803418 fbshipit-source-id: 8685b1ab9f1bd5f67a88d93ac5de628d4bd69024 --- Libraries/Lists/VirtualizedList.js | 14 ++++++++++++++ .../__tests__/__snapshots__/FlatList-test.js.snap | 7 +++++++ .../__snapshots__/SectionList-test.js.snap | 5 +++++ .../__snapshots__/VirtualizedList-test.js.snap | 15 +++++++++++++++ .../VirtualizedSectionList-test.js.snap | 12 ++++++++++++ 5 files changed, 53 insertions(+) diff --git a/Libraries/Lists/VirtualizedList.js b/Libraries/Lists/VirtualizedList.js index 2249d54c4aaa94..78939ed26af49a 100644 --- a/Libraries/Lists/VirtualizedList.js +++ b/Libraries/Lists/VirtualizedList.js @@ -1061,6 +1061,7 @@ class VirtualizedList extends React.PureComponent { onScroll: this._onScroll, onScrollBeginDrag: this._onScrollBeginDrag, onScrollEndDrag: this._onScrollEndDrag, + onMomentumScrollBegin: this._onMomentumScrollBegin, onMomentumScrollEnd: this._onMomentumScrollEnd, scrollEventThrottle: this.props.scrollEventThrottle, // TODO: Android support invertStickyHeaders: @@ -1662,6 +1663,9 @@ class VirtualizedList extends React.PureComponent { }; _onScrollEndDrag = (e): void => { + this._nestedChildLists.forEach(childList => { + childList.ref && childList.ref._onScrollEndDrag(e); + }); const {velocity} = e.nativeEvent; if (velocity) { this._scrollMetrics.velocity = this._selectOffset(velocity); @@ -1670,7 +1674,17 @@ class VirtualizedList extends React.PureComponent { this.props.onScrollEndDrag && this.props.onScrollEndDrag(e); }; + _onMomentumScrollBegin = (e): void => { + this._nestedChildLists.forEach(childList => { + childList.ref && childList.ref._onMomentumScrollBegin(e); + }); + this.props.onMomentumScrollBegin && this.props.onMomentumScrollBegin(e); + }; + _onMomentumScrollEnd = (e): void => { + this._nestedChildLists.forEach(childList => { + childList.ref && childList.ref._onMomentumScrollEnd(e); + }); this._scrollMetrics.velocity = 0; this._computeBlankness(); this.props.onMomentumScrollEnd && this.props.onMomentumScrollEnd(e); diff --git a/Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap b/Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap index 9c9d3e69bd8d1d..d783999955c23e 100644 --- a/Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap +++ b/Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap @@ -36,6 +36,7 @@ exports[`FlatList renders all the bells and whistles 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onRefresh={[MockFunction]} onScroll={[Function]} @@ -138,6 +139,7 @@ exports[`FlatList renders empty list 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -166,6 +168,7 @@ exports[`FlatList renders null list 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -207,6 +210,7 @@ exports[`FlatList renders simple list (multiple columns) 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -284,6 +288,7 @@ exports[`FlatList renders simple list 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -351,6 +356,7 @@ exports[`FlatList renders simple list using ListItemComponent (multiple columns) onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -428,6 +434,7 @@ exports[`FlatList renders simple list using ListItemComponent 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} diff --git a/Libraries/Lists/__tests__/__snapshots__/SectionList-test.js.snap b/Libraries/Lists/__tests__/__snapshots__/SectionList-test.js.snap index 49c4debe34392c..9cbbcbd2bec220 100644 --- a/Libraries/Lists/__tests__/__snapshots__/SectionList-test.js.snap +++ b/Libraries/Lists/__tests__/__snapshots__/SectionList-test.js.snap @@ -27,6 +27,7 @@ exports[`SectionList rendering empty section headers is fine 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -90,6 +91,7 @@ exports[`SectionList renders a footer when there is no data 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -145,6 +147,7 @@ exports[`SectionList renders a footer when there is no data and no header 1`] = onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -231,6 +234,7 @@ exports[`SectionList renders all the bells and whistles 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onRefresh={[MockFunction]} onScroll={[Function]} @@ -423,6 +427,7 @@ exports[`SectionList renders empty list 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} diff --git a/Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap b/Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap index 86faf0fa8aa0cb..c666835c3fd638 100644 --- a/Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap +++ b/Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap @@ -22,6 +22,7 @@ exports[`VirtualizedList handles nested lists 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -58,6 +59,7 @@ exports[`VirtualizedList handles nested lists 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -111,6 +113,7 @@ exports[`VirtualizedList handles nested lists 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -185,6 +188,7 @@ exports[`VirtualizedList handles separators correctly 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -266,6 +270,7 @@ exports[`VirtualizedList handles separators correctly 2`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -347,6 +352,7 @@ exports[`VirtualizedList handles separators correctly 3`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -441,6 +447,7 @@ exports[`VirtualizedList renders all the bells and whistles 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onRefresh={[MockFunction]} onScroll={[Function]} @@ -622,6 +629,7 @@ exports[`VirtualizedList renders empty list 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -652,6 +660,7 @@ exports[`VirtualizedList renders empty list with empty component 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -698,6 +707,7 @@ exports[`VirtualizedList renders list with empty component 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -733,6 +743,7 @@ exports[`VirtualizedList renders null list 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -772,6 +783,7 @@ exports[`VirtualizedList renders simple list 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -837,6 +849,7 @@ exports[`VirtualizedList renders simple list using ListItemComponent 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -894,6 +907,7 @@ exports[`VirtualizedList test getItem functionality where data is not an Array 1 onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -937,6 +951,7 @@ exports[`VirtualizedList warns if both renderItem or ListItemComponent are speci onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} diff --git a/Libraries/Lists/__tests__/__snapshots__/VirtualizedSectionList-test.js.snap b/Libraries/Lists/__tests__/__snapshots__/VirtualizedSectionList-test.js.snap index 23e1317571b8ef..e53b506b0a4413 100644 --- a/Libraries/Lists/__tests__/__snapshots__/VirtualizedSectionList-test.js.snap +++ b/Libraries/Lists/__tests__/__snapshots__/VirtualizedSectionList-test.js.snap @@ -27,6 +27,7 @@ exports[`VirtualizedSectionList handles nested lists 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -72,6 +73,7 @@ exports[`VirtualizedSectionList handles nested lists 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -138,6 +140,7 @@ exports[`VirtualizedSectionList handles nested lists 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -242,6 +245,7 @@ exports[`VirtualizedSectionList handles separators correctly 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -381,6 +385,7 @@ exports[`VirtualizedSectionList handles separators correctly 2`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -520,6 +525,7 @@ exports[`VirtualizedSectionList handles separators correctly 3`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -672,6 +678,7 @@ exports[`VirtualizedSectionList renders all the bells and whistles 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onRefresh={[MockFunction]} onScroll={[Function]} @@ -893,6 +900,7 @@ exports[`VirtualizedSectionList renders empty list 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -923,6 +931,7 @@ exports[`VirtualizedSectionList renders empty list with empty component 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -974,6 +983,7 @@ exports[`VirtualizedSectionList renders list with empty component 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -1017,6 +1027,7 @@ exports[`VirtualizedSectionList renders null list 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]} @@ -1061,6 +1072,7 @@ exports[`VirtualizedSectionList renders simple list 1`] = ` onContentSizeChange={[Function]} onEndReachedThreshold={2} onLayout={[Function]} + onMomentumScrollBegin={[Function]} onMomentumScrollEnd={[Function]} onScroll={[Function]} onScrollBeginDrag={[Function]}