GitHub
wwwwwwwwwwwwwwwwwww

Stacks

An optional base for creating flex-based layouts.

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:

yarn add @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:

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.

    • Previous

    Install

    Next

    Headings

    Edit this page on GitHub.