React Native Dynamically Load More Data on Button Click Infinite List Android iOS Tutorial

Guys, Through this tutorial, I am going to describe you how we can create Infinite List or Load more data from the server and append into React native FlatList  component dynamically on Button click.

In brief, what I am doing in Dynamically Load More Data on Button Click Infinite List tutorial?

  • I am using Random User Generator online API to fetch fake JSON. Random User Generator API provides parameters to filter data such as if you want to access JSON of only 20 records at a time then Random User Generator API provides options to perform these types of tasks.
  • Initially, I am fetching 20 records of JSON and when user clicks on the load more button then I am sending another request to Random User Generator API in order to load more 20 records and append these 20 records into existing FlatList component and so on.

Let’s begin…

Step – 1: Import required components from react , react-native  packages.

Step – 2: Implement constructor  method.

Explanation:

  • loading  state variable is used to indicate the user that data is loading from server when app initially loads and after initial loading from server we will hide the indicator and show list of items.
  • fetching_from_server  state variable is used to show indicator when user clicks on Load More button to load more data from server.
  • The Random User Generator API takes page parameter when you want to load more pages from this API. and this.page  variable will be incremented every time when user will click on Load More button.
  • I am setting a timer using javascript setTimeout  method to make delay of 1.5 seconds to show the Activity Indicator when user clicks on Load More button.

Step – 3: Implement componentDidMount  method.

Explanation:

  • The code in this method will be executed when app initially loads, set data for FlatList component and hide loading indicator.

Step – 4: Implement loadMore  custom method.

Explanation:

  • This method will be executed when user clicks on Load More button and first of all in this method we will increment this.page  variable and then make a request with this.page  variable’s updated value to load 20 new random records and append these 20 new random records in existing FlatList component.
  • In this method, to show loading indicator, I am also setting a delay of 1.5 seconds to make new request to the API.

Step – 5: Implement renderFooter  custom method. This method is responsible to create footer for FlatList component. I am showing Load More button in the footer of the FlatList component.

Explanation:

  • When user clicks on Load more button then fetching_from_server  state variable will become true and we will show the loading indicator along with Load More text and setting false to fetching_from_server  state variable and hide the loading indicator when new data will be successfully fetched and appended to the  FlatList  component.

Step – 6: Implement render  method.

Step – 7: Implement styles for all required custom components.

Complete Source Code:

Step – 8: Execute react-native run-ios  to run app in iOS devices and / or execute react-native run-android  to run app in Android devices.

  • iOS Screenshots:

  • Android Screenshots:

Guys, If you have any queries then put your queries in the below comment section and thanks for reading my post. So enjoy and have fun… 😀

Leave a Reply

Your email address will not be published. Required fields are marked *