Skip to main content


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 { Text } from "pearl-ui";


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>



  • 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:

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.

fromobjectDefines the starting state of the animation.
toobjectDefines the ending state of the animation.
transitionobjectSpecifies the type of transition that the animation will use.
exitTransitionobjectDetermines 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.
stateobjectManages the overall state of the animation, including the from and to states.
delaynumberManage the delay for the animate field. (Use the transition prop for more granular control)
onDidAnimate() => voidCallback 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.
animateInitialStatebooleanfalseIf 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#

sizeNoPearlTheme.components.Text["sizes"]Size variant to use as defined in the active theme.
variantNoPearlTheme.components.Text["variants"]"p3"Typography variant to use as defined in the active theme.
scaleFontSizeNobooleantrueWhether to slightly scale the font size based on the screen dimensions.