The core view element in Tamagui for creating flex-based layouts.
X, Y, and Z stacks with super performance.
Space property to add space between elements.
Supports all the same properties as React Native.
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 { YStack, XStack } from 'tamagui'export default () => (<XStack space><YStack /><YStack /><YStack /></XStack>);
To see all the style properties supported, see the Props documentation.
An example using a wide variety of style properties:
import { XStack, YStack, Text } 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>)
Beyond the Tamagui Props, stacks have two variants
Prop | Type | Default |
---|---|---|
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. |
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 tamaguiconst MyCard = styled(ThemeableStack, {hoverable: true,pressable: true,focusable: true,bordered: true,})
Beyond Stacks props, ThemeableStacks add:
Prop | Type | Default |
---|---|---|
hoverable | boolean | |
Sets backgroundColor and borderColor to matching theme values on hover. | ||
focusable | boolean | |
Sets backgroundColor and borderColor to matching theme values on hover. | ||
pressable | 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. |