gameboyVito / react-native-ultimate-listview

A high performance FlatList providing customised pull-to-refresh | auto-pagination & infinite-scrolling | gridview layout | swipeable-row.
https://www.npmjs.com/package/react-native-ultimate-listview
MIT License
540 stars 87 forks source link

How to implement load more ? #46

Open mytc opened 6 years ago

mytc commented 6 years ago

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?