flatlist does not load extra data from onEndReached in React Native

242 Views Asked by At

I have a FlatList in which currently I am showing 6 items currently and when user scroll to bottom I will add more data using onEndReached function but the issue is this that if I do not add any condition like loading true then onEndReached runs multiple times and if I add loading===true then it will not going to run for a single time. I want to load more data when user reaches to screen end.

 <FlatList
        data={data}
        renderItem={({item, index}) => (
      )}
        numColumns={2}
        keyExtractor={(item, index) => index.toString()}
        style={{marginTop: height * 0.01}}
        showsVerticalScrollIndicator={false}
        onEndReached={(info) => {
          isLoading&& 
          setData([...data, ...topicsPagination]);
          console.log('onEndReached', info);
        }}
        onEndReachedThreshold={0.3}
        ListFooterComponent={renderFooter}
        bounces={true}
      />



     // load more function

      loadMore = () => {

      setData([...data, ...topicsPagination]);
      stopFetchMore = true;
      setIsLoading(false);
 
     };

Please help me to debug this issue so that I will be able to load data.

0

There are 0 best solutions below