SectionList for grouped data in React Native - Mini App: Build & Ship

Build: Grouped Contacts

Display a list of contacts grouped by the first letter of their names using SectionList.

Target UI

Grouped Contacts

A
  - Alice
  - Aaron
B
  - Bob
  - Brenda
C
  - Charlie
  - Clara

Use React Native SectionList to show grouped data

Each group has a header with the letter

Each item shows the contact name

Use simple styling for headers and items

Starter Code

React Native

import React from 'react';
import { View, Text, SectionList, StyleSheet } from 'react-native';

export default function GroupedContacts() {
  const sections = [
    // TODO: Add grouped data here
  ];

  return (
    <View style={styles.container}>
      <SectionList
        sections={sections}
        keyExtractor={(item, index) => item + index}
        renderItem={({ item }) => (
          // TODO: Render each contact name here
        )}
        renderSectionHeader={({ section: { title } }) => (
          // TODO: Render section header here
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 40,
    paddingHorizontal: 20
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    backgroundColor: '#eee',
    paddingVertical: 5
  },
  item: {
    fontSize: 18,
    paddingVertical: 5
  }
});

Task 1

Task 2

Task 3

Solution

React Native

import React from 'react';
import { View, Text, SectionList, StyleSheet } from 'react-native';

export default function GroupedContacts() {
  const sections = [
    { title: 'A', data: ['Alice', 'Aaron'] },
    { title: 'B', data: ['Bob', 'Brenda'] },
    { title: 'C', data: ['Charlie', 'Clara'] }
  ];

  return (
    <View style={styles.container}>
      <SectionList
        sections={sections}
        keyExtractor={(item, index) => item + index}
        renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
        renderSectionHeader={({ section: { title } }) => (
          <Text style={styles.header}>{title}</Text>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 40,
    paddingHorizontal: 20
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    backgroundColor: '#eee',
    paddingVertical: 5
  },
  item: {
    fontSize: 18,
    paddingVertical: 5
  }
});

This app uses React Native's SectionList to display contacts grouped by their first letter.

The sections array contains objects with a title for the group header and a data array for the contacts in that group.

The renderSectionHeader shows the group letter in bold with a light background.

The renderItem shows each contact name with some padding.

This structure makes it easy to show grouped lists like contacts or categories.

Final Result

Completed Screen

Grouped Contacts

A
  Alice
  Aaron
B
  Bob
  Brenda
C
  Charlie
  Clara

User can scroll vertically through the grouped contacts list

Section headers remain visible as user scrolls through their group

Each contact name is displayed as a simple text item

Stretch Goal

Add a search bar to filter contacts by name

💡 Hint

Use a TextInput above the SectionList and filter the sections data based on the search text