From 6539a8ba45e7703d32bb5bbdb14af08f87f42d61 Mon Sep 17 00:00:00 2001
From: Nick Lefever <lefever@meta.com>
Date: Fri, 10 Nov 2023 01:18:12 +0100
Subject: [PATCH] [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
---
 .../__snapshots__/FlatList-test.js.snap       |  1 +
 .../__snapshots__/SectionList-test.js.snap    |  1 +
 .../Lists/VirtualizedList.js                  |  4 ++
 .../VirtualizedList-test.js.snap              | 43 +++++++++++++++++++
 .../VirtualizedSectionList-test.js.snap       |  2 +
 5 files changed, 51 insertions(+)

diff --git a/packages/react-native/Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap b/packages/react-native/Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap
index 08b9739d54cc79..4912d50a2cc240 100644
--- a/packages/react-native/Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap
+++ b/packages/react-native/Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap
@@ -176,6 +176,7 @@ exports[`FlatList renders all the bells and whistles 1`] = `
       </View>
     </View>
     <View
+      collapsable={true}
       onLayout={[Function]}
     >
       <footer />
diff --git a/packages/react-native/Libraries/Lists/__tests__/__snapshots__/SectionList-test.js.snap b/packages/react-native/Libraries/Lists/__tests__/__snapshots__/SectionList-test.js.snap
index dcb40ffe0ae809..9628fa36bed36b 100644
--- a/packages/react-native/Libraries/Lists/__tests__/__snapshots__/SectionList-test.js.snap
+++ b/packages/react-native/Libraries/Lists/__tests__/__snapshots__/SectionList-test.js.snap
@@ -386,6 +386,7 @@ exports[`SectionList renders all the bells and whistles 1`] = `
       />
     </View>
     <View
+      collapsable={true}
       onLayout={[Function]}
     >
       <footer
diff --git a/packages/virtualized-lists/Lists/VirtualizedList.js b/packages/virtualized-lists/Lists/VirtualizedList.js
index 75b243c354fa6a..bddab92926f537 100644
--- a/packages/virtualized-lists/Lists/VirtualizedList.js
+++ b/packages/virtualized-lists/Lists/VirtualizedList.js
@@ -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) => {
@@ -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}}
             />,
