Skip to content

Commit 46be292

Browse files
kaciebfacebook-github-bot
kacieb
authored and
facebook-github-bot
committed
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
1 parent f27e305 commit 46be292

5 files changed

+53
-0
lines changed

‎Libraries/Lists/VirtualizedList.js

+14
Original file line numberDiff line numberDiff line change
@@ -1061,6 +1061,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
10611061
onScroll: this._onScroll,
10621062
onScrollBeginDrag: this._onScrollBeginDrag,
10631063
onScrollEndDrag: this._onScrollEndDrag,
1064+
onMomentumScrollBegin: this._onMomentumScrollBegin,
10641065
onMomentumScrollEnd: this._onMomentumScrollEnd,
10651066
scrollEventThrottle: this.props.scrollEventThrottle, // TODO: Android support
10661067
invertStickyHeaders:
@@ -1662,6 +1663,9 @@ class VirtualizedList extends React.PureComponent<Props, State> {
16621663
};
16631664

16641665
_onScrollEndDrag = (e): void => {
1666+
this._nestedChildLists.forEach(childList => {
1667+
childList.ref && childList.ref._onScrollEndDrag(e);
1668+
});
16651669
const {velocity} = e.nativeEvent;
16661670
if (velocity) {
16671671
this._scrollMetrics.velocity = this._selectOffset(velocity);
@@ -1670,7 +1674,17 @@ class VirtualizedList extends React.PureComponent<Props, State> {
16701674
this.props.onScrollEndDrag && this.props.onScrollEndDrag(e);
16711675
};
16721676

1677+
_onMomentumScrollBegin = (e): void => {
1678+
this._nestedChildLists.forEach(childList => {
1679+
childList.ref && childList.ref._onMomentumScrollBegin(e);
1680+
});
1681+
this.props.onMomentumScrollBegin && this.props.onMomentumScrollBegin(e);
1682+
};
1683+
16731684
_onMomentumScrollEnd = (e): void => {
1685+
this._nestedChildLists.forEach(childList => {
1686+
childList.ref && childList.ref._onMomentumScrollEnd(e);
1687+
});
16741688
this._scrollMetrics.velocity = 0;
16751689
this._computeBlankness();
16761690
this.props.onMomentumScrollEnd && this.props.onMomentumScrollEnd(e);

‎Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap

+7
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ exports[`FlatList renders all the bells and whistles 1`] = `
3636
onContentSizeChange={[Function]}
3737
onEndReachedThreshold={2}
3838
onLayout={[Function]}
39+
onMomentumScrollBegin={[Function]}
3940
onMomentumScrollEnd={[Function]}
4041
onRefresh={[MockFunction]}
4142
onScroll={[Function]}
@@ -138,6 +139,7 @@ exports[`FlatList renders empty list 1`] = `
138139
onContentSizeChange={[Function]}
139140
onEndReachedThreshold={2}
140141
onLayout={[Function]}
142+
onMomentumScrollBegin={[Function]}
141143
onMomentumScrollEnd={[Function]}
142144
onScroll={[Function]}
143145
onScrollBeginDrag={[Function]}
@@ -166,6 +168,7 @@ exports[`FlatList renders null list 1`] = `
166168
onContentSizeChange={[Function]}
167169
onEndReachedThreshold={2}
168170
onLayout={[Function]}
171+
onMomentumScrollBegin={[Function]}
169172
onMomentumScrollEnd={[Function]}
170173
onScroll={[Function]}
171174
onScrollBeginDrag={[Function]}
@@ -207,6 +210,7 @@ exports[`FlatList renders simple list (multiple columns) 1`] = `
207210
onContentSizeChange={[Function]}
208211
onEndReachedThreshold={2}
209212
onLayout={[Function]}
213+
onMomentumScrollBegin={[Function]}
210214
onMomentumScrollEnd={[Function]}
211215
onScroll={[Function]}
212216
onScrollBeginDrag={[Function]}
@@ -284,6 +288,7 @@ exports[`FlatList renders simple list 1`] = `
284288
onContentSizeChange={[Function]}
285289
onEndReachedThreshold={2}
286290
onLayout={[Function]}
291+
onMomentumScrollBegin={[Function]}
287292
onMomentumScrollEnd={[Function]}
288293
onScroll={[Function]}
289294
onScrollBeginDrag={[Function]}
@@ -351,6 +356,7 @@ exports[`FlatList renders simple list using ListItemComponent (multiple columns)
351356
onContentSizeChange={[Function]}
352357
onEndReachedThreshold={2}
353358
onLayout={[Function]}
359+
onMomentumScrollBegin={[Function]}
354360
onMomentumScrollEnd={[Function]}
355361
onScroll={[Function]}
356362
onScrollBeginDrag={[Function]}
@@ -428,6 +434,7 @@ exports[`FlatList renders simple list using ListItemComponent 1`] = `
428434
onContentSizeChange={[Function]}
429435
onEndReachedThreshold={2}
430436
onLayout={[Function]}
437+
onMomentumScrollBegin={[Function]}
431438
onMomentumScrollEnd={[Function]}
432439
onScroll={[Function]}
433440
onScrollBeginDrag={[Function]}

‎Libraries/Lists/__tests__/__snapshots__/SectionList-test.js.snap

+5
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ exports[`SectionList rendering empty section headers is fine 1`] = `
2727
onContentSizeChange={[Function]}
2828
onEndReachedThreshold={2}
2929
onLayout={[Function]}
30+
onMomentumScrollBegin={[Function]}
3031
onMomentumScrollEnd={[Function]}
3132
onScroll={[Function]}
3233
onScrollBeginDrag={[Function]}
@@ -90,6 +91,7 @@ exports[`SectionList renders a footer when there is no data 1`] = `
9091
onContentSizeChange={[Function]}
9192
onEndReachedThreshold={2}
9293
onLayout={[Function]}
94+
onMomentumScrollBegin={[Function]}
9395
onMomentumScrollEnd={[Function]}
9496
onScroll={[Function]}
9597
onScrollBeginDrag={[Function]}
@@ -145,6 +147,7 @@ exports[`SectionList renders a footer when there is no data and no header 1`] =
145147
onContentSizeChange={[Function]}
146148
onEndReachedThreshold={2}
147149
onLayout={[Function]}
150+
onMomentumScrollBegin={[Function]}
148151
onMomentumScrollEnd={[Function]}
149152
onScroll={[Function]}
150153
onScrollBeginDrag={[Function]}
@@ -231,6 +234,7 @@ exports[`SectionList renders all the bells and whistles 1`] = `
231234
onContentSizeChange={[Function]}
232235
onEndReachedThreshold={2}
233236
onLayout={[Function]}
237+
onMomentumScrollBegin={[Function]}
234238
onMomentumScrollEnd={[Function]}
235239
onRefresh={[MockFunction]}
236240
onScroll={[Function]}
@@ -423,6 +427,7 @@ exports[`SectionList renders empty list 1`] = `
423427
onContentSizeChange={[Function]}
424428
onEndReachedThreshold={2}
425429
onLayout={[Function]}
430+
onMomentumScrollBegin={[Function]}
426431
onMomentumScrollEnd={[Function]}
427432
onScroll={[Function]}
428433
onScrollBeginDrag={[Function]}

‎Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap

+15
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ exports[`VirtualizedList handles nested lists 1`] = `
2222
onContentSizeChange={[Function]}
2323
onEndReachedThreshold={2}
2424
onLayout={[Function]}
25+
onMomentumScrollBegin={[Function]}
2526
onMomentumScrollEnd={[Function]}
2627
onScroll={[Function]}
2728
onScrollBeginDrag={[Function]}
@@ -58,6 +59,7 @@ exports[`VirtualizedList handles nested lists 1`] = `
5859
onContentSizeChange={[Function]}
5960
onEndReachedThreshold={2}
6061
onLayout={[Function]}
62+
onMomentumScrollBegin={[Function]}
6163
onMomentumScrollEnd={[Function]}
6264
onScroll={[Function]}
6365
onScrollBeginDrag={[Function]}
@@ -111,6 +113,7 @@ exports[`VirtualizedList handles nested lists 1`] = `
111113
onContentSizeChange={[Function]}
112114
onEndReachedThreshold={2}
113115
onLayout={[Function]}
116+
onMomentumScrollBegin={[Function]}
114117
onMomentumScrollEnd={[Function]}
115118
onScroll={[Function]}
116119
onScrollBeginDrag={[Function]}
@@ -185,6 +188,7 @@ exports[`VirtualizedList handles separators correctly 1`] = `
185188
onContentSizeChange={[Function]}
186189
onEndReachedThreshold={2}
187190
onLayout={[Function]}
191+
onMomentumScrollBegin={[Function]}
188192
onMomentumScrollEnd={[Function]}
189193
onScroll={[Function]}
190194
onScrollBeginDrag={[Function]}
@@ -266,6 +270,7 @@ exports[`VirtualizedList handles separators correctly 2`] = `
266270
onContentSizeChange={[Function]}
267271
onEndReachedThreshold={2}
268272
onLayout={[Function]}
273+
onMomentumScrollBegin={[Function]}
269274
onMomentumScrollEnd={[Function]}
270275
onScroll={[Function]}
271276
onScrollBeginDrag={[Function]}
@@ -347,6 +352,7 @@ exports[`VirtualizedList handles separators correctly 3`] = `
347352
onContentSizeChange={[Function]}
348353
onEndReachedThreshold={2}
349354
onLayout={[Function]}
355+
onMomentumScrollBegin={[Function]}
350356
onMomentumScrollEnd={[Function]}
351357
onScroll={[Function]}
352358
onScrollBeginDrag={[Function]}
@@ -441,6 +447,7 @@ exports[`VirtualizedList renders all the bells and whistles 1`] = `
441447
onContentSizeChange={[Function]}
442448
onEndReachedThreshold={2}
443449
onLayout={[Function]}
450+
onMomentumScrollBegin={[Function]}
444451
onMomentumScrollEnd={[Function]}
445452
onRefresh={[MockFunction]}
446453
onScroll={[Function]}
@@ -622,6 +629,7 @@ exports[`VirtualizedList renders empty list 1`] = `
622629
onContentSizeChange={[Function]}
623630
onEndReachedThreshold={2}
624631
onLayout={[Function]}
632+
onMomentumScrollBegin={[Function]}
625633
onMomentumScrollEnd={[Function]}
626634
onScroll={[Function]}
627635
onScrollBeginDrag={[Function]}
@@ -652,6 +660,7 @@ exports[`VirtualizedList renders empty list with empty component 1`] = `
652660
onContentSizeChange={[Function]}
653661
onEndReachedThreshold={2}
654662
onLayout={[Function]}
663+
onMomentumScrollBegin={[Function]}
655664
onMomentumScrollEnd={[Function]}
656665
onScroll={[Function]}
657666
onScrollBeginDrag={[Function]}
@@ -698,6 +707,7 @@ exports[`VirtualizedList renders list with empty component 1`] = `
698707
onContentSizeChange={[Function]}
699708
onEndReachedThreshold={2}
700709
onLayout={[Function]}
710+
onMomentumScrollBegin={[Function]}
701711
onMomentumScrollEnd={[Function]}
702712
onScroll={[Function]}
703713
onScrollBeginDrag={[Function]}
@@ -733,6 +743,7 @@ exports[`VirtualizedList renders null list 1`] = `
733743
onContentSizeChange={[Function]}
734744
onEndReachedThreshold={2}
735745
onLayout={[Function]}
746+
onMomentumScrollBegin={[Function]}
736747
onMomentumScrollEnd={[Function]}
737748
onScroll={[Function]}
738749
onScrollBeginDrag={[Function]}
@@ -772,6 +783,7 @@ exports[`VirtualizedList renders simple list 1`] = `
772783
onContentSizeChange={[Function]}
773784
onEndReachedThreshold={2}
774785
onLayout={[Function]}
786+
onMomentumScrollBegin={[Function]}
775787
onMomentumScrollEnd={[Function]}
776788
onScroll={[Function]}
777789
onScrollBeginDrag={[Function]}
@@ -837,6 +849,7 @@ exports[`VirtualizedList renders simple list using ListItemComponent 1`] = `
837849
onContentSizeChange={[Function]}
838850
onEndReachedThreshold={2}
839851
onLayout={[Function]}
852+
onMomentumScrollBegin={[Function]}
840853
onMomentumScrollEnd={[Function]}
841854
onScroll={[Function]}
842855
onScrollBeginDrag={[Function]}
@@ -894,6 +907,7 @@ exports[`VirtualizedList test getItem functionality where data is not an Array 1
894907
onContentSizeChange={[Function]}
895908
onEndReachedThreshold={2}
896909
onLayout={[Function]}
910+
onMomentumScrollBegin={[Function]}
897911
onMomentumScrollEnd={[Function]}
898912
onScroll={[Function]}
899913
onScrollBeginDrag={[Function]}
@@ -937,6 +951,7 @@ exports[`VirtualizedList warns if both renderItem or ListItemComponent are speci
937951
onContentSizeChange={[Function]}
938952
onEndReachedThreshold={2}
939953
onLayout={[Function]}
954+
onMomentumScrollBegin={[Function]}
940955
onMomentumScrollEnd={[Function]}
941956
onScroll={[Function]}
942957
onScrollBeginDrag={[Function]}

‎Libraries/Lists/__tests__/__snapshots__/VirtualizedSectionList-test.js.snap

+12
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ exports[`VirtualizedSectionList handles nested lists 1`] = `
2727
onContentSizeChange={[Function]}
2828
onEndReachedThreshold={2}
2929
onLayout={[Function]}
30+
onMomentumScrollBegin={[Function]}
3031
onMomentumScrollEnd={[Function]}
3132
onScroll={[Function]}
3233
onScrollBeginDrag={[Function]}
@@ -72,6 +73,7 @@ exports[`VirtualizedSectionList handles nested lists 1`] = `
7273
onContentSizeChange={[Function]}
7374
onEndReachedThreshold={2}
7475
onLayout={[Function]}
76+
onMomentumScrollBegin={[Function]}
7577
onMomentumScrollEnd={[Function]}
7678
onScroll={[Function]}
7779
onScrollBeginDrag={[Function]}
@@ -138,6 +140,7 @@ exports[`VirtualizedSectionList handles nested lists 1`] = `
138140
onContentSizeChange={[Function]}
139141
onEndReachedThreshold={2}
140142
onLayout={[Function]}
143+
onMomentumScrollBegin={[Function]}
141144
onMomentumScrollEnd={[Function]}
142145
onScroll={[Function]}
143146
onScrollBeginDrag={[Function]}
@@ -242,6 +245,7 @@ exports[`VirtualizedSectionList handles separators correctly 1`] = `
242245
onContentSizeChange={[Function]}
243246
onEndReachedThreshold={2}
244247
onLayout={[Function]}
248+
onMomentumScrollBegin={[Function]}
245249
onMomentumScrollEnd={[Function]}
246250
onScroll={[Function]}
247251
onScrollBeginDrag={[Function]}
@@ -381,6 +385,7 @@ exports[`VirtualizedSectionList handles separators correctly 2`] = `
381385
onContentSizeChange={[Function]}
382386
onEndReachedThreshold={2}
383387
onLayout={[Function]}
388+
onMomentumScrollBegin={[Function]}
384389
onMomentumScrollEnd={[Function]}
385390
onScroll={[Function]}
386391
onScrollBeginDrag={[Function]}
@@ -520,6 +525,7 @@ exports[`VirtualizedSectionList handles separators correctly 3`] = `
520525
onContentSizeChange={[Function]}
521526
onEndReachedThreshold={2}
522527
onLayout={[Function]}
528+
onMomentumScrollBegin={[Function]}
523529
onMomentumScrollEnd={[Function]}
524530
onScroll={[Function]}
525531
onScrollBeginDrag={[Function]}
@@ -672,6 +678,7 @@ exports[`VirtualizedSectionList renders all the bells and whistles 1`] = `
672678
onContentSizeChange={[Function]}
673679
onEndReachedThreshold={2}
674680
onLayout={[Function]}
681+
onMomentumScrollBegin={[Function]}
675682
onMomentumScrollEnd={[Function]}
676683
onRefresh={[MockFunction]}
677684
onScroll={[Function]}
@@ -893,6 +900,7 @@ exports[`VirtualizedSectionList renders empty list 1`] = `
893900
onContentSizeChange={[Function]}
894901
onEndReachedThreshold={2}
895902
onLayout={[Function]}
903+
onMomentumScrollBegin={[Function]}
896904
onMomentumScrollEnd={[Function]}
897905
onScroll={[Function]}
898906
onScrollBeginDrag={[Function]}
@@ -923,6 +931,7 @@ exports[`VirtualizedSectionList renders empty list with empty component 1`] = `
923931
onContentSizeChange={[Function]}
924932
onEndReachedThreshold={2}
925933
onLayout={[Function]}
934+
onMomentumScrollBegin={[Function]}
926935
onMomentumScrollEnd={[Function]}
927936
onScroll={[Function]}
928937
onScrollBeginDrag={[Function]}
@@ -974,6 +983,7 @@ exports[`VirtualizedSectionList renders list with empty component 1`] = `
974983
onContentSizeChange={[Function]}
975984
onEndReachedThreshold={2}
976985
onLayout={[Function]}
986+
onMomentumScrollBegin={[Function]}
977987
onMomentumScrollEnd={[Function]}
978988
onScroll={[Function]}
979989
onScrollBeginDrag={[Function]}
@@ -1017,6 +1027,7 @@ exports[`VirtualizedSectionList renders null list 1`] = `
10171027
onContentSizeChange={[Function]}
10181028
onEndReachedThreshold={2}
10191029
onLayout={[Function]}
1030+
onMomentumScrollBegin={[Function]}
10201031
onMomentumScrollEnd={[Function]}
10211032
onScroll={[Function]}
10221033
onScrollBeginDrag={[Function]}
@@ -1061,6 +1072,7 @@ exports[`VirtualizedSectionList renders simple list 1`] = `
10611072
onContentSizeChange={[Function]}
10621073
onEndReachedThreshold={2}
10631074
onLayout={[Function]}
1075+
onMomentumScrollBegin={[Function]}
10641076
onMomentumScrollEnd={[Function]}
10651077
onScroll={[Function]}
10661078
onScrollBeginDrag={[Function]}

0 commit comments

Comments
 (0)