Dividers

Dividers are components used to add space or any other separator between other components.

Divider example

API

Props

  • Divider component doesn’t have specific (custom) Props, however, it supports every prop that the standard React Native View component supports. For full list of available props, visit React Native View component documentation.

Style names

  • line: defines a line Divider (thin line), instead of standard (rectangle) Divider
    • small: can be used only with line style name, and sets the width to 55 px
    • center: can be used only with line style name, and centers the line within parent container
  • section-header: applies different styling with additional vertical border (as defined in Theme)

Examples

Divider

Divider example

JSX Declaration

<Divider />

Line divider

Line divider example

JSX Declaration

<Divider styleName="line" />

Section divider

Section dividers are usually used in lists to separate groups of similar list items, for example to group contacts by the first letter of their name. ListView will automatically style all dividers added to it.

Section divider example

JSX Declaration

<Divider styleName="section-header" />

Section divider + Label

Section divider + Label example

JSX Declaration

<Divider styleName="section-header">
  <Caption>INFORMATION</Caption>
</Divider>

Section divider + Label + Caption

Section divider + Label + Caption example

JSX Declaration

<Divider styleName="section-header">
  <Caption>PRODUCT NAME</Caption>
  <Caption>PRICE</Caption>
</Divider>