React Native Mantine › Miscellaneous
Divider
Visual separator with label support
Import: import { Divider } from 'react-native-mantine';
Usage
import { Divider, Stack, Text } from 'react-native-mantine';
// Basic divider
<Stack spacing={16}>
<Text>Section 1</Text>
<Divider />
<Text>Section 2</Text>
</Stack>
// Divider with label
<Divider label="Section Title" labelPosition="center" />
// Styled divider
<Divider
variant="dashed"
color="blue"
size="md"
label="Optional Label"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | "horizontal" | Line orientation - horizontal for separating content vertically, vertical for separating content horizontally |
color | MantineColor | Line color from theme. If not provided, uses theme.colors.gray[3] in light mode and theme.colors.dark[4] in dark mode | |
size | number | "xs" | "sm" | "md" | "lg" | "xl" | "sm" | Line thickness as predefined size or custom number in pixels |
label | React.ReactNode | Label to display in the divider. Can be text or any React component. Divides the line with label in the middle | |
labelPosition | 'left' | 'center' | 'right' | "center" | Position of the label within the divider. Affects the length of lines on each side |
variant | 'solid' | 'dashed' | 'dotted' | "solid" | Divider line style |
style | ViewStyle | Additional styles to apply to the divider container |