Text

RSC

A text component that supports paragraphs and various formatting options.

Installation

API Reference

This is an illustration of Text component.

<Text>Hello World!</Text>

Installation

CLI

Manual

Run the following command:

npx gluestack-ui add text

Step 1: Copy and paste the following code into index.tsx in your project.

import React from "react"

import type { VariantProps } from "@gluestack-ui/nativewind-utils"
import { Text as RNText } from "react-native"
import { textStyle } from "./styles"

type ITextProps = React.ComponentProps<typeof RNText> &
  VariantProps<typeof textStyle>

const Text = React.forwardRef<React.ElementRef<typeof RNText>, ITextProps>(
  (
    {
      className,
      isTruncated,
      bold,
      underline,
      strikeThrough,
      size = "md",
      sub,
      italic,
      highlight,
      ...props
    },
    ref
  ) => {
    return (
      <RNText
        className={textStyle({
          isTruncated,
          bold,
          underline,
          strikeThrough,
          size,
          sub,
          italic,
          highlight,
          class: className,
        })}
        {...props}
        ref={ref}
      />
    )
  }
)

Text.displayName = "Text"

export { Text }

Important Note

Note: Step 2 is optional and only required if you want to add support for React Server Components, You can skip this and jump to Step 3 directly if you don't have this requirement.

Step 2(optional): Copy and paste the following code into index.web.tsx in your project.

import React from "react"
import type { VariantProps } from "@gluestack-ui/nativewind-utils"
import { textStyle } from "./styles"

type ITextProps = React.ComponentProps<"span"> & VariantProps<typeof textStyle>

const Text = React.forwardRef<React.ElementRef<"span">, ITextProps>(
  (
    {
      className,
      isTruncated,
      bold,
      underline,
      strikeThrough,
      size = "md",
      sub,
      italic,
      highlight,
      ...props
    }: { className?: string } & ITextProps,
    ref
  ) => {
    return (
      <span
        className={textStyle({
          isTruncated,
          bold,
          underline,
          strikeThrough,
          size,
          sub,
          italic,
          highlight,
          class: className,
        })}
        {...props}
        ref={ref}
      />
    )
  }
)

Text.displayName = "Text"

export { Text }

Step 3: Copy and paste the following code into styles.tsx in your project.

import { tva } from "@gluestack-ui/nativewind-utils/tva"
import { isWeb } from "@gluestack-ui/nativewind-utils/IsWeb"

const baseStyle = isWeb
  ? "font-sans tracking-sm my-0 bg-transparent border-0 box-border display-inline list-none margin-0 padding-0 position-relative text-start no-underline whitespace-pre-wrap word-wrap-break-word"
  : ""

export const textStyle = tva({
  base: `text-typography-700 font-body ${baseStyle}`,

  variants: {
    isTruncated: {
      true: "web:truncate",
    },
    bold: {
      true: "font-bold",
    },
    underline: {
      true: "underline",
    },
    strikeThrough: {
      true: "line-through",
    },
    size: {
      "2xs": "text-2xs",
      xs: "text-xs",
      sm: "text-sm",
      md: "text-base",
      lg: "text-lg",
      xl: "text-xl",
      "2xl": "text-2xl",
      "3xl": "text-3xl",
      "4xl": "text-4xl",
      "5xl": "text-5xl",
      "6xl": "text-6xl",
    },
    sub: {
      true: "text-xs",
    },
    italic: {
      true: "italic",
    },
    highlight: {
      true: "bg-yellow-500",
    },
  },
})

Step 4: Update the import paths to match your project setup.

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 xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, and 6xl allowing users to adjust the button size based on their design needs.

function App() {
  const sizes = [
    "xs",
    "sm",
    "md",
    "lg",
    "xl",
    "2xl",
    "3xl",
    "4xl",
    "5xl",
    "6xl",
  ]
  return (
    <Center>
      {sizes.map((size, index) => (
        <Text size={size} key={index} className="text-center">
          {size}
        </Text>
      ))}
    </Center>
  )
}

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.