Stack & Text

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

Beyond View, Stack sets flexDirection to column.

See the Props docs for the full list of properties.

You can use them directly:

import { Stack, Text } from 'tamagui' // or '@tamagui/core'

export default () => (
  <Stack margin={10}>
    <Text color="$color">Hello</Text>
  </Stack>
)

We encourage you to use inline styles. Combined with shorthands they can lead to really easy styling, and the Tamagui optimizing compiler will take care of optimizing everything for you so that there is little to no extra cost in performance:

import { Stack, Text } from 'tamagui' // or '@tamagui/core'

export default () => (
  <Stack mx="$sm" scale={1.2}>
    <Text c="$color">Hello</Text>
  </Stack>
)

You can also use them with styled to create your own lower level views that are meant to be re-usable:

import { Stack, styled } from 'tamagui' // or '@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 both depending on the use case.

As of version 1.31 Tamagui exports a View as well, which has no style properties set by default (as opposed to Stack which sets the flexDirection to column by default).