SectionList

Introduction

An efficient rendering interface for sectioned lists that supports the most practical features of React Native SectionList

completely cross-platform

• viewability callbacks that are configurable
• List-heading support
• List footer support
• Support for item separators
• Support for section headers
• Support for section separators
• Support for distinct data and item rendering
• Pull to refresh control on the list

What is the SectionList Component?

React Native SectionList is a wrapper around the <VirtualizedList> and <ScrollView> components. Simply put, we can say SectionList is a derived component of those two; thus, it inherits all the properties of both components.

How it Works?

An example of how React Native SectionList handles the virtualization process is given below:

Only the items and section headers that are visible in the viewport are presented in this example. React Native SectionList recycles components as the user scrolls and modifies the content according to the sections that are currently shown.

React Native SectionList uses virtualization to effectively manage lengthy data lists and give customers a fluid scrolling experience.

Example

Our main goal will be to create a contact list using SectionList React Native. Every individual contact component will have two views: one for the image and the other for the name of the person.

Explanation

The fetchImages function is an asynchronous function that fetches SVG data for each item in the DATA array. It constructs an array of promises for each item and awaits all the responses using Promise.all. The fetched data is then combined into a single imagesData object and set as the images state using setImages in SectionList React Native.

Props

The following properties are supported in both iOS and Android at the same time for React Native SectionList.

• renderItem (required)
  The renderItem prop in the SectionList component is used to render each item in the list. It takes three arguments:      The renderItem function must return a React component that will be rendered for each item in the list.

• sections (required)
  The sections prop in the React Native SectionList component is used to specify the sections of the list. Each section is an object that contains the following properties:

• extraData
  The extraData prop in the React Native SectionList component is a marker property that can be used to tell the list to re-render.

  This is useful if your renderItem, Header, or Footer functions depend on anything outside of the data prop.

• initialNumToRender
  The initialNumToRender prop in the React Native SectionList is used to specify how many items should be rendered initially. The initialNumToRender prop must be a positive integer. The default value is 10.

• inverted
  

  The inverted prop in the SectionList React Native component is used to reverse the direction of scrolling. This means that the list will scroll from bottom to top instead of top to bottom. The inverted prop is a boolean prop. The default value is false.

• ItemSeparatorComponent
  used to render a separator between each item in the list. The separator can be a simple view component. must be a React component or a React element. The component will be rendered between each item in the list, but not at the top or bottom.

  example:

• keyExtractor
  Identify a unique key for each item in the list. The keyExtractor prop must be a function that takes two arguments:

• ListEmptyComponent
  The ListEmptyComponent prop must be a React component or a React element. The component will be rendered when the list is empty, but not when the list contains items.

• ListFooterComponent
  The ListFooterComponent prop must be a React component or a React element. The component will be rendered at the bottom of the list.

• ListHeaderComponent
  foundation is the same as ListFooterComponent, but this vice versa can be a useful way to add a header to your list.

• onRefresh
  When the user pulls down on the list, the onRefresh prop will be called. The onRefresh prop must be a function that takes no arguments in SectionList React Native.

• onViewableItemsChanged
  Get notified when the viewable items in the list have changed.

• refreshing
  When the refreshing prop is set to true, the list will show a loading indicator in React Native SectionList.

• removeClippedSubviews
  The removeClippedSubviews prop is a boolean prop. The default value is true.

• renderSectionFooter
  SectionList React Native props can be a useful way to add footers to your list. takes two arguments, section and index in React Native SectionList.

• renderSectionHeader
  same functionality as renderSectionFooter, but instead of using it in the footer, we use it to describe the header.

• SectionSeparatorComponent
  must be a React component or a React element. The SectionList React Native component is used to render a separator between each section in the list.

• stickySectionHeadersEnabled
  It is used to control whether or not section headers stick to the top of the screen when the list scrolls.

Methods

• flashScrollIndicators() (iOS)

This can be useful to make it clear to the user that the scroll indicators are present and functional.

Displays the scroll indicators momentarily in React Native SectionList.

• recordInteraction()

will notify the React Native framework that an interaction has occurred.

• scrollToLocation()

The scrollToLocation() method is called with the section index and item index of the item that the user wants to scroll to. This will scroll the list to the specified location in React Native SectionList.

Type Definitions

In React Native, type definition is a way to specify the type of data that a component expects to receive. This can be helpful to improve the readability and maintainability of your code in SectionList React Native.

Section

The Section object specifies the title and data for a section in the list.