From 24f9379e895755cefbe48bf4ea8a44d0f8c6b1b7 Mon Sep 17 00:00:00 2001
From: Nick Lefever <lefever@meta.com>
Date: Tue, 31 Oct 2023 10:51:00 -0700
Subject: [PATCH 1/2] [fabric] Disable view flattening in VirtualizedList cells

Summary:
Scroll views set up with an inverted vertical axis can't support view flattening due to the flattening not taking the axis inversion in consideration while repositioning the views.

This diff disables view flattening on the cells of the virtualized list so that the layout would be correct in inverted scroll views when using Fabric.

The change is not being applied to ScrollView directly because we can safely assume that vertical axis inversion will only be enabled on VirtualizedList/FlatList.

Test Plan:
Run Zeratul with Fabric and check that the vertical order of grouped bubble messages is correct.

| Before | After |
|--|
|  {F1136386200}  |  {F1136386364}  |

Reviewers: shawndempsey, #rn-desktop

Reviewed By: shawndempsey

Differential Revision: https://phabricator.intern.facebook.com/D50846483

Tasks: T167539420
---
 .../Lists/VirtualizedListCellRenderer.js                 | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/virtualized-lists/Lists/VirtualizedListCellRenderer.js b/packages/virtualized-lists/Lists/VirtualizedListCellRenderer.js
index ce5341107ffe23..24574fc9c65416 100644
--- a/packages/virtualized-lists/Lists/VirtualizedListCellRenderer.js
+++ b/packages/virtualized-lists/Lists/VirtualizedListCellRenderer.js
@@ -19,7 +19,7 @@ import type {
 import {VirtualizedListCellContextProvider} from './VirtualizedListContext.js';
 import invariant from 'invariant';
 import * as React from 'react';
-import {StyleSheet, View} from 'react-native';
+import {Platform, StyleSheet, View} from 'react-native'; // [macOS]
 
 export type Props<ItemT> = {
   CellRendererComponent?: ?React.ComponentType<CellRendererProps<ItemT>>,
@@ -219,7 +219,7 @@ export default class CellRenderer<ItemT> extends React.PureComponent<
       : horizontal
         ? [styles.row, inversionStyle]
         : inversionStyle;
-    const result = !CellRendererComponent ? (
+    let result = !CellRendererComponent ? ( // [macOS]
       <View
         style={cellStyle}
         onFocusCapture={this._onCellFocusCapture}
@@ -240,6 +240,11 @@ export default class CellRenderer<ItemT> extends React.PureComponent<
       </CellRendererComponent>
     );
 
+    if (Platform.OS === 'macos') {
+      // [macOS
+      result = React.cloneElement(result, {collapsable: false});
+    } // macOS]
+
     return (
       <VirtualizedListCellContextProvider cellKey={this.props.cellKey}>
         {result}

From 2649005d3ecd503404a344489fc1b53d7d1e9f1a Mon Sep 17 00:00:00 2001
From: Nick Lefever <lefever@meta.com>
Date: Fri, 10 Nov 2023 01:18:12 +0100
Subject: [PATCH 2/2] [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 />