7. Lists with FlatList

`FlatList` renders only the items currently visible (plus a small buffer), which is essential for a transaction history or an NFT gallery that could contain thousands of rows.

import { FlatList, Text } from "react-native";

function TxList({ txs }: { txs: { hash: string; amount: number }[] }) {
  return (
    <FlatList
      data={txs}
      keyExtractor={(tx) => tx.hash}
      renderItem={({ item }) => <Text>{item.hash}: {item.amount}</Text>}
    />
  );
}

`keyExtractor` must return a stable, unique id per item (a transaction hash is ideal); using the array index breaks state and animations when the list reorders.

Check your understanding