The Scroll View is a container component that allows you to define a fixed size, enabling its contents to scroll independently within that container. This functionality is similar to a <div> element with the overflow: scroll CSS property in web development. The Scroll View accepts child components and supports both vertical and horizontal scrolling.

📍📍📍 Note 📍📍📍

The Scroll View loads its entire contents into memory as soon as it is rendered on the screen. If you have a list of repeated items to be displayed (such as a product list), you should instead use the List or Grid component, which are able to reduce memory usage by only loading items as they are scrolled into view.

Available Properties

Appearance Properties

These properties, located in the Appearance Panel under Other, control the scrolling behavior.

• Horizontal: Enables horizontal scrolling of the content within the Scroll View.
• Shows Horizontal Scroll Indicator: When horizontal scrolling is enabled, this property determines whether the horizontal scroll bar will be shown on the screen.

Settings Properties

This property controls how the content interacts with the device's screen boundaries.

• Safe (Settings Panel): When enabled, the contents of the Scroll View will be restricted to the safe area of the screen. When rendered on a mobile device, this prevents content from appearing behind notches, camera cutouts, or similar physical elements.

📍📍📍 Note 📍📍📍

If the Layout that the component lives in already has the Safe toggle enabled, this setting on the Scroll View will have no effect, as the entire page will already be constrained within the safe area.