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
| Property | Description |
|---|---|
| Component name | The name of the component as it appears in the Screen's component tree |
| Inverted | If true, reverses the direction. |
| Number of columns | Number of Columns to render the items in |
| Refreshing color | Color of the refresh indicator |
| Show horizontal scroll indicator | When true, shows a horizontal scroll indicator. The default value is true. |
| Show vertical scroll indicator | When true, shows a vertical scroll indicator. The default value is true. |
| Sticky header | When 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 scroll | When true, sticky header is hidden when scrolling down, and sticks only when scrolling up |
| List component | The underlying list component to be rendered. FlatList or FlashList |
| Horizontal | Render list horizontally |
| End reached threshold | How 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 render | How many items to render in the initial batch |
| Estimated item size | Approximate size of the items before rendering. (Only applies when 'FlashList' is the selected list component) |
Data Properties
| Property | Description |
|---|---|
| Data | Data to render in the list. Typically an array of objects |
| Item unique key | Provide an optional way to derive a unique key (e.g. an id or a name) for a given item in the list |
| Section key | Key of the data object to be used as the section |
Triggers
| Trigger | Description |
|---|---|
| On Refresh | Runs the Actions when the element is refreshed. (i.e. pull to refresh) |
| On End Reached | Runs the Actions when the threshold value is reached |
Updated 2 months ago