---
modificationDate: January 22, 2026
title: ZStack
description: A SwiftUI ZStack component for overlapping layouts.
sourceCodeUrl: 'https://github.com/expo/expo/tree/main/packages/expo-ui'
packageName: '@expo/ui'
platforms: ['ios', 'tvos']
---

<AgentInstructions>

## Submitting Feedback

If this page contains errors, outdated information, or gaps that blocked you from completing a task, report it so the docs can be improved:

curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/versions/v55.0.0/sdk/ui/swift-ui/zstack/","feedback":"🤖 Agent feedback: <specific, actionable description>"}'

Only submit when you have something specific and actionable to report.

</AgentInstructions>

# ZStack

A SwiftUI ZStack component for overlapping layouts.
iOS, tvOS

> For the complete documentation index, see [llms.txt](/llms.txt). Use this file to discover all available pages.

Expo UI ZStack matches the official SwiftUI [ZStack API](https://developer.apple.com/documentation/swiftui/zstack) and overlays its children on top of each other.

## Installation

```sh
npx expo install @expo/ui
```

If you are installing this in an [existing React Native app](/bare/overview), make sure to [install `expo`](/bare/installing-expo-modules) in your project.

## Usage

### Basic overlapping stack

```tsx
import { Host, ZStack, Rectangle, Text } from '@expo/ui/swift-ui';
import { frame, foregroundStyle } from '@expo/ui/swift-ui/modifiers';

export default function BasicZStackExample() {
  return (
    <Host matchContents>
      <ZStack>
        <Rectangle modifiers={[frame({ width: 100, height: 100 })]} />
        <Text modifiers={[foregroundStyle({ color: 'white' })]}>Overlay</Text>
      </ZStack>
    </Host>
  );
}
```

### With alignment

The `alignment` prop controls how children are positioned within the stack. Available options include: `center`, `leading`, `trailing`, `top`, `bottom`, `topLeading`, `topTrailing`, `bottomLeading`, and `bottomTrailing`.

```tsx
import { Host, ZStack, Rectangle, Circle } from '@expo/ui/swift-ui';
import { frame, foregroundStyle } from '@expo/ui/swift-ui/modifiers';

export default function ZStackAlignmentExample() {
  return (
    <Host matchContents>
      <ZStack alignment="bottomTrailing">
        <Rectangle
          modifiers={[frame({ width: 100, height: 100 }), foregroundStyle({ color: 'blue' })]}
        />
        <Circle modifiers={[frame({ width: 30, height: 30 }), foregroundStyle({ color: 'red' })]} />
      </ZStack>
    </Host>
  );
}
```

### Creating a badge overlay

```tsx
import { Host, ZStack, Circle, Text, Image } from '@expo/ui/swift-ui';
import { frame, foregroundStyle } from '@expo/ui/swift-ui/modifiers';

export default function ZStackBadgeExample() {
  return (
    <Host matchContents>
      <ZStack alignment="topTrailing">
        <Image systemName="bell.fill" size={32} color="blue" />
        <Circle modifiers={[frame({ width: 16, height: 16 }), foregroundStyle({ color: 'red' })]} />
      </ZStack>
    </Host>
  );
}
```

## API

```tsx
import { ZStack } from '@expo/ui/swift-ui';
```

## Component

### `ZStack`

Supported platforms: iOS, tvOS.

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component)<[ZStackProps](#zstackprops)\>

ZStackProps

### `alignment`

Supported platforms: iOS, tvOS.

Optional • Literal type: `string`

The alignment of children within the stack.

Acceptable values are: `'center'` | `'leading'` | `'trailing'` | `'top'` | `'bottom'` | `'topLeading'` | `'topTrailing'` | `'bottomLeading'` | `'bottomTrailing'` | `'centerFirstTextBaseline'` | `'centerLastTextBaseline'` | `'leadingFirstTextBaseline'` | `'leadingLastTextBaseline'` | `'trailingFirstTextBaseline'` | `'trailingLastTextBaseline'`

### `children`

Supported platforms: iOS, tvOS.

Type: `React.ReactNode`

#### Inherited Props

-   [CommonViewModifierProps](/versions/v55.0.0/sdk/ui/swift-ui/modifiers)