paginatiion-math.js

paginatiion-math.js

  page = Math.abs(parseInt(page) || 1)

  console.log(" page: ",page);
  //results to return
  pageSize = parseInt(pageSize) || 10
//cannot go above 50
if(pageSize > maxsize)pageSize=maxsize

// limits payload size
let total= (µœ.data.length)
// let lastPage=  Math.ceil((µœ.data.length)/pageSize)
// let lastPage= (pageSize*page)-total
let lastPage= Math.ceil(total/pageSize)

let start = (page - 1) * pageSize + 1
 let end = total

 if (pageSize < total) {
   end = pageSize * page
   if (end > total) {
     end = total;
   }
 }

 let data=_.slice(µœ.data,start-1,end)

 // e.g. "21-30 of 193 items"
console.log(start + '-' + end + ' of ' + total + ' items')
// filter if nessisary

The best Pagination component for React Native.

react-native-pagination

Roadmap

see: ROADMAP.md

Show Cases

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.

ReactNativePaginationExample/Pages/FlatListHorizontalExample.js

Getting Started

• Installation
• Basic Usage
• Properties
  • Basic
  • Pagination
  • Props of Children
• Examples
• Development

• Getting Started
  • Installation
  • Basic Usage
    • Pagination Container / Basic Props
  • Dot Icons
    • Start/End Dots Only
    • Pagination Dots Only
  • Dot Text (Numbering Displayed)
    • Start/End Dots Only
    • Pagination Dots Only
    • Advanced Positioning
    • Visibility

Installation

$ npm i react-native-pagination --save

Basic Usage

• Install react-native first

$ npm i react-native -g

• Initialization of a react-native project

$ react-native init myproject

• Then, edit myproject/index.ios.js, like this:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

// import React, { Component } from 'react';
// import {AppRegistry} from 'react-native';
// import App from './App.js';
// AppRegistry.registerComponent('Example', () => App);

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,FlatList,
} from 'react-native';

import faker from 'faker';//assuming you have this.
import _ from 'lodash';// if you dont have this then gtfo
// create list
let PersonList = new _.times(35,(i)=>{
  return {
    index:i,
    id:i,
    name:faker.name.findName(),
    avatar:faker.internet.avatar(),
    group:_.sample(["Work","Friend","Acquaintance","Other"]),
    email:faker.internet.email(),
  }
})

import ListItem from './examples/widgets/ListItem';
// import Pagination from './Pagination';

import Pagination from 'react-native-pagination';
export default class ReactNativePaginationExample extends Component {


  state = {
    items: PersonList,
    selected: (new Map(): Map<string, boolean>)
  };
  _renderItem = ({item}) => {
  return (<ListItem
       index={item.id}
       id={item.id}
       onPressItem={this._onPressItem}
       selected={!!this.state.selected.get(item.id)}
       name={item.name}
       avatar={item.avatar}
       description={item.email}
       tag={item.group}
       createTagColor
     />)
 };
  _keyExtractor = (item, index) => item.id
//need this
onViewableItemsChanged = ({ viewableItems, changed }) => {
 this.setState({viewableItems,changed})
};

render() {
  let heading="Contacts",subheading="Flat List Vertical Example";

  let ListHeaderComponent=(<View style={[{padding: 10},s.containerMarginTop]}>
    <Text style={{fontSize: 35,color: '#444',margin: 5,fontWeight: '700'}}>{(heading)?heading:"Heading"}</Text>
    <Text style={{fontSize: 17,color: '#444',margin: 5,fontWeight: '400'}}>{subheading}</Text>
  <View style={{width: 50,borderBottomWidth: 1,borderColor: '#e3e3e3',margin: 5,marginTop: 5,marginBottom: 30}}/>
  </View>)
  return (
    <View style={[s.container]}>
      <FlatList
        ListHeaderComponent={ListHeaderComponent}
        data={this.state.items}
        keyExtractor={this._keyExtractor}//map your keys to whatever unique ids the have (mine is a "id" prop)
        renderItem={this._renderItem}
        onViewableItemsChanged={this.onViewableItemsChanged.bind(this)}//need this
      />
      <Pagination
        // dotThemeLight //<--use with backgroundColor:"grey"
        listRef={this.refs}//to allow React Native Pagination to scroll to item when clicked  (so add "ref={r=>this.refs=r}" to your list)
        visible={this.state.viewableItems}//needs to track what the user sees
        data={this.state.items}//pass the same list as data
        padSize={3} //num of items to pad above and bellow your visable items
        // totalDots={6}
      />
    </View>)
  }
}
const s = StyleSheet.create({
  container: {
    flex: 1,
    // backgroundColor:"grey",//<-- use with "dotThemeLight"
  },  
  containerMarginTop: {
      marginTop: 30,
    },
});


AppRegistry.registerComponent('Example', () => ReactNativePaginationExample);

Pagination Container / Basic Props

