Text

Text primitives with themes custom to each font.

Usage

export default () => (
  <>
    <Text>Text</Text>
    <SizableText>Sizable Text</SizableText>
    <Paragraph>Paragraph</Paragraph>
  </>
)

Text

Text in Tamagui matches to Text in react-native-web, just with the added Tamagui Props.

It explicitly doesn't inherit your theme color or other font properties, as it's meant to be plain and used for extension. Below, we'll show SizableText which extends Text, and Paragraph which extends SizableText. Generally, Paragraph is the useful view as it will use theme values, while you can extend Text if you'd like to derive your own design system.

import { Text, XStack, YStack } from 'tamagui'

export default () => (
  <>
    <Text
      // can add theme values
      color="$white"
      fontFamily="$body"
      // or just use direct values
      fontSize={20}
      hoverStyle={{
        color: '$colorHover',
      }}
    >
      Lorem ipsum
    </Text>
  </>
)

SizableText

One unique feature to Tamagui that doesn't exist in many UI kits is that your themes define font sizing, spacing, line height, and letter spacing - all - custom for each font. This gives you the necessary control to have beautiful fonts with the right styles without having to resort to ugly hacks.

SizableText does this with the size property, which looks into your theme and sets the following, so long as the keys for each value match:

• fontSize
• lineHeight
• fontWeight
• letterSpacing

It uses spread variants to achieve this.

Seeing how SizableText is defined  is helpful for understanding Tamagui. They serve as a good example of how you can extend and compose components.

Paragraph

Finally Paragraph extends SizableText and simply makes the text selectable, which is a property from the Text props that sets userSelect to true and cursor to text:

export const Paragraph = styled(SizableText, {
  name: 'Paragraph',
  userSelect: 'auto',
})