Text

Atom
Renders text. In React Native every string must live inside a Text element, so you cannot put a bare string in a View. For type scale and tone in app code, reach for <Typography> (e.g. <Typography h3>, <Typography body>, <Typography tiny muted>), which owns the kit's roles and colors; use the raw Text primitive for the primitive-level cases it does not cover: numberOfLines truncation and nested inline runs.
src/atoms/text
View in Foundations

Playground

Every control sets a real prop of TextProps. The JSX below updates as you go.
Every surface is lit glass: one charged accent, spring physics, three platform skins.
Props
children
string
numberOfLines
number
0
JSX · TextProps
<Text
numberOfLines={0}
>
Every surface is lit glass: one charged accent, spring physics, three platform skins.
</Text>

Variants

2 examples from src/atoms/text/text.md, each rendered live from its own JSX.
This single line is clipped with an ellipsis when it overflows its container.
Truncation
<Container xxs>
<Text numberOfLines={1} style={{ color: tokens.foreground }}>
This single line is clipped with an ellipsis when it overflows its container.
</Text>
</Container>
A run of text can carry an inline emphasis that inherits everything else from its parent Text.
Nested runs
<Text style={{ color: tokens.foreground }}>
A run of text can carry an <Text style={{ fontWeight: "700" }}>inline emphasis</Text> that inherits everything else from its parent Text.
</Text>

Anatomy

Every surface is lit glass: one charged accent, spring physics, three platform skins.
1
Text run
Dimmed parts appear only in some states or variants.

Props

A React Native primitive, re-exported as is.
Accepts every React Native Text prop unchanged. Canvas re-exports it so every component is built from the same primitive.

Accessibility and keyboard

Keyboard
Not focusable. It has no interaction of its own and takes the semantics of what it wraps.
Semantics
No role of its own in source; it reads as the content it renders.

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
A run of text can carry an inline emphasis that inherits everything else from its parent Text.
Web
control 10 · field 10 · card 16 · Instrument Sans
A run of text can carry an inline emphasis that inherits everything else from its parent Text.
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
A run of text can carry an inline emphasis that inherits everything else from its parent Text.
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<Text style={{ color: tokens.foreground }}>The quick brown fox jumps over the lazy dog.</Text>

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--fd
--ft
--tx

Related components