A ListView or FlatList with pull-to-refresh, infinite scrolling and more for Android and iOS React-Native apps
var React = require('react-native');
var {
StyleSheet,
Text,
View,
TouchableHighlight,
ListView,
FlatList,
} = React;
var createGiftedList = require('react-native-giftedlist');
const GiftedListView=createGiftedList(ListView);
var Example = React.createClass({
_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,
});
} else {
callback(rows);
}
}, 1000);
},
_onPress(rowData) {
console.log(rowData+' pressed');
},
_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}
pagination={true}
refreshable={true}
withSections={false}
customStyles={{
paginationView: {
backgroundColor: '#eee',
},
}}
refreshableTintColor="blue"
/>
</View>
);
}
});
var styles = {
container: {
flex: 1,
backgroundColor: '#FFF',
},
navBar: {
height: 64,
backgroundColor: '#CCC'
},
row: {
padding: 10,
height: 44,
},
};