https://github.com/cherrysoftmx/react-native-basic-pagination
Basic component to manage pagination in React Native.
https://github.com/cherrysoftmx/react-native-basic-pagination
pagination react-native
Last synced: 4 months ago
JSON representation
Basic component to manage pagination in React Native.
- Host: GitHub
- URL: https://github.com/cherrysoftmx/react-native-basic-pagination
- Owner: CherrySoftMX
- License: mit
- Created: 2022-12-05T17:05:07.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-23T20:48:03.000Z (almost 2 years ago)
- Last Synced: 2025-10-20T00:17:11.605Z (9 months ago)
- Topics: pagination, react-native
- Language: Java
- Homepage: https://www.npmjs.com/package/@cherry-soft/react-native-basic-pagination
- Size: 791 KB
- Stars: 4
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-native-basic-pagination
[](CONTRIBUTING.md) [](https://npmjs.org/package/@react-native-seoul/masonry-list) [](https://play.google.com/store/apps/details?id=host.exp.exponent&referrer=www) [](https://docs.expo.io/workflow/web/) [](https://github.com/expo/expo)
Welcome to react-native-basic-pagination!
`react-native-basic-pagination` provides a basic component to handle classic style pagination in your React Native app on Android and Web.
## Installation
```
npm install @cherry-soft/react-native-basic-pagination
```
## Example
```tsx
import React, { useState } from 'react';
import Pagination from '@cherry-soft/react-native-basic-pagination';
const App = () => {
const [page, setPage] = useState(1);
return (
);
};
```
## Preview
| Without last page buttons | With last page buttons | Display many pages |
| -------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------: |
| 
| 
| 
|
> You can display as many pages as you want!
## Props
| Property | Default | Description |
| ------------------- | ------------------ | --------------------------------------------------------------------------------------- |
| totalItems | **required** | The amount of items contained in all pages. |
| currentPage | **required** | The state which stores the current page. |
| onPageChange | **required** | A function which receives a number to handle the page change.*(page: number) => void* |
| pageSize | 1 | The amount of items per page. |
| pagesToDisplay | 3 | The amount of buttons to display before the dots. ("...") |
| showLastPagesButtons| false | Show or hide the last pages buttons. ("<<" & ">>") |
| containerStyle | null | Optional styles for the container.
Can be used to change width or flex direction. |
| btnStyle | null | Optional styles for the container of the buttons. |
| textStyle | null | Optional styles for the text of the buttons. |
| activeBtnStyle | null | Optional styles for the container of the current active page. |
| activeTextStyle | null | Optional styles for the text of the current active page. |