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

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

• Initialization of a react-native project

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

Development

in your project

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

Basic Usage

• In your myApp/App.js, use:

1import {
2  View,
3  Text,
4  StyleSheet,
5  Pressable,
6  FlatList,
7  SafeAreaView,
8} from "react-native";
9import React, { useState } from "react";
10import Pagination from "";
11
12export default function MyPaginationComponent() {
13  return (
14    <Pagination
15      setPage={setPage} // setPage will be managed here
16      activePage={page} // active will be show here
17      totalPages={totalPages} // use calculated total pages here
18      active={{ backgroundColor: "#000000" }} // use any color in you case
19      inactive={{ backgroundColor: "rgba(0,0,0,0.1)" }} // use any color in you case
20      pressAbleButtonStyles={{ backgroundColor: "rgba(0,0,0,0.1) " }} // use any color in you case
21    />
22  );
23}

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