How to Load Data Dynamically With Custom Pagination in React Native

Jan 24, 2024

Custom pagination with dynamic data loading can improve the performance and overall user experience of your app.

Pagination refers to the system of dividing large amounts of data into smaller, more manageable chunks or pages to improve performance and usability. Custom pagination, if implemented properly, can provide a better user experience. Learn how to create a custom pagination solution in React Native that allows you to load data dynamically.

​​​​​​With custom pagination, developers can create a pagination mechanism that suits the specific requirements of their application. Custom pagination can involve designing a unique user interface for navigating between pages, implementing algorithms for fetching data from a database or API, or incorporating features like infinite scrolling or lazy loading.

Creating a custom pagination system for your React Native mobile apps can offer some advantages:

When your React Native application only loads the necessary data it needs to load at that time, then it is referred to as dynamic loading. To implement dynamic loading with custom pagination, you can follow these general steps:

The first step in implementing custom pagination in React Native is to set up your data source. This typically involves fetching data from an API or database and storing it in a state variable. Consider a simple REST API that returns a list of books.

Here's an example of what the API response might look like:

To fetch this data in our React Native app, we can use the fetch function, which returns a Promise that resolves with the response from the REST API.

Let's proceed to create a function that will fetch the data from the API and update the state with the newly received data. This function will decide what to render on the screen of the React Native app.

We'll define this function as an async function that takes a page parameter and returns a Promise that resolves with the fetched data.

In the code block above, the fetchBooks function takes a page parameter and returns a Promise that resolves with the data from that page. Here, the PAGE_SIZE constant is used to limit the number of books fetched per page.

With the custom pagination function defined, you can now use it to implement dynamic loading in the app. To do this, use the FlatList component, which is a high-performance component for rendering large lists of data in React Native.

First, set up the FlatList component with some initial state:

This code sets up the FlatList component with two pieces of state, namely books and currentPage. We use the useEffect() hook to fetch the initial page of data when our app first runs.

Next, we define a renderItem function that takes an item from the books array and returns a View containing the book title and author.

Finally, we have passed the books array to the data prop of the FlatList, along with our renderItem function and keyExtractor.

We now have to make sure that our Flatlist can detect when a user scrolls to the end of the list. At that point, it should proceed to fetch and load the new data and render it.

To do this, we'll use the onEndReached prop provided to the FlatList, which is a callback called when the user scrolls to the end of the list. We should also update our currentPage state to keep track of which page we're currently on.

Here is the updated code implementing all this:

Here we have added two new states called isLoading and onEndReachedThreshold. isLoading keeps track of whether we're currently fetching data, and onEndReachedThreshold fires the onEndReached callback when the user has scrolled to within 10% of the end of the list.

We created a new function called fetchMore that runs when onEndReached is fired. It checks if we're already loading data, and if not, it fetches the next page of data and updates our list.

Finally, we added the new necessary props to our FlatList component. The FlatList component will now dynamically load data as the user scrolls to the end of the list.

You learned how to load data dynamically in React Native with your own custom pagination system. This method gives you more flexibility and control when dealing with large amounts of data in your app. Remember to tailor your pagination to match your app's style and needs. You can customize it even further to achieve the desired look and functionality. Overall, it would definitely help you to optimize your app's performance.

Noble Okafor is a skilled software engineer with over 3 years of navigating the programming field. He has a passion for building optimized JavaScript, native and cross-platform mobile and web software solutions. He strives to document his knowledge and lessons through his technical articles with over a year of experience in writing. The primary focus and aim of these articles is to simplify the complexities around software engineering topics.