Bar Components

A Bar component is used to select or display a single value from a range of values. There are two variants: Progress Bar and Scroll Bar. The major difference is that users can’t interact with a progress bar, while the scroll bar has a thumbnail which the user can manipulate.

Progress Bar

Selects or displays a single value from a range of values. Does not allow user interaction. Not supported in You.i React Native projects.

Requirements

Class CYIProgressBarView
Component Type bar
Component Sub-Type progressBar
Example Layer Comment componentType:bar; class:CYIProgressBarView; componentSubtype:progressBar;

Required Timeline Markers

Marker Description
ProgressStart The animation, from 0% to 100% of the progression.

Required Layers

None.

Optional Timeline Markers

None.

Properties

Property Description Input Values
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

Scroll Bar

Selects or displays a single value from a range of values. Allows user interaction. Maps directly to the SliderRef equivalent in React Native JSX.

Requirements

Class CYIScrollBarView
Component Type bar
Component Sub-Type scrollBar
Example Layer Comment componentType:bar; class:CYIScrollBarView; componentSubtype:scrollBar;

Required Timeline Markers

Marker Description
ScrollStart The motion of the thumb between the start and end position of the scroll. When using arrow keys to scroll, the time it takes to scroll from one end to another is set using the duration of this marker.

Required Layers

Layer Description
Thumb Layer for the “Thumb” that shows the scroll position.

Optional Timeline Markers

Marker Description
FocusIn The animation played when a scroll bar receives focus.
FocusOut The animation played when a scroll bar loses focus. If not defined, the reverse of FocusIn is used.
ScrollShow Played when the scroll bar is interacted with. The scroll bar must be configured with SetAutoHideTimeout() in order for this timeline to be played.
ScrollHide Played a configurable delay after the scroll bar is no longer being interacted with. The scroll bar must be configured with SetAutoHideTimeout() in order for this timeline to be played.
ThumbSize The timeline used to determine the visual state of the thumb when calling SetThumbSize(). The timeline should animate the size of the thumb between 0% and 100% of the scrollable area.

Properties

Property Description Input Values
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