React Native tutorial for Creating ListView with Section Headers

Here is another great tutorial appearead on
Modus Create by Stan Bershadsky. Through his words you're going to enhance ListView to a ListView with Section Headers.


Many applications available today display data in a list in some shape or form. It can either be a Contact List, Settings, Application Navigation and many more. One of the core components that React Native provides is a ListView. Simple ListViews work on a concept of a data array added to a ListView.DataSource instance and a renderRow function implementation that instructs the ListView how to render the row. The ListView component also supports rendering static headers/footers, as well as callbacks for reaching end of available data and getting the set of rows when the viewport changes.

ListView with Sections

Sections are used to provide logical grouping and separation to a list’s contents. Generally they are used when the data is hierarchical, such as organization user lists or schedules. In our example we’re going to display a list of organizations and the users belonging to each organization.

ListView with Section Headers

Tutorial on Modus Create

Accompanying code on GitHub