Creación de una aplicación de lista de contactos
Combine SectionList, cabeceras de sección alfabéticas, un filtro de búsqueda y la función de deslizar para actualizar para crear una pantalla de contactos realista con un desplazamiento fluido.
Creación de una aplicación de lista de contactos es una lección gratuita de React Native Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Native Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Native Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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
];Search Filter State
Add a searchQuery state variable and filter the contacts array before grouping. The filter converts both the query and contact name to lowercase for a case-insensitive match. Wrap the filtering and grouping in useMemo so it only recomputes when the contacts or query changes.
const [searchQuery, setSearchQuery] = useState('');
const filteredContacts = useMemo(() => {
if (!searchQuery) return CONTACTS;
return CONTACTS.filter((c) =>
c.name.toLowerCase().includes(searchQuery.toLowerCase())
);
}, [searchQuery]);Grouping Contacts Alphabetically
Convert the filtered flat array into the SectionList sections format. Reduce the contacts into a map keyed by the first letter, then sort the keys and map them to section objects. This transformation runs inside useMemo alongside the filter for a single computed value.
const sections = useMemo(() => {
const map = filteredContacts.reduce((acc, contact) => {
const letter = contact.name[0].toUpperCase();
if (!acc[letter]) acc[letter] = [];
acc[letter].push(contact);
return acc;
}, {});
return Object.keys(map).sort().map((key) => ({
title: key,
data: map[key],
}));
}, [filteredContacts]);Search Bar Component
Render a TextInput above the SectionList as the ListHeaderComponent so it scrolls with the list. Bind it to searchQuery state with onChangeText. Use the clearButtonMode prop on iOS to show a native clear button inside the input.
const SearchBar = () => (
<TextInput
style={styles.searchBar}
placeholder='Search contacts...'
value={searchQuery}
onChangeText={setSearchQuery}
clearButtonMode='while-editing'
/>
);Contact Row Component
Build a memoized row component using React.memo to prevent unnecessary re-renders. The row shows the contact's initials in a colored avatar circle and their name and phone number on the right. Memoizing the row component is critical for smooth scrolling with hundreds of contacts.
const ContactRow = React.memo(({ item }) => (
<View style={styles.row}>
<View style={styles.avatar}>
<Text style={styles.initials}>{item.name[0]}</Text>
</View>
<View>
<Text style={styles.name}>{item.name}</Text>
<Text style={styles.phone}>{item.phone}</Text>
</View>
</View>
));Section Header Component
The alphabetic section header is a simple View with the letter. Give it a distinct background color and sticky behavior so it stays visible as the user scrolls through each letter group. Keep the component small and memoized since it renders once per letter.
const SectionHeader = ({ section }) => (
<View style={styles.sectionHeader}>
<Text style={styles.sectionTitle}>{section.title}</Text>
</View>
);Pull-to-Refresh Integration
Simulate refreshing by introducing a refreshing state. On refresh, clear the search query (so users see all contacts again), wait briefly to simulate a network call, then set refreshing to false. In a real app you would re-fetch from the device contacts API or the server.
const [refreshing, setRefreshing] = useState(false);
const onRefresh = () => {
setRefreshing(true);
setSearchQuery('');
setTimeout(() => setRefreshing(false), 1000);
};Empty State When No Results
When the filtered sections array is empty (no contacts match the search), display an informative empty state using ListEmptyComponent. Tell the user no contacts match their query and suggest they clear the search. This is far better than showing a blank screen.
const ListEmpty = () => (
<View style={styles.empty}>
<Text>No contacts found for '{searchQuery}'</Text>
<Button title='Clear Search' onPress={() => setSearchQuery('')} />
</View>
);Assembling the Full Screen
Combine all the pieces: SectionList with the sections data, memoized renderItem, renderSectionHeader, keyExtractor, sticky headers, pull-to-refresh, and ListHeaderComponent for the search bar. The result is a production-quality contacts screen.
export default function ContactsScreen() {
return (
<SectionList
sections={sections}
keyExtractor={(item) => item.id}
renderItem={({ item }) => <ContactRow item={item} />}
renderSectionHeader={({ section }) => <SectionHeader section={section} />}
stickySectionHeadersEnabled
refreshing={refreshing}
onRefresh={onRefresh}
ListHeaderComponent={SearchBar}
ListEmptyComponent={ListEmpty}
/>
);
}Navigating to a Contact Detail Screen
Make each row tappable by wrapping the ContactRow in a TouchableOpacity that calls navigation.navigate('ContactDetail', { contactId: item.id }). The detail screen reads the ID from route.params and fetches the full contact data, following the React Navigation pattern you learned earlier.
const ContactRow = React.memo(({ item, onPress }) => (
<TouchableOpacity onPress={() => onPress(item)} style={styles.row}>
<View style={styles.avatar}>
<Text style={styles.initials}>{item.name[0]}</Text>
</View>
<View>
<Text style={styles.name}>{item.name}</Text>
<Text style={styles.phone}>{item.phone}</Text>
</View>
</TouchableOpacity>
));Quick Check
Test your understanding of the Contacts List App architecture from this lesson.
Lesson Recap
In this lesson you learned: combine SectionList, search filtering, and useMemo for an efficient contacts screen, memoize row components with React.memo to maintain scroll performance, and integrate pull-to-refresh and empty states for a polished UX. Next up we dive into the useRef hook and mutable values.
Aprende JavaScript con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 30
- Lecciones
- 120
Preguntas frecuentes
¿La lección «Creación de una aplicación de lista de contactos» es gratis?
Sí — el texto completo de «Creación de una aplicación de lista de contactos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Native Academy, actualiza a CoddyKit PRO. El curso de React Native Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Creación de una aplicación de lista de contactos»?
Combine SectionList, cabeceras de sección alfabéticas, un filtro de búsqueda y la función de deslizar para actualizar para crear una pantalla de contactos realista con un desplazamiento fluido. Practicas React Native Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar React Native Academy?
No se requiere experiencia previa. React Native Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Creación de una aplicación de lista de contactos»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de React Native Academy?
Sí. Cada lección de React Native Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Datos de FlatList, renderItem y keyExtractor
- Deslizar para actualizar y cargar más
- SectionList con cabeceras
- Creación de una aplicación de lista de contactos