# Typography **Category**: native **URL**: https://www.blakeui.com/en/docs/native/components/text **Source**: https://raw.githubusercontent.com/myblakebox/BlakeUI/refs/heads/main/apps/docs/content/docs/en/native/components/(typography)/text.mdx > Primitive typography component for rendering styled text with semantic type variants. *** ## Import ```tsx import { Typography } from '@blakeui/native'; ``` ## Anatomy ```tsx ... {/* Sub-components */} ... ... ... ``` - **Typography**: Root text element. Selects a typography preset via `type` and exposes orthogonal `align`, `color`, `weight`, and `truncate` props. - **Typography.Heading**: Convenience wrapper restricted to heading types (`h1`–`h6`). Adds `accessibilityRole="header"` automatically. - **Typography.Paragraph**: Convenience wrapper restricted to body types (`body`, `body-sm`, `body-xs`). - **Typography.Code**: Chip-styled inline monospaced text. Uses a platform-appropriate monospace font family. ## Usage ### Basic Usage The Typography component renders body text by default. ```tsx Hello, world! ``` ### Type Variants Use the `type` prop to select a semantic typography preset. ```tsx Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Body text Small body text Extra-small body text Code snippet ``` ### Headings Use `Typography.Heading` for heading text with automatic header accessibility role. ```tsx Page Title Section Title Subsection Title ``` ### Paragraphs Use `Typography.Paragraph` for body text. ```tsx This is a paragraph of body text with the default size. This is smaller body text. ``` ### Code Use `Typography.Code` (or equivalently ``) 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 `Typography` root, so the two forms are interchangeable. ```tsx console.log('hello') console.log('hello') ``` ### Alignment Use the `align` prop to control horizontal alignment. `start` and `end` are RTL-aware (they flip under right-to-left layouts). ```tsx Start-aligned Center-aligned End-aligned Justified text spreads across the line. ``` > **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. ```tsx Default foreground Muted secondary 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. ```tsx Bold H1 Medium body Semibold body ``` ### 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. ```tsx A long line of text that will be cut off with an ellipsis when it overflows the container. ; { /* Multi-line truncation via the underlying RN prop */ } Two-line truncation works through React Native's standard `numberOfLines` prop. ; ``` ## Example ```tsx import { Typography } from '@blakeui/native'; import { View } from 'react-native'; export default function TypographyExample() { return ( Welcome Getting Started This is a body paragraph rendered with the Typography component. Smaller supporting text for captions or footnotes. npm install @blakeui/native ); } ``` You can find more examples in the [GitHub repository](). ## API Reference ### Typography `Typography` extends all standard React Native `TextProps` with additional typography props. | prop | type | default | description | | -------------- | -------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------ | | `type` | `'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'body' \| 'body-sm' \| 'body-xs' \| 'code'` | `'body'` | Semantic typography variant (size, default weight, line-height) | | `align` | `'start' \| 'center' \| 'end' \| 'justify'` | `'start'` | Horizontal alignment. `start` and `end` are RTL-aware. `justify` is iOS-only. | | `color` | `'default' \| 'muted'` | `'default'` | Semantic foreground color preset | | `weight` | `'normal' \| 'medium' \| 'semibold' \| 'bold'` | - | Font weight override. When set, overrides the weight implied by `type`. | | `truncate` | `boolean` | `false` | Truncates the text to a single line with an ellipsis (sets `numberOfLines={1}`). An explicit `numberOfLines` takes precedence. | | `children` | `React.ReactNode` | - | Content to render | | `className` | `string` | - | Additional CSS classes | | `...TextProps` | `TextProps` | - | All standard React Native `Text` props are supported | ### Typography.Heading Inherits all `Typography` root props (`align`, `color`, `weight`, `truncate`, `className`, and React Native `TextProps`). Sets `accessibilityRole="header"` automatically and narrows `type` to heading variants. | prop | type | default | description | | -------------- | ---------------------------------------------- | ------- | ---------------------------------------------------- | | `type` | `'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'` | `'h1'` | Heading level | | `children` | `React.ReactNode` | - | Content to render | | `className` | `string` | - | Additional CSS classes | | `...TextProps` | `TextProps` | - | All standard React Native `Text` props are supported | ### Typography.Paragraph Inherits all `Typography` root props (`align`, `color`, `weight`, `truncate`, `className`, and React Native `TextProps`). Narrows `type` to body variants. | prop | type | default | description | | -------------- | ---------------------------------- | -------- | ---------------------------------------------------- | | `type` | `'body' \| 'body-sm' \| 'body-xs'` | `'body'` | Paragraph text size | | `children` | `React.ReactNode` | - | Content to render | | `className` | `string` | - | Additional CSS classes | | `...TextProps` | `TextProps` | - | All standard React Native `Text` props are supported | ### Typography.Code Inherits all `Typography` 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 `Typography` root, so `` and `` render identically. | prop | type | default | description | | -------------- | ----------------- | ------- | ---------------------------------------------------- | | `children` | `React.ReactNode` | - | Content to render | | `className` | `string` | - | Additional CSS classes | | `...TextProps` | `TextProps` | - | All standard React Native `Text` props are supported |