Usage

The SectionList component is a high-performance list component that efficiently renders sectioned lists. It is ideal for rendering lists with sections and supports the most handy features like:

• Full tokenization support.
• Fully cross-platform.
• Configurable viewability callbacks.
• List header support.
• List footer support.
• Item separator support.
• Section header support.
• Section separator support.
• Heterogeneous data and item rendering support.
• Pull to Refresh.
• Scroll loading.

If you don't need section support and want a simpler interface, use a FlatList.

Best Practices

• Use Memoization: Use React.memo() to avoid unnecessary re-renders of list items.
• Section Headers: Keep section headers concise to avoid taking up too much space.
• Key Management: Ensure that the keyExtractor for individual items and sections is unique to avoid rerender issues.

Considerations

SectionList is a convenience wrapper around VirtualizedList, and thus inherits its props (as well as those of ScrollView) that aren't explicitly listed here, along with the following caveats:

• Internal State: Internal state is not preserved when content scrolls out of the render window. Ensure all your data is captured in the item data or external stores like Flux, Redux, or Relay.
• Prop Updates: This is a PureComponent meaning it will not re-render if props remain shallow-equal. Make sure that everything your renderItem function depends on is passed as a prop (e.g. extraData) that is not === after updates, otherwise your UI may not update on changes. This includes the data prop and parent component state.
• Item Rendering: In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application.
• Key Management: By default, the list looks for a key prop on each item and uses that for the React key. Alternatively, you can provide a custom keyExtractor prop.

Accessibility Considerations

• Navigable Sections: Ensure section headers and items are properly labeled for screen readers.
• Focus Management: When rendering additional sections, ensure the user focus remains consistent without jumping or losing context.

Performance Considerations

• Batch Updates: Use batch updates to avoid triggering multiple re-renders when updating section data.
• SectionHeader Optimization: Memoize section headers to prevent unnecessary re-renders during list scrolls.
• Windowing: Use initialNumToRender and maxToRenderPerBatch props to control how many items are rendered initially and in each batch to avoid overloading the UI with too many items at once.
• Recycling Cells: Consider using CellRenderComponent to recycle rendered items and improve rendering performance for large lists.

SectionList Classes

Class Name	Description
abyss-section-list-root	SectionList root element

SectionList Props

Extends React Native - SectionList Props

Prop Name	Type	Default	Description
contentContainerStyle	Abyss.Style<"View">	-	Object or array of objects defining the style of the content container within the SectionList component with design tokens. These styles will be applied to the scroll view content container which wraps all of the child views
contentInset	Insets	-	The amount by which the scroll view content is inset from the edges of the scroll view
endFillColor	Abyss.Color	-	The color of the background of the SectionList when there are not enough items to fill the content
hitSlop	Insets	-	This defines how far a touch event can start away from the SectionList
ListFooterComponentStyle	Abyss.Style<"View">	-	Styling for internal View for ListFooterComponent. Accepts an object or array of objects which defines the style of the ListFooterComponent within the FlatList component with design tokens
ListHeaderComponentStyle	Abyss.Style<"View">	-	Styling for internal View for ListHeaderComponent. Accepts an object or array of objects which defines the style of the ListHeaderComponent within the FlatList component with design tokens
style	Abyss.Style<"SectionList">	-	Object or array of objects defining the style of the SectionList component with design tokens