List

The List component can be used by itself or as a child of the Fetch component to display a list of items from Variables or an REST API Endpoint.

How to use

A List component receives an array of data that it will loop over to create an instance of the List’s child components for each item in the array. This can be a simple array of strings, or even an array of complex objects.

The data you pass to a List component’s Data prop can come from a Variable if, for example, you have a fixed array of values or one populated using an API Request Action. You can also pass data to a List from a Fetch component on your Screen.

For each item in the array that you pass to a List, the List will render an instance of all child components within the List component. For example, if you have a List component that contains a single nested Text component and you pass it an array which contains 20 items, the List will render 20 Text components - one for each item in the array passed to the List.

The data for each item in the array will be available to all child components within the List component. The item data will be available as listItem in any variable dropdowns for props in the component’s Data tab. Any keys for the item will also be listed if you didn’t skip the Test step when saving your Endpoint.

That means that our Text component above will have access to the list item’s data in their variable selection dropdowns in the Data panel. So, if your array contains objects with keys such as name and description, we could pass those values to our Text component inside the List and each one would display their own data.

Learn how to set and use the Fetch and List component in Fetching Data.

Style Properties

Style properties allow you to customize the look and feel of the component. Combinations of styles applied to components can be saved as Stylesheets to easily reuse styles throughout your app. Styles can also be set dynamically using Variables. To learn more about all the different styling properties and how they work, take a look at Intro to Styling.

Component Specific Styles

Property	Description
Refreshing Color	Set the color of the refresh indicator when using On Refresh Trigger

Configuration Properties

Basic

Name	Description
Component Name	The name of the component as it appears in the Screen’s component tree.
Horizontal	Enable to display the items horizontally.
Inverted	Enable to reverse the direction of the list.
Initial Number to Render	How many items to render in the initial batch
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 On End Reached Trigger. Thus a value of 0.5 will trigger On End Reached when the end of the content is within half the visible length of the list.
Show Horizontal Scroll Indicator	Enable to show a horizontal scroll indicator. Enabled by default.
Show Vertical Scroll Indicator	Enable to show a vertical scroll indicator. Enabled by default.
Allow Touch Events	The default behavior of the Keyboard is to dismiss when a touch component (for example, a Button) is pressed. This default behavior is set by the value Never. Use the value Always when you want to continue to display the keyboard without dismissing the keyboard. In this scenario, to dismiss the keyboard after a touch component is pressed you will use the Dismiss Keyboard
Paging Enabled	When true, the scroll view stops on multiples of the scroll view’s size when scrolling. This can be used for horizontal pagination.
Snap to Alignment	When Snap to Interval is set, defines how items align within the scroll view. start - aligns at the left (horizontal) or top (vertical)\ center - aligns in the center end - aligns at the right (horizontal) or bottom (vertical).
Deceleration Rate	Determines how quickly the scroll view decelerates after the user lifts their finger. normal - (0.998 iOS, 0.985 Android)\ fast - (0.99 iOS, 0.9 Android)
Snap to Interval	When set, causes the scroll view to stop at multiples of the given value. This can be used for paginating through children that have lengths smaller than the scroll view. Typically used in combination with Snap to Alignment and Deceleration Rate=fast. Overrides less configurable Paging Enabled prop.

Android Specific

Name	Description
Nested Scroll Enabled	Enables scrolling when nested in another scrollable component. Only for Android version 5.0+

Data Properties

Setup

Name	Description
Data	The array of data to render in the list. Type a value directly into the input or select a value from the dropdown
Item Unique Key	Provide a way to derive a unique key (e.g. an id or a name) for a given item in the list. Optional
Scroll Enabled	When it evaluates to false, the view cannot be scrolled via touch interaction. Defaults to true
Re-render Data	A marker property for telling the list to re-render. If any of the list children depend on anything outside of the ‘Data’ prop, put it here and the list will re-render when they change.
Number of Columns	Define the number of columns the list should divide the items into. Default value is set to 1.

Conditional Display

You can conditionally display a component based on a given condition. Learn more about conditionally displaying components in the Conditional Display doc.

Triggers

Name	Description
On Refresh	Runs the action when the element is refreshed (pull-to-refresh)
On End Reached	Runs the action when the end threshold is reached
On Scroll	Runs the actions when the List is scrolled

Examples

Make a List start from the bottom

You can enable the Inverted Config property to start the list from the bottom, like on a chat screen.