CODEWITHSUNDEEP
react-nativereact-native-flatlistreact-native-sectionlistreact-infinite-scroll-component
giants22
giants22

Reputation: 75

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

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.

example for app

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

Upvotes: 0

Views: 486

Answers (1)

giants22
giants22

Reputation: 75

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.

Upvotes: 0

Related Questions