Text

color: Color

Text color

<text>Normal</text>
<text style={{ color: 'red' }}>Red</text>
<text style={{ color: '#38e' }}>Hex code in short notation</text>
<text style={{ color: '#3388ee' }}>Hex code in long notation</text>
<text style={{ color: 'rgb(128, 100, 88)' }}>RGB</text>
<text style={{ color: 'rgb(128, 100, 88, 0.5)' }}>RGB with transparency</text>

fontFamily: string

Font family name. You can specify a custom font that has been pre-configured through chatiumrc.

Example values: "serif" "sans" "mono" ...font name

<text>default</text>
<text style={{ fontFamily: 'sans' }}>sans</text>
<text style={{ fontFamily: 'serif' }}>serif</text>
<text style={{ fontFamily: 'mono' }}>mono</text>

fontSize: number | StandardFontSize

Font size. Custom or predefined. Possible values: number, "xs", "sm", "md", "lg", "xl", "2xl", "3xl"

<text style={{ fontSize: 50 }}>50</text>
<text style={{ fontSize: 40 }}>40</text>
<text style={{ fontSize: '3xl' }}>3xl</text>
<text style={{ fontSize: '2xl' }}>2xl</text>
<text style={{ fontSize: 'xl' }}>xl</text>
<text style={{ fontSize: 'lg' }}>lg</text>
<text style={{ fontSize: 'md' }}>md</text>
<text style={{ fontSize: 'sm' }}>sm</text>
<text style={{ fontSize: 'xs' }}>xs</text>

fontStyle

Ability to set the font to italic.

Possible values: normal | italic

<text>default</text>
<text style={{ fontStyle: 'normal' }}>normal</text>
<text style={{ fontStyle: 'italic' }}>italic</text>

fontWeight

Font weight.

Possible values: normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900

<text style={{ fontWeight: 'normal' }}>normal</text>
<text style={{ fontWeight: 'bold' }}>bold</text>
<text style={{ fontWeight: '100' }}>100</text>
<text style={{ fontWeight: '200' }}>200</text>
<text style={{ fontWeight: '300' }}>300</text>
<text style={{ fontWeight: '400' }}>400</text>
<text style={{ fontWeight: '500' }}>500</text>
<text style={{ fontWeight: '600' }}>600</text>
<text style={{ fontWeight: '700' }}>700</text>
<text style={{ fontWeight: '800' }}>800</text>
<text style={{ fontWeight: '900' }}>900</text>

fontVariant

normal  — normal font.

tabular-nums  — a font property where all digits become the same width.

<text style={{ fontVariant: [ 'tabular-nums' ] }}>1234567890, tabular-nums</text>

letterSpacing: "normal" | number

Letter spacing of the font.

<text style={{ letterSpacing: 'normal' }}>Example letter spacing: normal</text>
<text style={{ letterSpacing: 1.5 }}>Example letter spacing: 1.5</text>
<text style={{ letterSpacing: 2 }}>Example letter spacing: 2</text>

lineClamp: number

Limits the height of the text by the number of lines. Excess text is cut off according to the textOverflow property.

<text style={{ lineClamp: 3 }}>
  Example{'\n'}
  line{'\n'}
  clamp{'\n'}
  this text is the fourth line and will not be displayed
</text>

lineHeight: "normal" | number

Sets the amount of space allocated for one line of text in height.

<text style={{ fontSize: 16 }}>
  Example lineHeight{'\n'}
  default
</text>

<text style={{ fontSize: 16, lineHeight: 32 }}>
  Example lineHeight{'\n'}
  twice the font size
</text>

<text style={{ fontSize: 16, lineHeight: 100, lineClamp: 1 }}>
  Example lineHeight for setting block height and centering single-line text.
</text>

textAlign

Default: auto

Sets the principle of text alignment. The value auto will align the text based on the individual properties of the blocks align and alignItems, where applicable.

Possible values: auto, left, center, right, justify

textAlignVertical

Default: top

Vertical alignment of text within the container.

Possible values: top, center, bottom

textDecorationLine

Adds underline or strikethrough to the text.

Possible values: none, underline, line-through, underline line-through

textOverflow

Method of truncating text when it exceeds the boundaries of the container.

Possible values: clip, ellipsis

ellipsis — text is truncated with an ellipsis.

clip — text is truncated at the container's edge. Works only in conjunction with the lineClamp: 1 property. In other cases, text is truncated in the style of ellipsis.

textShadowColor: Color

Text shadow color. To make the shadow visible, you must also set either textShadowOffset or textShadowRadius.

<text style={{ textShadowColor: 'red', textShadowOffset: { width: 2, height: 2 } }} >
  This text has a red shadow
</text>

<text style={{ textShadowColor: '#38e', textShadowOffset: { width: 2, height: 2 } }} >
  This text has shadow color in short hex notation
</text>

<text style={{ textShadowColor: '#3388ee', textShadowOffset: { width: 2, height: 2 } }} >
  This text has shadow color in long hex notation
</text>

<text style={{ textShadowColor: 'rgb(128, 100, 88)', textShadowOffset: { width: 2, height: 2 } }} >
  This text has shadow color in rgb
</text>

<text style={{ textShadowColor: 'rgb(128, 100, 88, 0.5)', textShadowOffset: { width: 2, height: 2 } }} >
  This text has shadow color in rgb with transparency
</text>

textShadowOffset: { width, height }

Shadow offset horizontally and vertically.

width: number

height: number

<text style={{ textShadowColor: 'lightgrey', textShadowOffset: { width: 3, height: 3 } }} >
  Shadow offset width = 3 and height = 3.
</text>

<text style={{ textShadowColor: 'lightgrey', textShadowOffset: { width: -5, height: -2 }, marginTop: 10 }} >
  Shadow offset with negative values width = -5 and height = -2.
</text>

textShadowRadius: number

Depth of shadow blur in pixels.

<text style={{ textShadowRadius: 3 }} >
  Example with textShadowRadius = 3 without shadow offset.
</text>

<text style={{ textShadowOffset: { width: 3, height: 3 }, textShadowRadius: 3, marginTop: 10 }} >
  Example with textShadowRadius = 3 and shadow offset width = 3 and height = 3.
</text>

<text style={{ textShadowColor: 'grey', textShadowOffset: { width: 3, height: 3 }, textShadowRadius: 3, marginTop: 10 }} >
  Example with textShadowRadius = 3, offset, and shadow color specified.
</text>

textTransform

Text transformation upon display.

none  — no transformation

uppercase  — convert all to uppercase.

lowercase — convert all to lowercase.

capitalize  — capitalize the first letters of each word.

<text>iNcoRrect cAsE tExt</text>

<text style={{ marginTop: 10 }}>textTransform = 'capitalize':</text>
<text style={{ textTransform: 'capitalize' }}>iNcoRrect cAsE tExt</text>

<text style={{ marginTop: 10 }}>textTransform = 'uppercase':</text>
<text style={{ textTransform: 'uppercase' }}>iNcoRrect cAsE tExt</text>

<text style={{ marginTop: 10 }}>textTransform = 'lowercase':</text>
<text style={{ textTransform: 'lowercase' }}>iNcoRrect cAsE tExt</text>