How i can create this type of Progress Bar in react native with graddient support

Question

How can i create this progress bar with 80% circle and multiple gradient colors support

Answer 1

You can use a library called react-native-svg-path-gradient for this to work you'll also need react-native-svg.

You can provide multiple colors and have rounded edges. It does however need you to provide a d prop for the path.

import GradientPath from "react-native-svg-path-gradient";
import { Svg } from "react-native-svg";

<Svg height="100%" width="100%" viewBox="-2 -2 295 256">
  <GradientPath
    d={
      "M55.5,237.2c-23.5-23.3-38.1-55.6-38.1-91.3C17.3,75,74.8,17.5,145.7,17.5C216.5,17.5,274,75,274,145.9  c0,35.7-14.6,68-38.1,91.3"
    }
    colors={["#EA8279", "#E8C579", "#8DD660", "#E8C579", "#EA8279"]}
    strokeWidth={35}
    roundedCorners
  />
</Svg>