Heading

Heading component gives you the ability to create headings for your page with different sizes and semantics from h1 to h6.
Installation
API Reference
This is an illustration of Heading component.
<Heading>I am a Heading</Heading>

Installation

Step 1: Install the following dependencies:

npm i @expo/html-elements

Step 2: Copy and paste the following code into your project.

import { styled } from "@gluestack-style/react"
import { H1, H2, H3, H4, H5, H6 } from "@expo/html-elements"
const StyledRoot = styled(H4, {
color: "$text900",
letterSpacing: "$sm",
fontWeight: "$bold",
fontFamily: "$heading",
// Overrides expo-html default styling
marginVertical: 0,
variants: {
isTruncated: {
true: {
props: {
// @ts-ignore
numberOfLines: 1,
ellipsizeMode: "tail",
},
},
},
bold: {
true: {
fontWeight: "$bold",
},
},
underline: {
true: {
textDecorationLine: "underline",
},
},
strikeThrough: {
true: {
textDecorationLine: "line-through",
},
},
size: {
"5xl": {
//@ts-ignore
props: { as: H1 },
fontSize: "$6xl",
},
"4xl": {
//@ts-ignore
props: { as: H1 },
fontSize: "$5xl",
},
"3xl": {
//@ts-ignore
props: { as: H1 },
fontSize: "$4xl",
},
"2xl": {
//@ts-ignore
props: { as: H2 },
fontSize: "$3xl",
},
xl: {
//@ts-ignore
props: { as: H3 },
fontSize: "$2xl",
},
lg: {
//@ts-ignore
props: { as: H4 },
fontSize: "$xl",
},
md: {
//@ts-ignore
props: { as: H5 },
fontSize: "$lg",
},
sm: {
//@ts-ignore
props: { as: H6 },
fontSize: "$md",
},
xs: {
//@ts-ignore
props: { as: H6 },
fontSize: "$sm",
},
},
sub: {
true: {
fontSize: "$xs",
},
},
italic: {
true: {
fontStyle: "italic",
},
},
highlight: {
true: {
bg: "$yellow500",
},
},
},
defaultProps: {
size: "lg",
},
})
export const Heading = StyledRoot

Step 3: Update the import paths to match your project setup.

API Reference

To use this component in your project, include the following import statement in your file.
import { Heading } from "@/components/ui/Heading"
export default () => <Heading />

Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

Heading

It inherits all the properties of @expo/html-elements's H1 component.

Props

Heading component is created using H1 component from @expo/html-elements. It extends all the props supported by Expo HTML Heading Elements, utility props and the props mentioned below.

Button

Name
Value
Default
isTruncated
true | false
false
bold
true | false
false
underline
true | false
false
strikeThrough
true | false
false
sub
true | false
false
italic
true | false
false
highlight
true | false
false
size
5xl | 4xl | 3xl | 2xl | xl | lg | md | sm | xs
md
Edit this page on GitHub