Infinite lists
Pass the three pagination fields. onEndReached fires once per page: it waits until the next page arrives or the user scrolls again, so you never get duplicate requests.
tsx
const query = useInfiniteQuery({
queryKey: ['banks', term],
queryFn: ({ pageParam }) => api.banks({ page: pageParam, search: term }),
initialPageParam: 1,
getNextPageParam: (last) => last.nextPage ?? undefined,
});
<ActionSheetPicker
items={query.data?.pages.flatMap((page) => page.items) ?? []}
schema={{ value: 'id', label: 'name' }}
searchable={{ mode: 'remote', onChangeText: setTerm }}
loading={query.isLoading}
pagination={{
hasMore: Boolean(query.hasNextPage),
loadingMore: query.isFetchingNextPage,
onEndReached: query.fetchNextPage,
}}
value={bankId}
onChange={setBankId}
/>;
- Duplicates removed. Items repeated across pages are de-duplicated by value.
- Label survives paging. The selected label stays visible when the selected item is on a page that isn't loaded.
- Loading states.
loadingshows a spinner while the first page loads;loadingMoreshows one at the bottom of the list. - Edit forms: pass the saved item in
selectedItemsso its label shows before page 1 arrives.
Not using TanStack Query?
pagination only needs hasMore, loadingMore and onEndReached, so any data source works: RTK Query, SWR, Apollo or plain fetch.