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.

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.

Installation

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

npm install @tamagui/stacks

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', description: ( <span>Sets position: absolute, top: 0, left: 0, right: 0, bottom: 0.</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> ), }, ]} />