naheed-shamim / dashed-circular-indicator

npm package of Dashed Circular Bar for React Native applications

rn-dashed-circular-indicator

Dashed Circular Indicator for React Native using react-native-svg.

Find the npm package here: rn-dashed-circular-indicator

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.	{}