React Native Mantine › Data display
Timeline
Vertical timeline with items
Import: import { Timeline } from 'react-native-mantine';
Usage
import { Timeline } from 'react-native-mantine';
<Timeline active={1} color="blue" bulletSize={20}>
<Timeline.Item title="First step">
Step details and description
</Timeline.Item>
<Timeline.Item title="Second step">
Step details and description
</Timeline.Item>
<Timeline.Item title="Third step" lineVariant="dashed">
Step details and description
</Timeline.Item>
</Timeline>Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | React.ReactNode | Item title displayed above the content | |
children | React.ReactNode | Item content (description or details) | |
bullet | React.ReactNode | Custom bullet icon (e.g., icon component) | |
bulletSize | number | Item bullet size override in pixels | |
color | MantineColor | Item color override from theme | |
lineVariant | 'solid' | 'dashed' | 'dotted' | "solid" | Line variant style for this item |
style | ViewStyle | Additional styles to apply to the timeline item |