Section List

The Section List is like the other list components with the difference being that it categorizes its items under headers based on a given common attribute in the data objects.

How to use

The Section Key data prop is the most important prop as this defines the key of a single data object that the section list would create sections with.

For example, with an object like {name: "Burger", category: "Lunch"}, one could use the key category to create sections based on the value of category.

Configuration Properties

PropertyDescription
Component nameThe name of the component as it appears in the Screen's component tree
InvertedIf true, reverses the direction.
Number of columnsNumber of Columns to render the items in
Refreshing colorColor of the refresh indicator
Show horizontal scroll indicatorWhen true, shows a horizontal scroll indicator. The default value is true.
Show vertical scroll indicatorWhen true, shows a vertical scroll indicator. The default value is true.
Sticky headerWhen true, header will stick to top while scrolling. On web, sticky headers only work when this component or one of its parents has a static height.
Sticky header on scrollWhen true, sticky header is hidden when scrolling down, and sticks only when scrolling up
List componentThe underlying list component to be rendered. FlatList or FlashList
HorizontalRender list horizontally
End reached thresholdHow far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.
Initial number to renderHow many items to render in the initial batch
Estimated item sizeApproximate size of the items before rendering. (Only applies when 'FlashList' is the selected list component)

Data Properties

PropertyDescription
DataData to render in the list. Typically an array of objects
Item unique keyProvide an optional way to derive a unique key (e.g. an id or a name) for a given item in the list
Section keyKey of the data object to be used as the section

Triggers

TriggerDescription
On RefreshRuns the Actions when the element is refreshed. (i.e. pull to refresh)
On End ReachedRuns the Actions when the threshold value is reached