LazyVStack#

The LazyVStack component is part of the Scripting app's UI library. It arranges its children in a vertical stack, creating and displaying items only as needed, optimizing performance for large data sets.

LazyVStack#

Type: FunctionComponent<LazyVStackProps>#

A LazyVStack arranges its children in a line that grows vertically. Unlike a regular vertical stack, it lazily loads and displays views only when they are about to appear on the screen. This makes it ideal for lists or large sets of dynamically generated content.

LazyVStackProps#

PinnedScrollViews#

The PinnedScrollViews type defines which kinds of child views can remain pinned to the scroll view's bounds as it scrolls:

• 'sectionHeaders': Pins only the section headers
• 'sectionFooters': Pins only the section footers
• 'sectionHeadersAndFooters': Pins both section headers and footers

Example Usage#

1import { LazyVStack, Text, ScrollView, Section } from 'scripting'
2
3const Example = () => {
4  return (
5    <ScrollView>
6      <LazyVStack alignment="leading" spacing={12} pinnedViews="sectionHeaders">
7        {list.map(item => 
8          <Section
9            key={item.id}
10            header={
11              <Text>{item.title}</Text>
12            }
13          >
14            <ItemView
15              item={item}
16            />
17          </Section>
18        )}
19      </LazyVStack>
20    </ScrollView>
21  )
22}

Explanation:#

• The stack arranges the Section views vertically with 12 points of spacing
• The alignment property aligns the items to the leading edge of the stack
• The pinnedViews property ensures that section headers remain pinned to the top of the scroll view when scrolling

Notes#

• Lazy loading ensures that views are only created as they become visible, which improves performance for large content
• Use spacing to control the vertical distance between items and alignment to customize the horizontal alignment
• The pinnedViews property is especially useful for table or list-like layouts with sticky headers or footers

This API allows you to efficiently manage vertically growing content while offering customization for layout and scrolling behavior.