Divider — React Native component

Installation

Install just this component (copies the source into your project, no npm dependency)

npx orn-ui add divider

Or install the whole package and import it

pnpm add orn-ui
import { Divider } from 'orn-ui/divider';

Depends on:core (theme + icons)

Usage

when to use — Separating sections of a list or a form when whitespace alone is not enough.
style — Change the margin here. Two dividers in a row, or one right after a section title, are usually noise.

Demo clip not recorded yet — see MEDIA.md

Variants

Default

<View>
  <Body>Above</Body>
  <Divider style={{ marginVertical: 12 }} />
  <Body>Below</Body>
</View>

Custom style

<Divider style={{ height: 2, backgroundColor: '#004cef' }} />

Full demo source

const variants: VariantDef[] = [
  {
    label: 'Default',
    content: (
      <View>
        <Body>Above</Body>
        <Divider style={{ marginVertical: 12 }} />
        <Body>Below</Body>
      </View>
    ),
  },
  { label: 'Custom style', content: <Divider style={{ height: 2, backgroundColor: '#004cef' }} /> },
];
return <VariantList variants={variants} />;

Props

Also accepts testID, forwarded to the root node. It exists for end-to-end tests (Maestro drives the app by the accessibility tree) and has no effect on how the component looks or behaves.

Name	Type	Default	Description
`style?`	`StyleProp<ViewStyle>`	—	—