I want to achieve this design with React and React Native

[![enter image description here][1]][1]

I tried to use this package : React Circle Progressbar

but I couldn't achieve this design, so can anyone help me with this

I will share my full component with you, and I hope it will give you some idea about the current state

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;

  return {
    x: centerX   radius * Math.cos(angleInRadians),
    y: centerY   radius * Math.sin(angleInRadians),
  };
}

function describeArc(x, y, radius, startAngle, endAngle) {
  var start = polarToCartesian(x, y, radius, endAngle);
  var end = polarToCartesian(x, y, radius, startAngle);

  var largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';

  var d = [
    'M',
    start.x,
    start.y,
    'A',
    radius,
    radius,
    0,
    largeArcFlag,
    0,
    end.x,
    end.y,
  ].join(' ');

  return d;
}

CodePudding user response：

In plain SVG, something like this. The gradient is not perfect, but close... Length of the "progress" can be ajusted with the stroke-dasharray.

<svg viewBox="0 0 200 210" width="200">
  <defs>
    <mask id="m1">
      <circle cx="100" cy="105" r="55" fill="white"/>
    </mask>
    <linearGradient id="lg1" gradientTransform="rotate(0) skewX(-20) skewY(-40)">
      <stop offset="0"  stop-color="red" />
      <stop offset="75%" stop-color="orange" />
    </linearGradient>
  </defs>
  <image mask="url(#m1)" href="https://i.stack.imgur.com/ptG0J.png" width="200" />
  <path pathLength="360" d="M100 175 a 75 75 0 1 1 1 0"
    stroke="LightSlateGray" fill="none" stroke-width="30"
    stroke-linecap ="round" stroke-dasharray="270 360"
    stroke-dashoffset="-45"/>
  <path pathLength="360" d="M100 175 a 75 75 0 1 1 1 0"
    stroke="url(#lg1)" fill="none" stroke-width="15"
    stroke-linecap ="round" stroke-dasharray="180 360"
    stroke-dashoffset="-45"/>
  <g transform="translate(100 180)" font-size="16" font-family="sans-serif" font-weight="bold" text-anchor="middle">
    <text>Overall</text>
    <text transform="translate(0 20)">Wellbeing</text>
  </g>
</svg>