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
facebook · Mar 29, 2019 · e94d344 · e94d344
1 parent 13cb5a9
commit e94d344
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 12 deletions.
diff --git a/Libraries/Lists/VirtualizedList.js b/Libraries/Lists/VirtualizedList.js
@@ -885,16 +885,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) {
@@ -937,7 +938,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. */

diff --git a/Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap b/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]}
     >