how to implement multiple scrollable sticky headers in react native

Question

Please see below video on what I am trying to achieve, I have a screens with multiple Flatlists with Data and other items, I want each header to stick as users is scrolling through different sections. I have tried using stickyheaders props that comes with React Native flatlist but that only works for one flatlist, I am looking for a solution that takes care of multiple sticky headers.

Thanks

Answer 1

You have to use single flatlist in a screen to acheive this, there is a ListHeaderComponent and ListFooterComponent in flatlist, you can try adding items in header

ScrollView/Flatlist has a property stickyHeaderIndices, you can give values for example stickyHeaderIndices={[0,3,5]}

in this example scroll, first item will stop, then 3rd then 5,