VStack
VStack is a view that arranges its children in a vertical line. A VStack is a container view that arranges its child views in a vertical line. You can customize the spacing between views and the alignment of views within the stack.
VStack is a view that arranges its children in a vertical line. A VStack is a container view that arranges its child views in a vertical line. You can customize the spacing between views and the alignment of views within the stack.
Examples
Basic Usage
Preview unavailable for this example in the static docs build.
Show code
<VStack>{(
<>
<Text>First</Text>
<Text>Second</Text>
<Text>Third</Text>
</>
)}</VStack>Spacing
Preview unavailable for this example in the static docs build.
Show code
<VStack spacing={20}>{(
<>
<Text>Item 1</Text>
<Text>Item 2</Text>
<Text>Item 3</Text>
</>
)}</VStack>Leading Alignment
Preview unavailable for this example in the static docs build.
Show code
<VStack alignment="leading" spacing={10}>{(
<>
<Text>Left aligned</Text>
<Text>Left aligned</Text>
</>
)}</VStack>Center Alignment
Preview unavailable for this example in the static docs build.
Show code
<VStack alignment="center" spacing={15}>{(
<>
<Text>Center</Text>
<Text>Aligned</Text>
</>
)}</VStack>Trailing Alignment
Preview unavailable for this example in the static docs build.
Show code
<VStack alignment="trailing" spacing={10}>{(
<>
<Text>Right</Text>
<Text>Aligned</Text>
</>
)}</VStack>With Spacer
Preview unavailable for this example in the static docs build.
Show code
<VStack spacing={10} style={{ height: '200px' }}>
<Text>Top</Text>
<Spacer />
<Text>Bottom</Text>
</VStack>With Buttons
Preview unavailable for this example in the static docs build.
Show code
<VStack spacing={10}>
<Button>First Button</Button>
<Button>Second Button</Button>
<Button>Third Button</Button>
</VStack>Complex Layout
Preview unavailable for this example in the static docs build.
Show code
<VStack spacing={20} alignment="leading">
<Text style={{ fontSize: '24px', fontWeight: 'bold' }}>Title</Text>
<Text>Subtitle text goes here</Text>
<Spacer minLength={20} />
<Button>Action Button</Button>
</VStack>API
| Prop | Type | Required | Description |
|---|---|---|---|
alignment | EAlignment | No | The guide for aligning the subviews in this stack.
This guide has the same horizontal screen coordinate for every child view. Default: undefined (uses container default) |
spacing | number | string | No | The distance between adjacent subviews, in pixels.
If nil, the stack chooses a default distance for each pair of subviews. Default: 0 |
Inherits additional props from IBaseComponent.
Overview
VStack is a view that arranges its children in a vertical line. A VStack is a container view that arranges its child views in a vertical line. You can customize the spacing between views and the alignment of views within the stack.
SwiftUI Correspondence: Similar to SwiftUI's VStack.
Spacing
Control the distance between child views:
Alignment
Align children horizontally within the VStack:
With Spacer
Use Spacer to create flexible space:
Notes
- VStack arranges children vertically from top to bottom
- Default alignment is based on container settings
- Spacing applies uniformly between all adjacent children
- VStack supports all standard React children (components, text, etc.)
Best Practices
- Consistent spacing: Use consistent spacing values throughout your app
- Alignment: Choose appropriate alignment based on content type
- Nesting: VStack can be nested with HStack and ZStack for complex layouts
- Performance: For long lists, consider using LazyVStack instead
- Responsive: VStack automatically adapts to container width
VSplitView
VSplitView stacks multiple panes vertically while preserving the SwiftUI split-view mental model in a web-native layout container.
ZStack
ZStack is a view that overlays its children, aligning them in both axes. A ZStack overlays child views on top of each other. You can control the alignment of the children within the ZStack.