How can I convert ListHeaderComponent to sticky header?

[bloggerklik]

I have a component in ListHeaderComponent. I want to convert this into a sticky header. How can I do it? In FlatList, it is sufficient to give stickyHeaderIndices={[0]}. But this does not work in FlashList.

            <FlatList
                stickyHeaderIndices={[0]}
                ListHeaderComponent={ <Header/> }
            />

[SashaYursa]

+1

[Randall71]

check this page of the doc as an inspiration : https://shopify.github.io/flash-list/docs/guides/section-list

[naqvitalha]

Just make it first item of the list instead. Not following FlatList here was intentional and we don't plan on changing that.

[jayan2019]

@naqvitalha is this applicable for MasonryFlashList also?
Or is there any option to make sticky header for MasonryFlashList?

[mustafaabobakr]

Why is this closed ?

Flatlist ✅	Flashlist ❌
Flatlist.-.sticky.header.mp4	Flashlist.-.BUG.sticky.header.not.working.mp4

[WillyRamirez]

@naqvitalha

Just make it first item of the list instead. Not following FlatList here was intentional and we don't plan on changing that.

How would this work exactly if numColumns is greater than 1? My ListHeaderComponent has the full width of the list and by making it the first item it's treated as if it should fit in a column...

[maksim-romanov]

Same issue for me too

[jefferyjxn]

@naqvitalha

Just make it first item of the list instead. Not following FlatList here was intentional and we don't plan on changing that.

How would this work exactly if numColumns is greater than 1? My ListHeaderComponent has the full width of the list and by making it the first item it's treated as if it should fit in a column...

@WillyRamirez I'm assuming you've moved on from this, but in case anyone else stumbles upon this issue: You can define overrideItemLayout and inside of it set layout.span to the value of numColumns only for your header item. I agree overall that the required approach is a little confusing, but that should do what you need.

Example:

const numColumns = 5

const overrideItemLayout = (layout, item, index) => {
  // override header span
  if (index === 0) layout.span = numColumns
}

return (
  <FlashList
    ...
    numColumns={numColumns}
    overrideItemLayout={overrideItemLayout}
  />
)