-
Notifications
You must be signed in to change notification settings - Fork 24.1k
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 not taking full screen with flex 1 in SectionList #17944
Comments
having same issue on 0.52.2 |
Same issue on RN 0.53.0 |
Same issues on RN 0.53.3 |
The same issue on RN 0.54 |
Any news ? |
The same for me. RN 0.54.4 |
worked better for me. |
@inferusvv we can't use flex in conentContainerStyle it will disable the scroll |
@smsmdida Hm, you might be right. In my case I have container without scrolling inside |
Had to use this as a workaround:
|
same here RN: 0.55.4 the above workaround spoils the entire layout.. 😆 |
don't work for me
|
Hey. the fix is merged to master already db061ea. |
@hbarylskyi It doesn't work if your FlatList has a header component. |
This should be linked to (and hopefully closed by): PR #18206 |
Is this fixed? I'm still facing this bug in 0.57. |
Still an issue with 0.57.1. |
As mentioned above still a bug in 0.57 |
Worked like a charm! Thanks a lot! |
I got success with the simple trick as below
than I declare the empty component
And at last Flatlist look like :
|
And this is probably the best solution to fix it |
👋 hey all, this issue has been pretty quiet lately - is this still an issue with the latest version of React Native? Please let me know if so and I'll re-open. Thank you. |
Hi @Salakar, I can confirm this is still an issue in 0.59.4. |
|
@elyalvarado @jayan2019 - thanks for confirming - I've re-opened this issue. |
This should be fixed with the merged PR #24339, as soon as it lands in a release version |
Fixed on master. |
I think it's not workking in 0.60 |
I fixed it by wrapping my FlatList in a View with flexGrow: 1 on the View and on the FlatList contentContainerStyle I also set flexGrow: 1 (Working on 0.60.5 for me)
Just make sure that any parent views this component is wrapped in are also flex: 1 (I have noticed that this can have an effect on children components flex) Hope this helps :) |
Working on 0.60.5
|
contentContainerStyle={{ height: '100%' }} |
contentContainerStyle={{minHeight: '100%'}} works for me |
on 0.61.5:
|
Worked like a charm :) |
Is this a bug report?
Yes
Have you read the Contributing Guidelines?
Yes
Environment
Expected Behavior
ListEmptyComponent
(myEmptyComponent
) has styleflex: 1
and should be rendered taking full screen.If
ListHeaderComponent
orListFooterComponent
are defined and styled withflex: 1
, should render the elements with the same proportion and using the whole screen.Actual Behavior
ListEmptyComponent
(myEmptyComponent
) renders using only the space it needs (to fit).Reproducible Demo
The text was updated successfully, but these errors were encountered: