I have a flatlist with a complex Header (It has another Horizontal Flatlist and a few other views that are supposed to appear above the flatlist. It all works flawlessly. However, I wanted to add a sticky header to the page. I have searched and there is no option to make a specific view (or first view in fragment). Nothing works. I need to have an isolated header to be sticky, and content above the data of the flatlist. What is the most common practice? Inject the components in the data for the flatlist and keep the header isolated? I can’t believe how complicated this functionality is. Let me know if there’s any other way that doesn’t seem this ‘hacky.’

Example:

const complexHeader = () => <ComplexHeader /> (for brevity you get the gist)
<FlatList
  data={[data goes here]}
  ListHeaderComponent={StickyHeaderHere}
/>

Wrapping the complex header in a fragment to add the sticky header first doesn’t work. Making the sticky header the first child of the header itself doesn’t work. There has to be a performant and non-hacky way to inject the data before the data coming in without having conditionals in the renderItem Componet.