0

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?

Mir Stephen
  • 1,758
  • 4
  • 23
  • 54

1 Answers1

0

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/

Abe
  • 4,500
  • 2
  • 11
  • 25
  • 1
    Getting this error: `Changing onViewableItemsChanged on the fly is not supported ` any missing step? – Mir Stephen Sep 27 '22 at 19:07
  • 1
    @MirStephen https://stackoverflow.com/questions/48045696/flatlist-scrollview-error-on-any-state-change-invariant-violation-changing-on – M.N. Sep 27 '22 at 22:14