Heading | NativeBase

NativeBase

3.4.x

⌘

Hire us

NativeBase

Introduction

Getting Started

Installation

Setup NativeBase Provider

Resources

Core Concepts

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

Community Integration

React Hook Forms

Formik

Recipes

Designs

Forms

Layout

Migration

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 alignSelf={{
    base: "center",
    md: "flex-start"
  }}>
      I'm a Heading
    </Heading>;
}function Example() {
  return <Heading alignSelf={{
    base: "center",
    md: "flex-start"
  }}>
      I'm a Heading
    </Heading>;
}

Sizes


Playground
function Example() {
  return <VStack alignSelf={{
    base: "center",
    md: "flex-start"
  }}>
      {
      /* @ts-ignore */
    }
      <Heading size="4xl">(4xl) Heading</Heading>
      {
      /* @ts-ignore */
    }
      <Heading size="3xl">(3xl) Heading</Heading>
      <Heading size="2xl">(2xl) Heading</Heading>
      <Heading size="xl">(xl) Heading</Heading>
      <Heading size="lg">(lg) Heading</Heading>
      <Heading size="md">(md) Heading </Heading>
      <Heading size="sm">(sm) Heading </Heading>
      <Heading size="xs">(xs) Heading </Heading>
    </VStack>;
}function Example() {
  return <VStack alignSelf={{
    base: "center",
    md: "flex-start"
  }}>
      {
      /* @ts-ignore */
    }
      <Heading size="4xl">(4xl) Heading</Heading>
      {
      /* @ts-ignore */
    }
      <Heading size="3xl">(3xl) Heading</Heading>
      <Heading size="2xl">(2xl) Heading</Heading>
      <Heading size="xl">(xl) Heading</Heading>
      <Heading size="lg">(lg) Heading</Heading>
      <Heading size="md">(md) Heading </Heading>
      <Heading size="sm">(sm) Heading </Heading>
      <Heading size="xs">(xs) Heading </Heading>
    </VStack>;
}

Truncate


Playground
function Example() {
  return <Heading isTruncated>
      Basic text writing, including headings, body text, lists, and more.
    </Heading>;
}function Example() {
  return <Heading isTruncated>
      Basic text writing, including headings, body text, lists, and more.
    </Heading>;
}

Override


Playground
function Example() {
  return <Heading size="lg" fontSize={50} bold alignSelf={{
    base: "center",
    md: "flex-start"
  }}>
      I'm overriding this heading
    </Heading>;
}function Example() {
  return <Heading size="lg" fontSize={50} bold alignSelf={{
    base: "center",
    md: "flex-start"
  }}>
      I'm overriding this heading
    </Heading>;
}

Composition


Playground
function Example() {
  return <Box alignSelf={{
    base: "center",
    md: "flex-start"
  }}>
      <Heading mb={4}>
        Mobile first accessible components for React Native & Web.
      </Heading>
      <Text fontSize="xl">
        An accessible & utility-first component library to build your design
        system for all the platforms (web in beta).
      </Text>
      <Button size="md" colorScheme="green" mt="24px">
        Let's get started
      </Button>
    </Box>;
}function Example() {
  return <Box alignSelf={{
    base: "center",
    md: "flex-start"
  }}>
      <Heading mb={4}>
        Mobile first accessible components for React Native & Web.
      </Heading>
      <Text fontSize="xl">
        An accessible & utility-first component library to build your design
        system for all the platforms (web in beta).
      </Text>
      <Button size="md" colorScheme="green" mt="24px">
        Let's get started
      </Button>
    </Box>;
}