status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix behaviour of Header, Footer and Empty List components in VirtualizedList when it's inverted (#24167) 

Summary:
Fixes https://github.com/facebook/react-native/issues/23453
Fixes https://github.com/facebook/react-native/issues/21196

Basically, changes made in https://github.com/facebook/react-native/pull/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: https://github.com/facebook/react-native/pull/24167

Differential Revision: D14642345

Pulled By: cpojer

fbshipit-source-id: b530bbbd57f60e53a976ac5db272ea4b2d2b3e99
This commit is contained in:
michalchudziak 2019-03-27 11:59:18 -07:00 committed by Lorenzo Sciandra
parent 13cb5a91ed
commit e94d3444dc
2 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
Libraries/Lists/VirtualizedList.js
View File

@ -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. */

6
Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap
View File

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