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
Copy link
On this page
Styles
Props