HStack
HStack is a view that arranges its children in a horizontal line. An HStack is a container view that arranges its child views in a horizontal line. You can customize the spacing between views and the alignment of views within the stack.
HStack is a view that arranges its children in a horizontal line. An HStack is a container view that arranges its child views in a horizontal 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
<HStack>{(
<>
<Text>Left</Text>
<Text>Center</Text>
<Text>Right</Text>
</>
)}</HStack>Spacing
Preview unavailable for this example in the static docs build.
Show code
<HStack spacing={20}>{(
<>
<Text>Item 1</Text>
<Text>Item 2</Text>
<Text>Item 3</Text>
</>
)}</HStack>Leading Alignment
Preview unavailable for this example in the static docs build.
Show code
<HStack alignment="leading" spacing={10}>{(
<>
<Text>Left</Text>
<Text>Aligned</Text>
</>
)}</HStack>Center Alignment
Preview unavailable for this example in the static docs build.
Show code
<HStack alignment="center" spacing={10}>{(
<>
<Text>Center</Text>
<Text>Aligned</Text>
</>
)}</HStack>Trailing Alignment
Preview unavailable for this example in the static docs build.
Show code
<HStack alignment="trailing" spacing={10}>{(
<>
<Text>Right</Text>
<Text>Aligned</Text>
</>
)}</HStack>With Spacer
Preview unavailable for this example in the static docs build.
Show code
<HStack spacing={10}>
<Text>Left</Text>
<Spacer />
<Text>Right</Text>
</HStack>With Buttons
Preview unavailable for this example in the static docs build.
Show code
<HStack spacing={10}>
<Button>Cancel</Button>
<Spacer />
<Button>Confirm</Button>
</HStack>Complex Layout
Preview unavailable for this example in the static docs build.
Show code
<HStack spacing={15} alignment="center">
<Text style={{ fontSize: '18px', fontWeight: 'bold' }}>Title</Text>
<Spacer />
<Button>Action</Button>
</HStack>API
| Prop | Type | Required | Description |
|---|---|---|---|
alignment | EAlignment | No | The guide for aligning the subviews in this stack.
This guide has the same vertical screen coordinate for every child view. Default: 'center' |
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
HStack is a view that arranges its children in a horizontal line. An HStack is a container view that arranges its child views in a horizontal line. You can customize the spacing between views and the alignment of views within the stack.
SwiftUI Correspondence: Similar to SwiftUI's HStack.
Spacing
Control the distance between child views:
Alignment
Align children vertically within the HStack:
With Spacer
Use Spacer to create flexible space:
Notes
- HStack arranges children horizontally from leading to trailing
- Default alignment is 'center'
- Spacing applies uniformly between all adjacent children
- HStack 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: HStack can be nested with VStack and ZStack for complex layouts
- Performance: For long lists, consider using LazyHStack instead
- Responsive: HStack automatically adapts to container width and may wrap on smaller screens
HSplitView
HSplitView lays out multiple panes side by side, adapting SwiftUI's horizontal split container model to a proportional flex layout on the web.
Image
Image is a view that displays an image. Use Image to display images from various sources, including bundled images, system images, and images from URLs.