LazyVStack
LazyVStack is a container that arranges its children vertically, loading them lazily. LazyVStack is similar to VStack but only renders children that are visible in the viewport, improving performance for long lists.
LazyVStack is a container that arranges its children vertically, loading them lazily. LazyVStack is similar to VStack but only renders children that are visible in the viewport, improving performance for long lists.
Examples
Basic Usage
Preview unavailable for this example in the static docs build.
Show code
<LazyVStack spacing={10}>{items.map(item => (
<Text key={item.id} style={{ padding: '10px', backgroundColor: '#f0f0f0', borderRadius: '4px' }}>
{item.name}
</Text>
))}</LazyVStack>In ScrollView
Preview unavailable for this example in the static docs build.
Show code
<ScrollView style={{ height: '400px' }}>
<LazyVStack spacing={10}>
{items.map(item => (
<Text key={item.id} style={{ padding: '15px', backgroundColor: '#f9f9f9', borderRadius: '8px' }}>
{item.name}
</Text>
))}
</LazyVStack>
</ScrollView>With Estimated Item Height
Preview unavailable for this example in the static docs build.
Show code
<LazyVStack spacing={10} estimatedItemHeight={50}>{items.slice(0, 20).map(item => (
<Text key={item.id} style={{ padding: '15px', backgroundColor: '#e8e8e8', borderRadius: '4px' }}>
{item.name}
</Text>
))}</LazyVStack>With Alignment
Preview unavailable for this example in the static docs build.
Show code
<LazyVStack spacing={10} alignment="leading">{items.slice(0, 10).map(item => (
<Text key={item.id} style={{ padding: '10px', backgroundColor: '#f0f0f0', borderRadius: '4px' }}>
{item.name}
</Text>
))}</LazyVStack>API
| Prop | Type | Required | Description |
|---|---|---|---|
estimatedItemHeight | number | No | Estimated height of each item for virtualization. Used to optimize rendering performance. |
Inherits additional props from IVStackProps.
Overview
LazyVStack is a container that arranges its children vertically, loading them lazily. LazyVStack is similar to VStack but only renders children that are visible in the viewport, improving performance for long lists.
SwiftUI Correspondence: Similar to SwiftUI's LazyVStack.
Notes
- LazyVStack supports all VStack props (spacing, alignment, etc.)
- LazyVStack only renders visible items for better performance
- Use
estimatedItemHeightto optimize virtualization - LazyVStack is ideal for long lists and scrollable content
- LazyVStack automatically handles viewport detection
Best Practices
- Long lists: Use LazyVStack for lists with many items
- Performance: LazyVStack improves performance for large datasets
- Estimated height: Provide estimatedItemHeight when possible
- Keys: Always provide unique keys for list items
- ScrollView: Use LazyVStack within ScrollView for scrollable lists