Divider
Dividers are visual separators of content. Use Divider when you want to make a distinction between sections of content.
Usage
import { Divider } from 'react-native-elements';
<Divider orientation="horizontal" />;
<Divider orientation="vertical" width={5} />;
<Divider inset={true} insetType="middle" />;
<Divider
orientation="horizontal"
subHeader="Test"
subHeaderStyle={{ color: 'blue' }}
/>;
Props
Also receives all View props
Reference
color
Adds color to the divider
Type | Default |
---|---|
string | StyleSheet.hairlineWidth < 1 ? '#bcbbc1' : 'rgba(0, 0, 0, 0.12)' |
inset
Adds inset to the divider
Type | Default |
---|---|
boolean | left |
insetType
Allows inset to be applied to a specific direction. middle
applies inset in both directions. The inset
prop must be true for this to apply.
Type | Default |
---|---|
left, right, middle | left |
style
Style of the divider
Type | Default |
---|---|
View style (object) | {borderBottomWidth: 1, borderBottomColor: #e1e8ee} |
subHeader
Displays sub-header text with the divider. This applies only to Horizontal divider.
Type | Default |
---|---|
string | none |
subHeaderStyle
Adds styles to the subHeader text of the divider.
Type | Default |
---|---|
Text style (object) | none |
orientation
Allows changing the divider orientation. Values are horizontal
or vertical
Type | Default |
---|---|
horizontal or vertical | horizontal |
width
Applies width to the divider. Width is supported to both horizontal
and vertical
divider
Type | Default |
---|---|
number | StyleSheet.hairlineWidth |