Text Style Props

Example

TypeScript

JavaScript

Reference

Props

color

Type
color

---

fontFamily

Type
string

The generic font families system-ui, ui-sans-serif, ui-serif, ui-monospace, and ui-rounded are supported on iOS.

---

fontSize

Type
number

---

fontStyle

Type
enum('normal', 'italic')

---

fontWeight

Specifies font weight. The values 'normal' and 'bold' are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen.

Type	Default
enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') or number	'normal'

---

includeFontPadding

Android

Set to false to remove extra font padding intended to make space for certain ascenders / descenders. With some fonts, this padding can make text look slightly misaligned when centered vertically. For best results also set textAlignVertical to center.

Type	Default
bool	true

---

fontVariant

Allows you to set all the font variants for a font. Can be set by using an array of enums or a space-separated string e.g. 'small-caps common-ligatures'.

Type	Default
array of enum('small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums') or string	[]

---

fontVariationSettings

Configures variation axes for a variable font. Each axis is identified by a four-character OpenType tag, such as wght for weight, wdth for width, opsz for optical size, or a custom axis supported by the font. Settings can be provided as an object or as a CSS-compatible string.

The object and string forms below are equivalent; both set the wght axis to 500:

React TSX

<Text
  style={{
    fontVariationSettings: {wght: 500},
    // Equivalent CSS-compatible string:
    fontVariationSettings: "'wght' 500",
  }}>
  Variable font
</Text>

For more information about variation axes and the CSS string syntax, see MDN's font-variation-settings (https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings) documentation.

Type
string or object: {[axis: string]: number}

---

letterSpacing

Increase or decrease the spacing between characters. By default there is no extra letter spacing.

Type
number

---

lineHeight

Numeric value that controls the vertical spacing between lines of text within a text element. It specifies the distance between the baselines of consecutive lines of text.

Type
number

---

textAlign

Specifies text alignment. On Android, the value 'justify' is only supported on Oreo (8.0) or above (API level >= 26). The value will fallback to left on lower Android versions.

Type	Default
enum('auto', 'left', 'right', 'center', 'justify')	'auto'

---

textAlignVertical

Android

An alias for verticalAlign style prop, if you use both properties, verticalAlign will take precedence over textAlignVertical

Type	Default
enum('auto', 'top', 'bottom', 'center')	'auto'

---

textDecorationColor

iOS

Type
color

---

textDecorationLine

Type	Default
enum('none', 'underline', 'line-through', 'underline line-through')	'none'

---

textDecorationStyle

iOS

Type	Default
enum('solid', 'double', 'dotted', 'dashed')	'solid'

---

textShadowColor

Type
color

---

textShadowOffset

Type
object: {width?: number, height?: number}

---

textShadowRadius

Type
number

---

textTransform

Type	Default
enum('none', 'uppercase', 'lowercase', 'capitalize')	'none'

---

verticalAlign

Android

Type	Default
enum('auto', 'top', 'bottom', 'middle')	'auto'

---

writingDirection

iOS

Type	Default
enum('auto', 'ltr', 'rtl')	'auto'

---

userSelect

It allows the user to select text and to use the native copy and paste functionality. Has precedence over the selectable prop.

Type	Default
enum('auto', 'text', 'none', 'contain', 'all')	none