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.
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.
Examples
Basic Usage
Preview unavailable for this example in the static docs build.
Show code
<ZStack style={{ width: '200px', height: '200px', backgroundColor: '#f0f0f0' }}>
<Text style={{ color: 'lightblue' }}>Background Layer</Text>
<VStack>
<Text>Foreground Layer</Text>
</VStack>
</ZStack>Alignment
Preview unavailable for this example in the static docs build.
Show code
<ZStack alignment="center">{(
<>
<div style={{ width: '100px', height: '100px', backgroundColor: 'rgba(0,122,255,0.3)' }} />
<Text>Centered Text</Text>
</>
)}</ZStack>Top Leading
Preview unavailable for this example in the static docs build.
Show code
<ZStack alignment="top-leading">{(
<>
<div style={{ width: '100%', height: '100%', backgroundColor: '#f0f0f0' }} />
<Text style={{ padding: '10px' }}>Top Leading</Text>
</>
)}</ZStack>Bottom Trailing
Preview unavailable for this example in the static docs build.
Show code
<ZStack alignment="bottom-trailing">{(
<>
<div style={{ width: '100%', height: '100%', backgroundColor: '#f0f0f0' }} />
<Text style={{ padding: '10px' }}>Bottom Trailing</Text>
</>
)}</ZStack>Image Overlay
Preview unavailable for this example in the static docs build.
Show code
<ZStack style={{ width: '300px', height: '200px' }}>
<div style={{ width: '100%', height: '100%', backgroundColor: '#e0e0e0' }} />
<VStack alignment="center">
<Text style={{ color: 'white', textShadow: '1px 1px 2px rgba(0,0,0,0.5)' }}>
Overlay Text
</Text>
</VStack>
</ZStack>Button Overlay
Preview unavailable for this example in the static docs build.
Show code
<ZStack style={{ width: '250px', height: '150px' }}>
<div style={{ width: '100%', height: '100%', backgroundColor: '#f5f5f5' }} />
<Button>Overlay Button</Button>
</ZStack>Multiple Layers
Preview unavailable for this example in the static docs build.
Show code
<ZStack style={{ width: '200px', height: '200px' }}>
<div style={{ width: '100%', height: '100%', backgroundColor: 'rgba(255,0,0,0.2)' }} />
<div style={{ width: '80%', height: '80%', backgroundColor: 'rgba(0,255,0,0.2)' }} />
<div style={{ width: '60%', height: '60%', backgroundColor: 'rgba(0,0,255,0.2)' }} />
<Text>Top Layer</Text>
</ZStack>API
| Prop | Type | Required | Description |
|---|---|---|---|
alignment | EAlignment | No | The alignment of the children within the ZStack. Default: undefined (uses container default) |
Inherits additional props from IBaseComponent.
Overview
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.
SwiftUI Correspondence: Similar to SwiftUI's ZStack.
Alignment
Control how children are aligned within the ZStack:
Image Overlay
Common use case: overlay text on images:
Multiple Layers
ZStack can contain multiple layers:
Notes
- Children are stacked in the order they appear (first child is bottom layer)
- ZStack requires explicit dimensions or will size to fit children
- Alignment controls positioning of all children as a group
- Useful for overlays, badges, and layered UI elements
Best Practices
- Layer order: Place background elements first, foreground elements last
- Dimensions: Always provide explicit dimensions for ZStack containers
- Alignment: Use appropriate alignment for your design needs
- Performance: Avoid excessive nesting of ZStack components
- Accessibility: Ensure overlays don't obscure important content