Divider

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

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	string	background900	Color of the divider
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