title: Rounded corners for Arc Progress in react-native-svg
body: <p>I've created an Arc Progress based on a tutorial (v. <a href="https://www.youtube.com/watch?v=UMvw20nRZls" rel="nofollow noreferrer">https://www.youtube.com/watch?v=UMvw20nRZls</a>) and worked fine</p>
  
  <p>But, since i have no experience using svg path, i'm struggling with my Arc trying to get it's corners rounded</p>
  
  <p>Here is how the Arc's result so far</p>
  
  <pre><code>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}`;
  
  &lt;Path
   stroke="#FFF"
   fill="none"
   strokeDasharray={`${circumference}, ${circumference}`}
   {...{ d, strokeWidth }}
  /&gt;
  
  </code></pre>
  
  <p>And i expect to have the corners like this:</p>
  
  <p><a href="https://i.stack.imgur.com/Nb8kI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Nb8kI.png" alt="enter image description here"></a></p>
  
  <p>ps: i'm using an expo app, so , i needed to install react-native-svg with expo to work</p>