Heading | NativeBase


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

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 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>;
}

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

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

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Heading | NativeBase | Universal Components for React and React Native

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.