React Native ListView with Section Headers

Introduction

React Native is an exciting framework that enables the developer to easily build native apps using a common web development stack. In a nutshell, you will be able to use the same codebase to build a native iOS and Android* application. You can read more about React Native in our introduction to React Native post. Once you dive into coding a React Native app, Jay Garcia’s article on building Custom Components is an excellent resource.

ListView

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.

Sample Organization List app using a ListView with Section Headers

To achieve getting the data correctly into the ListView we need to set up the 3 data structures required by the ListView DataSource: an array of Section IDs, an array of Row IDs and most importantly an object that holds the data that we’ll refer to as dataBlob.

dataBlob

The dataBlob is a data structure (generally an object) that holds all the data powering the ListView. It contains the Section Header data as well as the individual Row Data for each row. We will implement lookup functions (getSectionData and getRowData) that access the dataBlob and return the necessary data for each section and row.

Sections

To display sections we need an array of Section IDs to contain unique identifiers for each section. To lookup the value for the section header we need to implement a getSectionData method.

Rows

In order to display rows , we need to follow a similar pattern as displaying the section headers by having an array of Row IDs. The structure of the Row IDs array is slightly different as it contains an array of Row IDs for each section index.

Implementation

On the code side of things there are a few things we need to do different than implementing a section-free ListView.

1. First and foremost we need to initialize our DataSource and implement the necessary getSectionData and getRowData methods.
2. Then we need to populate our 3 data structures mentioned earlier. In our sample app we use a mock JSON in the following structure and content:
3. Here’s how we process the JSON data to build the Section IDs array, Row IDs array, and dataBlob object.

Working Example

You can find the source for the entire application in this GitHub Repo.

Wrap Up

In this post we took a look at the React Native ListView component and how to render section headers. In the process we took a dive into how the data source should be configured for the ListView with sections. Going forward we’re going to begin diving into React Native even further, exploring its ES6 capabilities, animations, and more of its expansive feature set.