Search code examples
react-nativesvgreact-native-svg

Rounded corners for Arc Progress in react-native-svg


I've created an Arc Progress based on a tutorial (v. https://www.youtube.com/watch?v=UMvw20nRZls) and worked fine

But, since i have no experience using svg path, i'm struggling with my Arc trying to get it's corners rounded

Here is how the Arc's result so far

const { PI, cos, sin } = Math;
const { width } = Dimensions.get('window');
const size = width - 32;
const strokeWidth = 20;
const AnimatedPath = Animated.createAnimatedComponent(Path);
const r = (size - strokeWidth) / 2;
const cx = size / 2;
const cy = size / 2;
const A = PI + PI * 0.4;
const startAngle = PI + PI * 0.2;
const endAngle = 2 * PI - PI * 0.2;
// A rx ry x-axis-rotation large-arc-flag sweep-flag x y
const x1 = cx - r * cos(startAngle);
const y1 = -r * sin(startAngle) + cy;
const x2 = cx - r * cos(endAngle);
const y2 = -r * sin(endAngle) + cy;
const d = `M ${x1} ${y1} A ${r} ${r} 0 1 0 ${x2} ${y2}`;

<Path
 stroke="#FFF"
 fill="none"
 strokeDasharray={`${circumference}, ${circumference}`}
 {...{ d, strokeWidth }}
/>

And i expect to have the corners like this:

enter image description here

ps: i'm using an expo app, so , i needed to install react-native-svg with expo to work


Solution

  • You could set the strokeLinecap prop on the Path to round:

    <Path
      stroke="black"
      fill="none"
      strokeLinecap="round"
      strokeDasharray={`${circumference}, ${circumference}`}
      {...{d, strokeWidth}}
    />
    

    The strokeLinecap prop specifies the shape to be used at the end of open subpaths when they are stroked. Can be either 'butt', 'square' or 'round'.

    Source: https://github.com/react-native-community/react-native-svg#common-props.