-
Notifications
You must be signed in to change notification settings - Fork 24.2k
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
ListEmptyComponent is rendered upside down, when using inverted flag #21196
Comments
This comment has been minimized.
This comment has been minimized.
@scottmas it did not. You can easily tell if a fix is in a release by looking at the tags in the commit. b971c5b is only tagged with v0.58.0-rc.1 and v0.58.0-rc.0, so it's not in any of the 0.57 releases. If you have any other questions about the release process, you can take a look at https://github.com/react-native-community/react-native-releases where the status for each release is discussed in a dedicated GitHub issue. |
@scottmas the fix landed in 0.57.8, you can find it in the changelog -> https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md#fixed (the reason why that tag doesn't appear as Hector explained is a mistery to me) |
@alexisbronchart can you provide a repro? |
@kelset https://github.com/alexisbronchart/invertedListTest I committed everything in there. When I do a run-ios this is the result I get: |
Why not just rotate your view 180deg? A simple: styles = Stylesheet.create({ would fix that problem at-least until it's changed in a react native release. I don't foresee any major react native updates before version 0.58 which isn't planned to release until the new year. Although keep an eye out on the version 0.57.x updates. ** Keep in mind this would not fix the issue with the ActivityIndicator appearing at the top instead of bottom when inverted flag is on, it would simple rotate only your empty list component** |
Reopening. I wonder what is missing for it to work properly 🤔 Anyway yes, there won't be any release 'til next year, you can keep up on the |
Alright thanks! FYI for me it looks like 0.57.8 actually introduced the bug. If I revert to 0.57.7 everything is fine. |
and to add my 2c here : i've tested with @alexisbronchart 's repo and just undoing 30c2fb8 in node_modules and it work as expected |
Looks like this has been reintroduced in 0.59.0 (also in 0.59.1). updated repro : https://github.com/alexisbronchart/invertedListTest |
Hey @alexisbronchart thanks for letting me know - could it be that the revert didn't happen on the 0.59 branch? Or it's something else causing it? 🤔 |
ok looks like thanks to @michalchudziak we got a new fix for that :) |
…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
This is happening to System: |
@kelset it seems this issue is still present in 0.60.5 🤔
|
Workaround if anyone is interested, just apply this style to your list empty component:
|
seems to be happening to me in RN 0.59.9 |
Has anyone tried with 61 yet? |
@kelset in the sense that my I can make a new repro repo if necessary though :) |
I see - yeah if you have time for a new repro it will be great. I'll reopen this in the meantime |
@kelset 👍 https://github.com/mjmasn/InvertedListEmptyComponentIssue react-native info output
|
If you apply a CSS workaround and the bug gets fixed you may end up with the same issue if you forget to remove the workaround. Maybe it's just better to set |
Btw it's still (or again?) happening in 61.3 |
Still an issue with 63.3 |
Still an issue with 0.64 |
write condition in inverted data.length !=0 ? true : false <FlatList |
|
This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days. |
This issue was closed because it has been stalled for 7 days with no activity. |
Environment
Description
The FlatList or SectionList
ListEmptyComponent
is rendered upside down, when using inverted flagIt was introduced by db061ea . I have reverted this change in our project, which works. cc @janicduplessis
To Reproduce
Create a FlatList with empty data,
inverted={true}
, and aListEmptyComponent
. Like below:Reproducible Demo
Example can be found here in
InvertedListBug.js
. or run the project and observe.https://github.com/AndrewJack/react-native-basic
The text was updated successfully, but these errors were encountered: