React Native Simple SectionList Component Example Android

This tutorials explains how to use simple SectionList Component layout design in react native application and apply set onPress event on SectionList  to get value from selected section list item. SectionList is a component that extends the FlatList functionality even more. As the name suggests, it lets you render your list component with section headers. SectionList Component provides a performant interface for rendering sectioned lists, supporting the most handy features.

SectionList Features :

• Fully cross-platform.
• Configurable viewability callbacks.
• List header support.
• List footer support.
• Item separator support.
• Section header support.
• Section separator support.
• Heterogeneous data and item rendering support.
• Pull to Refresh.
• Scroll loading.

If you want to learn about FlatList Component, then check out below example :

• React Native Simple FlatList Component Android Example

In this example we are going to create simple SectionList layout, where we will display hard coded values using sections props and when user click on any of these list items, then it will display selected item in alert dialog box.

React Native SectionList Example :

Lets follow the below steps to create Simple SectionList layout Component in React Native.

Step-1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step-2: Open index.android.js  / index.ios.js  in your favourite code editor and erase all code and follow this tutorial.

Step-3: Through react , react-native  packages import all required components.

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, Button, SectionList, Alert } from "react-native";

Step-4 : Create GetSectionListItem method to show the selected SectionList item name with help of alert dialog box.

/* Function display user data, when user click on sectionlist items */
  GetSectionListItem=(item)=>{
      Alert.alert(item)
  }

Step-5 : Implement render method and return SectionList component wrapped by root View component. Specify the below parameters in SectionList component as props, that helps to form section list layout.The basic key props that are necessary, while using SectionList component.

• sections : It is used to set Title of Each SectionList view and it would also stores the array of data items.
• renderSectionHeader : This will show the Section Header Title above each part.
• renderItem : It will show the Items inside the SectionList.
• keyExtractor - Extract the key of each item: it can be the index or any unique field in the data.

render() {
    return (
      <View style={styles.container}>
      <SectionList
       sections={[
         { title: 'Username Starts with A', data: ['Amit', 'Anand', 'Abhishek'] },
         { title: 'Username Starts with B', data: ['Bikash', 'Bingo', 'Baby'] },
         { title: 'Username Starts with C', data: ['cat', 'cathy', 'Charan'] },
         { title: 'Username Starts with D', data: ['Deepak', 'Deepti', 'Dhananjay'] },
         { title: 'Username Starts with F', data: ['Fatay', 'Fanny', 'Fresher'] },
       ]}
       renderSectionHeader={ ({section}) => <Text style={styles.SectionHeader}> { section.title } </Text> }
       renderItem={ ({item}) => <Text style={styles.SectionListItemS} onPress={this.GetSectionListItem.bind(this, item)}> { item } </Text> }
       keyExtractor={ (item, index) => index }
     />
      </View>
    );
  }

Step-6 : Apply the below style sheet design.

const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: "center",
      backgroundColor: "#e5e5e5"
    },
    SectionHeader:{
      backgroundColor : '#64B5F6',
      fontSize : 20,
      padding: 5,
      color: '#fff',
      fontWeight: 'bold'
   },
    SectionListItemS:{
      fontSize : 16,
      padding: 6,
      color: '#000',
      backgroundColor : '#F5F5F5'
  }
});

Complete Source Code for App.js 

Lets see the complete source code that helps to create simple Section List layout design with the help of SectionList Component in react native application.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, Button, SectionList, Alert } from "react-native";

export default class HomeActivity extends Component {

/* Function display user data, when user click on sectionlist items */
  GetSectionListItem=(item)=>{
      Alert.alert(item)
  }

  render() {
    return (
      <View style={styles.container}>
      <SectionList
       sections={[
         { title: 'Username Starts with A', data: ['Amit', 'Anand', 'Abhishek'] },
         { title: 'Username Starts with B', data: ['Bikash', 'Bingo', 'Baby'] },
         { title: 'Username Starts with C', data: ['cat', 'cathy', 'Charan'] },
         { title: 'Username Starts with D', data: ['Deepak', 'Deepti', 'Dhananjay'] },
         { title: 'Username Starts with F', data: ['Fatay', 'Fanny', 'Fresher'] },
       ]}
       renderSectionHeader={ ({section}) => <Text style={styles.SectionHeader}> { section.title } </Text> }
       renderItem={ ({item}) => <Text style={styles.SectionListItemS} onPress={this.GetSectionListItem.bind(this, item)}> { item } </Text> }
       keyExtractor={ (item, index) => index }
     />
      </View>
    );
  }
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: "center",
      backgroundColor: "#e5e5e5"
    },
    SectionHeader:{
      backgroundColor : '#64B5F6',
      fontSize : 20,
      padding: 5,
      color: '#fff',
      fontWeight: 'bold'
   },
    SectionListItemS:{
      fontSize : 16,
      padding: 6,
      color: '#000',
      backgroundColor : '#F5F5F5'
  }
});

Screenshot :

This is all about SectionList Compoent in react native application. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.

Download Link :
https://github.com/skptricks/React-Native/tree/master/React%20Native%20Simple%20SectionList%20Component%20Example%20Android