pagination in react native

Question

I am implementing pagination in react native app my Web API is giving total record size and option to send page no as a parameter. www.URL.com/api/GetAll?pageNo={pageNumber

Answer 1

You can use onEndReached prop of FlatList to know when the list ended and then you can get the next page content then push the received data to your existing data. You can set when the endReached event will fire with onEndReachedThreshold prop.

Answer 2

You can use below code. Please note that ListService.getList is a function which calls the api end point with relevant page number.

class List extends Component {

    constructor() {
        super();
        this.state = {
            list: [],
            pageNumber: 1,
        };
        this.fetchList = this.fetchList.bind(this);
        this.onEndReached = this.onEndReached.bind(this);
    }

    fetchList() {
        ListService.getList(this.state.pageNumber)
            .then((response) => {
                this.setState({ list: response.data, pageNumber: this.state.pageNumber + 1 });
            })
            .catch((error) => { });
    }

    onEndReached() {
        this.fetchList();
    }

    render() {
        return (
            <FlatList
                keyExtractor={(item, index) => item.ID}
                data={this.state.list}
                onEndReached={this.onEndReached}
                onEndReachedThreshold={0.3} />
        )
    }
};