https://github.com/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
https://github.com/iwater/react-native-infinite-virtualized-list
infinite-scrolling react-native virtualized virtualizedlist
Last synced: 3 months ago
JSON representation
A new InfiniteList that compose react-virtualized/InfiniteLoader with the react-native/VirtualizedList component, and a drop replacement component of react-native-gifted-listview
- Host: GitHub
- URL: https://github.com/iwater/react-native-infinite-virtualized-list
- Owner: iwater
- License: mit
- Created: 2017-03-11T17:39:41.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-03-09T15:06:59.000Z (about 8 years ago)
- Last Synced: 2025-10-26T23:38:39.309Z (6 months ago)
- Topics: infinite-scrolling, react-native, virtualized, virtualizedlist
- Language: JavaScript
- Size: 10.7 KB
- Stars: 34
- Watchers: 3
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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
```js
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 (
this._onPress(rowData)}
>
{rowData}
);
},
render() {
return (
index} // you need this for VirtualizedList
/>
);
}
});
var styles = {
container: {
flex: 1,
backgroundColor: '#FFF',
},
navBar: {
height: 64,
backgroundColor: '#CCC'
},
row: {
padding: 10,
height: 44,
},
};
```
### InfiniteVirtualizedList Advanced example
[See src/GiftedVirtualizedList.js](src/GiftedVirtualizedList.js)
### Installation
```npm install react-native-infinite-virtualized-list --save```
### Features
- [x] Pull-to-refresh
- [x] Infinite scrolling
- [x] Loader for first display
- [x] Default view when no content to display
- [x] Customizable (see advanced example)
### License
[MIT](LICENSE.md)