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