React Native FlatList onViewableItemsChanged Returning Incorrect set of Items

Question

I am trying to use onViewableItemsChanged event to detect the items of my FlatList that are currently displayed on screen.

In my ViewabilityConfig (Code is provided below), I set the itemVisiblePercentThreshold parameter to 100 which I assumed will require my item to be fully displayed to be considered viewable. However that is not the case for me.

As you can see in the following screenshot: Screenshot of my App

It is obvious that the top most item is not completely on screen (Which should make the visible items consist only of 3 items). But when I print the length of the array in my onViewableItemsChanged event handler, it returns 4 (and when I inspect the values, including the top most item).

Log Result of Viewable Items Array Length

Is this the problem of FlatList onViewableItemsChanged event? Or did I implemented it incorrectly?

I tried to find solution from the documentation and React-native github but there is no further explanation about how this event works.

---

Some related snippets of my code are as follow:

FlatList Definition

<FlatList
                    viewabilityConfig={this.clippingListViewabilityConfig}
                    inverted={true}
                    horizontal={false}
                    data = {this.props.clippingResultArray}
                    ref={(ref) => this.clippingResultFlatList = ref}
                    style={{
                        // flexGrow:0,
                        // backgroundColor: 'green',
                        // width:'100%',

                        // width: Dimensions.get('window').width,
                    }}
                    contentContainerStyle={{
                        // justifyContent:'flex-end',
                        // flexGrow:0,
                        // flexDirection:'row',
                        // alignItems:'flex-end',
                    }}
                    renderItem={this.renderClippingListItemRight}
                    keyExtractor={(item, index) => index.toString()}
                    onViewableItemsChanged={this.onClippingListViewableChanged}
                    // removeClippedSubviews={true}

                    {...this._clippingListItemPanResponder.panHandlers}
                />

onViewableItemsChanged Listener

onClippingListViewableChanged = (info) => {
    console.log("***************************NUMBER OF CURRENT VIEWABLE ITEMS:",info.viewableItems.length);
    console.log("Item list:",info.viewableItems);
    this.setState({
        ...this.state,
        viewableItems: info.viewableItems,
    });
};

Viewable Configuration

this.clippingListViewabilityConfig = {
        waitForInteraction: false,
        itemVisiblePercentThreshold: 100,
        minimumViewTime: 500, //In milliseconds
    };

Shere

Did you manage to find a solution? I'm having an issue with this callback too. – Witter

Any solution yet ? I am also facing count issue in app . – Madelenemadelin

Facing the same issue but I noticed it only seems to happen when using inverted. My understanding is inverted is implemented by applying a scaleY(-1) to the entire list and then scaleY(-1) to each item. I'm curious if this might be part of what's causing the issue. – Unleash