Building a Contacts List App
Combine SectionList, alphabetic section headers, a search filter, and pull-to-refresh to build a realistic contacts screen with smooth scroll performance.
App Overview: Contacts List
In this lesson you will build a realistic contacts list screen that combines everything from the FlatList and SectionList lessons. The app will display contacts grouped alphabetically, support a search filter, allow pull-to-refresh, and maintain smooth performance even with hundreds of entries.
Defining the Contacts Data
Start with a static array of contact objects. In a real app this would come from the device's contacts API or a remote server. Each contact has an id, name, and phone. A unique numeric or string ID is essential for the keyExtractor.
const CONTACTS = [
{ id: '1', name: 'Alice Brown', phone: '+1-555-0101' },
{ id: '2', name: 'Andrew Chen', phone: '+1-555-0102' },
{ id: '3', name: 'Bob Davis', phone: '+1-555-0201' },
{ id: '4', name: 'Carol Evans', phone: '+1-555-0301' },
// ... more contacts
];All lessons in this course
- FlatList Data, renderItem, and keyExtractor
- Pull-to-Refresh and Load More
- SectionList with Headers
- Building a Contacts List App