Stack & Text

The base views of @tamagui/core.

Stack and Text are functionally equivalent to React Native View and Text, they just accept the superset of props that Tamagui supports.

Props

See the Props docs for the full list of properties.

Usage

You can use them directly:

import { Stack, Text } from '@tamagui/core'
export default () => (
<Stack margin={10}>
<Text color="$color">Hello</Text>
</Stack>
)

Or use them with styled to create your own base level design system:

import { Stack, styled } from '@tamagui/core'
export const Circle = styled(Stack, {
borderRadius: 100_000_000,
variants: {
pin: {
top: {
position: 'absolute',
top: 0,
},
},
centered: {
true: {
alignItems: 'center',
justifyContent: 'center',
},
},
size: {
'...size': (size, { tokens }) => {
return {
width: tokens.size[size] ?? size,
height: tokens.size[size] ?? size,
}
},
},
} as const,
})

Inline styles and styled() both are optimized by the compiler, so you can author styles using them both depending on the use case.