Skip to content

Commit f7a8d4a

Browse files
Nick LefeverSaadnajmi
Nick Lefever
authored and
Saadnajmi
committed
[fabric] Disable view flattening in header/footer/empty/spacer components of VirtualizedList
Summary: View flattening was already disabled in the cell renderer used by the Virtualized List in this diff D50846483 This diff disables view flattening in the header, footer, empty and spacer cells to fix the layout being broken because of the vertical axis flipping used by the reverse order virtualized list. Test Plan: Run Zeratul with Fabric enabled and scroll to the top of a message thread to show the participants summary header. | Before | After | |--| | {F1145726580} | {F1145726618} | Reviewers: shawndempsey, chpurrer, #rn-desktop Reviewed By: chpurrer Differential Revision: https://phabricator.intern.facebook.com/D51182545 Tasks: T167539420
1 parent d546971 commit f7a8d4a

File tree

5 files changed

+51
-0
lines changed

5 files changed

+51
-0
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,7 @@ exports[`FlatList renders all the bells and whistles 1`] = `
176176
</View>
177177
</View>
178178
<View
179+
collapsable={true}
179180
onLayout={[Function]}
180181
>
181182
<footer />

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -386,6 +386,7 @@ exports[`SectionList renders all the bells and whistles 1`] = `
386386
/>
387387
</View>
388388
<View
389+
collapsable={true}
389390
onLayout={[Function]}
390391
>
391392
<footer

