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 { XStack, YStack } 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 { 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 space="$3">
<Text>Hello</Text>
<Text>World</Text>
</YStack>
</XStack>
)

Stacks Props

Beyond the Tamagui Props, stacks have 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.

  • 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, {
    hoverTheme: true,
    pressTheme: true,
    focusTheme: true,
    bordered: true,
    })

    Beyond Stacks props, ThemeableStacks add:

    Props

  • hoverTheme

    boolean

    Sets backgroundColor and borderColor to matching theme values on hover.

  • focusTheme

    boolean

    Sets backgroundColor and borderColor to matching theme values on hover.

  • pressTheme

    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.