Text

Text displays words and characters of various sizes.

Import

import { Text } from '@rn-vui/themed';

Theme Key

Text

Usage

Icon

<Stack>
  <Text h1>Heading 1</Text>
  <Text h2>Heading 2</Text>
  <Text h3>Heading 3</Text>
  <Text h4>Heading 4</Text>
</Stack>

Using font-weight on android

note

For Android the font. weights MUST align with the used font. So try out which is the regarding font weight to your used font.

    h1Style: {
      fontFamily: 'Nunito-SemiBold',
      fontWeight: '300',
    },
    h2Style: {
      fontFamily: 'Nunito-Regular',
      fontWeight: '100',
    },
    h3Style: {
      fontFamily: 'Nunito-Bold',
      fontWeight: '500',
    },

Props

Name	Type	Default	Description
h1	boolean	false	Text with Font size 40.
h1Style	Text Style	{}	Styling when h1 is set.
h2	boolean	false	Text with Font size 34.
h2Style	Text Style	{}	Styling when h2 is set.
h3	boolean	false	Text with Font size 28.
h3Style	Text Style	{}	Styling when h3 is set.
h4	boolean	false	Text with Font size 22.
h4Style	Text Style	{}	Styling when h4 is set.
style	Text Style	{}	Add additional styling for Text.

Playground

Loading...