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
facebook · Nov 10, 2020 · 46be292 · 46be292
1 parent f27e305
commit 46be292
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 0 deletions.
diff --git a/Libraries/Lists/VirtualizedList.js b/Libraries/Lists/VirtualizedList.js
@@ -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);

diff --git 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
@@ -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
@@ -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
@@ -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]}