Text

Text primitives with themes custom to each font.

TextSizableText
alt1alt2

Paragraph

TextSizableText
alt1alt2

Paragraph

TextSizableText
alt1alt2

Paragraph

TextSizableText
alt1alt2

Paragraph

TextSizableText
alt1alt2

Paragraph

TextSizableText
alt1alt2

Paragraph

Features

  • Themes that give you control over spacing, weights, and sizes custom to each font.

  • Size prop that automatically matches all theme values.

  • Media query styles, hoverStyle, pressStyle, focusStyle.

Usage

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',
selectable: true,
})

Note: Paragraph renders to a p tag on web, which can cause issues when you nest them during SSR. If you don't mind rendring to a span, use SizableText, otherwise, be careful when nesting items inside a Paragraph.