Skip to content

SectionList sticky headers drift around when scrolling to the ends #19725

New issue

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

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

Already on GitHub? # to your account

Closed
esprehn opened this issue Jun 15, 2018 · 4 comments
Closed

SectionList sticky headers drift around when scrolling to the ends #19725

esprehn opened this issue Jun 15, 2018 · 4 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@esprehn
Copy link
Contributor

esprehn commented Jun 15, 2018

Environment

Run react-native info in your terminal and paste its contents here.

Environment:
OS: macOS High Sierra 10.13.5
Node: 8.9.4
Yarn: 1.5.1
npm: 5.6.0
Watchman: 4.7.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.1 AI-173.4720617

Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: 0.55.0 => 0.55.0

Description

We have a SectionList with sticky headers that's also inverted. The sticky headers seem to jump up and down when scrolling. Sometimes they also drift out of the viewport and then snap back to become stuck.

Reproducible Demo

Let us know how to reproduce the issue. Include a code sample, share a project, or share an app that reproduces the issue using https://snack.expo.io/. Please follow the guidelines for providing a MCVE: https://stackoverflow.com/help/mcve

@esprehn
Copy link
Contributor Author

esprehn commented Jun 19, 2018

This seems to be the result of getItemHeight reporting incorrect values for some items. The manifestation of that is badly broken scrolling, jumpiness and headers that drift. I'd be nice if VirtualizedList had some debug mode that reported errors when the heights disagreed with each other.

@esprehn esprehn closed this as completed Jun 19, 2018
@CharlieOrlando
Copy link

@esprehn So did you end up finding a solution? I'm experiencing the same issue, as are other people... #15445

@esprehn
Copy link
Contributor Author

esprehn commented Jul 18, 2018

Our solution was to return the right values from getItemHeight. That said we've moved away from sticky headers because the VirtualizedList impl is really buggy. :/

@Taylor123
Copy link
Contributor

@CharlieOrlando have you been able to solve this at all? Seeing the StickyHeader flicker each time i call scrollToOffset on the FlatList.

This seems to only happen on Android, and works perfectly on iOS. Need to use the StickyHeaders since I can't move the components outside the list

# for free to subscribe to this conversation on GitHub. Already have an account? #.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

4 participants