1

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;
      },
    },
  );

0 Answers0