I tried to build the circular progress bar with dashed arrays by referring to (https://github.com/stssoftware/react-native-svg-circular-progress) using below code
> <Circle cx={half} cy={half} r={half} fill={blankColor}
> stroke="#0074d9"
> strokeWidth="10"
> strokeDasharray="8, 3"/>
full code :
import React from 'react'
import {View, StyleSheet} from 'react-native'
import Svg, {Path, Circle} from 'react-native-svg'
const styles = StyleSheet.create({
textView: {
position: 'absolute',
top: 0, left: 0, bottom: 0, right: 0,
justifyContent: 'center',
alignItems: 'center'
}
})
function generateArc(percentage, radius){
if (percentage === 100) percentage = 99.999
const a = percentage*2*Math.PI/100 // angle (in radian) depends on percentage
const r = radius // radius of the circle
var rx = r,
ry = r,
xAxisRotation = 0,
largeArcFlag = 1,
sweepFlag = 1,
x = r + r*Math.sin(a),
y = r - r*Math.cos(a)
if (percentage <= 50){
largeArcFlag = 0;
}else{
largeArcFlag = 1
}
return `A${rx} ${ry} ${xAxisRotation} ${largeArcFlag} ${sweepFlag} ${x} ${y}`
}
const CircularProgress = ({
percentage = 40,
blankColor = "#eaeaea",
donutColor = "#43cdcf",
fillColor = "white",
progressWidth = 35,
size = 100,
children
}) => {
let half = size / 2;
return <View style={{width: size, height: size}}>
<Svg width={size} height={size}>
<Circle cx={half} cy={half} r={half} fill={blankColor} stroke="#0074d9"
strokeWidth="10"
strokeDasharray="8, 3"/>
<Path
d={`M${half} ${half} L${half} 0 ${generateArc(percentage, half)} Z`}
fill={donutColor}
/>
{<Circle cx={half} cy={half} r={progressWidth} fill={fillColor}
/>}
</Svg>
<View style={styles.textView}>
{children}
</View>
</View>
}
export default CircularProgress
but I am not getting proper circle, can someone help me develop the circle or point to any progress bar component where I can get dashed array of stroke
I need something like below
but i am getting like below
You have strokeWidth
of 10. The stroke grow around the like, means 5
before the line, and 5
after the line.
In your code you set the radius of the circle
as half of the SVG width
and height
. means the 5
of stroke width that grow after the stoke line will just overflow the SVG.
To fix it, set the radius
as width/2 - strikeWidth/2
in your case 100/2 - 10/2
or half - 5
.
In final words, this should resolve your problem:
<Circle
cx={half}
cy={half}
r={half-5}
fill={blankColor}
stroke="#0074d9"
strokeWidth="10"
strokeDasharray="8, 3"
/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With