React Native SectionList

Summary: In this tutorial, you will learn how to use the React Native SectionList component to render grouped data.

Introduction to the React Native SectionList

In React Native, the FlatList component is efficient in rendering a large flat list. To render a list of grouped data, you can use the SectionList component.

First, import the SectionList component from react-native library:

import {SectionList} from 'react-native';Code language: JavaScript (javascript)

Second, pass two required props to the SectionList component:

<SectionList
   sections = {data}
   renderItem = {renderItem}
/>Code language: HTML, XML (xml)

Like the FlatList component, the SectionList requires two props:

• sections is an array of items to render.
• renderItem is a function that determines how to render each item.

The SectionList component renders items lazily, meaning that it renders only items that are visible on the screen.

React Native SectionList Component example

The following example shows how to use the SectionList component to render a list of grouped items:

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

export const sections = [
  {
    title: 'Fruits',
    data: [
      { id: 1, name: 'Apple', emoji: '🍎' },
      { id: 2, name: 'Banana', emoji: '🍌' },
      { id: 3, name: 'Cherry', emoji: '🍒' },
      { id: 4, name: 'Grapes', emoji: '🍇' },
    ],
  },
  {
    title: 'Vegetables',
    data: [
      { id: 5, name: 'Carrot', emoji: '🥕' },
      { id: 6, name: 'Potato', emoji: '🥔' },
      { id: 7, name: 'Broccoli', emoji: '🥦' },
      { id: 8, name: 'Spinach', emoji: '🥬' },
    ],
  },
  {
    title: 'Dairies',
    data: [
      { id: 9, name: 'Milk', emoji: '🥛' },
      { id: 10, name: 'Cheese', emoji: '🧀' },
      { id: 12, name: 'Butter', emoji: '🧈' },
    ],
  },
];

const App = () => {
  const renderItem = ({ item }) => {
    return (
      <View style={styles.listItem}>
        <Text style={styles.listTitle}>{item.name}</Text>
        <Text style={styles.listTitle}>{item.emoji}</Text>
      </View>
    );
  };

  const renderSectionHeader = ({ section: { title } }) => (
    <Text style={styles.header}>{title}</Text>
  );

  const renderSectionSeparator = () => <View style={styles.sectionSeparator} />;

  const renderItemSeparatorComponent = () => (
    <View style={styles.itemSeparator} />
  );

  return (
    <SafeAreaView style={styles.container}>
      <SectionList
        sections={sections}
        renderItem={renderItem}
        renderSectionHeader={renderSectionHeader}
        SectionSeparatorComponent={renderSectionSeparator}
        ItemSeparatorComponent={renderItemSeparatorComponent}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    fontSize: 24,
    textAlign: 'center',
    paddingVertical: 5,
  },
  sectionSeparator: {
    height: 1,
    backgroundColor: '#ccc',
  },
  itemSeparator: {
    height: 1,
    backgroundColor: '#eee',
  },

  listItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 8,
  },
  listTitle: {
    fontSize: 24,
  },
});

export default App;Code language: JavaScript (javascript)

Output:

How it works.

First, define sections an array that contains a list of objects, each has the title and data property. In practice, you may get this data from a local database or API call.

Second, render the sections array using the SectionList component:

<SectionList
   sections={sections}
   renderItem={renderItem}
   renderSectionHeader={renderSectionHeader}
   SectionSeparatorComponent={renderSectionSeparator}
   ItemSeparatorComponent={renderItemSeparatorComponent}
/>Code language: HTML, XML (xml)

In this code, we pass the props to the SectionList component:

• sections is an array of items to render.
• renderItem is a function that renders each item in the sections array.
• renderSectionHeader is a function that renders the section header.
• renderSectionSeparator is a function that renders the section separator.
• renderItemSeparatorComponent is a function that renders the item separator.

Third, define the corresponding functions passed to the props of the SectionList component.

Summary

• Use the SectionList component to efficiently render a large list with section headers.