How to divide list items in sections with headings in React Native?

We often get the requirements to divide a long list into separate sections. These sections could be categories of items like colors, vegetables, fruits, drinks, football players, musicians, marvel superheroes etc.

In app development we use this kind of list for displaying menu. Where menu items are divided into categories and sub-categories.

React Native provides SectionList for this purpose. It has a prop renderSectionHeader which creates header for each section.

Code Example

import React, { useState } from "react";
import { SectionList, SafeAreaView, StyleSheet, Text, View, StatusBar } from "react-native";

const SUPERHERO_DATA = [
  {
    title: 'marvel',
    data: ['Ironman', 'Thor', 'Captain America', 'Hulk'],
  },
  {
    title: 'dc',
    data: ['Superman', 'Batman', 'Wonder Woman', 'Flash'],
  },
];

const App = () => {
  
  const renderItem = ({ item }) => (
    <View style={styles.item}>
        <Text>{item}</Text>
      </View>
  )

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  header: {
    backgroundColor: '#888000',
    padding: 10,
    color: '#FFFFFF',
  },
  item: {
    backgroundColor: '#fff000',
    padding: 10,
    flex:1,
    margin: 5,
  },
});

export default App;

The output will look like this –

In the above image you can see that the list is divided into 2 sections – Marvel and DC.

Let’s understand the code –

First, we declared an array of objects (SUPERHERO_DATA) with keys – title and data on line 4. Here title signifies name of section header. data is again an array of list items belonging to the section.

Each value of data array of all the objects are passed to function in renderItem prop at line 28. We can use this value and create a UI for list item.

We pass the SUPERHERO_DATA array to SectionList through sections prop at line 26.

Lastly, the section header or title is rendered through renderSectionHeader prop at line 29. It accepts the complete data object (with header title and items). Then we can pick the appropriate header value like we picked title from object and create a UI.

This way the whole section list can be generated.

You can do all the operations in SectionList the you could do in FlatList.

Live Demo

Conclusion

To divide list items among their categories in React Native, we can use SectionList. It is similar to FlatList but can create sections. You can create custom headers and enjoy all the functionality in SectionList which FlatList offers.