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.