ZStack

A view that overlays its children, aligning them in both axes

Example

swiftui-react-native

<ZStack frame={{ width: 100, height: 100 }}>
  <Image systemName="circle.fill" fontSize={100} />
  <Image systemName="circle.fill" foregroundColor="systemTeal" fontSize={50} />
  <Text foregroundColor="white" bold>
    ZStack
  </Text>
</ZStack>

SwiftUI

ZStack(alignment: .topLeading) {
    Image(systemName: "circle.fill").font(.system(size: 100))
    Image(systemName: "circle.fill").foregroundColor(.systemTeal).font(.system(size: 50))
    Text("ZStack").foregroundColor(.white).bold()
}.frame(width: 100, height: 100)

React Native

<View style={{ width: 100, height: 100 }}>
  <Image
    source={require('circle.fill.jpg')}
    style={{ fontSize: 100, position: 'absolute', zIndex: 1 }}
  />
  <Image
    source={require('circle.fill.jpg')}
    style={{ fontSize: 50, color: 'teal', position: 'absolute', zIndex: 2 }}
  />
  <Text
    style={{
      color: 'white',
      fontWeight: 'bold',
      position: 'absolute',
      zIndex: 3,
    }}
  >
    ZStack
  </Text>
</View>

Props

ZStack inherits all View Modifiers as props.

prop	description	type	required	default
spacing	Amount of space between stack items	number	no	0
alignment	The alignment guide	'leading' | 'trailing'| 'top' | 'bottom' | 'topLeading' | 'topTrailing' | 'bottomLeading' | 'bottomTrailing' | 'center'	no	'center'
children	Stack items	ReactNode	no	null