https://github.com/blaketarter/react-native-paginated-listview

A simple paginated react-native ListView with a few customization options
https://github.com/blaketarter/react-native-paginated-listview

infinite-scroll listview native pagination react react-native

Last synced: over 1 year ago
JSON representation

A simple paginated react-native ListView with a few customization options

• Host: GitHub
• URL: https://github.com/blaketarter/react-native-paginated-listview
• Owner: blaketarter
• Created: 2017-02-24T04:07:43.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2018-02-10T20:36:26.000Z (over 8 years ago)
• Last Synced: 2024-04-25T05:01:49.205Z (about 2 years ago)
• Topics: infinite-scroll, listview, native, pagination, react, react-native
• Language: JavaScript
• Size: 57.6 KB
• Stars: 14
• Watchers: 2
• Forks: 6
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
[![Build Status](https://travis-ci.org/blaketarter/react-native-paginated-listview.svg?branch=master)](https://travis-ci.org/blaketarter/react-native-paginated-listview)

react-native-paginated-listview

=====

A simple paginated react-native ListView with a few customization options, usefull

for working with paginated data. It can either auto fetch data - like an infinite scrolling list -

or it can render a "load more" button and a loading spinner.

## Installation

`npm install react-native-paginated-listview --save`

## Basic Usage

Import the component

`import PaginatedListView from 'react-native-paginated-listview'`

```js

 {

    return ({rowData});

  }}

  itemsPerPage={10}

  onFetch={this.onFetch}

/>

```

## API

* `onFetch: function(pageNumber)`

Method that return a promise and resolve the array of data to add to the ListView

* `itemsPerPage: number`

The number of items in each page, needed so that the ListView knows when its reached the end of the data

* `initialData: array [optional]`

The initial data to populate the ListView with

* `paginationEnabled: boolean [defaults to true]`

Whether or not pagination is enabled

* `autoFetch: boolean [defaults to true]`

Whether or not PaginatedListView should auto fetch new data when it reaches the end

* `renderFetchMoreComponent: function [optional]`

A function that should return the component to be displayed when the end of the data is reached and auto fetch is set to false

* `renderLoadingComponent: function [optional]`

A function that should return the component to be displayed when data is loading