Text

Overview

The Text component is a fundamental UI element designed to display read-only text. It's versatile and can be used to show a single line of text or multiple lines, adapting to the layout constraints. This document provides detailed information on the data and style properties you can use to customize the Text component's appearance and behavior.

Sample JSON

Below is a sample JSON object demonstrating how to define a Text component with various data and style properties:

text.json

{
  "type": "text",
  "data": {
    "text": "Hello World"
  },
  "style": {
    "fontStyle": "heading1",
    "fontSize": 18,
    "fontColor": "ff0000",
    "fontColorDark": "FFC0CB",
    "fontWeight": "bold",
    "maxLines": 2,
    "padding": {
      "top": 0,
      "bottom": 0,
      "left": 10,
      "right": 10
    }
  }
}

This results in the following output:

Hello World

In this example, the Text component displays the text "Hello World" with the following style properties:

• Font style set to heading1.
• Font size set to 18 logical pixels.
• Font color set to red (ff0000) and pink (FFC0CB) in dark mode.
• Font weight set to bold.
• Maximum of 2 lines.
• Padding of 10 logical pixels on the left and right, and no padding on the top and bottom.

Data Properties

The data properties define the content of the Text component. The following table lists the available data properties for the Text component:

Property	Type	Required	Description
text	String	true	The text to display.

text

• Type: String (required)
• Description: The actual string of text you want to display in the Text component.

Style Properties (Optional)

Style properties allow you to customize the appearance of the Text component.

info

The style properties are optional. If you don't specify any style properties, the Text component will use the default values.

The following table lists the available style properties for the Text component:

Property	Type	Platform	Required	Description
fontStyle	String	android, iOS	false	The font style to use (e.g., "heading1").
fontSize	Float	android, iOS	false	The size of the font in logical pixels.
fontColor	String	android, iOS	false	The color of the text.
fontColorDark	String	android, iOS	false	The color of the text in dark mode.
fontWeight	String	android, iOS	false	The thickness of the font (e.g., "bold").
maxLines	Int	android, iOS	false	The maximum number of lines for the text to span.
padding	JSON	android, iOS	false	The padding around the text component.

fontStyle

• Type: String (optional)
• Description: Specifies the font style to use when painting the text. The value should be one of the following strings:
  • heading1
  • heading2
  • heading3
  • heading4
  • heading5
  • heading6
  • subtitle1
  • subtitle2
  • body1
  • body2
  • button
  • caption
  • overline

fontSize

• Type: Float (optional)
• Description: The size of the font in logical pixels. It determines how large the text will appear. The actual size of the text depends on the theme and the platform's typographic styles.

fontColor

• Type: String (optional)
• Description: Defines the color of the text. The value is usually in hexadecimal format (e.g., "ff0000" for red).

fontColorDark

• Type: String (optional)
• Description: Specifies the text color when the system is in dark mode. The value is usually in hexadecimal format (e.g., "ff0000" for red).

fontWeight

• Type: String (optional)
• Description: Determines the thickness of the font. The value should be one of the following strings:
  • ultraLight
  • thin
  • light
  • regular
  • medium
  • semibold
  • bold
  • heavy
  • black

maxLines

• Type: Int (optional)
• Description: Sets the maximum number of lines for the text. If the text exceeds this amount, it will be truncated.

padding

• Type: JSON (optional)
• Description: Defines the space around the component. The padding is specified for top, bottom, left, and right individually. Each subproperty is an integer representing the number of logical pixels for the padding.
  • top: The space above the component.
  • bottom: The space below the component.
  • left: The space to the left of the component.
  • right: The space to the right of the component.

note

The actual appearance of the text depends on the theme and the platform's typographic styles.