Text
Text from the Native package.
Runtime classification
No web preview is provided. Requires the React Native runtime and native primitives, which cannot execute inside the DOM documentation canvas.
Import
1•import { Text } from "@dotnaos/ui/native";
Properties
Public properties derived from the component’s TypeScript signature.
| Property | Type | Default |
|---|---|---|
colorOptional | "text" | "muted" | "accent" | "danger" | "warning" | "success" | "inverted" | "text" |
monoOptional | boolean | false |
sizeOptional | "s" | "m" | "l" | "m" |
styleOptional | StyleProp<TextStyle> | — |
textRequired | string | — |
disabledOptionalSpecifies the disabled state of the text view for testing purposes. | boolean | — |
idOptionalUsed to reference react managed views from native code. | string | — |
roleOptionalIndicates to accessibility services to treat UI component like a specific role. | Role | — |
aria-busyOptionalalias for accessibilityState
see https://reactnative.dev/docs/accessibility#accessibilitystate | boolean | — |
aria-checkedOptional | false | true | "mixed" | — |
aria-disabledOptional | boolean | — |
aria-expandedOptional | boolean | — |
aria-hiddenOptionalA value indicating whether the accessibility elements contained within
this accessibility element are hidden. | boolean | — |
aria-labelOptionalAlias for accessibilityLabel https://reactnative.dev/docs/view#accessibilitylabel
https://github.com/facebook/react-native/issues/34424 | string | — |
aria-labelledbyOptionalIdentifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props,
the text is read aloud. The value should should match the nativeID of the related element. | string | — |
aria-liveOptionalIndicates to accessibility services whether the user should be notified
when this view changes. Works for Android API >= 19 only. | "off" | "assertive" | "polite" | — |
aria-modalOptional | boolean | — |
aria-selectedOptional | boolean | — |
aria-valuemaxOptional | number | — |
aria-valueminOptional | number | — |
aria-valuenowOptional | number | — |
aria-valuetextOptional | string | — |
accessibilityLabelOptionalOverrides the text that's read by the screen reader when the user interacts with the element. By default, the
label is constructed by traversing all the children and accumulating all the Text nodes separated by space. | string | — |
pointerEventsOptionalControls how touch events are handled. Similar to `View`'s `pointerEvents`. | "auto" | "none" | "box-none" | "box-only" | — |
onPressOptionalThis function is called on press.
Text intrinsically supports press handling with a default highlight state (which can be disabled with suppressHighlighting). | ((event: GestureResponderEvent) => void) | — |
onLayoutOptionalInvoked on mount and layout changes with
{nativeEvent: { layout: {x, y, width, height}}}. | ((event: LayoutChangeEvent) => void) | — |
testIDOptionalUsed to locate this view in end-to-end tests. | string | — |
nativeIDOptionalUsed to reference react managed views from native code. | string | — |
accessibleOptionalWhen true, indicates that the view is an accessibility element.
By default, all the touchable elements are accessible. | boolean | — |
accessibilityActionsOptionalProvides an array of custom actions available for accessibility. | readonly Readonly<{ name: AccessibilityActionName | string; label?: string | undefined; }>[] | — |
accessibilityRoleOptionalAccessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on. | AccessibilityRole | — |
accessibilityStateOptionalAccessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element currently focused on. | AccessibilityState | — |
accessibilityHintOptionalAn accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not obvious from the accessibility label. | string | — |
accessibilityValueOptionalRepresents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars,
it contains range information (minimum, current, and maximum). | AccessibilityValue | — |
onAccessibilityActionOptionalWhen `accessible` is true, the system will try to invoke this function when the user performs an accessibility custom action. | ((event: AccessibilityActionEvent) => void) | — |
importantForAccessibilityOptional[Android] Controlling if a view fires accessibility events and if it is reported to accessibility services. | "auto" | "yes" | "no" | "no-hide-descendants" | — |
accessibilityLabelledByOptionalIdentifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props,
the text is read aloud. The value should should match the nativeID of the related element. | string | string[] | — |
accessibilityLiveRegionOptionalIndicates to accessibility services whether the user should be notified
when this view changes. Works for Android API >= 19 only. | "none" | "assertive" | "polite" | — |
screenReaderFocusableOptionalEnables the view to be screen reader focusable, not keyboard focusable. | boolean | — |
accessibilityElementsHiddenOptionalA Boolean value indicating whether the accessibility elements contained within this accessibility element
are hidden to the screen reader. | boolean | — |
accessibilityViewIsModalOptionalA Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. | boolean | — |
onAccessibilityEscapeOptionalWhen accessible is true, the system will invoke this function when the user performs the escape gesture (scrub with two fingers). | (() => void) | — |
onAccessibilityTapOptionalWhen `accessible` is true, the system will try to invoke this function when the user performs accessibility tap gesture. | (() => void) | — |
onMagicTapOptionalWhen accessible is true, the system will invoke this function when the user performs the magic tap gesture. | (() => void) | — |
accessibilityIgnoresInvertColorsOptionalhttps://reactnative.dev/docs/accessibility#accessibilityignoresinvertcolorsios | boolean | — |
accessibilityLanguageOptionalBy using the accessibilityLanguage property, the screen reader will understand which language to use while reading the element's label, value and hint. The provided string value must follow the BCP 47 specification (https://www.rfc-editor.org/info/bcp47).
https://reactnative.dev/docs/accessibility#accessibilitylanguage-ios | string | — |
accessibilityShowsLargeContentViewerOptionalA Boolean value that indicates whether or not to show the item in the large content viewer.
Available on iOS 13.0+
https://reactnative.dev/docs/accessibility#accessibilityshowslargecontentviewer | boolean | — |
accessibilityLargeContentTitleOptionalWhen `accessibilityShowsLargeContentViewer` is set, this string will be used as title for the large content viewer.
https://reactnative.dev/docs/accessibility#accessibilitylargecontenttitle | string | — |
accessibilityRespondsToUserInteractionOptionalBlocks the user from interacting with the component through keyboard while still allowing
screen reader to interact with it if this View is still accessible. | boolean | — |
onPressInOptional | ((event: GestureResponderEvent) => void) | — |
onPressOutOptional | ((event: GestureResponderEvent) => void) | — |
onLongPressOptionalThis function is called on long press.
e.g., `onLongPress={this.increaseSize}>` | ((event: GestureResponderEvent) => void) | — |
pressRetentionOffsetOptionalDefines how far your touch may move off of the button, before deactivating the button. | { top: number; left: number; bottom: number; right: number; } | — |
allowFontScalingOptionalSpecifies whether fonts should scale to respect Text Size accessibility settings.
The default is `true`. | boolean | — |
ellipsizeModeOptionalThis can be one of the following values:
- `head` - The line is displayed so that the end fits in the container and the missing text
at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz"
- `middle` - The line is displayed so that the beginning and end fit in the container and the
missing text in the middle is indicated by an ellipsis glyph. "ab...yz"
- `tail` - The line is displayed so that the beginning fits in the container and the
missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."
- `clip` - Lines are not drawn past the edge of the text container.
The default is `tail`.
`numberOfLines` must be set in conjunction with this prop.
> `clip` is working only for iOS | "head" | "clip" | "middle" | "tail" | — |
lineBreakModeOptionalLine Break mode. Works only with numberOfLines.
clip is working only for iOS | "head" | "clip" | "middle" | "tail" | — |
numberOfLinesOptionalUsed to truncate the text with an ellipsis after computing the text
layout, including line wrapping, such that the total number of lines
does not exceed this number.
This prop is commonly used with `ellipsizeMode`. | number | — |
onTextLayoutOptionalInvoked on Text layout | ((event: TextLayoutEvent) => void) | — |
maxFontSizeMultiplierOptionalSpecifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values:
- null/undefined (default): inherit from the parent node or the global default (0)
- 0: no max, ignore parent/global default
- >= 1: sets the maxFontSizeMultiplier of this node to this value | number | null | — |
minimumFontScaleOptionalSpecifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0). | number | — |
adjustsFontSizeToFitOptionalSpecifies whether font should be scaled down automatically to fit given style constraints. | boolean | — |
dynamicTypeRampOptionalThe Dynamic Type scale ramp to apply to this element on iOS. | "body" | "caption2" | "caption1" | "footnote" | "subheadline" | "callout" | "headline" | "title3" | "title2" | "title1" | "largeTitle" | — |
suppressHighlightingOptionalWhen `true`, no visual change is made when text is pressed down. By
default, a gray oval highlights the text on press down. | boolean | — |
lineBreakStrategyIOSOptionalSet line break strategy on iOS. | "none" | "standard" | "hangul-word" | "push-out" | — |
selectableOptionalLets the user select text, to use the native copy and paste functionality. | boolean | — |
selectionColorOptionalThe highlight color of the text. | ColorValue | — |
textBreakStrategyOptionalSet text break strategy on Android API Level 23+
default is `highQuality`. | "simple" | "highQuality" | "balanced" | — |
dataDetectorTypeOptionalDetermines the types of data converted to clickable URLs in the text element.
By default no data types are detected. | "link" | "none" | "email" | "all" | "phoneNumber" | null | — |
android_hyphenationFrequencyOptionalHyphenation strategy | "full" | "none" | "normal" | — |