Execute function when a certain section in flatList/SectionList is reached

Question

I have an app with a list of events corresponding to certain dates . How do i utilize either flatlist or SectionList to call a function/change state when a certain section of the list is scrolled into view.

Using SectionList the header element is stuck to the top of the window when a section is reached which is fine but i also want to change the date in the header when an item is scrolled to for a specific date.

Using react-natives SectionList example, say when Tomorrow section is reached, it will change my calendar section to Saturday using setDate, and so on.

Thanks

Answer 1

After some tinkering i achieved it through onViewableItemsChanged prop on SectionList.

Using the callback function

const onCheckViewableItems = ({ viewableItems, changed }) => {
// format viewableitems }

For my scenario I sorted viewable items by index == null as that gives you the section headers that are viewable.