Prop	Default	Type	Description
dotThemeLight	false	bool	if you pass in the dotThemeLight prop (setting it to true) the pagination dots swaps to a a light theme. By default they are dark.
horizontal	false	bool	use to alternate between horizontal and vertical (just like you do with your list component)
textStyle	{}	style object	global style object. Tread lightly it may overlay if you plan to use my default Light/Dark Themes
dotStyle	{}	style object	addition style to use for pagination dots
startDotStyle	{}	style object	addition style to use for start dots
endDotStyle`	{}	``style object`	addition style to use for end dots

Dot Icons

this uses react-native-vector-icons [checkout here] (https://github.com/oblador/react-native-vector-icons)

Start/End Dots Only

Prop	Default	Type	Description
startDotIconName (when horizontal)	"chevron-left"	icon name	Icon shown for dot at start of list
startDotIconName (when vertical)	"chevron-up"	icon name	Icon shown for dot at start of list
endDotIconName (when horizontal)	"chevron-right"	icon name	Icon shown for dot at start of list
endDotIconName (when vertical )	"chevron-down"	icon name	Icon shown for dot at start of list
startDotIconSize	15	number	end icon dot size
endDotIconSize	15	number	end icon dot size
startDotIconFamily / endDotIconFamily	"MaterialCommunityIcons"	font family	Font Family for Icon. options: Entypo, EvilIcons, FontAwesome, Foundation, Ionicons, MaterialIcons, MaterialCommunityIcons, Octicons, Zocial, SimpleLineIcons (available in react-native-vector-icons package)

Pagination Dots Only

Prop	Default (or dotThemeLight on / dotThemeLight off)	Type	Description
dotIconFamily	"MaterialCommunityIcons"	font family	Font Family for Icon. options: Entypo, EvilIcons, FontAwesome, Foundation, Ionicons, MaterialIcons, MaterialCommunityIcons, Octicons, Zocial, SimpleLineIcons (available in react-native-vector-icons package)
dotIconNameEmpty	"close"	icon name	Icon Shown when pagination dot is Empty
dotIconNameActive	"checkbox-blank-circle"	icon name	Icon Shown when pagination dot is Active
dotIconNameNotActive	"checkbox-blank-circle-outline"	icon name	Icon Shown when pagination dot is Not Active
dotIconSizeActive	15	number	size of pagination icon when active
dotIconSizeNotActive	10	number	size of pagination iconwhen vertical
dotIconColorNotActive	"rgba(0,0,0,.5)"	color	dot Icon Font Size when on page but Not Active
dotIconColorActive	"rgba(0,0,0,.3)"	color	dot Icon Font Size when on page but Not Active
dotIconColorEmpty	"rgba(0,0,0,.2)"	color	dot Icon Font Size when on page but Not Active

when using dotThemeLight

Prop	Default	Type	Description
dotIconColorNotActive	"rgba(255,255,255,.4)"	color	dot Icon Font Size when on page but Not Active
dotIconColorActive	"rgba(255,255,255,.5)"	color	dot Icon Font Size when on page but Not Active
dotIconColorEmpty	"rgba(255,255,255,.2)"	color	dot Icon Font Size when on page but Not Active

Dot Text (Numbering Displayed)

Start/End Dots Only

Prop	Default	Type	Description
startDotFontSize	11	number	start Dot Font Size
endDotFontSize	11	number	end Dot Font Size

Pagination Dots Only

Prop	Default	Type	Description
dotFontSizeActive	11	number	dot Text Font Size when Active on page
dotFontSizeEmpty	11	number	dot Text Font Size when empty on page
dotFontSizeNotActive	9	number	dot Text Font Size when on page but Not Active
dotTextColorNotActive	"rgba(0,0,0,.5)"	color	dot Text Color when Not Active
dotTextColorActive	"rgba(0,0,0,.3)"	color	dot Text Color when Active
dotTextColorEmpty	"rgba(0,0,0,.2)"	color	dot Text Color when Empty

when using dotThemeLight

Prop	Default	Type	Description
dotTextColorNotActive	"rgba(255,255,255,.4)"	color	dot Text Color when Not Active
dotTextColorActive	"rgba(255,255,255,.5)"	color	dot Text Color when Active
dotTextColorEmpty	"rgba(255,255,255,.2)"	color	dot Text Color when Empty

Advanced Positioning

Prop	Default	Type	Description
dotSwapAxis (all pagination dots)/ startDotSwapAxis / endDotSwapAxis	false	bool	keeps the lists in the correct position (horizontal or vertical) by swaps how dots display
dotPositionIconBeforeText (all pagination dots)/startDotPositionIconBeforeText / endDotPositionIconBeforeText	false	bool	Swaps the dots flexDirection default style property.

Wanna move anything to the left, right, top, or bottom of something? Then use dotSwapAxis in combination until you find the right mix startDotPositionIconBeforeText.

Visibility

Prop	Default	Type	Description
dotIconHide / startDotIconHide / endDotIconHide	false	bool	hide the dots icon
dotIconHide / startDotIconHide / endDotIconHide	false	bool	hide the dots icon
dotTextHide / startDotTextHide / endDotTextHide	false	bool	hide the dots text