In this lesson, you will learn how to make list headers stay anchored at the top of the screen as a user scrolls through long lists.
The Problem with Normal Scrolling
When you build a standard list in React Native, the header usually scrolls off the screen along with your list items. While this is fine for some designs, it can be disorienting when browsing categorized content. Imagine a contact list sorted alphabetically; if the "A" header disappears before you finish seeing all the "A" contacts, you lose the context of which group you are currently browsing.
Using SectionList
To solve this, we move from a standard FlatList to the SectionList component. The SectionList is designed specifically for grouped data, and it comes with a built-in feature called stickySectionHeadersEnabled.
When you set this prop to true, React Native automatically keeps the header of the current section pinned to the top of the view. As you scroll, the current header will "push" the previous one off the screen, exactly like the contact list in your phone's native address book.
Implementation
To implement this, you pass your data in an array of objects where each object contains a title and a data array.
<SectionList
sections={[
{ title: 'A', data: ['Alice', 'Aaron'] },
{ title: 'B', data: ['Bob', 'Beth'] },
]}
renderSectionHeader={({ section }) => (
<Text style={{ backgroundColor: 'white', fontWeight: 'bold' }}>
{section.title}
</Text>
)}
renderItem={({ item }) => <Text>{item}</Text>}
stickySectionHeadersEnabled={true}
/>
Notice how we define renderSectionHeader to display the category title. By setting stickySectionHeadersEnabled={true}, the component takes care of the complex math required to calculate scroll positions and transitions for you. This keeps your interface clean and provides a professional, native feel to your data-heavy screens without needing external libraries.
Key Takeaway: Use the SectionList component with stickySectionHeadersEnabled={true} to keep your categorized group titles visible while the user scrolls through list content.