How to implement pagination in React Native

Last week, we introduced PaginatableList, our new open source library that handles pagination in React Native and helps save developers precious hours of redundant work.

In this tutorial, we’ll go through the basics of pagination, the steps to paginate a list and discuss better approaches to pagination.

What is pagination?

If you have internet access, chances are you’ve probably seen pagination in action.

Pagination is the process of separating digital content into distinct pages. It is implemented to give users a smoother experience by breaking up lengthy content and only loading the pages requested by the user. This significantly reduces load times, and in turn decreases visitor drop-off.

In certain cases, implementing pagination is absolutely critical. Especially on mobile devices, due to smaller screen sizes, slower network speeds, and limited data plans, pagination becomes a necessity.

How to implement pagination in React Native?

The key to making pagination work in a mobile list view, is detecting when a user has almost reached the end of the list. When this takes place, the app should make an HTTP request to load the following subset of data, and add it to the end of the list sequentially. In React Native, we can use FlatList component to get the list into place effectively.

In FlatList, the onEndReached callback function will be triggered once the user has scrolled up to a certain point in the entire list. This way, the list will continue to load more items, as the user scrolls closer to the bottom of the list until all items are loaded.

In the case of some scrollable lists, it will be sufficient to store the loaded list data as component states. However, for the lists that need to share data with multiple screens throughout the app, the component state is not an ideal candidate. Usually, we would store the list data in the Redux store to make the data available globally in the application. This prevents having to load the same data over and over again when used in different areas of the app.

Store PaginatableList data in Redux store

Redux is a predictable state container for Javascript apps, and it is widely used in the development of React Native. Almost every app developed in React Native has used a Redux store. For those who are not familiar with how to work with Redux flow, there are three core terms that we will be referring to in this blog.

Store

‘Store’ is the Redux store that we mentioned in the last section. It is responsible for the state of the whole app. The app state is a nested Javascript object. Data stored in this object is accessible from anywhere in the app

Actions

‘Actions’ are commands you send to the Redux store asking the store to make changes to the store’s data.

Reducers

‘Reducers’ act like a switch statement or a manual. It specifies how the app state should be changed in response to certain commands, which are actions in Redux context.

Keeping these concepts in mind, let’s talk about how to store pagination list data in the Redux store.

Let’s start by looking at an example. Assume that we are going to develop a shopping app. We plan to make an infinite list of products on the product’s browser page. Presume that we have a server that already has an endpoint for fetching the products in a pagination pattern. It accepts ‘pageSize’ and ‘pageNumber’ as query parameters to return a certain amount of the products every time we call it.

It’s better if we cut to the chase and skip the process of setting up a Redux store in a React Native project, because tons of articles talk about it, and many boilerplates have Redux configured out-of-the-box. In this tutorial, we will focus on pagination-related configurations and assume that we already have a key, ‘product’, in the app state to store paginable list data.

Below, are the steps that are needed to create an endless list of products that dynamically load paginable data and store the data in the Redux store.

1. Add a FlatList component to the browser screen and enter the ‘products’ from the Redux store as ‘data’ props. In this way, the FlatList displays all the stored items as the value of the key products.
2. Create an action called LOAD_MORE. The action will take an array of items and add it to the value of key ‘products’, which is also an array.
3. Implement a onLoadMore function, which takes the current page number, and page size as parameters. We need to make a GET request with these two parameters to the products endpoint and wait until the server responds with the product data. Then, we send a LOAD_MORE action to the Redux store to keep the newly loaded data.
4. Pass the onLoadMore function into the FlatList component as its props onEndReached, so the list will call the onLoadMore function when it is close to the bottom of the loaded list.
5. Remember to keep track of the current page number, so that the app knows which specific page of data needs to be fetched.

Most scrolling lists require the ‘pull-to-refresh’ feature to be implemented. This means that if the user pulls down at the top of the list, the list data will be refreshed. To execute this feature we will need 3 additional steps:

1. Another action named REFRESH. It will replace the current value of key ‘products’ with an array of new product data.
2. Implement onRefresh function to make a GET call to re-fetch the first page of the product data and send the REFRESH action.
3. Add a RefreshControl component to the FlatList and keep track of the refreshing status of the list to display the loading indicator.

If this doesn’t sound overwhelming to you, try practicing this a couple of times. You’ll probably get bored very soon due to the highly repetitive process. Sadly, you may have to iterate the process a few times while developing the same app, because mobile apps always need more than one paginatable list.

A better approach to pagination

Having gone through this process countless times ourselves, we wanted to make pagination an effortless step in app development. Our team has created a streamlined and painless way to paginate lists; for the greater good, but also for our own sanity. Read last week’s blog to find out more about our library PaginatableList.

Built on top of React Native’s FlatList, PaginatableList helps you automatically manage list items by providing it with a paginatable API endpoint. PagintableList is shipped out-of-the-box, fully equipped with some useful features. It dynamically loads more items when users scroll close to the bottom of the loaded list, and has a pull-to-refresh feature. All the list items fetched will be safely stored with Redux and you can access them from anywhere in the application. If you follow this approach you’ll never have to go through the time consuming steps explained earlier.

Check out the full documentation of PaginatableList here.