{"id":26273923,"url":"https://github.com/cherrysoftmx/react-native-basic-pagination","last_synced_at":"2026-02-28T10:02:15.786Z","repository":{"id":64403582,"uuid":"574601450","full_name":"CherrySoftMX/react-native-basic-pagination","owner":"CherrySoftMX","description":"Basic component to manage pagination in React Native.","archived":false,"fork":false,"pushed_at":"2024-07-23T20:48:03.000Z","size":810,"stargazers_count":4,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-10-20T00:17:11.605Z","etag":null,"topics":["pagination","react-native"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@cherry-soft/react-native-basic-pagination","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CherrySoftMX.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-12-05T17:05:07.000Z","updated_at":"2025-04-29T00:37:20.000Z","dependencies_parsed_at":"2024-07-23T23:56:55.280Z","dependency_job_id":null,"html_url":"https://github.com/CherrySoftMX/react-native-basic-pagination","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/CherrySoftMX/react-native-basic-pagination","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CherrySoftMX%2Freact-native-basic-pagination","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CherrySoftMX%2Freact-native-basic-pagination/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CherrySoftMX%2Freact-native-basic-pagination/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CherrySoftMX%2Freact-native-basic-pagination/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CherrySoftMX","download_url":"https://codeload.github.com/CherrySoftMX/react-native-basic-pagination/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CherrySoftMX%2Freact-native-basic-pagination/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29929587,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-28T09:58:13.507Z","status":"ssl_error","status_checked_at":"2026-02-28T09:57:57.047Z","response_time":90,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["pagination","react-native"],"created_at":"2025-03-14T09:17:18.964Z","updated_at":"2026-02-28T10:02:15.743Z","avatar_url":"https://github.com/CherrySoftMX.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-basic-pagination\n\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](CONTRIBUTING.md) [![LICENSE](http://img.shields.io/npm/l/@react-native-seoul/masonry-list.svg?style=flat-square)](https://npmjs.org/package/@react-native-seoul/masonry-list) [![supports Android](https://img.shields.io/badge/Android-4630EB.svg?style=flat-square\u0026logo=ANDROID\u0026labelColor=A4C639\u0026logoColor=fff)](https://play.google.com/store/apps/details?id=host.exp.exponent\u0026referrer=www) [![supports web](https://img.shields.io/badge/web-4630EB.svg?style=flat-square\u0026logo=GOOGLE-CHROME\u0026labelColor=4285F4\u0026logoColor=fff)](https://docs.expo.io/workflow/web/) [![runs with expo](https://img.shields.io/badge/Runs%20with%20Expo-000.svg?style=flat\u0026logo=EXPO\u0026labelColor=ffffff\u0026logoColor=000)](https://github.com/expo/expo)\n\nWelcome to react-native-basic-pagination!\n\n`react-native-basic-pagination` provides a basic component to handle classic style pagination in your React Native app on Android and Web.\n\n## Installation\n\n```\nnpm install @cherry-soft/react-native-basic-pagination\n```\n\n## Example\n\n```tsx\nimport React, { useState } from 'react';\nimport Pagination from '@cherry-soft/react-native-basic-pagination';\n\nconst App = () =\u003e {\n  const [page, setPage] = useState(1);\n  return (\n    \u003cPagination\n      totalItems={100}\n      pageSize={5}\n      currentPage={page}\n      onPageChange={setPage}\n    /\u003e\n  );\n};\n```\n\n## Preview\n\n| Without last page buttons                                                                                                        |                                                      With last page buttons                                                      |                                                        Display many pages                                                        |\n| -------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------: |\n| \u003cimg src=\"https://user-images.githubusercontent.com/43481488/206293498-8e0b8b28-7e81-4f4d-8c21-576a857953d1.gif\" width=300/\u003e | \u003cimg src=\"https://user-images.githubusercontent.com/43481488/206293605-45584ed4-7a16-4558-b1dc-e461208ea075.gif\" width=300/\u003e | \u003cimg src=\"https://user-images.githubusercontent.com/43481488/206293685-33d9fbd8-1604-4c78-81d3-70921ec9ceef.gif\" width=300/\u003e |\n\n\u003e You can display as many pages as you want!\n\n## Props\n\n| Property            | Default            | Description                                                                             |\n| ------------------- | ------------------ | --------------------------------------------------------------------------------------- |\n| totalItems          | **required** | The amount of items contained in all pages.                                             |\n| currentPage         | **required** | The state which stores the current page.                                                |\n| onPageChange        | **required** | A function which receives a number to handle the page change.*(page: number) =\u003e void* |\n| pageSize            | 1                  | The amount of items per page.                                                           |\n| pagesToDisplay      | 3                  | The amount of buttons to display before the dots. (\"...\")                               |\n| showLastPagesButtons| false              | Show or hide the last pages buttons. (\"\u003c\u003c\" \u0026 \"\u003e\u003e\")                                      |\n| containerStyle      | null               | Optional styles for the container.\u003cbr /\u003eCan be used to change width or flex direction.  |\n| btnStyle            | null               | Optional styles for the container of the buttons.                                       |\n| textStyle           | null               | Optional styles for the text of the buttons.                                            |\n| activeBtnStyle      | null               | Optional styles for the container of the current active page.                           |\n| activeTextStyle     | null               | Optional styles for the text of the current active page.                                |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcherrysoftmx%2Freact-native-basic-pagination","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcherrysoftmx%2Freact-native-basic-pagination","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcherrysoftmx%2Freact-native-basic-pagination/lists"}