Pagination Component for React Native

A customizable pagination component for React Native that supports page grouping and custom styling. Ideal for projects that need intuitive navigation across multiple pages.

Installation

You can install the component via npm:

1npm install react-native-pagination-ui

Dependencies

npm i @expo/vector-icons

Usage

Import the Pagination component and use it in your React Native project:

1import { useState } from 'react';
2import { View } from 'react-native';
3import { Pagination } from 'react-native-pagination-ui';
4
5const App = () => {
6  const [currentPage, setCurrentPage] = useState(1);
7
8  const handlePageChange = (page: number) => {
9    setCurrentPage(page);
10    // Add your logic for handling page change
11  };
12
13  return (
14    <View>
15      <Pagination
16        total={20}
17        initialPage={currentPage}
18        handlePageChange={handlePageChange}
19        selectedItemColor='primary'
20        defaultItemColor='default'
21        itemSizes='lg'
22      />
23    </View>
24  );
25};
26
27export default App;

Props

Prop	Type	Default	Description
total	number	Required	The total number of pages.
initialPage	number	Required	The initial page to display.
handlePageChange	(page: number) => void	Required	Callback function triggered when the page is changed.
selectedItemColor	PaginationColorsEnum	primary	The color for the selected page.
defaultItemColor	PaginationColorsEnum	default	The color for the unselected pages.
itemSizes	PaginationSizesEnum	lg	Size of the pagination items (small, medium, large, extra-large).
iconProps	IconPropsInterface	{ size: 18, color: '#000' }	Properties for the pagination icons (ellipses).

---

Customization

Sizes

You can customize the size of the pagination buttons using the itemSizes prop. Available sizes:

• sm: Small
• md: Medium
• lg: Large (default)
• xl: Extra-large

Colors

Choose from predefined colors by using the selectedItemColor and defaultItemColor props:

• primary: Blue
• secondary: Purple
• success: Green
• danger: Red
• warning: Orange
• info: Cyan
• default: Grey
• light: White

Icon Props

You can pass custom properties to the icon using the iconProps prop, such as:

1iconProps={{ size: 20, color: '#FF0000' }}

Example

1<Pagination
2  total={50}
3  initialPage={1}
4  handlePageChange={(page) => console.log('Current Page:', page)}
5  selectedItemColor='success'
6  defaultItemColor='light'
7  itemSizes='md'
8  iconProps={{ size: 16, color: '#123456' }}
9/>

Keywords

• react-native
• pagination
• ui
• component
• react
• native
• expo

Repository

https://github.com/Diego-Fdez/react-native-pagination-ui

Contributors

• @Diego-Fdez

License

This project is licensed under the MIT License.