Javatpoint Logo
Javatpoint Logo

React Native SectionList

The React Native SectionList component is a list view component which sets the list of data into broken logical section. The broken of data may be implemented using its section header prop renderSectionHeader.

To implement the SectionList component, we need to import SectionList library from 'react-native'.

Props of SectionList

sections renderItem initialNumToRender keyExtractor
renderSectionHeader renderSectionFooter onRefresh inverted
extraData onEndReached keyExtractor legacyImplementation
onViewableItemsChanged refreshing removeClippedSubviews ListHeaderComponent
SectionSeparatorComponent stickySectionHeadersEnabled onEndReachedThreshold ListEmptyComponent

React Native SectionList Example

Create a SectionList with title and data. The sections prop is used to take the list of title and data values. The renderSectionHeader displays the header section of the list view.

Output:

React Native SectionList

Adding Separator in SectionList

ItemSeparatorComponent prop adds the Separator between the lists of data. Using this prop, call a method renderSeparator in which we add a View component as separator.

Performing action on SectionList items

To perform an action on clicking (on pressing) the list item, a prop called onPress is used. Implement the onPress prop and handle the event in another method getListViewItem.

Output:

React Native SectionList React Native SectionList




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


B.Tech / MCA