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.

Understanding Custom Pagination

​​​​​​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.

Advantages of Custom Pagination

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

  • It can improve your app's scalability, allowing it to handle larger amounts of data more efficiently. This is especially important for apps that deal with large datasets.
  • Custom pagination can improve the performance of your app by dividing data into smaller and more manageable chunks. This will reduce loading time.
  • With custom pagination, you will have increased flexibility and control in presenting and accessing data within your app.

Implementing Dynamic Loading With Custom Pagination

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:

  1. Determine the pagination method: Decide on a pagination method that works best for your content. This could be a traditional page-based pagination system, where users click to load the next page, or an infinite scroll system, where more content is loaded as the user scrolls down the page.
  2. Write server-side and client-side code: You will write server-side code to handle the pagination requests for specific pages of data and return only the data for that page. You will then write client-side code to listen for user actions that trigger requests for more data, like clicking a Load More button or scrolling to the bottom of the page.
  3. Implement the data loading: When the user triggers a request for more data, the app should send a request to the server side for the next page of data. The server side should then return only the data for that page, which the app can use to update the page.
  4. Update the page: Finally, you will update the page with the newly loaded data. This could involve appending the new data to an existing list of items or replacing the entire list with the new data.

Setting Up the Data Source

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:

 {
  "data": [
    {
      "id": 1,
      "title": "The Catcher in the Rye",
      "author": "J.D. Salinger"
    },
    {
      "id": 2,
      "title": "To Kill a Mockingbird",
      "author": "Harper Lee"
    },
    // ...
  ],
  "page": 1,
  "totalPages": 5
}

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.

Creating a Custom Pagination Function

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.

 const PAGE_SIZE = 10;

const fetchBooks = async (page) => {
  try {
    const response = await fetch(`https://myapi.com/books?page=${page}&pageSize=${PAGE_SIZE}`);
    const json = await response.json();
    return json.data;
  } catch (error) {
    console.error(error);
    return [];
  }
}

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.

Implementing Dynamic Loading With the Help of the Custom Pagination Function

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:

 import React, { useState, useEffect } from 'react';
import { FlatList, View, Text } from 'react-native';

const App = () => {
  const [books, setBooks] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);

  useEffect(() => {
    // Fetch initial page of data
    fetchBooks(currentPage).then(data => setBooks(data));
  }, []);

  const renderItem = ({ item }) => {
    return (
      <View>
        <Text style={{ fontSize: 18 }}>{item.title}</Text>
        <Text style={{ fontSize: 14 }}>{item.author}</Text>
      </View>
    );
  };

  return (
    <FlatList
      data={books}
      renderItem={renderItem}
      keyExtractor={item => item.id.toString()}
    />
  );
}

export default App;

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:

 import React, { useState, useEffect } from 'react';
import { FlatList, View, Text } from 'react-native';

const App = () => {
  const [books, setBooks] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    fetchBooks(currentPage).then(data => setBooks(data));
  }, []);

  const fetchMore = async () => {
    if (isLoading) return;

    setIsLoading(true);

    const nextPage = currentPage + 1;
    const newData = await fetchBooks(nextPage);

    setCurrentPage(nextPage);
    setIsLoading(false);
    setBooks(prevData => [...prevData, ...newData]);
  };

  const renderItem = ({ item }) => {
    return (
      <View style={{ padding: 16 }}>
        <Text style={{ fontSize: 18 }}>{item.title}</Text>
        <Text style={{ fontSize: 14 }}>{item.author}</Text>
      </View>
    );
  };

  return (
    <FlatList
      data={books}
      renderItem={renderItem}
      keyExtractor={item => item.id.toString()}
      onEndReached={fetchMore}
      onEndReachedThreshold={0.1}
    />
  );
}

export default App;

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.

Improve Your App's Performance Using Custom Pagination

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.