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
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
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.
Want to learn React Native in-depth?