In onEndReached
event I check for next page and if it exits I call fetchNextPage()
of useInfiniteQuery
.
but just after that my FlatList jumped into the first of the list.
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
return (
<AnimatedFlatList
{...props}
onScroll={onScroll({y}, {height}, {height: layoutH})}
onEndReached={({distanceFromEnd}) => {
if (distanceFromEnd < 0) {
return;
}
if (hasNextPage && !isFetchingNextPage) {
fetchNextPage();
}
}}
/>
);
and here is my useInfiniteQuery
code:
const {
data,
fetchNextPage,
hasNextPage,
isFetchingNextPage,
} = useInfiniteQuery(
[gate.getDiscover2.name, request],
({pageParam = 1}) =>
gate.getDiscover2({...request, discover_page: pageParam}),
{
getNextPageParam: lastPage => {
const {current_page, last_page} = lastPage.data || {};
return current_page < last_page ? current_page + 1 : false;
},
},
);