Heading | NativeBase

NativeBase

3.4.x

⌘

Hire us

NativeBase

Introduction

Getting Started

Installation

Setup NativeBase Provider

Resources

Contribution

Core Concepts

Utility First

Utility Props Specificity

New

Design Tokens

Pseudo Props: Overview

New

Pseudo Props: Dos & Don'ts

Features

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.

Heading

Headings are used for rendering headlines. Heading composes

Text

so you can use all the style props.

Import

Copy
import { Heading } from 'native-base';

Example

Basic


Playground
function Example() {
  return <Heading>I'm a Heading</Heading>;
}function Example() {
  return <Heading>I'm a Heading</Heading>;
}

Sizes


Playground
function Example() {
  return <VStack space={1} alignItems="center">
      <Heading textAlign="center" mb="10">
        Sizes
      </Heading>
      <Heading size="xs">xs</Heading>
      <Heading size="sm">sm</Heading>
      <Heading size="md">md</Heading>
      <Heading size="lg">lg</Heading>
      <Heading size="xl">xl</Heading>
      <Heading size="2xl">2xl</Heading>
      <Heading size="3xl">3xl</Heading>
      <Heading size="4xl">4xl</Heading>
    </VStack>;
}function Example() {
  return <VStack space={1} alignItems="center">
      <Heading textAlign="center" mb="10">
        Sizes
      </Heading>
      <Heading size="xs">xs</Heading>
      <Heading size="sm">sm</Heading>
      <Heading size="md">md</Heading>
      <Heading size="lg">lg</Heading>
      <Heading size="xl">xl</Heading>
      <Heading size="2xl">2xl</Heading>
      <Heading size="3xl">3xl</Heading>
      <Heading size="4xl">4xl</Heading>
    </VStack>;
}

Truncate


Playground
function Example() {
  return <Heading isTruncated>
      NativeBase is a simple, modular and accessible component library that
      gives you building blocks to build you React applications.
    </Heading>;
}function Example() {
  return <Heading isTruncated>
      NativeBase is a simple, modular and accessible component library that
      gives you building blocks to build you React applications.
    </Heading>;
}

Override


Playground
function Example() {
  return <Heading size="lg" fontSize={50} bold>
      How are you?
    </Heading>;
}function Example() {
  return <Heading size="lg" fontSize={50} bold>
      How are you?
    </Heading>;
}

Composition


Playground
function Example() {
  return <Box>
      <Heading size="xl" mb="4">
        Heading
      </Heading>
      <Text fontSize="xl">
        Headings are used for rendering headlines. Heading composes Text so you
        can use all the style props.
      </Text>
    </Box>;
}function Example() {
  return <Box>
      <Heading size="xl" mb="4">
        Heading
      </Heading>
      <Text fontSize="xl">
        Headings are used for rendering headlines. Heading composes Text so you
        can use all the style props.
      </Text>
    </Box>;
}

Props

Heading implements

size

The size of the heading.

Type: ResponsiveValue<number | "px" | "0" | "full" | "sm" | "6" | "2xs" | "8" | "xs" | "12" | "md" | "16" | "xl" | "24" | "32" | "2" | "0.5" | "4" | "3" | "lg" | "1" | "2xl" | "container" | "3xs" | "1.5" | ... 29 more ... | (string & {})>

Default: xl

Styling

NativeBase ships with a default theme for each component. Check out the default theme of the heading

here

Info: We can easily extend the heading component theme using extendTheme function as described in the documentation

Quick Nav