Text

The Text component is the used to render the app typography, such as headings and paragraphs, within an interface. By default, it renders a React Native Text element.

Import

import { Text } from "pearl-ui";

Usage

// default variant is set as "p3" in the default Pearl theme<Text>Heya! I am displaying some text</Text>

Text variants

Use the variant prop to change the typography style of the Text component. You can set the value to the keys available in PearlTheme.components.Text["variants"], which are "h1", "h2", etc. in the default theme.

// variant="h1" refers to the value of `theme.components.Text["variants"]["h1"]`<Text variant="h1">This is a heading</Text>

Override Style

The Text component also supports a variety of style props which can be used to override the pre-defined variant style in the theme. Manual style props passed into the component have a higher precedance than the default component config.

// variant="p1" refers to the value of `theme.components.Text["variants"]["p1"]`// passing style prop color="primary.300" overrides the default component config value of color="neutral.50"<Text variant="btn1" color="primary.300">  This is a large button text</Text>

Example

Light

Embed not loading? Click here

Dark

Embed not loading? Click here

Accessibility

• Text has the role of text.
• Text has the label set as the text body.

Props

Supported style props

The Text component supports the following style props:

• color and backgroundColor
• typography
• layout
• opacity and visiblity
• margin and padding
• textShadow

Additional props

Name	Required	Type	Default	Description
size	false	PearlTheme.components.Text["sizes"]		Size variant to use as defined in the active theme.
variant	false	PearlTheme.components.Text["variants"]	"p1"	Typography variant to use as defined in the active theme.
scaleFontSize	false	boolean	true	Whether to slightly scale the font size based on the screen dimensions.

Default Component Config

export default {  baseStyle: {    color: {      light: "neutral.900",      dark: "neutral.50",    },    scaleFontSize: true,    letterSpacing: "m",  },  variants: {    h1: {      fontFamily: "heading",      fontWeight: "bold",      fontSize: "8xl",      lineHeight: "12xl",    },    h2: {      fontFamily: "heading",      fontWeight: "bold",      fontSize: "5xl",      lineHeight: "8xl",    },    t1: {      fontFamily: "heading",      fontWeight: "semibold",      fontSize: "2xl",      lineHeight: "7xl",    },    t2: {      fontFamily: "heading",      fontWeight: "semibold",      fontSize: "l",      lineHeight: "3xl",    },    st1: {      fontFamily: "heading",      fontWeight: "semibold",      fontSize: "m",      lineHeight: "2xl",    },    st2: {      fontFamily: "heading",      fontWeight: "semibold",      fontSize: "s",      lineHeight: "l",    },    p1: {      fontFamily: "body",      fontWeight: "normal",      fontSize: "m",      lineHeight: "xl",    },    p2: {      fontFamily: "body",      fontWeight: "normal",      fontSize: "s",      lineHeight: "l",    },    btn1: {      fontFamily: "body",      fontWeight: "medium",      fontSize: "m",      lineHeight: "2xl",    },    btn2: {      fontFamily: "body",      fontWeight: "medium",      fontSize: "s",      lineHeight: "l",    },    btn3: {      fontFamily: "body",      fontWeight: "medium",      fontSize: "xs",      lineHeight: "m",    },    btn4: {      fontFamily: "body",      fontWeight: "medium",      fontSize: "2xs",      lineHeight: "xs",    },    caption: {      fontFamily: "body",      fontWeight: "normal",      fontSize: "xs",      lineHeight: "m",    },  },  defaults: {    variant: "p1",  },};