Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
wants to merge 3 commits into from
Closed

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

wants to merge 3 commits into from

Conversation

michalchudziak
Copy link
Contributor

@michalchudziak michalchudziak commented Mar 27, 2019

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

Vertical, not inverted, empty
image

Vertical, inverted, not empty
image

Vertical, inverted, empty
image

Horizontal, not inverted, not empty
image

Horizontal, not inverted, empty
image

Horizontal, inverted, not empty
image

Horizontal, inverted, empty
image

Changelog

[General] [Fixed] - Fixed VirtualizedList, SectionList and FlatList behavior on rendering list headers with inverted prop and zero items

Test Plan

Start RNTester app on ios and android and manipulate the switches to recreate all the scenarios described above.

@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Mar 27, 2019
@michalchudziak michalchudziak changed the title Remove item count check while applying inverted styles in VirtualizedList Fix behaviour of Header, Footer and Empty List components in VirtualizedLists Mar 27, 2019
@michalchudziak michalchudziak changed the title Fix behaviour of Header, Footer and Empty List components in VirtualizedLists Fix behaviour of Header, Footer and Empty List components in VirtualizedList when it's inverted Mar 27, 2019
Copy link
Contributor

@cpojer cpojer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the fix!

Copy link
Contributor

@facebook-github-bot facebook-github-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cpojer is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

@react-native-bot
Copy link
Collaborator

This pull request was successfully merged by @michalchudziak in c13f5d4.

When will my fix make it into a release? | Upcoming Releases

@react-native-bot react-native-bot added the Merged This PR has been merged. label Mar 27, 2019
kelset pushed a commit that referenced this pull request Mar 29, 2019
…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
@farwayer
Copy link
Contributor

farwayer commented Apr 2, 2019

This change made it impossible to do ListEmptyComponent fullscreen because of adding extra View over empty component.

<FlatList
  ...
  {...{ListEmptyComponent}}
  contentContainerStyle={{flexGrow: 1}}
/>

function ListEmptyComponent() {
  return (
    <View style={[{flex: 1, ...]} />
  )
}

0.59.2
2019-04-02-231544_559x766_scrot

0.59.3
2019-04-02-231633_558x764_scrot

@andres-torres-marroquin
Copy link

It's reversed again since 0.59.5 through 0.59.9 for ListEmptyComponent.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Component: FlatList Component: SectionList Component: VirtualizedList Merged This PR has been merged.
Projects
None yet
6 participants