@@ -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,
diff --git a/packages/virtualized-lists/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap b/packages/virtualized-lists/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap
index 7790f8581bdb85..33ddc97fa76c11 100644
--- a/packages/virtualized-lists/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap
+++ b/packages/virtualized-lists/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap
@@ -413,6 +413,7 @@ exports[`VirtualizedList forwards correct stickyHeaderIndices when partially in
       />
     </View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 50,
@@ -907,6 +908,7 @@ exports[`VirtualizedList keeps sticky headers above viewport visualized 1`] = `
       />
     </View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 110,
@@ -923,6 +925,7 @@ exports[`VirtualizedList keeps sticky headers above viewport visualized 1`] = `
       />
     </View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 10,
@@ -1173,6 +1176,7 @@ exports[`VirtualizedList renders all the bells and whistles 1`] = `
       />
     </View>
     <View
+      collapsable={true}
       onLayout={[Function]}
       style={
         Object {
@@ -1258,6 +1262,7 @@ exports[`VirtualizedList renders empty list with empty component 1`] = `
     </View>
     <empty />
     <View
+      collapsable={true}
       onLayout={[Function]}
     >
       <footer />
@@ -1547,6 +1552,7 @@ exports[`VirtualizedList renders sticky headers in viewport on batched render 1`
       />
     </View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 50,
@@ -1837,6 +1843,7 @@ exports[`adjusts render area with non-zero initialScrollIndex 1`] = `
       />
     </View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 50,
@@ -1917,6 +1924,7 @@ exports[`clamps render area when items removed for initialScrollIndex > 0 and sc
 >
   <View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 40,
@@ -2182,6 +2190,7 @@ exports[`discards intitial render if initialScrollIndex != 0 1`] = `
 >
   <View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 140,
@@ -2364,6 +2373,7 @@ exports[`does not adjust render area until content area layed out 1`] = `
       />
     </View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 150,
@@ -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,
@@ -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,
@@ -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,
@@ -2823,6 +2836,7 @@ exports[`expands first in viewport to render up to maxToRenderPerBatch on initia
 >
   <View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 40,
@@ -2846,6 +2860,7 @@ exports[`expands first in viewport to render up to maxToRenderPerBatch on initia
       />
     </View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 40,
@@ -2996,6 +3011,7 @@ exports[`expands render area by maxToRenderPerBatch on tick 1`] = `
       />
     </View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 130,
@@ -3272,6 +3288,7 @@ exports[`handles maintainVisibleContentPosition 1`] = `
       />
     </View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 150,
@@ -3409,6 +3426,7 @@ exports[`handles maintainVisibleContentPosition 2`] = `
       />
     </View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 90,
@@ -3456,6 +3474,7 @@ exports[`handles maintainVisibleContentPosition 2`] = `
       />
     </View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 150,
@@ -3593,6 +3612,7 @@ exports[`handles maintainVisibleContentPosition 3`] = `
       />
     </View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 80,
@@ -3648,6 +3668,7 @@ exports[`handles maintainVisibleContentPosition 3`] = `
       />
     </View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 150,
@@ -3787,6 +3808,7 @@ exports[`handles maintainVisibleContentPosition when anchor moves before minInde
       />
     </View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 150,
@@ -3915,6 +3937,7 @@ exports[`handles maintainVisibleContentPosition when anchor moves before minInde
       />
     </View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 150,
@@ -3978,6 +4001,7 @@ exports[`initially renders nothing when initialNumToRender is 0 1`] = `
 >
   <View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 100,
@@ -4112,6 +4136,7 @@ exports[`keeps viewport above last focused rendered 1`] = `
       />
     </View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 70,
@@ -4342,6 +4367,7 @@ exports[`keeps viewport below last focused rendered 1`] = `
       />
     </View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 50,
@@ -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,
@@ -4588,6 +4615,7 @@ exports[`renders full tail spacer if all cells measured 1`] = `
       />
     </View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 50,
@@ -4865,6 +4893,7 @@ exports[`renders new items when data is updated with non-zero initialScrollIndex
       />
     </View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 20,
@@ -5004,6 +5033,7 @@ exports[`renders offset cells in initial render when initialScrollIndex set 1`]
 >
   <View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 40,
@@ -5043,6 +5073,7 @@ exports[`renders offset cells in initial render when initialScrollIndex set 1`]
       />
     </View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 20,
@@ -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,
@@ -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,
@@ -5325,6 +5358,7 @@ exports[`renders windowSize derived region at bottom 1`] = `
       />
     </View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 40,
@@ -5462,6 +5496,7 @@ exports[`renders windowSize derived region at top 1`] = `
       />
     </View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 60,
@@ -5535,6 +5570,7 @@ exports[`renders windowSize derived region in middle 1`] = `
       />
     </View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 10,
@@ -5598,6 +5634,7 @@ exports[`renders windowSize derived region in middle 1`] = `
       />
     </View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 10,
@@ -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,
@@ -5926,6 +5964,7 @@ exports[`retains initial render region when an item is appended 1`] = `
       />
     </View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 80,
@@ -6061,6 +6100,7 @@ exports[`retains intitial render if initialScrollIndex == 0 1`] = `
       />
     </View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 90,
@@ -6257,6 +6297,7 @@ exports[`unmounts sticky headers moved below viewport 1`] = `
       />
     </View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 150,
@@ -6356,6 +6397,7 @@ exports[`virtualizes away last focused index if item removed 1`] = `
       />
     </View>
     <View
+      collapsable={true}
       style={
         Object {
           "height": 70,
@@ -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,
diff --git a/packages/virtualized-lists/Lists/__tests__/__snapshots__/VirtualizedSectionList-test.js.snap b/packages/virtualized-lists/Lists/__tests__/__snapshots__/VirtualizedSectionList-test.js.snap
index 8de2c76b838233..3d1211ea87c5bd 100644
--- a/packages/virtualized-lists/Lists/__tests__/__snapshots__/VirtualizedSectionList-test.js.snap
+++ b/packages/virtualized-lists/Lists/__tests__/__snapshots__/VirtualizedSectionList-test.js.snap
@@ -973,6 +973,7 @@ exports[`VirtualizedSectionList renders all the bells and whistles 1`] = `
       }
     />
     <View
+      collapsable={true}
       onLayout={[Function]}
       style={
         Object {
@@ -1040,6 +1041,7 @@ exports[`VirtualizedSectionList renders empty list with empty component 1`] = `
     </View>
     <empty />
     <View
+      collapsable={true}
       onLayout={[Function]}
     >
       <footer />