List header and footer
- React Native course
- Beginner
- Lesson 57/116
- 5 min
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.
Practice 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>} />.
Starter code
import React from 'react';
import { FlatList, Text } from 'react-native';
export default function TaskList() {
const tasks = ['Buy bread', 'Drink milk'];
// Add a FlatList
return null;
}Sample 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>}
/>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Write the header component prop
<FlatList data={tasks} renderItem={renderItem} ____={<Text>Title</Text>} /><FlatList data={tasks} renderItem={renderItem} ListHeaderComponent={<Text>Title</Text>} />Explanation: ListHeaderComponent places a component at the start of the list.
2 Match each prop to its position
| Term | Meaning |
|---|---|
ListHeaderComponent |
Start of list |
ListFooterComponent |
End of list |
renderItem |
Each item |
keyExtractor |
Unique key |
3 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 Correct answer
Explanation: ListFooterComponent places a component at the end of the list.