Creating Gauge chart in React Native

Basic components needed for a gauge chart are

1. Dial
2. Needle
3. Progress

We create the dial using the following piece

     renderDial = opts => {
     return (
        <Circle
           cx={opts.cX}
          cy={opts.cY}
          r={opts.radius}
          fill="none"
          stroke={opts.dialColor}
          strokeWidth={opts.dialWidth}
      />
   );
};

And for the needle we will create it using Line in Svg

Time to bind everything

<Svg
    className={opts.className}
    height={size}
    width={size}
    viewBox={`0 0 ${size} ${size}`}
  >
    <Defs>{this.defineTick(opts)}</Defs>
    <G transform={`rotate(-90 ${cX} ${cY})`}>
      {this.renderDial(opts)}
      {this.renderTicks(opts)}
      {this.renderProgress(opts)}
      {this.renderNeedle(opts)}
      {this.renderText(opts)}
    </G>
  </Svg>

Click here to view the codes from repo

Implementation of Gauge

  <Gauge size={200} currentValue={5} needleSharp={true} />