Text

Enhance your app with gluestack-ui's Text component—an adaptable React Native text area with multiple styles, sizes, and formatting options for seamless UI design. This is an illustration of Text component.

Installation

Run the following command:

npx gluestack-ui@alpha add text

API Reference

To use this component in your project, include the following import statement in your file.

import { Text } from '@/components/ui/text';

export default () => <Text />;

Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

Text

Renders a <span /> on web and a Text on native.

Platform	Output
Web	<span />
Native	<Text />

Props

Text component is created using

Text

component from react-native on native and

span

html element on web. It accepts the following props:

Text

Name	Value	Default
isTruncated	true	false
bold	true	false
underline	true	false
strikeThrough	true	false
sub	true	false
italic	true	false
highlight	true	false
size	2xs \| xs \| sm \| md \| lg \| xl \| 2xl \| 3xl \| 4xl \| 5xl \| 6xl	md

Examples

The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.

Text Sizes

Text component comes in different sizes, such as

2xl

3xl

4xl

5xl

, and

6xl

allowing users to adjust the button size based on their design needs.

Text component also accepts some shorthands for basic quick styling.

Prop	Type	Default	Description
bold	boolean	false	Used to make the text bold.
isTruncated	boolean	false	If true, it will render an ellipsis when the text exceeds the width of the viewport or maxWidth set.
italic	boolean	false	Used to make the text italic.
underline	boolean	false	Used underline the text.
strikeThrough	boolean	false	A horizontal line through the center of the text.
highlight	boolean	false	Used to highlight the text with a yellow background.

Edit this page on GitHub