在 FlatList 中未调用 onEndReached 触发器

Question

Expected Behaviour: On end of page arrival the handleLoadMore function should be get called. But it's not getting called. [Using Functional Component].

I have tried in below way. But didn't find any solution.

Using FlatGrid component (Library based on FlatList). Directly used FlatList also. The problem still remains.

      <FlatGrid
        itemDimension={130}
        items={offers}
        renderItem={renderItem}
        ListFooterComponent={renderFooter}
        initialNumToRender={2}
        maxToRenderPerBatch={1}
        windowSize={2}
        onEndReached={handleLoadMore}
        onEndReachedThreshold={0}
      />

HandleLoadMore function -

  const handleLoadMore = () => {
    setPageNumber(pageNumber + 1);

    console.log('PageNumber', pageNumber);
    console.log('Item Length', offers.length);
    offersAction.getOffers(pageNumber);
  };

Console Output -

Answer 1

You probably need to bind handleLoadMore to the class. From The React Docs

Generally, if you refer to a method without () after it, such as onClick={this.handleClick} , you should bind that method.

Answer 2

I used ScrollView as wrapper for FlatList in Parent Component. Which was creating the issue as mentioned in https://github.com/facebook/react-native/issues/14756 .

Instead of 'ScrollView' using 'View' wrapper solved the issue.

<View style={{ flex: 1 }}>