Native pagination

useMediaSearch and useMediaVideos return paginated results with nextPage and previousPage helpers. Pagination state lives in the hook — UI components receive current page info as props.

PaginatedResponse shape

interface PaginatedResponse<T> {
  items: T[];
  pagination: {
    page: number;
    perPage: number;
    totalResults: number;
    hasNext: boolean;
    hasPrevious: boolean;
  };
}

Access via hook data:

const { data, nextPage, previousPage, loading } = useMediaSearch({
  query: "nature",
  perPage: 20,
});

const page = data?.pagination.page ?? 1;
const hasNext = data?.pagination.hasNext ?? false;
const hasPrevious = data?.pagination.hasPrevious ?? false;

Navigation methods

Method	Behavior
nextPage()	Fetches page current + 1 when hasNext is true
previousPage()	Fetches page current - 1 when hasPrevious is true
refetch()	Re-fetches the current page, bypassing in-flight deduplication

Calling nextPage when hasNext is false is a no-op.

Initial page

The page option sets the initial page on mount only. After navigation via nextPage / previousPage, changing the page prop does not re-sync — same behavior as @media-sdk/react.

Wiring Pagination component

@media-sdk/ui-native provides a presentational Pagination component:

import { useMediaSearch } from "@media-sdk/native";
import { Pagination } from "@media-sdk/ui-native";

function Results({ query }: { query: string }) {
  const { data, loading, nextPage, previousPage } = useMediaSearch({ query });

  if (!data) return null;

  return (
    <Pagination
      page={data.pagination.page}
      hasPrevious={data.pagination.hasPrevious}
      hasNext={data.pagination.hasNext}
      loading={loading}
      accessibilityLabel="Search results"
      onPrevious={() => void previousPage()}
      onNext={() => void nextPage()}
    />
  );
}

Race protection

Changing query or filters resets to page 1 internally. In-flight requests from prior pages are aborted. See Cancellation.

Related

• Core pagination — provider wire format
• useMediaSearch — hook reference
• UI components — Pagination props