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

[abelmenkveld]

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)

https://user-images.githubusercontent.com/15447148/108208685-a58cd480-7129-11eb-97ba-ff46d5be7b8d.mov

[alexpchin]

https://github.com/PedroBern/react-native-collapsible-tab-view/issues/97

[andreialecu]

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: https://github.com/facebook/react-native/pull/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]

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]

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

[andreialecu]

@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]

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

[jonathanm-tkf]

Hi I have unexpected behavior regarding SectionList

the sections are inverted

[frozencap]

yeah the issue persists, im on the latest everything