TextNew

Import

import { Text } from 'heroui-native';

Anatomy

<Text>...</Text>

{/* Sub-components */}
<Text.Heading>...</Text.Heading>
<Text.Paragraph>...</Text.Paragraph>
<Text.Code>...</Text.Code>

• Text: Root text element. Selects a typography preset via type and exposes orthogonal align, color, weight, and truncate props.
• Text.Heading: Convenience wrapper restricted to heading types (h1–h6). Adds accessibilityRole="header" automatically.
• Text.Paragraph: Convenience wrapper restricted to body types (body, body-sm, body-xs).
• Text.Code: Chip-styled inline monospaced text. Uses a platform-appropriate monospace font family.

Usage

Basic Usage

The Text component renders body text by default.

<Text>Hello, world!</Text>

Type Variants

Use the type prop to select a semantic typography preset.

<Text type="h1">Heading 1</Text>
<Text type="h2">Heading 2</Text>
<Text type="h3">Heading 3</Text>
<Text type="h4">Heading 4</Text>
<Text type="h5">Heading 5</Text>
<Text type="h6">Heading 6</Text>
<Text type="body">Body text</Text>
<Text type="body-sm">Small body text</Text>
<Text type="body-xs">Extra-small body text</Text>
<Text type="code">Code snippet</Text>

Headings

Use Text.Heading for heading text with automatic header accessibility role.

<Text.Heading type="h1">Page Title</Text.Heading>
<Text.Heading type="h2">Section Title</Text.Heading>
<Text.Heading type="h3">Subsection Title</Text.Heading>

Paragraphs

Use Text.Paragraph for body text.

<Text.Paragraph>
  This is a paragraph of body text with the default size.
</Text.Paragraph>
<Text.Paragraph type="body-sm">
  This is smaller body text.
</Text.Paragraph>

Code

Use Text.Code (or equivalently <Text type="code">) for inline code snippets. Both render a chip-styled, monospaced inline element with a subtle background, rounded corners, and a self-start layout so it does not stretch in flex containers. The platform monospace fontFamily is applied at the Text root, so the two forms are interchangeable.

<Text.Code>console.log('hello')</Text.Code>
<Text type="code">console.log('hello')</Text>

Alignment

Use the align prop to control horizontal alignment. start and end are RTL-aware (they flip under right-to-left layouts).

<Text align="start">Start-aligned</Text>
<Text align="center">Center-aligned</Text>
<Text align="end">End-aligned</Text>
<Text align="justify">Justified text spreads across the line.</Text>

Note: text-justify is iOS-only on React Native; Android falls back to left alignment.

Color

Use the color prop to apply a semantic foreground color preset.

<Text color="default">Default foreground</Text>
<Text color="muted">Muted secondary text</Text>

For other theme colors, pass the corresponding utility through className (e.g. className="text-accent", className="text-danger").

Weight

Use the weight prop to override the font weight implied by type. The override merges via tailwind-merge, so it always wins over the type variant's default weight.

<Text type="h1" weight="bold">Bold H1</Text>
<Text weight="medium">Medium body</Text>
<Text weight="semibold">Semibold body</Text>

Truncation

Use the truncate boolean prop to limit the text to a single line with an ellipsis. It is mapped to React Native's numberOfLines={1}. An explicit numberOfLines prop, if provided, takes precedence.

<Text truncate>
  A long line of text that will be cut off with an ellipsis when it overflows
  the container.
</Text>;

{
  /* Multi-line truncation via the underlying RN prop */
}
<Text numberOfLines={2}>
  Two-line truncation works through React Native's standard `numberOfLines`
  prop.
</Text>;

Example

import { Text } from 'heroui-native';
import { View } from 'react-native';

export default function TextExample() {
  return (
    <View className="flex-1 justify-center px-5 gap-4">
      <Text.Heading type="h1">Welcome</Text.Heading>
      <Text.Heading type="h3">Getting Started</Text.Heading>
      <Text.Paragraph>
        This is a body paragraph rendered with the Text component.
      </Text.Paragraph>
      <Text.Paragraph color="muted" type="body-sm">
        Smaller supporting text for captions or footnotes.
      </Text.Paragraph>
      <Text.Code>npm install heroui-native</Text.Code>
    </View>
  );
}

You can find more examples in the GitHub repository.

API Reference

Text

Text extends all standard React Native TextProps with additional typography props.

Text.Heading

Inherits all Text root props (align, color, weight, truncate, className, and React Native TextProps). Sets accessibilityRole="header" automatically and narrows type to heading variants.

Text.Paragraph

Inherits all Text root props (align, color, weight, truncate, className, and React Native TextProps). Narrows type to body variants.

Text.Code

Inherits all Text root props (align, color, weight, truncate, className, style, and React Native TextProps). Thin wrapper that forces type="code"; the platform monospace fontFamily is merged in at the Text root, so <Text type="code"> and <Text.Code> render identically.