This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 54).

ZStack

A SwiftUI ZStack component for overlapping layouts.

iOS

tvOS

GitHub

npm

Changelog

Expo UI ZStack matches the official SwiftUI ZStack API and overlays its children on top of each other.

Installation

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Basic overlapping stack

BasicZStackExample.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.

ZStackAlignmentExample.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

ZStackBadgeExample.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

Component

`ZStack`

iOS

tvOS

Type: React.Element<ZStackProps>

ZStackProps

`alignment`

iOS

tvOS

Optional • Literal type: string

The alignment of children within the stack.

`children`

iOS

tvOS

Type: React.ReactNode

Inherited Props

CommonViewModifierProps