Text Component

Display and style text with typography controls and Material Design theming.

Basic Usage

<Text>Hello, World!</Text>

Text Styles

Use Material Design typography scale:

<Text fontSize={32}>Display Large</Text>
<Text fontSize={24}>Headline</Text>
<Text fontSize={20}>Title</Text>
<Text fontSize={16}>Body Large</Text>
<Text fontSize={14}>Body Medium</Text>
<Text fontSize={12}>Label Small</Text>

Font Weight

<Text fontWeight="light">Light</Text>
<Text fontWeight="normal">Normal</Text>
<Text fontWeight="medium">Medium</Text>
<Text fontWeight="bold">Bold</Text>

Value	Weight
`"light"`	300
`"normal"`	400
`"medium"`	500
`"semibold"`	600
`"bold"`	700

Colors

Theme Colors

<Text color="primary">Primary</Text>
<Text color="secondary">Secondary</Text>
<Text color="tertiary">Tertiary</Text>
<Text color="error">Error</Text>

Hex Colors

<Text color="#FF5722">Custom Color</Text>
<Text color="#000000">Black</Text>
<Text color="#FFFFFF">White</Text>

Text Alignment

<Text textAlign="start">Left aligned</Text>
<Text textAlign="center">Center aligned</Text>
<Text textAlign="end">Right aligned</Text>

Text Overflow

Single Line with Ellipsis

<Text maxLines={1} overflow="ellipsis">
  This is a very long text that will be truncated with an ellipsis
</Text>

Multiple Lines

<Text maxLines={3}>
  This text will wrap to a maximum of three lines before being cut off
</Text>

Letter Spacing

<Text letterSpacing={0.5}>Tracking</Text>
<Text letterSpacing={2}>W I D E</Text>

Line Height

<Text lineHeight={1.5}>
  Paragraph with custom line height for better readability.
  This affects vertical spacing between lines.
</Text>

Text Decoration

<Text textDecoration="underline">Underlined</Text>
<Text textDecoration="lineThrough">Strikethrough</Text>

Font Style

<Text fontStyle="italic">Italic text</Text>
<Text fontStyle="normal">Normal text</Text>

Interactive Text

Any text can be clickable:

<Text onClick={() => $navigate("/about")}>
  Click me
</Text>

<Text onClick={handleClick} color="primary">
  Link-style text
</Text>

Selectable Text

<Text selectable>
  This text can be selected and copied by the user
</Text>

Dynamic Content

Interpolation

val userName = "Alice"
val score = 42

<Text>Hello, {userName}!</Text>
<Text>Your score: {score}</Text>

Expressions

val count = 5

<Text>{count} {count == 1 ? "item" : "items"}</Text>
<Text>{user?.name ?: "Guest"}</Text>

Common Patterns

Headline + Body

<Column gap={8}>
  <Text fontSize={24} fontWeight="bold">Title</Text>
  <Text fontSize={16} color="secondary">
    Description text goes here
  </Text>
</Column>

Label + Value

<Row gap={8}>
  <Text fontSize={14} color="secondary">Email:</Text>
  <Text fontSize={14}>user@example.com</Text>
</Row>

Badge

<Box background="error" px={8} py={4} cornerRadius={4}>
  <Text fontSize={12} color="#FFF" fontWeight="bold">NEW</Text>
</Box>

Stat

<Column horizontalAlignment="center">
  <Text fontSize={32} fontWeight="bold">42</Text>
  <Text fontSize={12} color="secondary">FOLLOWERS</Text>
</Column>

Internationalization

Use Android string resources for multi-language support:

<Text>{R.string.welcome_message}</Text>
<Text>{R.string.greeting(userName)}</Text>

Tailwind-Style Classes

<Text class="text-lg font-bold">Heading</Text>
<Text class="text-sm text-secondary">Caption</Text>
<Text class="truncate">Long text...</Text>

Common text classes:

Size: text-xs, text-sm, text-base, text-lg, text-xl
Weight: font-light, font-normal, font-medium, font-bold
Alignment: text-left, text-center, text-right
Overflow: truncate, text-ellipsis

Prop Reference

Prop	Type	Example
`fontSize`	Number	`fontSize={16}`
`fontWeight`	String	`fontWeight="bold"`
`color`	String	`color="#FF5722"`
`textAlign`	String	`textAlign="center"`
`maxLines`	Number	`maxLines={2}`
`overflow`	String	`overflow="ellipsis"`
`letterSpacing`	Number	`letterSpacing={0.5}`
`lineHeight`	Number	`lineHeight={1.5}`
`textDecoration`	String	`textDecoration="underline"`
`fontStyle`	String	`fontStyle="italic"`
`selectable`	Boolean	`selectable`
`onClick`	Function	`onClick={handleClick}`