Fix behaviour of Header, Footer and Empty List components in Virtuali…

…zedList when it's inverted (#24167)

Summary:
Fixes #23453
Fixes #21196

Basically, changes made in #21496 currently breaks behavior of `<VirtualizedList />`  and any components that are based on it (`<SectionList />, <FlatList />`). This PR solves both issues listed above.

Visual confirmation of the resolved issue:

**Vertical, not inverted, not empty**
![image](https://user-images.githubusercontent.com/7837457/55076839-b005d700-5096-11e9-91de-090934cb0129.png)

**Vertical, not inverted, empty**
![image](https://user-images.githubusercontent.com/7837457/55076971-fb1fea00-5096-11e9-8d73-5a2d86275da8.png)

**Vertical, inverted, not empty**
![image](https://user-images.githubusercontent.com/7837457/55077042-23a7e400-5097-11e9-911f-9dad4d48a578.png)

**Vertical, inverted, empty**
![image](https://user-images.githubusercontent.com/7837457/55079957-87351000-509d-11e9-8f1c-b7134f1f43f9.png)

**Horizontal, not inverted, not empty**
![image](https://user-images.githubusercontent.com/7837457/55077118-44703980-5097-11e9-94e9-e33d4af436ee.png)

**Horizontal, not inverted, empty**
![image](https://user-images.githubusercontent.com/7837457/55077150-52be5580-5097-11e9-9d43-7cb4e983167e.png)

**Horizontal, inverted, not empty**
![image](https://user-images.githubusercontent.com/7837457/55077183-623d9e80-5097-11e9-9e8a-1b2468c7b3a9.png)

**Horizontal, inverted, empty**
![image](https://user-images.githubusercontent.com/7837457/55080033-af247380-509d-11e9-90ae-1ff656d46dd1.png)

[General] [Fixed] - Fixed VirtualizedList, SectionList and FlatList behavior on rendering list headers with inverted prop and zero items
Pull Request resolved: #24167

Differential Revision: D14642345

Pulled By: cpojer

fbshipit-source-id: b530bbbd57f60e53a976ac5db272ea4b2d2b3e99

Libraries/Lists/VirtualizedList.js

@@ -873,16 +873,17 @@ class VirtualizedList extends React.PureComponent<Props, State> {
         <ListEmptyComponent />
       )): any);
       cells.push(
-        React.cloneElement(element, {
-          key: '$empty',
-          onLayout: event => {
-            this._onLayoutEmpty(event);
-            if (element.props.onLayout) {
-              element.props.onLayout(event);
-            }
-          },
-          style: [element.props.style, inversionStyle],
-        }),
+        <View key="$empty" style={inversionStyle}>
+          {React.cloneElement(element, {
+            onLayout: event => {
+              this._onLayoutEmpty(event);
+              if (element.props.onLayout) {
+                element.props.onLayout(event);
+              }
+            },
+            style: element.props.style,
+          })}
+        </View>,
       );
     }
     if (ListFooterComponent) {
@@ -925,7 +926,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           : this.props.inverted,
       stickyHeaderIndices,
     };
-    if (inversionStyle && itemCount !== 0) {
+    if (inversionStyle) {
       /* $FlowFixMe(>=0.70.0 site=react_native_fb) This comment suppresses an
        * error found when Flow v0.70 was deployed. To see the error delete
        * this comment and run Flow. */

Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap

@@ -668,7 +668,11 @@ exports[`VirtualizedList renders empty list with empty component 1`] = `
     >
       <header />
     </View>
-    <empty />
+    <View
+      style={null}
+    >
+      <empty />
+    </View>
     <View
       onLayout={[Function]}
     >