import { Text } from '@uhg-abyss/mobile';

children

color

fontWeight

size

transform

textAlign

<Text>Enter message here</Text>

Set Global Text Font

One of the limitations of our library is the inability to install fonts into applications. Because of this, we have reserved a special token, $text, to be added in the createTheme function, which will add the font to all Heading components globally.

In the example below, the font 'UHCSans' is set as the text font and will now be applied to all Text components.

import { ThemeProvider, createTheme } from '@uhg-abyss/mobile';

const theme = createTheme('uhc', {
  theme: {
    fonts: {
      text: 'UHCSans',
    },
  },
});

const App = () => {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
};

Any individual Text component can override the font with the fontFamily prop.

Color

Use the color property to set the color of the text. The default is set to black.

Sizes

Use the size property to change the size of the text. The default is set to md which is 16px. The values for each size are represented by FontSize - LineHeight.

Font Weight

Use the fontWeight property to change the weight of the text.

Transform

Use the transform property to change the formatting of the text. Variants available include the default case, capitalize the first letter of each word, lowercase all letters, or uppercase all letters.

Text Align

Use the textAlign prop to change the alignment of the text. Options include left, center and right. Default is left.

Animated

Use the animated prop to use animation styles on the component. The default is set to false.

Nesting

Nested text components will inherit properties from the outer Text.

Text Props

Prop Name	Type	Default	Description
animated	boolean	false	Flag to enable component animation
children	string	-	The contents of the text component
color	string	-	Set the color of the text
fontFamily	string	-	Set the font family of text
fontWeight	string	regular	Set the font weight of text
size	number | string	-	Set the size of the text
textAlign	"left" | "center" | "right"	-	Specifies text alignment
transform	string	-	Reformat the text by changing whether letters are capitalized or not

Text Classes

Class Name	Description
abyss-text-root	Text root element

Search tokens

Text Tokens

Token Name	Value
text.color.text	#4B4D4F