Repository navigation
ListEmptyComponent is rendered upside down, when using inverted flag #21196
Description
Environment
React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Memory: 227.11 MB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.10.0 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
Build Tools: 23.0.1, 23.0.2, 23.0.3, 24.0.0, 24.0.1, 24.0.2, 24.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.2
API Levels: 23, 25, 26, 27, 28
IDEs:
Android Studio: 3.1 AI-173.4819257
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.5.0 => 16.5.0
react-native: 0.57.0 => 0.57.0
npmGlobalPackages:
react-native-cli: 1.0.0
Description
The FlatList or SectionList ListEmptyComponent is rendered upside down, when using inverted flag
It 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 a ListEmptyComponent. Like below:
<FlatList
data={data}
ListEmptyComponent={this.renderEmpty}
style={styles.list}
inverted
/>Reproducible Demo
Example can be found here in InvertedListBug.js. or run the project and observe.
https://github.com/AndrewJack/react-native-basic
Reacted by Xander Berkein, faltech, Ethan, Andrii Fedyk, Julius Baltrusaitis, Graham Scanlon, risafj, Minh Nguyen and Ritesh Jha
Activity
[-][Bug] [FlatList] ListEmptyComponent is rendered upside down, when using inverted flag[/-][+]ListEmptyComponent is rendered upside down, when using inverted flag[/+]JosimarGomes commentedon Oct 4, 2018
scottmas commentedon Nov 19, 2018
@kelset @hramos Did this fix land in RN 0.57.5? Or are we going to need to wait for a future release? NPM shows 0.57.5 being released two days before #21117 was marked by the Facebook bot as being merged, so it seems likely not..
Fix ListEmptyComponent is rendered upside down when using inverted fl…
Fix ListEmptyComponent is rendered upside down when using inverted fl…
hramos commentedon Dec 13, 2018
@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.
kelset commentedon Dec 14, 2018
@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 commentedon Dec 18, 2018
I'm running 0.57.8 and the issue is still happening.
More importantly the list is not actually inverted as the refreshControl is shown at the top.
kelset commentedon Dec 18, 2018
@alexisbronchart can you provide a repro?
27 remaining items
kelset commentedon Sep 30, 2019
I see - yeah if you have time for a new repro it will be great. I'll reopen this in the meantime
mjmasn commentedon Sep 30, 2019
@kelset 👍
https://github.com/mjmasn/InvertedListEmptyComponentIssue
react-native info output
zbettenbuk commentedon Nov 21, 2019
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
inversed = { false }on the component when the data is empty and you'll be safe.zbettenbuk commentedon Nov 21, 2019
Btw it's still (or again?) happening in 61.3
mast commentedon Dec 4, 2020
Still an issue with 63.3
raajnadar commentedon Mar 27, 2021
Still an issue with 0.64
jedsada-jed commentedon Apr 23, 2021
Use view for wrap component work for me. (RN 0.64.0)
shivjon commentedon May 10, 2021
write condition in inverted
data.length !=0 ? true : false
<FlatList
inverted={data.length !=0 ? true :false }
data={data}
keyExtractor={(_, index) => String(index)}
ListEmptyComponent={this.renderEmpty}
style={styles.list}
/>
minhna commentedon Sep 15, 2021
github-actions commentedon Mar 4, 2023
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.
github-actions commentedon Mar 11, 2023
This issue was closed because it has been stalled for 7 days with no activity.