How can I create strokeDasharray circular progress react native?

Question

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

Answer 1

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"
/>