Pagination

Page-of-N navigation for tables and lists.
Neither iOS nor Android has a numbered pagination control, and Dark Factory has no pager, so every platform shows one look built from Dark Factory's parts: the page numbers are bare pills, the current page is the violet pill, Previous and Next are hairline circles around chevrons, and the rows-per-page trigger is a hairline pill. A resting page or arrow takes the hover wash at once; a disabled pager keeps its outlines and mutes its numbers rather than fading. The cells are the Button's heights, so a pager lines up with a Button beside it.
In glass mode the current page is a brand-tinted control-layer puck behind its number; the other pages and the hairline arrows paint no surface, so they stay bare. Beyond seven pages a page change also shifts the window (an ellipsis moves, a number appears or drops out). Solid mode keeps the violet pill.
iOS
Android
Web
tsx
<Pagination defaultPage={2} total={12} />

Props

Prop
Description
page
number
Current page, 1-based (CONTROLLED). Clamped into the 1..total range before rendering. Omit for uncontrolled use.
defaultPage
number
Initial page for uncontrolled use (a bare pagination navigates on press).
total
number
Total number of pages.
onChange
(page: number) => void
Fired with the next 1-based page when a control or number is pressed.
itemCount
number
Total number of items across all pages. When set, the compact and with-size indicator reads "Showing X-Y of N" (the item range on the current page) instead of "Page X of N", computed from the current page and the page size.
compact
boolean
Collapse to Prev/Next plus a "Page X of N" label, no number buttons.
withSize
boolean
Prepend a "Rows per page" size selector to the compact Prev/Next + "Page X of N" layout. Takes precedence over `compact`.
pageSize
number
Currently selected rows-per-page value shown in the selector (CONTROLLED). Omit for uncontrolled use.
defaultPageSize
number
Initial rows-per-page value for uncontrolled use (the selector cycles on press).
pageSizes
number[]
Selectable rows-per-page values; pressing the selector advances through them.
onPageSizeChange
(size: number) => void
Fired with the next rows-per-page value when the selector is pressed.
small
boolean
Size (pick one; default is the medium size).
large
boolean
Size (pick one; default is the medium size).
disabled
boolean
Size (pick one; default is the medium size).
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Do & Don’t

compact

Don’t
Bare Previous/Next with no range label leaves the user unable to tell where they are or how much is left.
Do
Showing 11-20 of 118
Pass itemCount so the buttons carry a "Showing X-Y of N" range and position and total are always visible.

numbered

Don’t
Rendering every page number overflows and stops being scannable past a handful.
Do
Truncate the middle with an ellipsis; keep first, last, and a window around the current page.

with-size

Don’t
Rows per page
Offering a page-size selector without a page indicator hides which page the new size landed on.
Do
Rows per page
Page 2 of 12
Show "Page X of N" beside the size selector and reset to page 1 when the size changes.
← Listbox
Popover →