Infinite Scrollable List With Loading Icon in React Native

We will be building an infinite scrollable list app, like a Facebook or Instagram feeds list. Whenever you reach to the bottom of the list, you again fetch next set of feeds. But while that fetching happens, we also need to show the loading icon until next set of data has finally arrived.
Here, we will be building an app which displays list of users.

This is how the final version of our app will look like:

List of users with loading icon at bottom

Displaying the Initial data
Usually you will fetch the user details from a remote URL, but here we will be using static data in our app.
First things first, simple display of users details in a list. This is how our component will look like:

Here I am using a static function dataGenerator defined in my app that returns me a list of users. I am setting the returned users into the component’s state.

Now to display it in a list I am using FlatList. If you are not familiar with this component, read here. This component is advancement over ScrollView component in number of ways.

data attribute takes in an array which in our case is users stored inside state. keyExtractor refers to the key of each item in the list (I am using combination of user’s name and email),
ListHeaderComponent is for the header that will be displayed on top of list.

renderItem is a function that signifies how you want each element of your list to display. Here I have a used a custom ListElement Component:

//ListElement.js
class ListElement extends Component {
    render() { 
       const { name, email } = this.props;
       const rowStyles = [styles.row];
        return (
           <Animated.View style={rowStyles}>
             <View>
                 <Text style={styles.name}>{name}</Text>
                 <Text style={styles.email}>{email}</Text>
             </View>
           </Animated.View>
         );
       }
}

This is how result looks like right now:

As you can see all the data is displayed in 1 go, without any loading sign.
Now we are going to change our InfiniteList component, such that it only displays initial data of 10 users, and when you scroll down to bottom, we will fetch next set of 10 users, and until those users are fetched, we will be shown a loading icon. We will be adding two properties to state, “page” which reflects list page no, and “isLoading” which is false by default and is only true when data is being fetched.

Sequential data access and displaying Loading Icon:
We need to add 2 properties to our FlatList component, onEndReached and onEndReachedThreshold. onEndReached takes a callback that will be run when user has scrolled to the end. onEndReachedThreshold tells how far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback.

Here is our updated component:

Notice here we have added two properties to state.

Also, in addData function, we first setting state’s isLoading to true and then fetch the new users.

Note: I have used setTimeout to add a manual delay between fetching of next set of users, so that our loading icon is visible.

Once data is fetched, users in state are updated and isLoading is set to false.
Our dataGenerator function returns 10 users at a time, which are then appended to current set of users

When onEndReached callback is fired, first page no. in state is incremented, then addData function is called.

onEndReachedThreshold has been set to 0, i.e. when you scroll to the last user in the current visible list, then only onEndReached callback will be fired.

After making these changes you should be able to see the desired version of the app as shown above.

The whole source code of this application can be found at Github under branch name “infinite_scroll_list”.