iOS: First Sticky Header component renders on top of ListHeaderComponent on mount, disappears on scroll

[chvanlennep]

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.

Simulator.Screen.Recording.-.iPhone.14.-.2023-01-04.at.11.05.10.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:

• iOS
• Android

Environment

"dependencies": { "@shopify/flash-list": "^1.4.0", "react": "18.0.0", "react-native": "0.69.5" }

[mjvestal]

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]

Hey, any updates on that?

[KarlosQ]

This keeps happening (RN 0.72.6 & 1.6.2)

[iway1]

if this isn't gonna be fixed soon maybe add a warning that stickyHeaderIndices and ListHeaderComponent are incompatibles people don't ship this bug by mistake

[lsarni]

We are having the same problem on Android on ^1.7.0

[MaxTheTurtle0]

Did anyone find a workaround/fix yet?

[programng]

Also having this issue. Wondering if anyone found a fix?