Text - React Native

For development, import Text from @servicetitan/anvil2-rn. For design, find it in the Mobile Agentic Component Library file.

Implementation
Text Props

import { Text } from "@servicetitan/anvil2-rn";

function App() {
  return <Text text="The quick brown fox jumps over the lazy dog." />;
}

Common Examples

To use the Text, import it from @servicetitan/anvil2-rn and pass a required text prop. The kit forbids children. All variants render a native Text; nested Text stays inline.

import { Text } from "@servicetitan/anvil2-rn";

function ExampleComponent() {
  return <Text text="Default body paragraph." />;
}

React Native has no CSS color inheritance, so color selects a semantic foreground role. align sets horizontal alignment for multi-line copy.

Headline

Set variant="headline" and a required el ("h1"–"h6") so the semantic level is independent of visual size. Headline size defaults to "major".

<Text variant="headline" el="h2" size="hero" text="Headline — hero" />
<Text variant="headline" el="h2" size="major" text="Headline — major" />
<Text
  variant="headline"
  el="h2"
  size="substantial"
  text="Headline — substantial"
/>
<Text variant="headline" el="h2" size="regular" text="Headline — regular" />

Body

Body is the default variant. Size defaults to "regular".

<Text size="fine" text="Body — fine" />
<Text size="compact" text="Body — compact" />
<Text size="regular" text="Body — regular" />
<Text size="featured" text="Body — featured" />

Eyebrow

<Text variant="eyebrow" text="Section label" />

Highlight and color

highlighted applies the suggested-change treatment and owns the foreground. color is ignored while highlighted.

<Text highlighted text="8.0h" />
<Text text="Muted note" color="subtle" align="center" />

Accessibility

Headline el sets accessibilityRole="header" and the heading level.
Body and eyebrow are ordinary text.

<Text variant="headline" el="h1" size="major" text="Page title" />

`Text` Props

The Text accepts the following props. It does not expose a raw style override. Headline requires el. Body is the default variant.

ReactNode

required

Text content.

"start" | "center" | "end"

Horizontal alignment.

"standard" | "subtle" | "informative" | "critical" | "inverse"

default:"standard"

Semantic foreground role. Ignored when highlighted is true.

"h1" | "h2" | "h3" | "h4" | "h5" | "h6"

Semantic heading level. Required when variant is "headline".

boolean

default:"false"

Suggested-change highlight treatment.

HeadlineSize | BodySize

Visual scale. Headline defaults to "major". Body defaults to "regular". Unavailable on eyebrow.

string

Test hook forwarded to the underlying Text.

"headline" | "body" | "eyebrow"

default:"body"

Type role.

Concepts & Guidelines

Anvil2

Resources

Text - React Native

Common Examples

Headline

Body

Eyebrow

Highlight and color

Accessibility

`Text` Props

​Common Examples

​Headline

​Body

​Eyebrow

​Highlight and color

​Accessibility

​Text Props

Common Examples

Headline

Body

Eyebrow

Highlight and color

Accessibility

`Text` Props