Pagination using cloud firestore may be done in various ways but here's a basic way to do it using the firestore query features: [orderBy, limit, startAfter]

Setup state

First, create a list display component with 2 state items; lastDocument and userData:

jsx

import React, { useState } from 'react';
import type { Node } from 'react';
import { Text, View, Button, Alert } from 'react-native';

import { collection, getFirestore } from '@react-native-firebase/firestore';

const db = getFirestore();
const usersRef = collection(db, 'Users');

const App: () => Node = () => {
  const [lastDocument, setLastDocument] = useState();
  const [userData, setUserData] = useState([]);
};

`LoadData` function

Next, make a function called LoadData that fetches data from Users collection, and call it when a Button is pressed.

If lastDocument is not assigned (meaning initial load), the function will fetch from the start. After successful fetch from the collection, store the last snapshot data by setLastDocument.

jsx

import React, { useState } from 'react';
import type { Node } from 'react';
import { Text, View, Button, Alert } from 'react-native';

import {
  collection,
  getDocs,
  getFirestore,
  limit,
  orderBy,
  query,
  startAfter,
} from '@react-native-firebase/firestore';

const db = getFirestore();
const usersRef = collection(db, 'Users');

const App: () => Node = () => {
  const [lastDocument, setLastDocument] = useState();
  const [userData, setUserData] = useState([]);

  function LoadData() {
    console.log('LOAD');
    const constraints = [orderBy('age')]; // sort the data
    if (lastDocument !== undefined) {
      constraints.push(startAfter(lastDocument)); // fetch data following the last document accessed
    }
    constraints.push(limit(3)); // limit to your page size, 3 is just an example

    getDocs(query(usersRef, ...constraints)).then(querySnapshot => {
      setLastDocument(querySnapshot.docs[querySnapshot.docs.length - 1]);
      MakeUserData(querySnapshot.docs);
    });
  }

  return (
    <View>
      {userData}
      <Button
        onPress={() => {
          LoadData();
        }}
        title="Load Next"
      />
    </View>
  );
};

`MakeUserData` function

This is just an example function, alter it to process the data to meet your requirements. In this specific example, it will replace the userData component with the new data fetched.

function MakeUserData(docs) {
  let templist = []; //[...userData] &lt;- use this instead of [] if you want to save the previous data.
  docs.forEach((doc, i) => {
    console.log(doc._data);
    let temp = (
      <View key={i} style={{ margin: 10 }}>
        <Text>{doc._data.name}</Text>
        <Text>{doc._data.age}</Text>
      </View>
    );
    templist.push(temp);
  });
  setUserData(templist); //replace with the new data
}

Now, every time the button is pressed, Users collection data will be fetched one page at a time.

Conclusion

Here's the full example code

jsx

import React, { useState } from 'react';
import type { Node } from 'react';
import { Text, View, Button, Alert } from 'react-native';

import {
  collection,
  getDocs,
  getFirestore,
  limit,
  orderBy,
  query,
  startAfter,
} from '@react-native-firebase/firestore';

const db = getFirestore();
const usersRef = collection(db, 'Users');

const App: () => Node = () => {
  const [lastDocument, setLastDocument] = useState();
  const [userData, setUserData] = useState([]);

  function LoadData() {
    console.log('LOAD');
    const constraints = [orderBy('age')]; // sort the data
    if (lastDocument !== undefined) {
      constraints.push(startAfter(lastDocument)); // fetch data following the last document accessed
    }
    constraints.push(limit(3)); // limit to your page size, 3 is just an example

    getDocs(query(usersRef, ...constraints)).then(querySnapshot => {
      setLastDocument(querySnapshot.docs[querySnapshot.docs.length - 1]);
      MakeUserData(querySnapshot.docs);
    });
  }

  function MakeUserData(docs) {
    let templist = [];
    docs.forEach((doc, i) => {
      console.log(doc._data);
      let temp = (
        <View key={i} style={{ margin: 10 }}>
          <Text>{doc._data.name}</Text>
          <Text>{doc._data.age}</Text>
        </View>
      );
      templist.push(temp);
    });
    setUserData(templist);
  }

  return (
    <View>
      {userData}
      <Button
        onPress={() => {
          LoadData();
        }}
        title="Load Next"
      />
    </View>
  );
};

export default App;

Pagination

Setup state

LoadData function

MakeUserData function

Conclusion

On this page

`LoadData` function

`MakeUserData` function