RingProgress

Circular progress indicator

Import: import { RingProgress } from 'react-native-mantine';

Usage

import { RingProgress, Text } from 'react-native-mantine';

<RingProgress
  size={120}
  thickness={12}
  sections={[
    { value: 40, color: 'blue' },
    { value: 30, color: 'orange' },
    { value: 15, color: 'green' },
  ]}
  label={<Text size="sm">85%</Text>}
/>

Props

Prop	Type	Default	Description
`sections` (required)	`RingProgressSection[]`		Sections of the ring
`size`	`number`	`120`	Size of the ring
`thickness`	`number`	`12`	Ring thickness
`label`	`React.ReactNode`		Label displayed in the center
`rootColor`	`string`		Root color from theme
`roundCaps`	`boolean`	`false`	If true, ring section ends are rounded (accepted for Mantine parity, not yet applied in React Native)
`style`	`any`		Additional styles
`testID`	`string`		Test identifier used by testing frameworks

Source on GitHub · npm