Heading | NativeBase | Universal Components for React and React Native

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

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

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

xs
sm
md
lg
xl
2xl
3xl
4xl
Playground
function Example() {
  return <VStack space={1} alignItems="center">
      <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 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>;
}

NativeBase is a simple, modular and accessible component library that gives you building blocks to build you React applications.
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>;
}

How are you?
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>;
}

Heading
Headings are used for rendering headlines. Heading composes Text so you can use all the style props.
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>;
}