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
Prop | Data Type | Default Value | Description |
---|---|---|---|
Extends | ViewProps | -- | Inherits properties from ViewProps |
width | DimensionValue | 100% | Control Width of the divider |
height | DimensionValue | 0.6 | Control height of the divider |
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 |