iwater / react-native-infinite-virtualized-list

A new InfiniteList that compose react-virtualized/InfiniteLoader with the react-native/VirtualizedList component, and a drop replacement component of react-native-gifted-listview

Gifted ListView

A new InfiniteList for react-native 0.43+ that compose react-virtualized/InfiniteLoader with the new react-native/VirtualizedList component, and a drop replacement component of react-native-gifted-listview

Changelog

0.1.5

• Pull-to-refresh

0.1.4

• react-native 0.43.0+

0.1.0

• the first version

GiftedListView Simple example

below code was take from react-native-gifted-listview just replace one line

var React = require('react-native');
var {
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} = React;


// var GiftedListView = require('react-native-gifted-listview');
import { GiftedListView } from 'react-native-infinite-virtualized-list'

var Example = React.createClass({

  /**
   * Will be called when refreshing
   * Should be replaced by your own logic
   * @param {number} page Requested page to fetch
   * @param {function} callback Should pass the rows
   * @param {object} options Inform if first load
   */
  _onFetch(page = 1, callback, options) {
    setTimeout(() => {
      var rows = ['row '+((page - 1) * 3 + 1), 'row '+((page - 1) * 3 + 2), 'row '+((page - 1) * 3 + 3)];
      if (page === 3) {
        callback(rows, {
          allLoaded: true, // the end of the list is reached
        });
      } else {
        callback(rows);
      }
    }, 1000); // simulating network fetching
  },


  /**
   * When a row is touched
   * @param {object} rowData Row data
   */
  _onPress(rowData) {
    console.log(rowData+' pressed');
  },

  /**
   * Render a row
   * @param {object} rowData Row data
   */
  _renderRowView(rowData) {
    return (
      <TouchableHighlight
        style={styles.row}
        underlayColor='#c8c7cc'
        onPress={() => this._onPress(rowData)}
      >
        <Text>{rowData}</Text>
      </TouchableHighlight>
    );
  },

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.navBar} />
        <GiftedListView
          rowView={this._renderRowView}
          onFetch={this._onFetch}
          firstLoader={true} // display a loader for the first fetching
          pagination={true} // enable infinite scrolling using touch to load more
          refreshable={true} // enable pull-to-refresh for iOS and touch-to-refresh for Android
          withSections={false} // enable sections
          customStyles={{
            paginationView: {
              backgroundColor: '#eee',
            },
          }}

          refreshableTintColor="blue"
          keyExtractor={(item, index) => index} // you need this for VirtualizedList
        />
      </View>
    );
  }
});

var styles = {
  container: {
    flex: 1,
    backgroundColor: '#FFF',
  },
  navBar: {
    height: 64,
    backgroundColor: '#CCC'
  },
  row: {
    padding: 10,
    height: 44,
  },
};

InfiniteVirtualizedList Advanced example

See src/GiftedVirtualizedList.js

Installation

npm install react-native-infinite-virtualized-list --save

Features

• Pull-to-refresh
• Infinite scrolling
• Loader for first display
• Default view when no content to display
• Customizable (see advanced example)

License

MIT

react-native-infinite-virtualized-list's Issues

`paginationWaitingView` is not required

@iwater

when i copy the example from README, got this warning,

Warning: Failed prop type: The prop `paginationWaitingView` is marked as required in `GiftedVirtualizedList`, but its value is `undefined`.

yes, in here, it is isRequired,

react-native-infinite-virtualized-list/src/GiftedVirtualizedList.js

Line 9 in 962cd4d

paginationWaitingView: PropTypes.func.isRequired,

but, where it used,

here:

react-native-infinite-virtualized-list/src/InfiniteVirtualizedList.js

Line 14 in 962cd4d

paginationWaitingView: PropTypes.func,

and default:

react-native-infinite-virtualized-list/src/InfiniteVirtualizedList.js

Lines 18 to 20 in 962cd4d

	static defaultProps = {
	paginationWaitingView: noop,
	}

so, i think you should remove the isRequired from API.

TypeError: Cannot read property 'length' of undefined

TypeError: Cannot read property 'length' of undefined, when loading the screen.

Versions:
react-native: 0.58.6
react: 16.5.0
react-native-infinite-virtualized-list: 0.1.14

Code

import GiftedListView from 'react-native-infinite-virtualized-list';

onFetch(page = 1, callback, options) {
    setTimeout(() => {
      var rows = ['row '+((page - 1) * 3 + 1), 'row '+((page - 1) * 3 + 2), 'row '+((page - 1) * 3 + 3)];
      if (page === 3) {
        callback(rows, {
          allLoaded: true, // the end of the list is reached
        });
      } else {
        callback(rows);
      }
    }, 1000); // simulating network fetching
}

renderRowView(rowData) {
    return (
      <TouchableHighlight
        style={styles.row}
        underlayColor='#c8c7cc'
        onPress={() => this._onPress(rowData)}
      >
        <Text>{rowData}</Text>
      </TouchableHighlight>
    );
  }

render() {
    return (
      <View>
        <GiftedListView
          rowView={this.renderRowView}
          onFetch={this.onFetch}
          firstLoader={true} // display a loader for the first fetching
          pagination={true} // enable infinite scrolling using touch to load more
          refreshable={true} // enable pull-to-refresh for iOS and touch-to-refresh for Android
          withSections={false} // enable sections
          customStyles={{
            paginationView: {
              backgroundColor: '#eee',
            },
          }}

          refreshableTintColor="blue"
          keyExtractor={(item, index) => index} // you need this for VirtualizedList
        />
      </View>
    );
  }

emptyView() - Undefined is not a function

I'm using by the first time this library, looks everything is ok here in my project, but when i'll open the screen with the list view, i'm getting the error:

"undefined is not a function (evaluating 'emptyView()')
render
GiftedVirtualizedList.js:69. _

Any idea about what is harpennig?
And how can I use my list inside the infinity list view? The list variable is alredy declared inside the render() method..

Thank you!

Can I use this for a calendar?

Hey there,

I'm a bit confused.
I'm building a calendar, and I was wondering if I can use this implementation as a month view, so that the user can scroll backwards or forward infinite times.

I noticed there's only an onNextPage callback, but what about previous pages (a.k.a previous months)?

Thank you.