react-native-dashed-progress

React Native component to draw circular dashed progress bar.

Example

Installation

1. Install react-native-dashed-progresscomponent and react-native-svg:

   npm i --save react-native-dashed-progress react-native-svg

   skip step 2 if you are using react-native >= 0.60

2. Link native code for SVG:

   react-native link react-native-svg

Usage

import {DashedProgress} from 'react-native-dashed-progress';
 
<DashedProgress
  fill={20} 
  countBars={50} 
  radius={50}
  strokeColor="#00e0ff"/>

Props

Props	Type	Default	Description
radius	Number	100	Radius of circle
barWidth	Number	10	Length of dash
indicatorWidth	Number	20	Length of indicator
countBars	Number	100	Total number of dashes in circle
strokeThickness	Number	1	Thickness of dash
fill	Number (>=0 and <=countBars)	50	Total number of filled Dashes in circle
text	String	50%	A Text will display in the circle
strokeLinecap	String	round	Shape used at ends of dash. Possible values: butt,round, square
trailColor	String	#000000	Color of unfilled dashes
strokeColor	String	#008000	Color of filled dashes
showTooltip	Boolean	true	Enabled to display Text inside the circle
tooltipSize	Number	12	fontSize of text
tooltipColor	String	#008000	fontColor of text
tooltipFamily	String		fontFamily of text
divideEnabled	Boolean	false	Enabled to divide countBars into given dividerNumber
dividerNumber	Number	10	Number which will divide by countBars
dividerNumberSize	Number	9	fontSize of dividerNumber
showIndicator	Boolean	true	Enabled to display stop indicator in animated Circle
indicatorColor	String	#008000	Color of indicator
duration	Number	1000	Total time to animate dashes
containerStyle	Object		Extra styling for the main container

Running example app

git clone https://github.com/websoptimization/react-native-dashed-progress.git
cd react-native-dashed-progress/example
npm install
react-native-run-android OR react-native-run-ios

License

MIT