Text

The Text component displays textual information in a number of optional styles and variants.

You can learn more about this component in the Working with Text article.

Also note that variants of the Text component are also mapped to HtmlTag components. See the variant section to check which variant maps to which HtmlTag.

Properties

ellipses (default: false)

This property indicates whether ellipses should be displayed when the text is cropped (true) or not (false).

<App>
  <VStack width="120px">
    <Text
      backgroundColor="cyan"
      color="black"
      maxLines="1"
      ellipses="false">
      Though this long text does is about to crop!
    </Text>
    <Text
      backgroundColor="cyan"
      color="black"
      maxLines="1">
      Though this long text does is about to crop!
    </Text>
  </VStack>
</App>

maxLines

This property determines the maximum number of lines the component can wrap to. If there is no space to display all the contents, the component displays up to as many lines as specified in this property. When the value is not defined, there is no limit on the displayed lines.

<App>
  <Text
    maxWidth="120px"
    backgroundColor="cyan"
    color="black"
    value="A long text that will likely overflow"
    maxLines="2" />
</App>

preserveLinebreaks (default: "false")

This property indicates if linebreaks should be preserved when displaying text.

<App>
  <HStack>
    <Text
      width="250px"
      backgroundColor="cyan"
      color="black"
      preserveLinebreaks="true"
      value="(preserve) This long text
      with several line breaks
              does not fit into a viewport with a 200-pixel width." />
    <Text
      width="250px"
      backgroundColor="cyan"
      color="black"
      value="(don't preserve) This long text
      with several line breaks
              does not fit into a viewport with a 200-pixel width." />
  </HStack>
</App>

Note: Remember to use the value property of the Text. Linebreaks are converted to spaces when nesting the text inside the Text component.

value

The text to be displayed. This value can also be set via nesting the text into the Text component.

<App>
  <Text value="An example text" />
  <Text>An example text</Text>
</App>

variant

An optional string value that provides named presets for text variants with a unique combination of font style, weight, size, color, and other parameters. If not defined, the text uses the current style of its context.

Available values:

HtmlTag Mappings

The table below indicates which Text variant maps to which HtmlTag component.

Events

This component does not have any events.

Exposed Methods

This component does not expose any methods.

Styling

The Text component uses these theme variables:

• verticalAlign
• borderRadius
• color
• backgroundColor
• borderColor
• textDecorationColor
• fontFamily
• fontSize
• fontWeight
• fontStyle
• fontStretch
• letterSpacing
• textDecorationLine
• lineHeight
• textUnderlineOffset
• paddingHorizontal
• paddingVertical
• borderStyle
• textDecorationStyle
• borderWidth
• textDecorationThickness
• transform

You must combine these property names with Text and the variant's name. For example, you can set a light green background for the abbr variant and add some horizontal padding with the following theme variables:

"backgroundColor-Text-abbr": "lightgreen",
"paddingHorizontal-Text-abbr": "8px"

Theme Variables