CODEWITHSUNDEEP
react-nativereact-native-flatlist
Yahoo
Yahoo

Reputation: 4187

React native flatlist scroll depth?

I have 200 + items in my Flat list, is there a way, I can find out to what numbered of item did user scroll to? (item rendered till what position) 

<FlatList
  data={[{ key: "a" }, { key: "b" }]}
  renderItem={({ item }) => <Text>{item.key}</Text>}
/>;

Upvotes: 0

Views: 236

Answers (1)

soutot
soutot

Reputation: 3671

I think you can achieve this by using onViewableItemsChanged method

<FlatList
  onViewableItemsChanged={({ viewableItems, changed }) => {
    console.log("Current visible items", viewableItems);
    console.log("Changed items in this iteration", changed);
  }}
  viewabilityConfig={{
    itemVisiblePercentThreshold: 50
  }}
/>

http://facebook.github.io/react-native/docs/flatlist.html#onviewableitemschanged

On viewabilityConfig you can add your viewability settings, like how an item should be considered as visible (50% in the above example)

http://facebook.github.io/react-native/docs/flatlist.html#viewabilityconfig

Hope it helps

Upvotes: 1

Related Questions