Divider

Revamp your content organization with the Divider component! Use it to visually separate different sections of a list or group for a more structured and easy-to-read interface.
Installation
API Reference
Spec Doc
This is an illustration of Divider component.
<Center>
<Text>Easy</Text>
<Divider className="my-0.5" />
<Text>Difficult</Text>
</Center>

Installation

Step 1: Install the following dependencies:

npm i @gluestack-ui/divider

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

import { createDivider } from "@gluestack-ui/divider"
import { tva } from "@gluestack-ui/nativewind-utils"
import { View } from "react-native"
import { cssInterop } from "nativewind"
import React from "react"
const dividerStyle = tva({
base: "bg-background-200",
variants: {
orientation: {
vertical: "w-px h-full",
horizontal: "h-px w-full",
},
},
})
const UIDivider = createDivider({ Root: View })
cssInterop(UIDivider, { className: "style" })
const Divider = React.forwardRef(
({ className, orientation = "horizontal", ...props }: any, ref?: any) => {
return (
<UIDivider
ref={ref}
className={dividerStyle({
orientation,
class: className,
})}
/>
)
}
)
Divider.displayName = "Divider"
export { Divider }

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 { Divider } from "@/components/ui/Divider"
export default () => <Divider />

Component Props

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

Divider

It inherits all the properties of React Native's View component.

Props

Divider component is created using View component from react-native. It extends all the props supported by React Native View, utility props and the props mentioned below.

Divider

Name
Value
Default
orientation
vertical | horizontal
horizontal
Edit this page on GitHub