How to get current active index of FlatList in Reract Native?

Question

I have below simple FlatList:

<FlatList
  data={Images}
  renderItem={({item}) => <Item item={item} />}
  keyExtractor={item => item.index}
  horizontal
  showsHorizontalScrollIndicator={false}
  pagingEnabled
  onScroll={onScroll}
  decelerationRate={-100000000000000}
  scrollEventThrottle={16}
/>

How to get current active index of the FlatList as switching between different list item?

Answer 1

You can pass a callback to the onViewableItemsChanged prop to accomplish this.

const onViewableItemsChanged = ({ viewableItems, changed }) => {
  console.log(viewableItems);
  console.log(changed);
};

// ...

<FlatList
  // ...
  onViewableItemsChanged={onViewableItemsChanged}
/>

Docs here: https://reactnative.dev/docs/flatlist#onviewableitemschanged

Blog post with example: https://thewebdev.info/2022/02/19/how-to-get-the-index-of-the-currently-visible-item-in-a-react-native-flat-list/