Text

Source

Theme Source

The Text component is a versatile tool for rendering typography within your application's interface. It is designed to handle a variety of text elements, such as headings and paragraphs. By default, it renders a React Native Text element.

Import

import { Text } from "pearl-ui";

Usage

The Text component can be used to display any text within your application. By default, the variant is set as "p3" in the default Pearl theme. Here's an example:

<Text>Hello, I am a Text component!</Text>

Text variants

The Text component comes with a variant prop that allows you to change the typography style. You can set the value to the keys available in PearlTheme.components.Text["variants"], which include "h1", "h2", and so on, as defined in the default theme.

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

Overriding Styles

The Text component supports a wide range of style props that can be used to override the pre-defined variant style in the theme. Any manual style props passed into the component will take precedence over the default component configuration.

// 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

Embed not loading? Click here

Accessibility

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

Component Properties

Supported Style Properties

The Text component supports the following style props:

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

Animation Properties

The Text component supports animation properties from the Moti library, enabling the creation of dynamic and interactive UI elements. The useMotiWithStyleProps hook from the Moti library is used to manage these animation properties.

Property	Type	Default	Description
from	object		Defines the starting state of the animation.
to	object		Defines the ending state of the animation.
transition	object		Specifies the type of transition that the animation will use.
exitTransition	object		Determines the transition type that will be used when the component is unmounted. By default, exit uses transition to configure its animations, so this prop is not required. However, if you pass exitTransition, it will override transition for exit animations.
state	object		Manages the overall state of the animation, including the from and to states.
delay	number		Manage the delay for the animate field. (Use the transition prop for more granular control)
onDidAnimate	() => void		Callback function called after finishing an animation.
stylePriority	"state" | "animate"	"animate"	This is not a prop you will likely find yourself using. If set to "animate", then styles passed from the animate prop will take precedent. Otherwise, if set to "state", then the state prop will take precedent for matching styles.
animateInitialState	boolean	false	If true, the from prop will be set to animate. This will be noticeable for some spring animations, and might make them jumpy on mount.

Additional Properties

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