Skip to main content
Version: 3.4.2

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