Comment on page

Text

This component displays basic text. Its children must be a string literal or a series of children that are either Text components or View components with a fixed height and width.

Styles
Flexbox Styles
View Styles
Transform Styles
​
Props
Name
Type
Description
allowFontScaling
boolean
Should fonts be scaled according to system setting?
Android and ios only
ellipsizeMode
'head' | 'middle' | 'tail'
When numberOfLines is set, this prop defines how text will be truncated.
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..." 
Android and ios only
id
string
Specifies a unique id for an HTML element
NOTE: This property may be going away in future versions
Web only 
importantForAccessibility
ImportantForAccessibility
Expose the element and/or its children as accessible to Screen readers
accessibilityId
string
It is hard or impossible to tell by a reference to an instance of a component from where this component has been instantiated. 
You can assign this property and check instance.props.accessibilityId
For example accessibilityId is used in View's FocusArbitrator callback
autoFocus
boolean
Should be focused when the component is mounted, see also View's arbitrateFocus property
WARNING: autoFocus=true means that this Text's requestFocus() method will be called, however calling requestFocus() for Text might make sense only on mobile for the accessibility reasons, on web it has no effect, the application has to handle this either while setting this property or in the View's FocusArbitrator callback
numberOfLines
number
For non-zero values, truncates with ellipsis if necessary. 
Web platform doesn't support values greater than 1
Web platform may also not truncate properly if text contains line breaks, so it may be necessary to replace line breaks before rendering.
onPress?
(e: SyntheticEvent) => void
Mouse & Touch Events
selectable
boolean
Is the text selectable (affects mouse pointer and copy command)
style
TextStyleRuleSet | TextStyleRuleSet[]
See below for supported styles
testId
string
ID that can be used to identify the instantiated element for testing purposes

Components - Previous

Button

Next - Components

TextInput

Last modified 3yr ago

Name	Type	Description
allowFontScaling	`boolean`	Should fonts be scaled according to system setting? Android and ios only
ellipsizeMode	`'head' \| 'middle' \| 'tail'`	When numberOfLines is set, this prop defines how text will be truncated. 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..." Android and ios only
id	`string`	Specifies a unique id for an HTML element NOTE: This property may be going away in future versions Web only
importantForAccessibility	`ImportantForAccessibility`	Expose the element and/or its children as accessible to Screen readers
accessibilityId	`string`	It is hard or impossible to tell by a reference to an instance of a component from where this component has been instantiated. You can assign this property and check instance.props.accessibilityId For example accessibilityId is used in View's FocusArbitrator callback
autoFocus	`boolean`	Should be focused when the component is mounted, see also View's arbitrateFocus property WARNING: autoFocus=true means that this Text's requestFocus() method will be called, however calling requestFocus() for Text might make sense only on mobile for the accessibility reasons, on web it has no effect, the application has to handle this either while setting this property or in the View's FocusArbitrator callback
numberOfLines	`number`	For non-zero values, truncates with ellipsis if necessary. Web platform doesn't support values greater than 1 Web platform may also not truncate properly if text contains line breaks, so it may be necessary to replace line breaks before rendering.
onPress?	`(e: SyntheticEvent) => void`	Mouse & Touch Events
selectable	`boolean`	Is the text selectable (affects mouse pointer and copy command)
style	`TextStyleRuleSet \| TextStyleRuleSet[]`	See below for supported styles
testId	`string`	ID that can be used to identify the instantiated element for testing purposes