wwwwwwwwwwwwwwwwwww
Introduction
Installation
Releases

Compiler

Intro
Install
Benchmarks

Core

Configuration
Themes
Props
styled
Variants
Animations
Stack & Text
Theme
useMedia
useTheme
FontLanguage
Extras

Tamagui

Stacks
Headings
Paragraph

Forms

Button
Text Inputs
Label
Progress
Select
Slider
Switch

Panels

AlertDialog
Dialog
Popover
Sheet
Tooltip

Content

Avatar
Card
Group
Image
ListItem

Visual

LinearGradient
Separator
Square & Circle

Etc

Anchor
HTML Elements
ScrollView
Spinner
Unspaced
VisuallyHidden

Extras

Feather Icons

Guides

Design Systems
Developing
Next.js
Expo
Vite
create-tamagui-app

Community

Blog
GitHub
Twitter
Discord

Stacks

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

Features

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

  • Space 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 space>

    <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 space="$3">

      <Text>Hello</Text>

      <Text>World</Text>

    </YStack>

  </XStack>

)

Stacks Props

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/core'

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

    

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

  • pressTheme

    boolean

    Sets backgroundColor and borderColor to matching theme values on hover.

  • 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

    Extras

    Next

    Headings

    Edit this page on GitHub.