react-native-demo / app / components / transaction / transaction-list.tsx

import { FlashList } from "@shopify/flash-list";
import { RefreshControl, TouchableOpacity } from "react-native";
import { ThemedText } from "@/components/theme";

import { TransactionCard } from "./transaction-card";

import {
  useTransactions,
  TransactionFilterOptions,
} from "@/hooks/use-transactions";

interface TransactionListProps {
  accountId?: number;
  filter?: TransactionFilterOptions;
}

export const TransactionList = ({
  accountId,
  filter,
}: TransactionListProps) => {
  const { transactions, isRefetching, refetch, hasNextPage, fetchNextPage } =
    useTransactions(accountId, filter);

  return (
    <FlashList
      nestedScrollEnabled={true}
      data={(transactions?.pages ?? []).flatMap(({ data }) => data)}
      keyExtractor={({ id }) => id.toString()}
      refreshControl={
        <RefreshControl
          tintColor="blue"
          refreshing={isRefetching}
          onRefresh={refetch}
        />
      }
      ListFooterComponent={
        hasNextPage ? (
          <TouchableOpacity
            onPress={() => fetchNextPage}
            style={{ display: "flex" }}
          >
            <ThemedText>fetch more</ThemedText>
          </TouchableOpacity>
        ) : null
      }
      renderItem={({ item }) => (
        <TransactionCard key={`${item.id}`} transaction={item} />
      )}
      onEndReachedThreshold={0.95}
      onEndReached={() => {
        fetchNextPage();
      }}
    />
  );
};