1.2.3 • Published 4 years ago
rn-dashed-circular-indicator v1.2.3
rn-dashed-circular-indicator
Dashed Circular Indicator for React Native using react-native-svg.
Installation
$ npm install rn-dashed-circular-indicator --save
SVG based components
To use the this component, you need to install React Native SVG in your project.
Usage
import { DashedCircularIndicator } from "rn-dashed-circular-indicator";
<DashedCircularIndicator selectedValue={8} />
<DashedCircularIndicator
selectedValue={25}
maxValue={50}
textColor='#f00'
activeStrokeColor='#cc6600'
withGradient
/>
<DashedCircularIndicator
selectedValue={75}
maxValue={100}
radius={100}
activeStrokeColor='#0f4fff'
withGradient
/>
<DashedCircularIndicator
selectedValue={55}
maxValue={90}
radius={80}
activeStrokeColor='#cc6633'
withGradient
anticlockwise
containerStyle={{ padding: 0 }}
/>Properties
| Prop | Description | Default |
|---|---|---|
maxValue | Max Value of the progress. | 10 |
selectedValue | Selected Value of the progress. | 0 |
radius | Radius of the Circular Progress Bar. | 60 |
strokeWidth | Stroke Width of the progress. | 6 |
label | This is any label that needs to be shown below the progress number. | |
labelFontSize | Font Size for Label. | #000 |
activeStrokeColor | Active Stroke. | #05a168 |
inactiveStrokeColor | Inactive Stroke Color. | #ddd |
backgroundColor | Background Color inside the progress circle. | #fff |
textColor | Color of the Number Text, which shows the active number. | #000 |
valueFontSize | Font Size of the number Text. | |
withGradient | Whether to apply gradient on the outer Progress bar. | false |
anticlockwise | Whether progress bar in Clockwise or not (default: Clockwise). | false |
initialAngularDisplacement | Any initial Angular Displacement. | 0 |
containerStyle | Container Style. | {} |