React native Pagination code sample

February 15, 2023

Here is an example of pagination in React Native using a FlatList component:

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

const data = [
  { key: '1' },
  { key: '2' },
  { key: '3' },
  { key: '4' },
  { key: '5' },
  // ...
];

const PaginationExample = () => {
  const [page, setPage] = useState(1);
  const [dataSource, setDataSource] = useState(data.slice(0, page * 10));

  const handleLoadMore = () => {
    setPage(page + 1);
    setDataSource(data.slice(0, page * 10));
  };

  return (
    <View>
      <FlatList
        data={dataSource}
        renderItem={({ item }) => <Text>{item.key}</Text>}
        onEndReached={handleLoadMore}
        onEndReachedThreshold={0.5}
      />
    </View>
  );
};

export default PaginationExample;

In this example, we’re using a FlatList component to render a list of items, and a state variable “page” to keep track of the current page number. When the list is scrolled to the end, the “onEndReached” prop is triggered, and the “handleLoadMore” function is called, which increments the page number and updates the data source for the list. The “onEndReachedThreshold” prop is set to 0.5, which means that the “onEndReached” prop will be called when the end of the list is within 50% of the visible area.