Multi-Column SectionLists

React Native’s FlatList provides a useful numColumns prop to display items across multiple columns. However, the sibling SectionList component does not support the numColumns prop.

Whenever one needs both section headers and a multi-column layout for a virtual list, composing FlatList and SectionList together is the recommended approach.

import { FlatList, SectionList } from "react-native";
 
const sections = [
  { title: "Fruits", data: ["Apple", "Banana", "Orange"] },
  { title: "Vegetables", data: ["Carrot", "Potato"] },
];
 
function MultiColumnSectionList() {
  const renderItem = ({ data }) => {
    return <FlatList data={data} numColumns={3} />;
  };
 
  return <SectionList sections={sections} renderItem={renderItem} />;
}

The performance optimizations provided by React Native's virtual list components apply to nested lists as well. One can follow general React and React Native performance best practices to achieve good performance, e.g. limiting unnecessary re-renders for complex components.