Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix nested FlatList not firing onScrollDragEnd and onMomentum methods

Browse Source 
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
This commit is contained in:
Kacie Bawiec
2020-11-10 09:08:07 -08:00
committed by Facebook GitHub Bot
parent f27e305056
commit 46be292f67
5 changed files with 53 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Libraries/Lists/VirtualizedList.js
+14
View File
@@ -1061,6 +1061,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
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<Props, State> {
};
_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<Props, State> {
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);
Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap
+7
View File
@@ -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]}
Libraries/Lists/__tests__/__snapshots__/SectionList-test.js.snap
+5
View File
@@ -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]}
Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap
+15
View File
@@ -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]}
Libraries/Lists/__tests__/__snapshots__/VirtualizedSectionList-test.js.snap
+12
View File
@@ -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]}