Stacks

The core view element in Tamagui for creating flex-based layouts.

Features

  • X, Y, and Z stacks with super performance.

  • Space property to add space between elements.

  • Supports all the same properties as React Native.

Usage

XStack, YStack and ZStack are the base views in Tamagui, they both extend directly off the simple Stack 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 { YStack, XStack } from 'tamagui'
export default () => (
<XStack space>
<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 { XStack, YStack, Text } from 'tamagui'
export default () => (
<XStack flex={1} flexWrap="wrap" backgroundColor="#fff" hoverStyle={{ backgroundColor: 'red' }} // media query $gtSm={{ flexDirection: 'column', flexWrap: 'nowrap' }} >
<YStack space="$3">
<Text>Hello</Text>
<Text>World</Text>
</YStack>
</XStack>
)

Stacks Props

Beyond the Tamagui Props, stacks have two variants

Prop

Type

Default

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.

ThemeableStack

Adds a variety of helpers that automatically apply theme values when set to true. Useful for creating higher level components by wrapping with styled():

import { styled } from '@tamagui/core'
import { ThemeableStack } from '@tamagui/stacks' // or tamagui
const MyCard = styled(ThemeableStack, {
hoverable: true,
pressable: true,
focusable: true,
bordered: true,
})

Beyond Stacks props, ThemeableStacks add:

Prop

Type

Default

hoverable
boolean

Sets backgroundColor and borderColor to matching theme values on hover.

focusable
boolean

Sets backgroundColor and borderColor to matching theme values on hover.

pressable
boolean

Sets backgroundColor and borderColor to matching theme values on hover.

pad
boolean

Matches padding to size prop, if given.

elevate
boolean

Matches elevation prop to size prop, if given.

bordered
boolean | number

Adds a border that inherits themes.

circular
boolean | number

Clamps to a circular shape and radius.