I am change to this from flatlist, but I can't make the load more features works.
<UltimateListView
onFetch={this.onFetch}
keyExtractor={(item, index) => item.key}
item={this.renderItem}
refreshing = {this.state.refreshing}
onRefresh={() => this.refreshData()}
ListFooterComponent={this.Loadmore}
onEndReached={this.handleLoadMore}
onEndReachedThreshold={50}
initialNumToRender={10}
ItemSeparatorComponent={this.renderSeparator}
getItemLayout={(data, index) => (
{length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
)}
paginationFetchingView={this.Loadmore}
arrowImageStyle={{ width: 20, height: 20, resizeMode: 'contain' }}
autoPagination={true}
onEndReachedThreshold={10}
paginationBtnText="Load More"
updateDataSource={this.state.data}
/>
..........
onFetch = async(page = 1, startFetch, abortFetch) => {
page = this.state.page
try {
//This is required to determinate whether the first loading list is all loaded.
let pageLimit = 50;
// if (this.state.layout === 'grid') pageLimit = 60;
let skip = (page - 1) * pageLimit;
//Generate dummy data
let rowData = this.state.data
//Simulate the end of the list if there is no more data returned from the server
if (page === 100) {
rowData = [];
}
//Simulate the network loading in ES7 syntax (async/await)
await this.sleep(2000);
startFetch(rowData, pageLimit);
} catch (err) {
abortFetch(); //manually stop the refresh or pagination if it encounters network error
console.log(err);
}
};
Previously in flatlist I am using onEndReached to trigger the load more feature, where in the method, I change the page state and calling fetch data from web server and finally update the data source (state.data).
But how it doesn't work in this. I am fairly new in RN and es6, must be something i missing. Can anyone show me how?
I am change to this from flatlist, but I can't make the load more features works.
Previously in flatlist I am using
onEndReached
to trigger the load more feature, where in the method, I change the page state and calling fetch data from web server and finally update the data source (state.data).But how it doesn't work in this. I am fairly new in RN and es6, must be something i missing. Can anyone show me how?