Here, we are going to implement pull to refresh which will refresh and make API call again to refresh the posts in the Home screen list. Also, we are going to add the Infinite scroll to the bottom of Home screen. The infinite scroll will trigger the request to server which will load more articles into the list. Implementing Pull to Refresh First, we are going to implement pull to refresh. For that, we need to define a state variable called which will handle the hiding and showing of refresh loader. The state is defined as shown in the code snippet below: isFetching isFetching .state = { :[], : ,
      } this lastestpost isFetching false Next, we need to create a function called which will trigger when we pull the pull to refresh trigger. onRefresh() onRefresh() { .setState({ : }, { .fetchLastestPost() 
        });
      } this isFetching true ( ) function this Here, we have changed the state of to true and also called the function again. This will cause the re-fetch of the posts by making an API call to the server. isFetching fetchLastestPost <FlatList
     data={ .state.lastestpost }
     onRefresh={() => .onRefresh()}
     refreshing={ .state.isFetching} this this this And, in the function, we also need to change the state of to false to hide the scroll loader. fetchLastestPost isFetching fetchLastestPost() { response = fetch( ); post = response.json(); .setState({ : post, : });
      } async const await 'https://kriss.io/wp-json/wp/v2/posts?per_page=5' const await this lastestpost isFetching false Hence, we will get the following result in the emulator screen: As we can see, when we pull the list downward the spinner appears and the list is refreshed. Implementing Infinite Scroll Now, we are going to add the infinite scroll to the bottom of the Home screen. The idea is load more articles when we scroll to the bottom. For that, we need to define a state variable called page which will handle which data we are fetching from the WordPress API. .state = { : [], : , : ,
        }; this lastestpost isFetching false page 1 hen, we are going to create a new function called and call it in the event of the . We are also configuring some addition props to the such as which controls the trigger of function based on how far we are from the bottom of the list. The overall implementation is provided in the code snippet below: handleLoadMore onEndReached FlatList FlatList onEndReachedThreshold onEndReached={ .handleLoadMore}
    onEndReachedThreshold={ }
    ListFooterComponent={ .renderFooter} this 0.1 this Now, the implementation of the function is provided in the code snippet below: handleLoadMore handleLoadMore = { .setState(
          { : .state.page + ,
          },
          () => { .fetchLastestPost();
          },
        );
      }; => () this page this 1 this Here, we have made increment to the page state variable and then called the function again. fetchLastestPost() Now, we need to make some configuration in the fetching of API as well which will be based on the page number as shown in the code snippet below: fetchLastestPost() { page = .state.page; response = fetch( ,
        ); post = response.json(); .setState({ : page === ? post : [...this.state.lastestpost, ...post], : ,
        });
      } async let this const await `https://kriss.io/wp-json/wp/v2/posts?per_page=5&page= ` ${page} const await this lastestpost 1 isFetching false Here, we have added page to the query in order to fetch next page.Then after fetching, we have concatenated it to the lastestpost state variable. Now, in order to add the Infinite scroll, we need to make use of component from the package. First, we need to import it as shown in the code snippet below: ActivityIndicator react-native {View, Text, FlatList, ActivityIndicator} ; import from 'react-native' Then, we need to implement a new function called which will return the template for wrapped by component with styles or nothing based on the state as shown in the code snippet below: renderFooter() ActivityIndicator View isFetching renderFooter = { ( .state.isFetching) ; ( <ActivityIndicator animating size="large" />
          </View> => () if this return null return < = , , "# "
            }}
          > View style {{ paddingVertical: 20 borderTopWidth: 1 borderColor: CED0CE );
      }; Here, if the request is not sent then, we hide the spinner. Hence, we will get the following result in the emulator screen: As we can see, the spinner appears and loads the addition article cards to the list. Hence, we have successfully completed the implementation of the Home screen list. Now, we are going to create the template for the Single Post. Summary In this chapter, we learned how to configure the pull to refresh function in both android and iOS. Lastly, we learned how to set up the infinite loader to trigger load more function which loads additional articles into the list. This series intends to show how I build an app to serve content from my WordPress blog by using react-native. Since my blog is talking about react-native, the series and the articles are interconnected. We will learn how to set-up many packages that make our lives comfortable and learn how to deal with WordPress APIs. Here, the most prominent features talked about in the book are the dark theme, offline mode, infinite scroll and many more. You can discover much more in this series. this inspiration to do this tutorial series came from the from instamobile React Native App Templates

Fetch

visit more my tutorial

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How To Build WordPress App with React Native Part #7: Pull to Refresh and Infinite Scroll

Too Long; Didn't Read

Company Mentioned

krissanawat

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How To Build WordPress App with React Native Part #7: Pull to Refresh and Infinite Scroll

Too Long; Didn't Read

Company Mentioned

krissanawat

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES