Hướng dẫn tạo Loadmore cho FlatList trong ReactNative

Để thực hiện được phần này, bạn cần có API demo danh sách nhiều dữ liệu một chút. Bạn hãy xem bài viết này https://zezo.dev/view/huong-dan-phan-trang-trong-danh-sach-du-lieu-api-viet-bang-nodejs

Sau khi có API demo như bài viết trên, bạn hãy vào Compass nhập khoảng 30 bản ghi và sửa biến limit trong controller thành 15 bản ghi trên 1 trang.

Cơ bản là bạn nên đặt số bản ghi trên 1 trang làm sao cho hiển thị trên màn hình điện thoại nhiều hơn giới hạn chiều cao của màn hình để tránh bị load 2 trang cùng lúc.

Sau khi chuẩn bị dữ liệu xong, bạn thực hiện các bước sau:

Bước 1: Tạo ứng dụng ReactNative trống

Bước 2: Tạo 1 Component hoặc viết vào file App code sau

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

const LoadMoreFlatList = () => {
  const [data, setData] = useState([]);

  const [isLoading, setIsLoading] = useState(false);
  const [nexPage, setNextPage] = useState(1);
  const [totalPages, setTotalPages] = useState(0);
 

  useEffect(() => {
    console.log("--- useEffect --> ");
    
    fetchData();
  }, []);

  const fetchData = async () => {
    console.log(`---- nexpage: ${nexPage} / ${totalPages}`);
    if(totalPages >0 && nexPage>totalPages) {
      console.log("Đã hết dữ liệu");
      return;
    }
    
    setIsLoading(true); // hiện ActivityIndicator 
    // Thực hiện lấy dữ liệu từ API hoặc bất kỳ nguồn dữ liệu nào khác
    // Trong ví dụ này, chúng ta chỉ sử dụng dữ liệu giả lập
    const response = await fetch(`http://10.0.2.2:3000/api/todos?page=${nexPage}`);
    const dataRes = await response.json();
    // console.log(dataRes);
    // ghép nối dữ liệu thêm vào danh sách
    setData(prevData => [...prevData, ...dataRes.data]);
    setTotalPages(dataRes.totalPages);// lưu lại tổng số trang 
    //xác định trang tiếp theo, nếu nextpage còn bé hơn totalpage thì tăng thêm 1 đơn vị
    // if(dataRes.totalPages > nexPage)
      setNextPage(prevPage => prevPage + 1);


    setIsLoading(false);
  };

  const renderFooter = () => {
    return isLoading ? (
      <View style={{ paddingVertical: 20 }}>
        <ActivityIndicator size="large" color="#0000ff" />
      </View>
    ) : null;
  };

  return (
    <FlatList
      data={data}
      keyExtractor={(item, index) => index.toString()}
      renderItem={({ item }) => (
        <View style={{ padding: 30, borderBlockColor: 'blue', borderWidth:1}}>
          <Text>{item.title}</Text>
        </View>
      )}
      onEndReached={fetchData}
      onEndReachedThreshold={0.1}
      ListFooterComponent={renderFooter}
    />
  );
};

export default LoadMoreFlatList;

Trong thẻ Flatlist bạn cần chú ý 3 thuộc tính:

onEndReached={fetchData} ---> Khi cuộn đến cuối màn hình sẽ tự gọi hàm fetchData để load thêm dữ liệu
onEndReachedThreshold={0.1} --> khoảng cách đến cuối màn thì thì bắt đầu gọi hàm fetchData
ListFooterComponent={renderFooter} --> render ra cái vòng tròn quay quay đợi load dữ liệu ở cuối danh sách, khi load xong sẽ tự ẩn

Bước 3: Chạy thử nghiệm ứng dụng và cuộn màn hình