FlatList onViewableItemsChanged method does't trigger when first render?

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 !

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:13

Top GitHub Comments

3reactions

kalwaniyashcommented, Aug 30, 2019

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.

1reaction

pgajbhiyecommented, Dec 15, 2020

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:

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

Top Results From Across the Web

React Native "onViewableItemsChanged" not working while ...

Another thing that you should consider is that you should render the whole FlatList inside a View . here is my final code:...

Understand onViewableItemsChanged in FlatList - RY 's Blog

When you scroll a FlatList, the items showing on the FlatList change. Then, this function is called, telling you what current viewableItems are ......

Implementing a component visibility sensor with React Native

To solve this, we have to make sure that the function does not change after it is initially created; it needs to be...

How to avoid rendering non-changing items on React Native ...

After creating some sections with FlatList components to render a list of ... and clicking on an item to trigger its action took...

Display a List Using the FlatList Component in React Native

state.data will be updated by the fetch request, and it will trigger a re-rendering process in the FlatList ...