Text

The fundamental text primitive. Text inherits typographic styles from ancestor Text elements.

Text has built in accessibility controls, enforces inline layout by default, provides limited inheritance of text styles, and supports View as children. It inherits typographic styles from ancestor Text elements (as long as the chain of text elements is not interrupted by a View). By default, text is rendered using the native platform’s algorithm to determine the directionality of the content language.

import { Text } from 'react-native';

<Text {...props}>{children}</Text>;

Did you know? Text styling in React Native Web has stricter rules than it does on the web. Read the Styling guide to learn more.

API

Props

...AccessibilityProps

The accessibility props.

...PointerProps

The PointerEvent props.

...FocusProps

The FocusEvent props.

...KeyboardProps

The KeyboardEvent props.

...ResponderProps

The ResponderEvent props.

children any

The children of a Text element can be strings as well as other elements like <View /> and <Image />. Nested text components will inherit the typographic styles of their parents.

dataSet ?Object

Equivalent to HTMLElement.dataset.

dir ?("auto" | "ltr" | "rtl") = "auto"

Equivalent to HTMLElement.dir. The default value of "auto" is not set on nested text elements.

href ?string

If href is defined, the view is rendered as an anchor tag pointing to this URL.

hrefAttrs ?Object

If href is defined, this prop defines related attributes to include on the anchor (e.g., download, rel, target) which may modify its behavior.

id ?string

Equivalent to HTMLElement.id.

lang ?string

Equivalent to HTMLElement.lang. This prop is used to infer writing direction if no dir is set.

numberOfLines ?number

Truncates the text with an ellipsis after this many lines.

onLayout ?({ nativeEvent: { layout: { x, y, width, height } } }) => void

This is invoked when a component is mounted and when its layout changes. x and y are the offsets from the parent node.

style ?Style

Set the styles of the text. Text supports typographic styles in addition to those of View.

tabIndex 0 | -1

Set whether the view can receive keyboard focus.

testID ?string

Set the test selector label (via data-testid).

Examples

  For TV Examples: LRUD navigation is already enabled in this sandbox. Use your keyboard arrow keys to move focus.