wwwwwwwwwwwwwwwwwww

Stacks

The core view element in Tamagui for creating flex-based layouts.

Features

  • X, Y, and Z stacks with super performance.

  • Gap 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 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

Stack

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' // or '@tamagui/core'

    import { ThemeableStack } from 'tamagui' // or '@tamagui/stacks'

    

    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 focus.

  • pressTheme

    boolean

    Sets backgroundColor and borderColor to matching theme values on press.

  • 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.

    • Previous

    Benchmarks

    Next

    Headings

    Edit this page on GitHub.