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.

    Want to learn React Native in-depth?

    If you like React Native Express, you'll love my new book, Fullstack React Native: The complete guide to React Native! Throughout the book, we'll build 7 full apps, covering complex topics like navigation, gestures, and native modules. We don't assume any knowledge of React or newer JavaScript language features, so you can dive right in regardless of your experience level. The book comes in PDF, EPUB and MOBI formats.

    Looking for more help?

    Infinite Red sponsors React Native Express and is the premier React Native agency. They're also the team behind the React Native newsletter, podcast, and conference listed here. Get in touch at infinite.red/react-native for a proposal on your next project!