React Native Custom Pagination

Default Examples Layout

To try these out yourself its prudy easy, Just open examples/ios/*.xcodeproj in Xcode, then press Cmd + R; you may edit examples/index.ios.js for switch cases.

Installation

• Install react-native first

$ yarn add react-native-custom-pagination
$ cd ReactNativePaginationExample
$ yarn install #(or with npm "npm i react-native-pagination —save")
$ react-native run-ios

• Initialization of a react-native project

$ react-native init myReactNativePaginationExample
$ cd myReactNativePaginationExample
$ yarn install #(or with npm "npm i && npm i react-native-custom-pagination —save")
$ yarn add react-native-custom-pagination
$ react-native link
$ react-native run-ios

Development

in your project

$ yarn add react-native-custom-pagination
$ react-native link #this makes sure react-native-feather load correctly
$ react-native run-ios

Basic Usage

• In your myApp/App.js, use:

import {
  View,
  Text,
  StyleSheet,
  Pressable,
  FlatList,
  SafeAreaView,
} from "react-native";
import React, { useState } from "react";
import Pagination from "";

export default function MyPaginationComponent() {
  return (
    <Pagination
      setPage={setPage} // setPage will be managed here
      activePage={page} // active will be show here
      totalPages={totalPages} // use calculated total pages here
      active={{ backgroundColor: "#000000" }} // use any color in you case
      inactive={{ backgroundColor: "rgba(0,0,0,0.1)" }} // use any color in you case
      pressAbleButtonStyles={{ backgroundColor: "rgba(0,0,0,0.1) " }} // use any color in you case
    />
  );
}

Basic Props

| Prop | Default | Type | Description | | --------------------- | ------------------------------------ | -------- | -------------------------------------- | | setPage | [] | number | you will set page here Items | | activePage | [] | number | active pages will apear here | | totalPages | [] | number | caluculated pages will be here | | active | backgroundColor: '#000000' | color | use your active color in this case | | inactive | backgroundColor: 'rgba(0,0,0,0.1)' | color | use you inactive color herw | | pressAbleButtonStyles | {{}} | style | you can use your own style here Styles |

Issues

Feel free to contact me or create an issue