Text

Component to display text, it's a wrapper around the Text component from react-native library.

Import

import { Text } from "react-native-ficus-ui";

Usage

Change font size

EDITABLE EXAMPLE

<Box>
  <Text fontSize="xs">Text size: xs</Text>
  <Text fontSize="sm">Text size: sm</Text>
  <Text fontSize="md">Text size: md</Text>
  <Text fontSize="lg">Text size: lg</Text>
  <Text fontSize="xl">Text size: xl</Text>
  <Text fontSize="2xl">Text size: 2xl</Text>
  <Text fontSize="3xl">Text size: 3xl</Text>
  <Text fontSize="4xl">Text size: 4xl</Text>
</Box>

Change font weight

EDITABLE EXAMPLE

<Text fontWeight="bold">Text in bold</Text>

Change font family

EDITABLE EXAMPLE

<Box>
  <Text
    fontSize="4xl"
    textTransform="uppercase"
    fontFamily="Inconsolata-Regular"
  >
    Text size: 4xl
  </Text>

  <Text
    mt="xl"
    fontSize="2xl"
    fontWeight="bold"
    fontFamily="Inconsolata-Regular"
  >
    when fontweight is other than 'normal', fontfamily will be ignored
    (Android limitation). so we decided to this: when fontfamily is
    defined, fontweight will be set to 'normal' (on all platforms). set
    a default font for each fontweight on theme.
  </Text>
</Box>

Props

Extends every BoxProps.

`color`

The color property (`color` style prop in StyleSheet).

Type	Required	Default
string	No

`fontSize`

The font size property (`fontSize` style prop in StyleSheet).

Type	Required	Default
string, number	No

`fontWeight`

The font weight style property (`fontWeight` style prop in StyleSheet).

Type	Required	Default
string	No

`textDecorLine`

The text decoration line style property (`textDecorationLine` style prop in StyleSheet).

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

`textDecorStyle`

The text decoration style property (`textDecorationStyle` style prop in StyleSheet).

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

`textDecorColor`

The text decoration color style property (`textDecorationColor` style prop in StyleSheet).

Type	Required	Default
string	No

`textAlign`

The text alignment property (`textAlignment` style prop in StyleSheet).

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

`textTransform`

The text transform property (`textTransform` style prop in StyleSheet).

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

`letterSpacing`

The letter spacing property (`letterSpacing` style prop in StyleSheet).

Type	Required	Default
number	No

Badge Image