Divider

Usage

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

Vertical

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

Spacing

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

Label

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