React Native SectionList Expand & Collapse Guide

React Native has a component called SectionList that will render things in sections. Think favorite foods:

• Deserts: ice cream, cheesecake
• Drinks: water, coke, beer

The not-so-obvious part is how you can create a collapsible version of this. By collapsible I mean, being able to hide the individual items upon tapping the header:

Luckily for you, getting it working is straight forward. The key is using the extraData prop for a SectionList.

extraData just re-renders the list when you have to pass in new data somewhere (like changing the expand/collapse toggle state.

Then you can use useState and an array or a set to get it working. I use a Set here b/c it’s easy, but in its purest form, here’s all you need to know:

 <SectionList
    sections={DATA}
    extraData={expandedSections} // extraData is required to re-render the list when expandedSections changes
    keyExtractor={(item, index) => item + index}
    renderItem={({ section: { title }, item }) => {
      // check to see if the section is expanded
      const isExpanded = expandedSections.has(title);

      //return null if it is
      if (!isExpanded) return null;

      return <Item title={item} />;
    }}
    renderSectionHeader={({ section: { title } }) => (
      <Pressable onPress={() => handleToggle(title)}>
        <Text style={styles.header}>{title}</Text>
      </Pressable>
    )}
/>

To see a working version of this, check out this Snack. In the event the Snack stops working, here’s a gist you can copy/paste somewhere with the same code.