How to check visibility of item in FlatList at different visibility percentages?

Question

I am trying to perform an action on a given item inside of React Native FlatList when it becomes visible in 2 different scenarios:

1. When the item is 10% visible (perform fade/scale animation)
2. When the items is 100% visible (start playing video/audio when on screen)

From the RN documentation, it states that is it not possible to change the viewabilityConfig on demand.

How can this be done? Thanks.

Answer 1

I just noticed that FlatList takes a prop called viewabilityConfigCallbackPairs whose format is not fully documented at https://facebook.github.io/react-native/docs/virtualizedlist.html#viewabilityconfigcallbackpairs

Basically what this does is that it will take an array of objects with key/value pairs for viewabilityConfig and onViewableItemsChanged. This will allow you to define any handlers for each different viewability configurations.

For example:

<FlatList
    data={items}
    renderItem={this.renderItem}
    keyExtractor={(item) => item.id }
    refreshing={false}
    onRefresh={this.onRefresh}
    viewabilityConfigCallbackPairs={this.viewabilityConfigCallbackPairs}
/>

Where this.viewabilityConfigCallbackPairs would equal:

this.viewabilityConfigCallbackPairs = [{
    viewabilityConfig: {
      minimumViewTime: 500,
      itemVisiblePercentThreshold: 100
    },
    onViewableItemsChanged: this.handleItemsInViewPort
  },
  {
    viewabilityConfig: {
      minimumViewTime: 150,
      itemVisiblePercentThreshold: 10
    },
    onViewableItemsChanged: this.handleItemsPartiallyVisible
  }
];