BetaLayout

Divider

The line between two things.

Overview

The line between two things.

First example

<Column gap={12}>
  <Row>…</Row>
  <Divider />
  <Row>…</Row>
</Column>

Anatomy

<Divider />

One node and no slots. A rule is a filled box one point thick; there is nothing inside it. A divider with a word in the middle of it is a Row holding two of these and a Typography — the composition the library already has. A Divider.Label would put a layout inside a line.

Usage

Between rows, in a column:

<Column gap={12}>
  <Row>…</Row>
  <Divider />
  <Row>…</Row>
</Column>

Between two words, in a row:

<Row gap={12} alignItems="center">
  <Typography variant="body-sm">Brouillon</Typography>
  <Divider orientation="vertical" />
  <Typography variant="body-sm">Il y a deux minutes</Typography>
</Row>

A section break, rather than a row break:

<Divider size="sm" />

With a word across it — two dividers and a label, not a prop:

<Row gap={12} alignItems="center">
  <Divider flex={1} />
  <Typography variant="body-xs" color={theme.colors.muted}>
    ou
  </Typography>
  <Divider flex={1} />
</Row>

Root props

DividerProps

The node's inherited React Native props apply too, and so do its style props — padding, margin, width and the rest.

Prop	Type	Required	Description
children	`ReactNode`	No	Only meaningful under `asChild`, where it is the element that becomes the rule.
orientation	`DividerOrientation \| undefined`	No	Which way the rule runs. A horizontal one stretches across its parent and a vertical one stretches down it, so the axis a divider does not run along is the one it takes from whatever contains it.
size	`Size \| undefined`	No	The thickness — height when horizontal, width when vertical. It is `size` and not `thickness` because that is the vocabulary word (§1 bis), and it is consistent with the rest of the library rather than in spite of it: "`size` drives height, never width" is exactly what this does, on the axis the orientation names. `xs` is the hairline and it is the default, unlike everywhere else in the library. A rule you notice is a rule that is too thick.
color	`string \| undefined`	No	A raw tint (`'#7c3aed'`), never a token (R7). There is one thing to colour on a rule, so it lands on the rule.
asChild	`boolean \| undefined`	No	R12 — the child element becomes the rule and keeps its resolved style. What it is for here is the animated one: an `Animated.View` that collapses a section takes the thickness and the colour from the recipe and the height from a shared value.
style	`StyleProp<ViewStyle>`	No	—

Slots

This component is standalone and exposes no public slot.

Variants, sizes and colour

This component adds no visual axis of its own. The values it does take are in the generated types above and in the live demo.

Accessibility

accessibilityElementsHidden and importantForAccessibility="no" are set: a rule is furniture. A screen reader reads the two groups it sits between, not the line — and React Native has no separator role to announce, so leaving it visible would add a stop to every list. Both stay overridable (R9).

Migration from legacy

Legacy	v1
`<Divider />`	`<Divider />`
`<Divider vertical />`	`<Divider orientation="vertical" />`
`<Divider thickness={2} />`	`<Divider size="md" />`
`<Divider color="#e5e5e5" />`	`<Divider color="#e5e5e5" />`