React Native | SectionList

Hello React Native Friends,

In this blog, we will discuss SectionList component in React Native.

The React Native SectionList is a powerful component that provides a simple way to render content in a sectional format. By using SectionList, you can create lists that group related data into sections, making it easy to manage and navigate large amounts of data. In this blog post, we’ll explore the various features of the SectionList component and how to master it.

What is SectionList?

The SectionList component in React Native is a list that allows you to render data in sections. Each section can have its own header and footer, making it easy to organize and navigate through large amounts of data. SectionList is highly customizable and can be used to create complex layouts and interfaces.

A SectionList is similar to a FlatList, but it is the better option when your list items can be split into subcategories.

Attributes of React Native SectionList

The React Native SectionList component has several attributes that allow you to customize and control its behavior. Here’s a summary of some of the most important ones:

• sections: An array of data for rendering sections and their items. Each element in this array should be an object with two properties: Data (an array of items for the section) and key (a unique key for the section).
• renderItem: Function that renders each item in the list. This function receives an object with information about the item to be rendered and should return a React element.
• renderSectionHeader: Function that renders the header for each section. This function receives an object with information about the section and should return a React element.
• renderSectionFooter: Function that renders the footer for each section. This function receives an object with information about the section and should return a React element.
• keyExtractor: Function that extracts a unique key for each item in the list. By default, it uses the key property of each item, but you can customize this behavior if needed.
• ListHeaderComponent: React element to render at the top of the list.
• ListFooterComponent: React element to render at the bottom of the list.
• onRefresh:  Function called when the user pulls down on the list to refresh it. It’s typically used in conjunction with the refreshing prop to control the refreshing state of the list.
• refreshing: Boolean indicating whether the list is currently refreshing. When true, the list will show a loading indicator.
• onEndReached: Function called when the end of the list is reached. It’s typically used for lazy loading additional data.
• onEndReachedThreshold: How far from the end of the list (in pixels) the onEndReached function will be called.
• stickySectionHeadersEnabled: Whether section headers should remain visible at the top of the viewport when scrolling.
• ListEmptyComponent: Many times it is possible that the list is empty, so how will we know and perform certain things if the list is empty? We can use ListEmptyComponent to do something in case the list of items is empty.

Example of React Native SectionList:

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  SectionList,
  StatusBar,
} from 'react-native';

const DATA = [
    { 
        title: 'Color',
        data: ['Red', 'Pink', 'Green'],
    }, 
    { 
        title: 'Subject', 
        data: ['Maths', 'English', 'Gujarati'],
    }, 
    { 
        title: 'Drinks',
 	data: ['Water', 'Coke', 'Tea'], 
    },
];

const App = () => (
  <SafeAreaView style={styles.container}>
    <SectionList
      sections={DATA}
      keyExtractor={(item, index) => item + index}
      renderItem={({item}) => (
        <View style={styles.item}>
          <Text style={styles.title}>{item}</Text>
        </View>
      )}
      renderSectionHeader={({section: {title}}) => (
        <Text style={styles.header}>{title}</Text>
      )}
    />
  </SafeAreaView>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: StatusBar.currentHeight,
    marginHorizontal: 16,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
  },
  header: {
    fontSize: 32,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
  },
});

export default App;

Conclusion:

The React Native SectionList is a powerful component that allows you to create lists with sections. By using the SectionList component, you can organize and navigate through large amounts of data more easily. I hope this blog post has helped you understand how to use the SectionList component in your React Native projects.

If you have any doubt, connect with me through the comment section.

Happy Coding!