REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Navigation

Pagination

Navigation controls for paging through content.

Example

Preview

Code

Props

Pagination Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes to apply to the pagination container.

totalPages *

number

—

The total number of pages.

currentPage *

number

—

The currently active page number.

onPageChange

(page: number) => void

—

Callback invoked when a page is selected.

size

'sm' | 'md' | 'lg'

'md'

Controls the size of pagination controls.

PaginationItem Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for a page number item.

page *

number

—

The page number this item represents.

PaginationPrevious Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the previous page button.

onPress

() => void

—

Callback invoked when the previous button is pressed.

PaginationNext Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the next page button.

onPress

() => void

—

Callback invoked when the next button is pressed.

PaginationEllipsis Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the ellipsis indicator.

Usage Guidelines

When to use

Use Pagination for navigating between pages of content such as search results, tables, or lists.

Best practices

•

Use PaginationEllipsis to truncate large page ranges for cleaner display.

•

Disable PaginationPrevious on the first page and PaginationNext on the last.

•

Show the current page number clearly with an active visual state.

Accessibility

Pagination uses nav landmark semantics. Each item has an accessible label indicating its page number. Current page is announced as active.

Related Components

Tabs

A compound tabbed interface component with tab list, individual tabs, and content panels for organizing content into switchable views.

Button

A compound interactive button component with text, icon, and spinner sub-components, supporting multiple actions, variants, and sizes.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License