Skip to content
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
June 16, 2015

React Native ListView with Section Headers

Community and Events, Front End Development, React

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.

ListView with SectionsSample 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.

dataBlob

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.

Sections

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.

Rows

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.

Posted in Community and Events, Front End Development, React
Share this

Stan Bershadskiy

Stan Bershadskiy specializes in all things JavaScript with vast knowledge in Sencha frameworks. Recently, he has directed his focus towards React Native and has co-authored The React Native Cookbook. Stan is located in New York City and can be found presenting at conferences around the country. During his time with Modus Create, Stan filled the role of Architect.
Follow

Related Posts

  • React Navigation and Redux in React Native Applications
    React Navigation and Redux in React Native Applications

    In React Native, the question of “how am I going to navigate from one screen…

  • React Navigation and Redux in React Native Applications
    React Navigation and Redux in React Native Applications

    In React Native, the question of “how am I going to navigate from one screen…

Subscribe to the Modus Newsletter

Receive the latest blog articles and insights every month from the Modus team.

Let's Chat

If forms aren’t your thing, you can always call us (+1-855-721-7223).

Modus-Logo-Primary-White.svg
  • Services
  • About
    • Newsroom
  • Partners
  • Work
  • Insights
    • Blog
    • Modus Labs
  • Careers
Virginia (US)

12100 Sunset Hills Road
Suite 150
Reston, Virginia, 20190
Tel: +1-855-721-7223

California (US)
12130 Millennium Dr

Los Angeles, CA 90094

Missouri (US)
609 E High St

Jefferson City, MO 65101

Romania

Str. Mihai Veliciu, no. 17
Cluj-Napoca, Romania
Tel: +40-0786-887-444

Costa Rica

2nd Floor, Plaza Koros, Av 3
San José, Santa Ana, Costa Rica

© 2021 Modus. All Rights Reserved.

Privacy Policy | Accessibility Statement | Sitemap

This website uses cookies.
These cookies are used to collect information about how you interact with our website and allow us to remember you. We use this information in order to improve and customize your browsing experience, and for analytics and metrics about our visitors both on this website and other media. To find out more about the cookies we use, see our Privacy Policy.

Accept
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-necessary

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.

Scroll To Top