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 es 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

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 es 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

• javascript
• reactjs
• react-native
• mobile

Share Improve this question Follow edited Apr 22, 2021 at 6:17 Shadow_net asked Apr 20, 2021 at 6:58 Shadow_netShadow_net 30111 gold badge55 silver badges1111 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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,