FlatList in ScrollView works incorrectly, it loads all of the paginated data, even without scrolling, onEndReached bug

Question

I have FlatList inside ScrollView, FlatList has onEndReached method to load paginated data (onEndReachedThreshold set to 0.1).The problem that onEndReached method keeps triggering without even scrolling.

<FlatList
  nestedScrollEnabled={true}
  removeClippedSubviews
  initialNumToRender={20}
  data={listProducts.items}
  keyExtractor={item => item.id}
  renderItem={({ item }) => (
   <ProductListBlockItem
     icon="gerkules"
     goToProductInfo={goToProductInfo}
     title={item.name}
     price="29.99"
     rating={4}
     textColor={textColor}
     id={item.id}
    />
  )}
  onEndReached={onLoadNext}
  onEndReachedThreshold={0.1}
/>

FlatList in ScrollView, onEndReached should trigger only when I scroll to bottom of the list,

Have you tried adding the following to the element wrapping your FlatList: style={{flex: 1}} contentContainerStyle={{flex: 1}}? According to github.com/GeekyAnts/NativeBase/issues/…, this should fix the issue. — Marcel Kalveram

Orhan Orhan · Accepted Answer · 2019-06-18T08:55:09

onEndReached is buggy props. Probably still not fixed.

In my case below 'onEndReachedThreshold' values working.

<FlatList
  nestedScrollEnabled={true}
  removeClippedSubviews
  initialNumToRender={20}
  data={listProducts.items}
  keyExtractor={item => item.id}
  onEndReached={onLoadNext}
  onEndReachedThreshold={platform === 'ios' ? 0 : 0.01}
/>

FlatList in ScrollView works incorrectly, it loads all of the paginated data, even without scrolling, onEndReached bug

1 Answers