SectionList

SectionLists are like FlatLists, but they can have section headers to separate groups of rows.

SectionLists render each item in their input sections using the renderSectionHeader and renderItem prop. Each item in sections should be an object with a unique id (the key), and an array data of row data. Each item in data should also be an object with a unique id. The renderSectionHeader prop is a function which takes an item from the sections array and maps it to a React Element. The renderItem prop, just like for FlatList, is a function which takes an item from the data array (for a section) and returns a React Element.

Homogenous row example

If each row is rendered with the same renderItem function, we call this homogenous rendering.

Heterogenous row example

A renderItem function may be specified as part of the sections data, one per section, rather than as a prop of the SectionList. This lets us render each section differently. Alternately, you could use the item data to determine how to render items differently.