[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

packages/virtualized-lists/Lists/VirtualizedList.js

@@ -991,6 +991,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
       cells.push(
         <VirtualizedListCellContextProvider
           cellKey={this._getCellKey() + '-empty'}
+          collapsable={Platform.OS !== 'macos'} // [macOS]
           key="$empty">
           {React.cloneElement(element, {
             onLayout: (event: LayoutEvent) => {
@@ -1050,6 +1051,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 +1092,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,