View & Text

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

See the Props docs for the full list of properties View and Text accept.

You can use them directly:

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

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

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 { View, Text } from 'tamagui' // or '@tamagui/core'

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

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

import { View, styled } from 'tamagui' // or '@tamagui/core'

export const Circle = styled(View, {
  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.