wwwwwwwwwwwwwwwwwww

Stacks

An optional base for creating flex-based layouts.

yarnbunnpmpnpm
import React from 'react'
import { XStack, YStack, ZStack } from 'tamagui'
export function StacksDemo() {
return (
<XStack maxWidth={250} padding="$2" alignSelf="center" space>
<YStack flex={1} space="$2" borderWidth={2} borderColor="$color" borderRadius="$4" padding="$2" >
<YStack backgroundColor="$color" borderRadius="$3" padding="$2" />
<YStack backgroundColor="$color" borderRadius="$3" padding="$2" />
<YStack backgroundColor="$color" borderRadius="$3" padding="$2" />
</YStack>
<XStack flex={1} space="$2" borderWidth={2} borderColor="$color" borderRadius="$4" padding="$2" >
<YStack backgroundColor="$color" borderRadius="$3" padding="$2" />
<YStack backgroundColor="$color" borderRadius="$3" padding="$2" />
<YStack backgroundColor="$color" borderRadius="$3" padding="$2" />
</XStack>
<ZStack maxWidth={50} maxHeight={85} width={100} flex={1}>
<YStack fullscreen borderRadius="$4" padding="$2" borderColor="$color" borderWidth={2} />
<YStack borderColor="$color" fullscreen y={10} x={10} borderWidth={2} borderRadius="$4" padding="$2" />
<YStack borderColor="$color" fullscreen y={20} x={20} borderWidth={2} borderRadius="$4" padding="$2" />
</ZStack>
</XStack>
)
}

Features

  • X, Y, and Z stacks for easy flex layouts.

  • Gap property to add space between elements.

  • Handle press, focus, and layout events easily.

Tamagui UI includes optional stack views - XStack, YStack and ZStack. They extend directly off the View from @tamagui/core.

Stack props accept every prop from react-native-web  View, as well as all the style properties Tamagui supports.

In this example you'd show three YStack elements spaced out.

import { XStack, YStack } from 'tamagui'
export default () => (
<XStack gap="$2">
<YStack />
<YStack />
<YStack />
</XStack>
)

To see all the style properties supported, see the Props documentation.

Fuller example

An example using a wide variety of style properties:

import { Text, XStack, YStack } from 'tamagui'
export default () => (
<XStack flex={1} flexWrap="wrap" backgroundColor="#fff" hoverStyle={{ backgroundColor: 'red', }} // media query $gtSm={{ flexDirection: 'column', flexWrap: 'nowrap', }} >
<YStack gap="$3">
<Text>Hello</Text>
<Text>World</Text>
</YStack>
</XStack>
)

API Reference

XStack, YStack, ZStack

Beyond the Tamagui Props, the stacks add just two variants:

Props

  • fullscreen

    boolean

    Sets position: absolute, top: 0, left: 0, right: 0, bottom: 0.

  • elevation

    number | tokens.size

    Sets a natural looking shadow that expands out and away as the size gets bigger.