Text
The type scale, and the one component that reproduces React Native's text inheritance through classNames.
Installation
Text ships with the library — install it once, then import:
import { Text } from "@delacour/react-native-ui/text";Or copy the source into your project, to own and edit it:
bunx delacour@latest add textUsage
import { Text } from "@/components/ui/text";
import { View } from "react-native";
export default function Example() {
return (
<View className="flex-1 justify-center gap-2 p-4">
<Text.Title>Settings</Text.Title>
<Text.Paragraph>Manage how the app behaves on this device.</Text.Paragraph>
</View>
);
}Presets
Eight block presets, largest first, and four inline ones that emit only a delta.
<Text.Display>Display</Text.Display>
<Text.Title>Title</Text.Title>
<Text.Header>Header</Text.Header>
<Text.Subheader>Subheader</Text.Subheader>
<Text.Paragraph>Paragraph</Text.Paragraph>
<Text.Label>Label</Text.Label>
<Text.Caption>Caption</Text.Caption>
<Text.Overline>Overline</Text.Overline>
<Text.Paragraph>
Inline: <Text.Strong>strong</Text.Strong>, <Text.Emphasis>emphasis</Text.Emphasis>,{" "}
<Text.Link>link</Text.Link>, <Text.Code>code</Text.Code>.
</Text.Paragraph>A nested Text.Code cannot be padded
A nested <Text> is laid out by the platform's text engine — an NSAttributedString run on iOS, a
Span on Android — and both ignore padding, margin and border radius on an inner <Text>. Only the
background survives. The pill treatment applies to the standalone case only; a code block is a
View you wrap around it.
Inheritance
Every Text publishes its resolved class to its subtree, and merges the one it inherited.
<Text.Paragraph>
Sign in with <Text.Strong>your work account</Text.Strong> to continue.
</Text.Paragraph>Text.Strong comes out at the paragraph's size and colour with only the weight changed. A Button
publishes its label's treatment the same way, so a bare <Text> composed into one needs nothing at
the call site.
Axes
<Text size="lg" weight="semibold" color="muted" align="center" transform="uppercase">
Heads up
</Text>Each axis beats the variant's own value and anything inherited; omit an axis and it falls through to the enclosing text.
An arbitrary font size must be a length
Write text-[17px] or text-(length:--x). A bare text-[var(--x)] is ambiguous to tailwind-merge,
which files it under colour — so it will not override the inherited size.
Colour
color is page-level only. Text on a coloured surface writes the utility in a className, because
that mapping belongs to the surface.
<Text color="destructive">Could not save</Text>Truncation
<Text.Paragraph numberOfLines={2}>{body}</Text.Paragraph>Font scaling
allowFontScaling is left at React Native's default, and maxFontSizeMultiplier defaults to
TEXT_MAX_FONT_SIZE_MULTIPLIER so a label cannot outgrow the fixed-height chrome around it.
<Text allowFontScaling={false}>Fixed</Text>
<Text maxFontSizeMultiplier={2}>Room to grow</Text>API Reference
Presets
Prop
Type
TextProps
Animated.Text's props, minus className, plus:
Prop
Type
useTextClass()
Returns the resolved class of the nearest enclosing Text or TextClassProvider.
Prop
Type
Exports
import {
TEXT_VARIANTS,
TEXT_INLINE_VARIANTS,
TEXT_SIZES,
TEXT_WEIGHTS,
TEXT_COLORS,
TEXT_ALIGNS,
TEXT_TRANSFORMS,
TEXT_BASE_CLASS,
TEXT_MAX_FONT_SIZE_MULTIPLIER,
TextClassProvider,
useTextClass,
textVariants,
resolveTextClass,
canNestText,
isInlineTextVariant,
} from "@delacour/react-native-ui/text";