Divider — componente React Native

Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)

npx orn-ui add divider

O instala el paquete completo e impórtalo

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

Depende de:core (theme + icons)

Uso

cuándo usarlo — Separar secciones de una lista o un formulario cuando el espacio en blanco no alcanza.
style — El margen se ajusta aquí. Dos divisores seguidos, o uno justo después de un título de sección, suelen sobrar.

Clip del demo todavía sin grabar — ver MEDIA.md

Variantes

Default

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

Custom style

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

Código completo del demo

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

Además acepta testID, que se reenvía al nodo raíz. Existe para los tests end-to-end (Maestro maneja la app por el árbol de accesibilidad) y no cambia en nada cómo se ve ni cómo se comporta el componente.

Nombre	Tipo	Por defecto	Descripción
`style?`	`StyleProp<ViewStyle>`	—	—