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 you 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 mean 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 them both depending on the use case.

When set a defaultFont is defined int your Tamagusi.config.ts` and its set to be one of key values found inthe correct part of the design system, you basically d

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