List Components

List components provide a means to display dynamic and scrollable content.

The List component maps directly to the ListRef equivalent in React Native JSX.

See also List Design.

Requirements

Class	`CYIListView`
Component Type	`list`
Component Sub-Type	`streaming`
Layouts	`Row` `Column` `Grid`
Example Layer Comment	`componentType:list; class:CYIListView; componentSubtype:streaming; layout:CYIRowLayout;`

Optional Timeline Markers

Marker	Description
`CascadeIn`	A timeline that is used to generate an ‘in’ cascade timeline group. See Cascade Timelines for details.
`CascadeOut`	A timeline that is used to generate an ‘out’ cascade timeline group. See Cascade Timelines for details.
`Move`	A timeline that is seeked through as the child moves across the scrolling view’s visible region. See Move Timelines for details.
`MoveHorizontal`	A timeline that is seeked through as the child moves horizontally across the scrolling view’s visible region. See Move Timelines for details.
`MoveVertical`	A timeline that is seeked through as the child moves vertically across the scrolling view’s visible region. See Move Timelines for details.

Properties

Property	Description	Input Values
`Animation`	Sets the delay between the CascadeIn and CascadeOut animation timelines for each list item	An integer value, for example: 50
`Carousel`	Sets how the list will carousel or loop when the last or first item in the list is scrolled beyond the applicable list length. Can be set for both the horizontal direction and vertical direction or independently.	`Never Carousel` `Always Carousel` `Carousel If Overflowing`
`Clipping`	Allows the layers overflow to be displayed or clipped so the overflow isn’t visible outside of the bounds of the composition.	`Default` `On` `Off`
`Horizontal Magnets`	Sets placement of the horizontal magnets (right and left), at the beginning and end of the list, in the center, only at the beginning, and only at the end. An offset can also be specified so the list magnet can be placed away from its specified position. Note: `Edges` is not supported in You.i React Native.	`None` `Edges` `Center` `Begin` `End`
`Overpull`	Set when the list exhibits an overpull behavior and how much overpull is displayed	A float value, for example: 1.0
`Scroll`	Lets the designer specify whether the list scrolls, and what direction the list scrolls, or if it scrolls in both	`Do Not Scroll` `Scroll Horizontally` `Scroll Vertically` `Scroll In Both Directions`
`Scrolling Area Layout Mode`	Sets the size of the scrolling area based of the content or the containing view, and it is important to note that this is different than the size of the container composition. The default is `Fit Content If Overflowing`, meaning that the scrolling area is set to the size of the content even if it’s outside the container composition. `Fit Content` is similar, but also applies to elements in the scrolling container if they’re smaller than the size of the composition. `Fill View` sets the scrolling area size to size of the composition. Generally, the default is the best option.	`Fit Content` `Fit Content If Overflowing` `Fill View`
`Vertical Magnets`	Sets placement of the vertical magnets (top and bottom), at the beginning and end of the list, in the center, only at the beginning, and only at the end. An offset can also be specified so the list magnet can be placed away from its specified position. Note: `Edges` is not supported in You.i React Native.	`None` `Edges` `Center` `Begin` `End`