React Native SectionList

SectionList Props

renderItem(required)

Every item in every section has a default renderer. On a per-section basis, it can be overridden. A React element should be returned.

sections(reuired)

It's an array of data that must be rendered (with distinct objects for separate sections).

extraData

It's a property that tells the list that it needs to be re-rendered (since it implements PureComponent). Put anything outside of the data prop here and treat it immutably if any of your renderItem, Header, Footer, or other functions rely on it.

initialNumToRender

How many things should be rendered in the first batch? This should cover the entire screen, but not much more. Certain items will never be unmounted as part of the windowed rendering to improve the perceived performance of scroll-to-top actions.

inverted

Reverses the scrolling direction. Scale transforms of -1 are used.

ItemSeparatorComponent

It's a component that'll be rendered in the middle of each item (except at the top or the bottom).

keyExtractor

Use this function to get a unique key for a given item at the provided index. Key is used for caching as well as tracking item re-ordering in React. When the item.key is not found, the default extractor falls back to utilizing the index, as React does. It's worth noting that while this creates keys for each item, each broad area still needs its key.

ListEmptyComponent

It can be a component or a react element in the case of an empty list.

ListFooterComponent

It could be a component or a react element that appears at the bottom of the list.

ListHeaderComponent

It might be a component or a react element that appears at the beginning of the list.

onEndReached

When the scroll position reaches the onEndReachedThreshold of the displayed content, this method is called once.

onEndReachedThreshold

It's a value that specifies how far the bottom of the list should be from the screen end for the onEndReached event to be triggered.

onRefresh

A RefreshControl will be added to the "Pull to Refresh" capability if it is provided.

onViewableItemsChanged

It's a function that's invoked when the row viewability changes

refreshing

When the screen is updated while waiting for new data, it is set to true.

renderSectionFooter

It's shown at the bottom of each section.

renderSectionHeader

At the top of each section, they are rendered. On iOS, these are automatically positioned at the top of the ScrollView.

SectionSeperatorComponent

To identify each portion from the others, it is rendered at the top and bottom of each one.

stickySectionHeaderenabled

Section headers will remain at the top of the screen until the next one pushes them off. Because iOS is the platform standard, it is the only place where it is enabled by default.

SectionList Methods

flashScrollIndicators()

It's used to display the scroll indications temporarily.

recordInteraction()

If waitForInteractions is true and the user hasn't scrolled, this tells the list that interaction has happened, which should trigger viewability calculations. Item taps or navigation activities usually trigger this.

scrollToLocation()

Scrolls to the item at the supplied sectionIndex and itemIndex (inside the section) in the viewable region, ensuring that view is not obstructed. Position 0 puts it at the top (and may be obscured by a sticky header), position 1 puts it at the bottom, and position 0.5 puts it in the middle. You can't scroll outside the render window unless you use the getItemLayout or onScrollToIndexFailed props.

Syntax

scrollToLocation(params);

The following keys are valid params keys:

'animated' (boolean) - Whether or not the list should animate as it scrolls. True is the default value.

'itemIndex' (number) - Index the item to scroll to within the section. Required.

'sectionIndex' (number) - Index for the section containing the scrollable item. Required.

'viewOffset' (number) - A fixed amount of pixels to offset the ultimate target position, for example, to account for sticky headers.

'viewPosition' (number) - A value of 0 puts the item indicated by index on top, 1 puts it on the bottom, and 0.5 puts it in the middle.

CODE:

import React, { Component } from 'react';  
import { AppRegistry, SectionList, StyleSheet, Text, View } from 'react-native';  
  
export default class SectionListBasics extends Component {  
    render() {  
        return (  
            <View style={styles.container}>  
                <SectionList  
                    sections={[  
                        {title: 'A', data: ['AAYUSH', 'AMAN', 'ARUNDHATI']},  
                        {title: 'B', data: ['BREAKING BAD', 'BIG BANG THEORY']},  
                        {title: 'C', data: ['CARLOS', 'CASTELVENIA', 'COUNTER STRIKE']},  
                    ]}  
                    renderItem={({item}) => <Text style={styles.item}>{item}</Text>}  
                    renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}  
                    keyExtractor={(item, index) => index}  
                />  
            </View>  
        );  
    }  
}  
  
const styles = StyleSheet.create({  
    container: {  
        flex: 1,  
        backgroundColor: "#5ead97"  
    },  
    sectionHeader: {  
        paddingTop: 2,  
        paddingLeft: 10,  
        paddingRight: 10,  
        paddingBottom: 2,  
        fontSize: 22,  
        fontWeight: 'bold',  
        color: "#fff",  
        backgroundColor: '#8fb1aa',  
    },  
    item: {  
        padding: 10,  
        fontSize: 18,  
        height: 44,  
    }  
}) 

Read More, React Native Paper

Frequently Asked Questions

What is the difference between a FlatList and a SectionList?

SectionLists are similar to FlatLists, except that section headers can be used to separate groups of rows. The renderSectionHeader and renderItem props are used by SectionLists to render each item in their input sections. Each section should have an object with a unique id (key) and an array of row data.

In React Native, what is a SectionList?

The SectionList Component is a built-in list view component for React Native that renders sectioned lists. It is used to display data lists in distinct sections, as the name implies. It is a Pure Component that supports many features such as pull-to-refresh, scroll loading, separators, headers, and footers.

What is the meaning of onEndReachedThreshold?

OnEndReachedThreshold specifies the number of screen lengths from the bottom you should be before the event fires in 2020. When I'm two full-screen sizes away, I use onEndReachedThreshold=2 to fire onEndReached. To receive notifications, respond to this question.

In React Native, how do you implement a Section list?

The SectionList component in React Native is a list view component that divides a list of data into split logical sections. The section header prop renderSectionHeader can be used to implement the broken data. We'll need to import SectionList from the react-native package to use the SectionList component.

What is a flat list, exactly?

FlatList is a specific implementation of the VirtualizedList component that allows you to show only a few items in the current window. The list scrolling action will be used to render the remaining entries. FlatList is a simple list that may be created with the data and renderItem props.

Conclusion

This article focuses on sctionlist with its basic syntax. The article taught us about the installation process and different props in sectionlist with other methods. Finally, we saw the basic difference between a sectionlist and a flat list. That's the end of the article. I hope you all like this article. 

Check out this problem - Smallest Distinct Window .

Refer to our Guided Path on Coding Ninjas Studio to upskill yourself in Data Structures and Algorithms, Competitive Programming, JavaScript, System Design, and many more! If you want to test your competency in coding, you may check out the mock test series and participate in the contests hosted on Coding Ninjas Studio! But if you have just started your learning process and are looking for questions asked by tech giants like Amazon, Microsoft, Uber, etc; you must look at the problems, interview experiences, and interview bundle for placement preparations.

Nevertheless, you may consider our paid courses to give your career an edge over others!

Do upvote our blogs if you find them helpful and engaging!

Happy Learning!