mjvestal
commented
1 year ago I ran into this issue. I am getting around it by adding an item to the list data that represents what I want to render as the ListHeaderComponent and instead rendering the header in renderItem.
So in my case this works:
data=[
{ type: 'header' }, // renderItem renders ListHeaderComponent
{ type: 'thing-that-sticks },
{
type: 'data-item',
...
}, // many of these
]
stickyHeaderIndices={[1]}But what I'd expect to work, doesn't
data=[
{ type: 'thing-that-sticks },
{
type: 'data-item',
...
}, // many of these
]
stickyHeaderIndices={[0]}
ListHeaderComponent={ListHeaderComponent}
GregoryNative
KarlosQ
iway1
lsarni
MaxTheTurtle0
Current behavior
On iOS, when stickyHeaderIndices are used together with ListHeaderComponent, the first sticky header component renders over the ListHeaderComponent, as well as in its expected position on mount. It then disappears on scroll.
https://user-images.githubusercontent.com/64969786/210535528-a85c6085-823b-44d9-a3a5-068efe06bc44.mp4
Expected behavior
Sticky headers should not be duplicated.
To Reproduce
This is a minimal repo which demonstrates the bug (note that is intermittent, you may have to reload a few times):
https://github.com/chvanlennep/flashlistheaders-demo
Platform:
Environment
"dependencies": { "@shopify/flash-list": "^1.4.0", "react": "18.0.0", "react-native": "0.69.5" }