I am looking to replicate this specific design using React and React Native
[![enter image description here][1]][1]
After attempting to implement it with the React Circle Progressbar package from here, I have not been successful in achieving the desired outcome. Can anyone offer assistance with this?
I am willing to share my complete component for further insight into the current status
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;
}