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

Sticky headers don't show correctly in Tabs.FlatList on iOS #136

Open
abelmenkveld opened this issue Feb 17, 2021 · 9 comments
Open

Sticky headers don't show correctly in Tabs.FlatList on iOS #136

abelmenkveld opened this issue Feb 17, 2021 · 9 comments
Labels

Comments

@abelmenkveld
Copy link

First of all, great job on this component! v4 added some really nice and necessary features for us.

Current behavior

When you use the stickyHeaderIndices prop on a FlatList, the sticky elements don't scroll up when the header collapses. This happens only on iOS.

Expected behavior

The sticky headers should scroll along the content and only stick when the header is fully collapsed. An alternative would be to add support for SectionLists.

Screenshots (if applicable)

RPReplay_Final1613562676-2.mov
@abelmenkveld abelmenkveld added the bug Something isn't working label Feb 17, 2021
@alexpchin
Copy link
Contributor

#97

@andreialecu
Copy link
Collaborator

This seems like a side effect of using contentInset for content positioning.

contentInset is required so that the refresh control can be positioned underneath the header.

Unfortunately there's no other way on iOS to position the refresh control at the moment. There's a PR on it here: facebook/react-native#30737

If that PR is merged to React Native we'll have a way around this.

One workaround would be to not use contentInset, but padding, like we do on Android. This would also close #122.

However, proper "below the header" refresh control positioning and sticky headers will not both work at the same time unless the upstream react-native PR is merged.

@abelmenkveld
Copy link
Author

Thank you for the clarification. That also explains why giving a ScrollView container top padding was only working on iOS and causing issues on Android ;). I don't use the refresh control but do like to have the iOS bounce effect below the header

@damassi
Copy link

damassi commented May 23, 2023

Hi! That React Native PR was merged. Are we able to use stickyHeaderIndices yet? Note this also applies to Tabs.ScrollView.

@andreialecu
Copy link
Collaborator

@damassi - feel free to play with the example app to see if it works now. If you need to make any modifications to the library, PRs are welcome. Please take a look at the CONTRIBUTING document as well.

@Vitalik7
Copy link

Vitalik7 commented Aug 3, 2023

in v6.2.0 still exist this issue. Checked on Tabs.SectionList 😢

@jonathanm-tkf
Copy link

Hi I have unexpected behavior regarding SectionList

image

the sections are inverted

@frozencap
Copy link

yeah the issue persists, im on the latest everything

@FabianDean
Copy link

Bump on this 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

8 participants