wilikeit/react-native-basic-pagination

Basic component to manage pagination in React Native.

react-native-basic-pagination

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

import React, { useState } from 'react';
import Pagination from '@cherry-soft/react-native-basic-pagination';

const App = () => {
  const [page, setPage] = useState(1);
  return (
    <Pagination
      totalItems={100}
      pageSize={5}
      currentPage={page}
      onPageChange={setPage}
    />
  );
};

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. ("...")
showLastPageButtons	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.