Heading | NativeBase

Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).

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