Animated Pagination For React Native's ListView

React Native Pagination

Animated Pagination For React Native's ListView, FlatList, and SectionList

Horizontal

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.

Vertical

Installation

• Install react-native first

$ npm i react-native -g
$ yarn add react-native-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-pagination —save")
$ yarn add react-native-pagination
$ react-native link
$ react-native run-ios

Example

or clone the repo and play with the example project

$ git clone https://github.com/garrettmac/react-native-pagination
$ cd react-native-pagination/ReactNativePaginationExample
$ yarn install
$ react-native link
$ react-native run-ios

one liner

git clone https://github.com/garrettmac/react-native-pagination && cd react-native-pagination/ReactNativePaginationExample && yarn install && react-native link && react-native run-ios

Quick start with ReactNativePaginationExample.

Development

in your project

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

Basic Usage

• In your myApp/index.ios.js, use:

import React, { Component } from "react";
import { AppRegistry, StyleSheet, View, FlatList } from "react-native";
import ContactItem from "./Pages/widgets/ContactItem"; // https://github.com/garrettmac/react-native-pagination/blob/master/ReactNativePaginationExample/Pages/widgets/ContactItem.js
import faker from "faker"; //assuming you have this.
import _ from "lodash";
import Pagination, { Icon, Dot } from "react-native-pagination"; //{Icon,Dot} also available

//lets use faker to create mock data
let MockPersonList = new _.times(35, i => {
  return {
    id: i,
    index: i,
    name: faker.name.findName(),
    avatar: faker.internet.avatar(),
    group: _.sample(["Family", "Friend", "Acquaintance", "Other"]),
    email: faker.internet.email()
  };
});

export default class ReactNativePaginationExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: MockPersonList
    };
  }
  //create each list item
  _renderItem = ({ item }) => {
    return (
      <ContactItem
        index={item.id}
        onPressItem={this.onPressItem.bind(this)}
        name={item.name}
        avatar={item.avatar}
        description={item.email}
        tag={item.group}
        createTagColor
      />
    );
  };
  //pressed an item
  onPressItem = item => console.log("onPressItem:item ", item);

  //map to some od. We use the "id" attribute of each item in our list created in our MockPersonList
  _keyExtractor = (item, index) => item.id;

  // REQUIRED for ReactNativePagination to work correctly
  onViewableItemsChanged = ({ viewableItems, changed }) =>
    this.setState({ viewableItems });

  render() {
    return (
      <View style={[s.container]}>
        <FlatList
          data={this.state.items}
          ref={r => (this.refs = r)} // create refrence point to enable scrolling
          keyExtractor={this._keyExtractor} // map your keys to whatever unique ids the have (mine is a "id" prop)
          renderItem={this._renderItem} // render each item
          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)
          paginationVisibleItems={this.state.viewableItems} //needs to track what the user sees
          paginationItems={this.state.items} //pass the same list as data
          paginationItemPadSize={3} //num of items to pad above and below your visable items
        />
      </View>
    );
  }
}

const s = StyleSheet.create({
  container: {
    flex: 1
    // backgroundColor:"grey",//<-- use with "dotThemeLight"
  }
});

AppRegistry.registerComponent("ReactNativePaginationExample", () => App);

Currently only supported for FlatList's

Properties

All properties took text editors auto completion into consideration and follow the basic structure
[prefix][body][suffix ] where
[component name ][component attribute][continued component attribute / component change] to provide users with the full list of options when working with prefix's without having to revisit the official docs.

Most Common Component Prefix Options:dot, startDot,endDot
Most Common Component Body Options:Icon, Font,Style ,Color
Most Common Component Suffix Options:Hide, Size,IconFamily ,or NotActive,Active Empty
Resulting props like
dotIconHide ,startDotIconHide, or startFontSize,endDotStyle ect.

Basic

Basic Props

Basic Styles

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

Start/End Dots

Start/End Dot Basic Props

Start/End Dot Text

Pagination Dots

These are the list of dots that represent each item in your paginationItems

Pagination Dots Basic Props

when using dotThemeLight

Dot Text

by default it displays index+1, if you'd like display text add the paginationDotText property to each one of your items before passing it into the Pagination

Component. Example:

paginationItems=paginationItems.map(o=>{
   o.paginationDotText=o.name;
  return o
})

Pagination Dots

when using dotThemeLight

Advanced Positioning

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

Visibility

Methods

Other

Components

GitHub