Version: Next

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

TypeDefault
stringStyleSheet.hairlineWidth < 1 ? '#bcbbc1' : 'rgba(0, 0, 0, 0.12)'

inset#

Adds inset to the divider

TypeDefault
booleanleft

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.

TypeDefault
left, right, middleleft

style#

Style of the divider

TypeDefault
View style (object){borderBottomWidth: 1, borderBottomColor: #e1e8ee}

subHeader#

Displays sub-header text with the divider. This applies only to Horizontal divider.

TypeDefault
stringnone

subHeaderStyle#

Adds styles to the subHeader text of the divider.

TypeDefault
Text style (object)none

orientation#

Allows changing the divider orientation. Values are horizontal or vertical

TypeDefault
horizontal or verticalhorizontal

width#

Applies width to the divider. Width is supported to both horizontal and vertical divider

TypeDefault
numberStyleSheet.hairlineWidth