Skip to main content

Divider

Usage

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

Vertical

function DividerVertical() {
return (
<View>
<Divider width={1} height={50} />
</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>
<Text status="error">Danger Area</Text>
</Divider>
</View>
)
}

Custom

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

Props

PropData TypeDefault ValueDescription
ExtendsViewProps--Inherits properties from ViewProps
widthDimensionValue100%Control Width of the divider
heightDimensionValue0.6Control height of the divider
colorstringbackground900Color of the divider
labelstring--Label inside the divider
labelPosition"left" | "right" | "center"centerLabel position where it will be rendered
rowboolean--Set true for horizontal(flexDirection) view