FlatList - itemVisiblePercentThreshold doesn't work correctly

Question

I'm trying to determine visible items in FlatList. I'm using

  const config = {
    waitForInteraction: true,
    itemVisiblePercentThreshold: 70,
  };

  const viewabilityConfigCallbackPairs = useRef([
    { config, onViewableItemsChanged },
  ]);

  <FlatList
      ...
      viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
    />

The thing is FlatList doesnt respect percentage treshold. I set 70% for my config. I want to get that item if its 70% or more visible. But FlatList return every visible item. Even it is only one pixel visible. How can I solve this?

Answer 1

I found the problem. Problem was incorrect config file.

So instead of this:

  const config = {
    waitForInteraction: true,
    itemVisiblePercentThreshold: 70,
  };

  const viewabilityConfigCallbackPairs = useRef([
    { config, onViewableItemsChanged },
  ]);

I used this:

  const viewabilityConfigCallbackPairs = useRef([
    {
      viewabilityConfig: {
        minimumViewTime: 500,
        itemVisiblePercentThreshold: 75,
      },
      onViewableItemsChanged: onViewableItemsChanged,
    },
  ]);