Text | NativeBase

NativeBase

3.4.x

⌘

Hire us

NativeBase

Introduction

Getting Started

Installation

Setup NativeBase Provider

Resources

Contribution

Core Concepts

Utility First

Utility Props Specificity

Design Tokens

Pseudo Props: Overview

Pseudo Props: Dos & Don'ts

Responsive

Features

Utility Props

Color mode (Dark Mode)

Theme

Customizing Components

Making components dark mode compatible

Layout

Forms

Data Display

Feedback

Typography

Overlay

Disclosure

Media and Icons

Transition

Others

ReactNative Components

Hooks

Examples

Recipes

Designs

Forms

Layout

Migration

Upgrading to 3.2.0 from 3.x

Components Migration

If you are starting a new project, please try gluestack-ui for better performance and new design.

Text

Text allows the rendering of text and paragraphs within an interface.


Show Code
Playground
const Example = () => {
  return <Text>This is Text.</Text>;
};const Example = () => {
  return <Text>This is Text.</Text>;
};

Examples

ChangingFontSize


Playground
const Example = () => {
  return <VStack space={1} alignItems="center">
      <Text fontSize="xs">xs</Text>
      <Text fontSize="sm">sm</Text>
      <Text fontSize="md">md</Text>
      <Text fontSize="lg">lg</Text>
      <Text fontSize="xl">xl</Text>
      <Text fontSize="2xl">2xl</Text>
      <Text fontSize="3xl">3xl</Text>
      <Text fontSize="4xl">4xl</Text>
      <Text fontSize="5xl">5xl</Text>
      <Text fontSize="6xl">6xl</Text>
    </VStack>;
};const Example = () => {
  return <VStack space={1} alignItems="center">
      <Text fontSize="xs">xs</Text>
      <Text fontSize="sm">sm</Text>
      <Text fontSize="md">md</Text>
      <Text fontSize="lg">lg</Text>
      <Text fontSize="xl">xl</Text>
      <Text fontSize="2xl">2xl</Text>
      <Text fontSize="3xl">3xl</Text>
      <Text fontSize="4xl">4xl</Text>
      <Text fontSize="5xl">5xl</Text>
      <Text fontSize="6xl">6xl</Text>
    </VStack>;
};

Truncated


Playground
const Example = () => {
  return <Text isTruncated maxW="300" w="80%">
      NativeBase gives you a contrasting color based on your theme. You can also
      customise it using the useAccessibleColors hook.
    </Text>;
};const Example = () => {
  return <Text isTruncated maxW="300" w="80%">
      NativeBase gives you a contrasting color based on your theme. You can also
      customise it using the useAccessibleColors hook.
    </Text>;
};

Nested


Playground
const Example = () => {
  return <Text italic>
      <Text bold>Taj Mahal</Text> is in Agra.
    </Text>;
};const Example = () => {
  return <Text italic>
      <Text bold>Taj Mahal</Text> is in Agra.
    </Text>;
};

Overridden


Playground
const Example = () => {
  return <VStack space={2} alignItems="center">
      <Text bold>Bold</Text>
      <Text italic>Italic</Text>
      <Text underline>Underline</Text>
      <Text highlight _dark={{
      color: "coolgray.800"
    }}>
        Highlighted
      </Text>
      <Text>
        H<Text sub>2</Text>O
      </Text>
      <Text underline>Underline</Text>
      <Text strikeThrough>StrikeThrough</Text>
      <Text bold italic underline>
        Bold, Italic & Underline
      </Text>
    </VStack>;
};const Example = () => {
  return <VStack space={2} alignItems="center">
      <Text bold>Bold</Text>
      <Text italic>Italic</Text>
      <Text underline>Underline</Text>
      <Text highlight _dark={{
      color: "coolgray.800"
    }}>
        Highlighted
      </Text>
      <Text>
        H<Text sub>2</Text>O
      </Text>
      <Text underline>Underline</Text>
      <Text strikeThrough>StrikeThrough</Text>
      <Text bold italic underline>
        Bold, Italic & Underline
      </Text>
    </VStack>;
};

Props

Text implements

children

Renders components as Text children. Accepts a JSX.Element or an array of JSX.Element.

Type: ReactNode

fontSize

The size of font

Type: ResponsiveValue<number | "sm" | "2xs" | "xs" | "md" | "xl" | "3xl" | "5xl" | "lg" | "6xl" | "7xl" | "4xl" | "2xl" | "8xl" | "9xl" | (string & {})>

letterSpacing

Letter spacing

Type: ResponsiveValue<number | "sm" | "xs" | "md" | "xl" | "lg" | "2xl" | (string & {})>

lineHeight

Line height

Type: ResponsiveValue<number | "sm" | "2xs" | "xs" | "md" | "xl" | "3xl" | "5xl" | "lg" | "4xl" | "2xl" | (string & {})>

fontWeight

Font weight

Type: ResponsiveValue<number | "bold" | "medium" | (string & {}) | "hairline" | "thin" | "light" | "normal" | "semibold" | "extrabold" | "black" | "extraBlack">

font

Fonts

Type: ResponsiveValue<IFont>

noOfLines

Used to truncate text at a specific number of lines

Type: number

bold

Make the text bold.

Type: boolean

isTruncated

If true, it'll render an ellipsis when the text exceeds the width of the viewport or maxWidth set.

Type: boolean