Skip to content

fix(fabric, lists): disable view flattening in VirtualizedList #2292

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 28, 2024
Merged

fix(fabric, lists): disable view flattening in VirtualizedList #2292

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
24f9379
[fabric] Disable view flattening in VirtualizedList cells
Oct 31, 2023
2649005
[fabric] Disable view flattening in header/footer/empty/spacer compon…
Nov 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
[fabric] Disable view flattening in header/footer/empty/spacer compon… 
…ents 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
  • Loading branch information
@Saadnajmi
Nick Lefever authored and Saadnajmi committed Nov 28, 2024
commit 2649005d3ecd503404a344489fc1b53d7d1e9f1a
1 change: 1 addition & 0 deletions packages/react-native/Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,7 @@ exports[`FlatList renders all the bells and whistles 1`] = `
</View>
</View>
<View
collapsable={true}
onLayout={[Function]}
>
<footer />
Expand Down
1 change: 1 addition & 0 deletions packages/react-native/Libraries/Lists/__tests__/__snapshots__/SectionList-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,6 +386,7 @@ exports[`SectionList renders all the bells and whistles 1`] = `
/>
</View>
<View
collapsable={true}
onLayout={[Function]}
>
<footer
Expand Down
4 changes: 4 additions & 0 deletions packages/virtualized-lists/Lists/VirtualizedList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -989,8 +989,10 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
<ListEmptyComponent />
)): any);
cells.push(
// $FlowFixMe[prop-missing] React.Element internal inspection
<VirtualizedListCellContextProvider
cellKey={this._getCellKey() + '-empty'}
collapsable={Platform.OS !== 'macos'} // [macOS]
key="$empty">
{React.cloneElement(element, {
onLayout: (event: LayoutEvent) => {
Expand Down Expand Up @@ -1050,6 +1052,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
lastMetrics.offset + lastMetrics.length - firstMetrics.offset;
cells.push(
<View
collapsable={Platform.OS !== 'macos'} // [macOS]
key={`$spacer-${section.first}`}
style={{[spacerKey]: spacerSize}}
/>,
Expand Down Expand Up @@ -1090,6 +1093,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
cellKey={this._getFooterCellKey()}
key="$footer">
<View
collapsable={Platform.OS !== 'macos'} // [macOS]
onLayout={this._onLayoutFooter}
style={StyleSheet.compose(
inversionStyle,
Expand Down
43 changes: 43 additions & 0 deletions packages/virtualized-lists/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -413,6 +413,7 @@ exports[`VirtualizedList forwards correct stickyHeaderIndices when partially in
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 50,
Expand Down Expand Up @@ -907,6 +908,7 @@ exports[`VirtualizedList keeps sticky headers above viewport visualized 1`] = `
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 110,
Expand All @@ -923,6 +925,7 @@ exports[`VirtualizedList keeps sticky headers above viewport visualized 1`] = `
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 10,
Expand Down Expand Up @@ -1173,6 +1176,7 @@ exports[`VirtualizedList renders all the bells and whistles 1`] = `
/>
</View>
<View
collapsable={true}
onLayout={[Function]}
style={
Object {
Expand Down Expand Up @@ -1258,6 +1262,7 @@ exports[`VirtualizedList renders empty list with empty component 1`] = `
</View>
<empty />
<View
collapsable={true}
onLayout={[Function]}
>
<footer />
Expand Down Expand Up @@ -1547,6 +1552,7 @@ exports[`VirtualizedList renders sticky headers in viewport on batched render 1`
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 50,
Expand Down Expand Up @@ -1837,6 +1843,7 @@ exports[`adjusts render area with non-zero initialScrollIndex 1`] = `
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 50,
Expand Down Expand Up @@ -1917,6 +1924,7 @@ exports[`clamps render area when items removed for initialScrollIndex > 0 and sc
>
<View>
<View
collapsable={true}
style={
Object {
"height": 40,
Expand Down Expand Up @@ -2182,6 +2190,7 @@ exports[`discards intitial render if initialScrollIndex != 0 1`] = `
>
<View>
<View
collapsable={true}
style={
Object {
"height": 140,
Expand Down Expand Up @@ -2364,6 +2373,7 @@ exports[`does not adjust render area until content area layed out 1`] = `
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 150,
Expand Down Expand Up @@ -2459,6 +2469,7 @@ exports[`does not move render area when initialScrollIndex is > 0 and offset not
>
<View>
<View
collapsable={true}
style={
Object {
"height": 10,
Expand Down Expand Up @@ -2506,6 +2517,7 @@ exports[`does not move render area when initialScrollIndex is > 0 and offset not
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 140,
Expand Down Expand Up @@ -2570,6 +2582,7 @@ exports[`does not over-render when there is less than initialNumToRender cells 1
>
<View>
<View
collapsable={true}
style={
Object {
"height": 40,
Expand Down Expand Up @@ -2823,6 +2836,7 @@ exports[`expands first in viewport to render up to maxToRenderPerBatch on initia
>
<View>
<View
collapsable={true}
style={
Object {
"height": 40,
Expand All @@ -2846,6 +2860,7 @@ exports[`expands first in viewport to render up to maxToRenderPerBatch on initia
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 40,
Expand Down Expand Up @@ -2996,6 +3011,7 @@ exports[`expands render area by maxToRenderPerBatch on tick 1`] = `
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 130,
Expand Down Expand Up @@ -3272,6 +3288,7 @@ exports[`handles maintainVisibleContentPosition 1`] = `
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 150,
Expand Down Expand Up @@ -3409,6 +3426,7 @@ exports[`handles maintainVisibleContentPosition 2`] = `
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 90,
Expand Down Expand Up @@ -3456,6 +3474,7 @@ exports[`handles maintainVisibleContentPosition 2`] = `
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 150,
Expand Down Expand Up @@ -3593,6 +3612,7 @@ exports[`handles maintainVisibleContentPosition 3`] = `
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 80,
Expand Down Expand Up @@ -3648,6 +3668,7 @@ exports[`handles maintainVisibleContentPosition 3`] = `
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 150,
Expand Down Expand Up @@ -3787,6 +3808,7 @@ exports[`handles maintainVisibleContentPosition when anchor moves before minInde
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 150,
Expand Down Expand Up @@ -3915,6 +3937,7 @@ exports[`handles maintainVisibleContentPosition when anchor moves before minInde
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 150,
Expand Down Expand Up @@ -3978,6 +4001,7 @@ exports[`initially renders nothing when initialNumToRender is 0 1`] = `
>
<View>
<View
collapsable={true}
style={
Object {
"height": 100,
Expand Down Expand Up @@ -4112,6 +4136,7 @@ exports[`keeps viewport above last focused rendered 1`] = `
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 70,
Expand Down Expand Up @@ -4342,6 +4367,7 @@ exports[`keeps viewport below last focused rendered 1`] = `
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 50,
Expand Down Expand Up @@ -4479,6 +4505,7 @@ exports[`renders a zero-height tail spacer on initial render if getItemLayout no
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 0,
Expand Down Expand Up @@ -4588,6 +4615,7 @@ exports[`renders full tail spacer if all cells measured 1`] = `
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 50,
Expand Down Expand Up @@ -4865,6 +4893,7 @@ exports[`renders new items when data is updated with non-zero initialScrollIndex
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 20,
Expand Down Expand Up @@ -5004,6 +5033,7 @@ exports[`renders offset cells in initial render when initialScrollIndex set 1`]
>
<View>
<View
collapsable={true}
style={
Object {
"height": 40,
Expand Down Expand Up @@ -5043,6 +5073,7 @@ exports[`renders offset cells in initial render when initialScrollIndex set 1`]
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 20,
Expand Down Expand Up @@ -5152,6 +5183,7 @@ exports[`renders tail spacer up to last measured index if getItemLayout not defi
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 20,
Expand Down Expand Up @@ -5252,6 +5284,7 @@ exports[`renders tail spacer up to last measured with irregular layout when getI
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 17,
Expand Down Expand Up @@ -5325,6 +5358,7 @@ exports[`renders windowSize derived region at bottom 1`] = `
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 40,
Expand Down Expand Up @@ -5462,6 +5496,7 @@ exports[`renders windowSize derived region at top 1`] = `
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 60,
Expand Down Expand Up @@ -5535,6 +5570,7 @@ exports[`renders windowSize derived region in middle 1`] = `
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 10,
Expand Down Expand Up @@ -5598,6 +5634,7 @@ exports[`renders windowSize derived region in middle 1`] = `
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 10,
Expand Down Expand Up @@ -5689,6 +5726,7 @@ exports[`renders zero-height tail spacer on batch render if cells not yet measur
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 0,
Expand Down Expand Up @@ -5926,6 +5964,7 @@ exports[`retains initial render region when an item is appended 1`] = `
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 80,
Expand Down Expand Up @@ -6061,6 +6100,7 @@ exports[`retains intitial render if initialScrollIndex == 0 1`] = `
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 90,
Expand Down Expand Up @@ -6257,6 +6297,7 @@ exports[`unmounts sticky headers moved below viewport 1`] = `
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 150,
Expand Down Expand Up @@ -6356,6 +6397,7 @@ exports[`virtualizes away last focused index if item removed 1`] = `
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 70,
Expand Down Expand Up @@ -6546,6 +6588,7 @@ exports[`virtualizes away last focused item if focus changes to a new cell 1`] =
/>
</View>
<View
collapsable={true}
style={
Object {
"height": 110,
Expand Down
Loading
Loading