react-native
  1. react-native-sectionlist
PreviousNext

React-Native SectionList

Syntax

The SectionList is a component in React-Native that displays a list of data divided into sections. The syntax for using a SectionList component is as follows:

import { SectionList } from 'react-native';

<SectionList
  sections={data}
  renderItem={({ item }) => <ListItem title={item.title} />}
  renderSectionHeader={({ section }) => <SectionHeader title={section.title} />}
  keyExtractor={(item, index) => index}
/>

Example

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

const data = [
  {
    title: "Fruits",
    data: [
      { key: "apple", name: "Apple" },
      { key: "banana", name: "Banana" },
      { key: "orange", name: "Orange" },
    ]
  },
  {
    title: "Vegetables",
    data: [
      { key: "carrot", name: "Carrot" },
      { key: "broccoli", name: "Broccoli" },
      { key: "kale", name: "Kale" },
    ]
  },
];

const ListItem = ({ title }) => (
  <View>
    <Text>{title}</Text>
  </View>
);

 SectionHeader = ({ title }) => (
  <View style={styles.sectionHeader}>
    <Text>{title}</Text>
  </View>
);

export default function App() {
  return (
    <View style={styles.container}>
      <SectionList
        sections={data}
        renderItem={({ item }) => <ListItem title={item.name} />}
        renderSectionHeader={({ section }) => <SectionHeader title={section.title} />}
        keyExtractor={(item, index) => item.key}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
    paddingHorizontal: 20,
  },
  sectionHeader: {
    backgroundColor: "#f5f5f5",
    paddingVertical: 8,
    paddingHorizontal: 5,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: "#ddd",
  },
});

Output

The above example will output a SectionList with two sections - "Fruits" and "Vegetables". Each section contains a list of data items, with the name of each item displayed in a ListItem component. The SectionHeader component is used to display the title of each section.

Explanation

The SectionList component in React-Native allows you to display a list of data divided into sections. The data is passed to the component as an array of sections, with each section containing an array of data items. The renderItem prop is used to specify how each data item should be rendered, while the renderSectionHeader prop is used to specify how each section header should be rendered. The keyExtractor prop is used to specify a unique key for each item in the list.

Use

The SectionList component can be used to display any type of data that needs to be divided into sections. This includes things like contacts, messages, products, and more. The component provides a clean and easy way to display this type of data, while also allowing for customization of the way each item and section header is displayed.

Important Points

  • The SectionList component in React-Native is similar to the FlatList component, but allows for easy division of data into sections.
  • The renderItem and renderSectionHeader props can be used to customize the appearance of each item and section header in the list.
  • The keyExtractor prop is used to provide a unique key for each item in the list, which is important for efficient rendering and updating of the list.

Summary

The SectionList component in React-Native is a powerful tool for displaying lists of data divided into sections. By specifying the data and how it should be displayed, you can create clean and organized lists that are easy to navigate and understand.

FlatListAnimation
Published on: