/react-native-basic-pagination

Basic component to manage pagination in React Native.

Primary LanguageJavaMIT LicenseMIT

react-native-basic-pagination

PRs Welcome LICENSE supports Android supports web runs with 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

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