FlatList component with pagination and refresh using WordPress as backend – Part 2

This is second part of article React Native App with WordPress . In last part we learned how we can use WordPress as back-end for React Native App and create endpoints to get data. In this part we will see how we can use the React Native FlatList component to render data with pagination and refresh feature.  Enough Talk! Now lets start with coding.

First we will add all the required packages to our package.json file and then the file will look like this :

So, you can see we have added three new packages react-native-elements, react-native-render-html and react-native-vector-icons.

Now we will import the packages in our NewsList.js file and our file will have the code below :

Next we will add constructor to NewsList component and initialize state like below :

In the above code, state variable loading will hold the status if data is loading or has been loaded, data variable will hold data that will be fetched, page will hold current page no of list, refreshing will hold if user refreshed list or not and siteTitle will hold the title of website that will be fetched.

Next, we will write the function below, to fetch remote data :

In the above code, We are fetching posts from WordPress website using the endpoint to fetch posts.

Next, we will use componentDidMount lifecycle method to get the website title and website post (using the fetchData function we created above). Below is the code for the same :

Next we will user renderHeader and renderFooter methods to set-title and show load more indicator respectively like below :

Below is the code that will be executed when user will refresh list :

Below is the code that will be called when user will reach end of the list and more data need to be loaded :

Finally we will render data using FlatList component like below :


So, in this article we learned two main things.

  1. How to fetch data from WordPress endpoint
  2. How to render data using FlatList component with pagination and refresh list feature

If you find this article information please do subscribe to our news letter and YouTube channel and stay tuned for more of such awesome tutorials.

Video Tutorial