SemiCircleProgress

Represent a value as a semicircular gauge

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

Usage

import { SemiCircleProgress } from 'react-native-mantine';

<SemiCircleProgress
  value={40}
  size={200}
  thickness={12}
  label="40%"
  labelPosition="center"
/>

// Animated with custom colors
<SemiCircleProgress
  value={value}
  transitionDuration={250}
  filledSegmentColor="green"
  fillDirection="right-to-left"
/>

Props

Prop	Type	Default	Description
`value` (required)	`number`		Progress value from 0 to 100
`size`	`number`	`200`	Diameter of the semicircle in px
`thickness`	`number`	`12`	Ring thickness in px
`fillDirection`	`'left-to-right' \| 'right-to-left'`	`"left-to-right"`	Direction from which the arc is filled
`orientation`	`'up' \| 'down'`	`"up"`	Orientation of the semicircle
`filledSegmentColor`	`MantineColor`	`theme.primaryColor`	Color of the filled segment, key of theme.colors or any valid color
`emptySegmentColor`	`MantineColor`		Color of the empty segment
`innerBackgroundColor`	`MantineColor`		Color of the inner area, should match the background the component is rendered on
`transitionDuration`	`number`	`0`	Transition duration of the filled segment in ms, 0 disables animation
`label`	`React.ReactNode`		Label displayed inside the progress
`labelPosition`	`'center' \| 'bottom'`	`"bottom"`	Label position relative to the semicircle
`labelStyle`	`TextStyle`		Label text style
`style`	`ViewStyle`		Additional styles to apply to the root element

Source on GitHub · npm