Typography

Typography components consist of several flavors of Text components with predefined styles. Available components are:

<Heading>...</Heading>
<Title>...</Title>
<Subtitle>...</Subtitle>
<Text>...</Text>
<Caption>...</Caption>

Title example

API

Props

  • Every component in this section supports every prop that the standard React Native Text component supports (eg. numberOfLines). You can see the full list of available props on React Native Text component documentation.

Style names

  • bold: Sets text to be bold
  • h-center: Centers the text horizontally
  • line-through: Defines a line through the text
  • multiline: Increases line-height to allow text to wrap
  • v-center: Works only in combination with multiline styleName. Applies additional top and bottom margins to compensate the unsupported textAlignVertical prop on iOS
  • secondary: Applies secondary styles as defined in theme

Examples

Heading

Heading example

JSX Declaration

<Heading>Mobile App Creator</Heading>

Title

Title example

JSX Declaration

<Title>MOBILE APP CREATOR</Title>

Subtitle

Subtitle example

JSX Declaration

<Subtitle>Mobile App Creator</Subtitle>

Text

Text example

JSX Declaration

<Text>Mobile App Creator</Text>

Caption

Caption example

JSX Declaration

<Caption>Mobile App Creator</Caption>