Divider

Component to separate content visually with horizontal or vertical lines.
Supports labels, custom spacing, and styling for better layout structure.

Usage Playground

Width

Height

Spacing

Color

Label

Label Position

left

right

center

Code Snippet

import { Divider } from "@react-native-blossom-ui/components";

    function Usage() {
        return (
            <Divider/>
        );
    }

Usage

function DividerUsage() {
  return (
    <View>
      <Divider />
    </View>
  )
}

Vertical

Use width & height prop in conjunction to have the vertical look.

function DividerVertical() {
  return (
    <View>
      <Divider width={1} height={50} spacing={20} />
    </View>
  )
}

Spacing

use the spacing prop to have the around cross axis i.e vertical margin for horizontal line and horizontal margin for vertical line.

function DividerSpacing() {
  return (
    <View>
      <Divider spacing={10} />
      <Divider spacing={30} />
    </View>
  )
}

Label

Use the label & labelPosition prop together to show and control the position of label (left, center & right)

Left

Center

Right

Danger Area

Danger Area

Danger Area

function DividerLabel() {
  return (
    <View>
      <Divider label="Left" labelPosition="left" />
      <Divider label="Center" labelPosition="center" />
      <Divider label="Right" labelPosition="right" />
      <Divider spacing={20}>
        <Text status="error">Danger Area</Text>
      </Divider>
    </View>
  )
}

Custom

function DividerCustom() {
  return (
    <View>
      <Divider width={200} height={10} spacing={20} />
    </View>
  )
}

Props

Prop	Data Type	Default Value	Description
Extends	ViewProps	--	Inherits properties from ViewProps
width	DimensionValue	100%	Control Width of the divider
height	DimensionValue	1	Control height of the divider
spacing	DimensionValue	0	Spacing around the line
color	ColorValue	--	Color of the divider default vale from theme `background900`
label	string	--	Label inside the divider
labelPosition	"left" | "right" | "center"	center	Label position where it will be rendered
row	boolean	--	Set true for horizontal(flexDirection) view