wwwwwwwwwwwwwwwwwww

Stacks

An optional base for creating flex-based layouts.

 
import React from 'react'

import { XStack, YStack, ZStack } from 'tamagui'



export function StacksDemo() {

  return (

    <XStack maxWidth={250} padding="$2" alignSelf="center" space>

      <YStack
        flex={1}
        space="$2"
        borderWidth={2}
        borderColor="$color"
        borderRadius="$4"
        padding="$2"
      >

        <YStack backgroundColor="$color" borderRadius="$3" padding="$2" />

        <YStack backgroundColor="$color" borderRadius="$3" padding="$2" />

        <YStack backgroundColor="$color" borderRadius="$3" padding="$2" />

      </YStack>



      <XStack
        flex={1}
        space="$2"
        borderWidth={2}
        borderColor="$color"
        borderRadius="$4"
        padding="$2"
      >

        <YStack backgroundColor="$color" borderRadius="$3" padding="$2" />

        <YStack backgroundColor="$color" borderRadius="$3" padding="$2" />

        <YStack backgroundColor="$color" borderRadius="$3" padding="$2" />

      </XStack>



      <ZStack maxWidth={50} maxHeight={85} width={100} flex={1}>

        <YStack
          fullscreen
          borderRadius="$4"
          padding="$2"
          borderColor="$color"
          borderWidth={2}
        />

        <YStack
          borderColor="$color"
          fullscreen
          y={10}
          x={10}
          borderWidth={2}
          borderRadius="$4"
          padding="$2"
        />

        <YStack
          borderColor="$color"
          fullscreen
          y={20}
          x={20}
          borderWidth={2}
          borderRadius="$4"
          padding="$2"
        />

      </ZStack>

    </XStack>

  )

}

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.

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

    Introduction

    Next

    Headings

    Edit this page on GitHub.