FlatList: Loadmore and pull to refresh

FlatList is react component for rendering list.

Here Two features of FlatList is including:

1. Loadmore
2. pull to refresh

In this example, I am going to use StackExchange user API to show user list.

code for the constructor of your class:

In componentWillMount, we call the method fetchUser(), which will perform API calls to get UserList. In this example, I have used axios for API calls.

You can install axios using below command in your project directory:

 npm install axios  — save

then import axios in the top of the class. Use below command to import axios:

import axios from ‘axios’;

In render method, I have used FlatList to render data in a list.

In which,three methods are used:

1. renderSeparator is used to separate list item by line.
2. renderFooter is used show indicator at the bottom of the list while user list will be loading.
3. handleLoadMore is a method which performs loadmore functionality. it will increase page by one and call API.

And one component RefreshControl is used for pull to refresh.

render method code will be like below:

renderSeparator method to show the separate line between list.

renderFooter method to render footer view at the bottom of the screen when loadmore functionality will execute.

handleLoadMore method will be called when you reach at the end of the screen/list.

onRefresh method will be called when you pull to refresh the list. In this example, this method will load the first page and clear all data into the list.