Text

The fundamental text primitive.

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. Accessibility props map directly to WAI-ARIA properties (excluding properties and values that are deprecated, redundant, or to be avoided).

import { Text } from 'react-gui/text';

<Text {...props} />

API #

Props #

accessibilityActiveDescendant ?string

Equivalent to aria-activedescendant.

accessibilityAtomic ?boolean

Equivalent to aria-atomic.

accessibilityAutoComplete ?string

Equivalent to aria-autocomplete.

accessibilityBusy ?boolean

Equivalent to aria-busy.

accessibilityChecked ?(boolean | "mixed")

Equivalent to aria-checked.

accessibilityColumnCount ?number

Equivalent to aria-colcount.

accessibilityColumnIndex ?number

Equivalent to aria-colindex.

accessibilityColumnSpan ?number

Equivalent to aria-colspan.

accessibilityControls ?string

Equivalent to aria-controls.

accessibilityDescribedBy ?string

Equivalent to aria-describedby.

accessibilityDetails ?string

Equivalent to aria-details.

accessibilityDisabled ?boolean

Equivalent to aria-disabled.

accessibilityErrorMessage ?string

Equivalent to aria-errormessage.

accessibilityExpanded ?boolean

Equivalent to aria-expanded.

accessibilityFlowTo ?string

Equivalent to aria-flowto.

accessibilityHasPopup ?string

Equivalent to aria-haspopup.

accessibilityHidden ?boolean

Equivalent to aria-hidden.

accessibilityInvalid ?boolean

Equivalent to aria-invalid.

accessibilityKeyShortcuts ?Array<string>

Equivalent to aria-keyshortcuts.

accessibilityLabel ?string

Equivalent to aria-label.

accessibilityLabelledBy ?string

Equivalent to aria-labelledby.

accessibilityLevel ?number

Equivalent to aria-level.

accessibilityLiveRegion ?("assertive" | "off" | "polite")

Equivalent to aria-live.

accessibilityModal ?boolean

Equivalent to aria-modal.

accessibilityMultiline ?boolean

Equivalent to aria-multiline.

accessibilityMultiSelectable ?boolean

Equivalent to aria-multiselectable.

accessibilityOrientation ?("horizontal" | "vertical")

Equivalent to aria-orientation.

accessibilityOwns ?string

Equivalent to aria-owns.

accessibilityPlaceholder ?string

Equivalent to aria-placeholder.

accessibilityPosInSet ?number

Equivalent to aria-posinset.

accessibilityPressed ?boolean

Equivalent to aria-pressed.

accessibilityReadOnly ?boolean

Equivalent to aria-readonly.

accessibilityRequired ?boolean

Equivalent to aria-required.

accessibilityRole ?boolean

Equivalent to role.

accessibilityRoleDescription ?string

Equivalent to aria-roledescription.

accessibilityRowCount ?number

Equivalent to aria-rowcount.

accessibilityRowIndex ?number

Equivalent to aria-rowindex.

accessibilityRowSpan ?number

Equivalent to aria-rowspan.

accessibilitySelected ?boolean

Equivalent to aria-selected.

accessibilitySetSize ?number

Equivalent to aria-setsize.

accessibilitySort ?("ascending" | "descending" | "none" | "other")

Equivalent to aria-sort.

accessibilityValueMax ?number

Equivalent to aria-valuemax.

accessibilityValueMin ?number

Equivalent to aria-valuemin.

accessibilityValueNow ?number

Equivalent to aria-valuenow.

accessibilityValueText ?string

Equivalent to aria-valuetext.

children any

The children of a Text element can be strings as well as other elements like <View /> and <Image />.

dataSet ?Object

Equivalent to HTMLElement.dataset.

direction ?("auto" | "ltr" | "rtl")

Equivalent to HTMLElement.dir

focusable ?boolean

Set whether the view can receive keyboard focus.

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.

lang ?string

Equivalent to HTMLElement.lang.

nativeID ?string

Equivalent to HTMLElement.id.

style ?Style

Set the styles of the view.

testID ?string

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

Style #

Did you know? Styling text in React GUI uses stricter rules than you might be used to working on the web. Read the Styling guide to learn more.


Details #

By default, the native writing direction is set to "auto" and uses the browser’s built-in writing direction algorithm.

Nested text. Nested view/image.

How text styling inheritance works.

Render down to strings if no props or refs.

Updated
Edit
React GUICopyright © Facebook Inc.