Stacks

<Highlights 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, and so accept all style properties.

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

Installation

Stacks is already installed in tamagui, or you can install it independently:

npm install @tamagui/stacks

Usage

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:

<PropsTable data={[ { name: 'fullscreen', required: false, type: 'boolean', deprecated: true, description: ( <span> Deprecated: use <Code>inset: 0, position: 'absolute'</Code> instead. </span> ), }, { name: 'elevation', required: false, type: 'number | tokens.size', description: ( <span> Sets a natural looking shadow that expands out and away as the size gets bigger. </span> ), }, ]} />