‎packages/virtualized-lists/Lists/VirtualizedList.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -989,8 +989,10 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
989989
<ListEmptyComponent />
990990
)): any);
991991
cells.push(
992+
// $FlowFixMe[prop-missing] React.Element internal inspection
992993
<VirtualizedListCellContextProvider
993994
cellKey={this._getCellKey() + '-empty'}
995+
collapsable={Platform.OS !== 'macos'} // [macOS]
994996
key="$empty">
995997
{React.cloneElement(element, {
996998
onLayout: (event: LayoutEvent) => {
@@ -1050,6 +1052,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
10501052
lastMetrics.offset + lastMetrics.length - firstMetrics.offset;
10511053
cells.push(
10521054
<View
1055+
collapsable={Platform.OS !== 'macos'} // [macOS]
10531056
key={`$spacer-${section.first}`}
10541057
style={{[spacerKey]: spacerSize}}
10551058
/>,
@@ -1090,6 +1093,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
10901093
cellKey={this._getFooterCellKey()}
10911094
key="$footer">
10921095
<View
1096+
collapsable={Platform.OS !== 'macos'} // [macOS]
10931097
onLayout={this._onLayoutFooter}
10941098
style={StyleSheet.compose(
10951099
inversionStyle,

‎packages/virtualized-lists/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -413,6 +413,7 @@ exports[`VirtualizedList forwards correct stickyHeaderIndices when partially in
413413
/>
414414
</View>
415415
<View
416+
collapsable={true}
416417
style={
417418
Object {
418419
"height": 50,
@@ -907,6 +908,7 @@ exports[`VirtualizedList keeps sticky headers above viewport visualized 1`] = `
907908
/>
908909
</View>
909910
<View
911+
collapsable={true}
910912
style={
911913
Object {
912914
"height": 110,
@@ -923,6 +925,7 @@ exports[`VirtualizedList keeps sticky headers above viewport visualized 1`] = `
923925
/>
924926
</View>
925927
<View
928+
collapsable={true}
926929
style={
927930
Object {
928931
"height": 10,
@@ -1173,6 +1176,7 @@ exports[`VirtualizedList renders all the bells and whistles 1`] = `
11731176
/>
11741177
</View>
11751178
<View
1179+
collapsable={true}
11761180
onLayout={[Function]}
11771181
style={
11781182
Object {
@@ -1258,6 +1262,7 @@ exports[`VirtualizedList renders empty list with empty component 1`] = `
12581262
</View>
12591263
<empty />
12601264
<View
1265+
collapsable={true}
12611266
onLayout={[Function]}
12621267
>
12631268
<footer />
@@ -1547,6 +1552,7 @@ exports[`VirtualizedList renders sticky headers in viewport on batched render 1`
15471552
/>
15481553
</View>
15491554
<View
1555+
collapsable={true}
15501556
style={
15511557
Object {
15521558
"height": 50,
@@ -1837,6 +1843,7 @@ exports[`adjusts render area with non-zero initialScrollIndex 1`] = `
18371843
/>
18381844
</View>
18391845
<View
1846+
collapsable={true}
18401847
style={
18411848
Object {
18421849
"height": 50,
@@ -1917,6 +1924,7 @@ exports[`clamps render area when items removed for initialScrollIndex > 0 and sc
19171924
>
19181925
<View>
19191926
<View
1927+
collapsable={true}
19201928
style={
19211929
Object {
19221930
"height": 40,
@@ -2182,6 +2190,7 @@ exports[`discards intitial render if initialScrollIndex != 0 1`] = `
21822190
>
21832191
<View>
21842192
<View
2193+
collapsable={true}
21852194
style={
21862195
Object {
21872196
"height": 140,
@@ -2364,6 +2373,7 @@ exports[`does not adjust render area until content area layed out 1`] = `
23642373
/>
23652374
</View>
23662375
<View
2376+
collapsable={true}
23672377
style={
23682378
Object {
23692379
"height": 150,
@@ -2459,6 +2469,7 @@ exports[`does not move render area when initialScrollIndex is > 0 and offset not
24592469
>
24602470
<View>
24612471
<View
2472+
collapsable={true}
24622473
style={
24632474
Object {
24642475
"height": 10,
@@ -2506,6 +2517,7 @@ exports[`does not move render area when initialScrollIndex is > 0 and offset not
25062517
/>
25072518
</View>
25082519
<View
2520+
collapsable={true}
25092521
style={
25102522
Object {
25112523
"height": 140,
@@ -2570,6 +2582,7 @@ exports[`does not over-render when there is less than initialNumToRender cells 1
25702582
>
25712583
<View>
25722584
<View
2585+
collapsable={true}
25732586
style={
25742587
Object {
25752588
"height": 40,
@@ -2823,6 +2836,7 @@ exports[`expands first in viewport to render up to maxToRenderPerBatch on initia
28232836
>
28242837
<View>
28252838
<View
2839+
collapsable={true}
28262840
style={
28272841
Object {
28282842
"height": 40,
@@ -2846,6 +2860,7 @@ exports[`expands first in viewport to render up to maxToRenderPerBatch on initia
28462860
/>
28472861
</View>
28482862
<View
2863+
collapsable={true}
28492864
style={
28502865
Object {
28512866
"height": 40,
@@ -2996,6 +3011,7 @@ exports[`expands render area by maxToRenderPerBatch on tick 1`] = `
29963011
/>
29973012
</View>
29983013
<View
3014+
collapsable={true}
29993015
style={
30003016
Object {
30013017
"height": 130,
@@ -3272,6 +3288,7 @@ exports[`handles maintainVisibleContentPosition 1`] = `
32723288
/>
32733289
</View>
32743290
<View
3291+
collapsable={true}
32753292
style={
32763293
Object {
32773294
"height": 150,
@@ -3409,6 +3426,7 @@ exports[`handles maintainVisibleContentPosition 2`] = `
34093426
/>
34103427
</View>
34113428
<View
3429+
collapsable={true}
34123430
style={
34133431
Object {
34143432
"height": 90,
@@ -3456,6 +3474,7 @@ exports[`handles maintainVisibleContentPosition 2`] = `
34563474
/>
34573475
</View>
34583476
<View
3477+
collapsable={true}
34593478
style={
34603479
Object {
34613480
"height": 150,
@@ -3593,6 +3612,7 @@ exports[`handles maintainVisibleContentPosition 3`] = `
35933612
/>
35943613
</View>
35953614
<View
3615+
collapsable={true}
35963616
style={
35973617
Object {
35983618
"height": 80,
@@ -3648,6 +3668,7 @@ exports[`handles maintainVisibleContentPosition 3`] = `
36483668
/>
36493669
</View>
36503670
<View
3671+
collapsable={true}
36513672
style={
36523673
Object {
36533674
"height": 150,
@@ -3787,6 +3808,7 @@ exports[`handles maintainVisibleContentPosition when anchor moves before minInde
37873808
/>
37883809
</View>
37893810
<View
3811+
collapsable={true}
37903812
style={
37913813
Object {
37923814
"height": 150,
@@ -3915,6 +3937,7 @@ exports[`handles maintainVisibleContentPosition when anchor moves before minInde
39153937
/>
39163938
</View>
39173939
<View
3940+
collapsable={true}
39183941
style={
39193942
Object {
39203943
"height": 150,
@@ -3978,6 +4001,7 @@ exports[`initially renders nothing when initialNumToRender is 0 1`] = `
39784001
>
39794002
<View>
39804003
<View
4004+
collapsable={true}
39814005
style={
39824006
Object {
39834007
"height": 100,
@@ -4112,6 +4136,7 @@ exports[`keeps viewport above last focused rendered 1`] = `
41124136
/>
41134137
</View>
41144138
<View
4139+
collapsable={true}
41154140
style={
41164141
Object {
41174142
"height": 70,
@@ -4342,6 +4367,7 @@ exports[`keeps viewport below last focused rendered 1`] = `
43424367
/>
43434368
</View>
43444369
<View
4370+
collapsable={true}
43454371
style={
43464372
Object {
43474373
"height": 50,
@@ -4479,6 +4505,7 @@ exports[`renders a zero-height tail spacer on initial render if getItemLayout no
44794505
/>
44804506
</View>
44814507
<View
4508+
collapsable={true}
44824509
style={
44834510
Object {
44844511
"height": 0,
@@ -4588,6 +4615,7 @@ exports[`renders full tail spacer if all cells measured 1`] = `
45884615
/>
45894616
</View>
45904617
<View
4618+
collapsable={true}
45914619
style={
45924620
Object {
45934621
"height": 50,
@@ -4865,6 +4893,7 @@ exports[`renders new items when data is updated with non-zero initialScrollIndex
48654893
/>
48664894
</View>
48674895
<View
4896+
collapsable={true}
48684897
style={
48694898
Object {
48704899
"height": 20,
@@ -5004,6 +5033,7 @@ exports[`renders offset cells in initial render when initialScrollIndex set 1`]
50045033
>
50055034
<View>
50065035
<View
5036+
collapsable={true}
50075037
style={
50085038
Object {
50095039
"height": 40,
@@ -5043,6 +5073,7 @@ exports[`renders offset cells in initial render when initialScrollIndex set 1`]
50435073
/>
50445074
</View>
50455075
<View
5076+
collapsable={true}
50465077
style={
50475078
Object {
50485079
"height": 20,
@@ -5152,6 +5183,7 @@ exports[`renders tail spacer up to last measured index if getItemLayout not defi
51525183
/>
51535184
</View>
51545185
<View
5186+
collapsable={true}
51555187
style={
51565188
Object {
51575189
"height": 20,
@@ -5252,6 +5284,7 @@ exports[`renders tail spacer up to last measured with irregular layout when getI
52525284
/>
52535285
</View>
52545286
<View
5287+
collapsable={true}
52555288
style={
52565289
Object {
52575290
"height": 17,
@@ -5325,6 +5358,7 @@ exports[`renders windowSize derived region at bottom 1`] = `
53255358
/>
53265359
</View>
53275360
<View
5361+
collapsable={true}
53285362
style={
53295363
Object {
53305364
"height": 40,
@@ -5462,6 +5496,7 @@ exports[`renders windowSize derived region at top 1`] = `
54625496
/>
54635497
</View>
54645498
<View
5499+
collapsable={true}
54655500
style={
54665501
Object {
54675502
"height": 60,
@@ -5535,6 +5570,7 @@ exports[`renders windowSize derived region in middle 1`] = `
55355570
/>
55365571
</View>
55375572
<View
5573+
collapsable={true}
55385574
style={
55395575
Object {
55405576
"height": 10,
@@ -5598,6 +5634,7 @@ exports[`renders windowSize derived region in middle 1`] = `
55985634
/>
55995635
</View>
56005636
<View
5637+
collapsable={true}
56015638
style={
56025639
Object {
56035640
"height": 10,
@@ -5689,6 +5726,7 @@ exports[`renders zero-height tail spacer on batch render if cells not yet measur
56895726
/>
56905727
</View>
56915728
<View
5729+
collapsable={true}
56925730
style={
56935731
Object {
56945732
"height": 0,
@@ -5926,6 +5964,7 @@ exports[`retains initial render region when an item is appended 1`] = `
59265964
/>
59275965
</View>
59285966
<View
5967+
collapsable={true}
59295968
style={
59305969
Object {
59315970
"height": 80,
@@ -6061,6 +6100,7 @@ exports[`retains intitial render if initialScrollIndex == 0 1`] = `
60616100
/>
60626101
</View>
60636102
<View
6103+
collapsable={true}
60646104
style={
60656105
Object {
60666106
"height": 90,
@@ -6257,6 +6297,7 @@ exports[`unmounts sticky headers moved below viewport 1`] = `
62576297
/>
62586298
</View>
62596299
<View
6300+
collapsable={true}
62606301
style={
62616302
Object {
62626303
"height": 150,
@@ -6356,6 +6397,7 @@ exports[`virtualizes away last focused index if item removed 1`] = `
63566397
/>
63576398
</View>
63586399
<View
6400+
collapsable={true}
63596401
style={
63606402
Object {
63616403
"height": 70,
@@ -6546,6 +6588,7 @@ exports[`virtualizes away last focused item if focus changes to a new cell 1`] =
65466588
/>
65476589
</View>
65486590
<View
6591+
collapsable={true}
65496592
style={
65506593
Object {
65516594
"height": 110,

0 commit comments

Comments
 (0)