FlatList onViewableItemsChanged method does't trigger when first render?

[wenzhihao123]

React Native version: +

Steps To Reproduce

When i used FlatList in Android, when i first entered the page, why onViewableItemsChanged method does't trigger? Generally speaking, first render also means that the visibility of items have changed?

Describe what you expected to happen:

When first enter the page , onViewableItemsChanged method will trigger without scroll event !

My code just like this:

const VIEWABILITY_CONFIG = {
    minimumViewTime: 300,
    viewAreaCoveragePercentThreshold: 10,
    waitForInteraction: false,
};
...

<FlatList
      ...
      horizontal={false}
      numColumns={2}
      renderItem={({ item, index }) => this.renderItem(item, index)}
      ItemSeparatorComponent={this.renderSeparator}
      ListFooterComponent={this.footerView}
      ListHeaderComponent={this.rederListHeader()}
      onViewableItemsChanged={this._onViewableItemsChanged}
      viewabilityConfig={VIEWABILITY_CONFIG} />

Please write soon, thanks !

[Ashwin-Mothilal]

@wenzhihao123 Check whether any other child component creates an interaction handle. Disabling interaction handle from Child component fixed the problem for me.

[wenzhihao123]

@Ashwin-Mothilal Thanks for your answer, my FlatList has header, and header also has other FlatList, but how to forbid item's FlatList to create an interaction handle?

[kalwaniyash]

I am facing the same issue, even though my waitForInteraction is set to false
Is there any progress or solution to this?

The list renders as soon as i scroll even a bit. I tried using the scrollToOffset to simulate a scroll, didn't work either.

[bigggge]

same issue

[kalwaniyash]

Hey, my issue was nothing related to FlatList. Everything was working fine in FlatlList, there was a library that i was using that was forcefully making the list wait for interaction. Basically it was using a interaction handler because of which my list would wait for interaction even though i had my waitForInteraction set as false

[bvangrimberge]

I had the same issue and was able to resolve it by adding initialScrollIndex={0.01} to the FlatList. It's dirty but it seems to trigger the onViewableItemsChanged method.

Using a value of 0 or going lower than 0.01 also did not trigger the method.

[Dylan0916]

+1

[personapp]

Adding key={uniqueKeyForEachRender} prop to FlatList solves the issue.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[Dlozitskiy]

+1

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

[pgajbhiye]

const VIEWABILITY_CONFIG = {
    viewAreaCoveragePercentThreshold: 50,
    waitForInteraction: false, //setting this false, alone did not work for me
};

<FlatList
        ref={ref => {
          this.list = ref;
        }}
        onLayout={() => {
          if (this.list != null) {
            //Need this for initial widget lazy render
            this.list.recordInteraction();
          }
        }}
      renderItem={({ item, index }) => this.renderItem(item, index)}
      viewabilityConfig={VIEWABILITY_CONFIG} />

Hope this helps

Few tips:

1. Make sure flat list is not inside parent ScrollView
2. Use unique key in keyExtractor