React Native
List header and footer
Learn ListHeaderComponent and ListFooterComponent.
List header and footer
FlatList and SectionList can place a fixed component above and below the list. ListHeaderComponent places a component at the start of the list and ListFooterComponent at the end. These components stay attached to the list while scrolling.
Example: <FlatList data={tasks} renderItem={...} ListHeaderComponent={<Text>To-do</Text>} ListFooterComponent={<Text>That is all</Text>} />. This pattern shows a header above the list and a footnote below. The header is usually for a title or counter; the footer for 'that is all' or a pagination button.
When to use header and footer
Header and footer are ideal for showing fixed information. In a task list, the header can show the total task count and the footer can show 'That is all'. This pattern is cleaner than placing header items inside the list.
Important: header and footer live inside the FlatList's scroll area; they scroll with the list. For headers that stay fixed on screen, place the header outside the FlatList. This distinction marks the difference between a 'list header' and a 'fixed header' on mobile.
Exercise Write a list with header and footer
Complete the empty component. The tasks array is defined. Return <FlatList data={tasks} renderItem={({ item }) => <Text>{item}</Text>} keyExtractor={(item, index) => index.toString()} ListHeaderComponent={<Text style={{ fontWeight: 'bold' }}>To-do</Text>} ListFooterComponent={<Text>That is all</Text>} />.
Show example solution
import React from 'react';
import { FlatList, Text } from 'react-native';
export default function TaskList() {
const tasks = ['Buy bread', 'Drink milk'];
return (
<FlatList
data={tasks}
renderItem={({ item }) => <Text>{item}</Text>}
keyExtractor={(item, index) => index.toString()}
ListHeaderComponent={<Text style={{ fontWeight: 'bold' }}>To-do</Text>}
ListFooterComponent={<Text>That is all</Text>}
/>
);
}
Test yourself
-
Write the header component prop
<FlatList data={tasks} renderItem={renderItem} ____={<Text>Title</Text>} />
Show answer
<FlatList data={tasks} renderItem={renderItem} ListHeaderComponent={<Text>Title</Text>} />
-
Match each prop to its position
- ListHeaderComponent
- Start of list
- ListFooterComponent
- End of list
- renderItem
- Each item
- keyExtractor
- Unique key
-
Where does ListFooterComponent place a component?
<FlatList
data={tasks}
renderItem={...}
ListFooterComponent={<Text>End</Text>}
/>
- At the start of the list
- Outside the list
- Below each item
- At the end of the list
Show answer
At the end of the list — ListFooterComponent places a component at the end of the list.
Next lesson: Summary - Lists
