React Native Donut Chart with labels using react-native-svg

_screenshot.png

App.tsx

import React from 'react';
import { View } from 'react-native';

export const App: React.FC = () => {
  return (
    <View style={{flexDirection: 'row', justifyContent:'center'}}>
      <DonutChart radius={15} percentage={25} width={100}/>
      <DonutChart radius={15} percentage={65} width={100}/>
      <DonutChart radius={15} percentage={70} width={100}/>
    </View>
  );
}

export default App;

colors.tsx

const colors = {
  transparent: 'transparent',
  background: '#fff',
  textButton: '#ffffff',
  textFaded: '#666666',
  text: 'rgba(217,217,217,1.00)',
  primary: '#1565C0',
  hairline: 'rgb(47, 51, 54)',
  donutGreyRing: '#e5e5e5',
}
export default colors;

DonutChart.tsx

import React from 'react';
import Svg, { SvgProps, Circle } from 'react-native-svg';
import colors from '../../res/styles/colors';

interface DonuChartProps extends SvgProps {
  radius: number,
  percentage : number,
  width : number,
}

const DonutChart: React.FC<DonuChartProps> = props => {
  const radius = props.radius;
  const perimeter = 2 * Math.PI * radius;
  const percentage = props.percentage;
  const strokeDashOffset = perimeter - (perimeter * percentage / 100);
  const strokeWidth = radius - (radius * 40 /100);
  return (
    <Svg viewBox="0 0 42 42" style={{ overflow: 'visible', transform: [{ rotateZ: '-90deg' }], width: props.width}}>
      <Circle cx="21" cy="21" r={radius} fill={colors.background} />
      <Circle cx="21" cy="21" r={radius} fill={colors.transparent} stroke={colors.donutGreyRing} stroke-width={strokeWidth} />
      <Circle cx="21" cy="21" r={radius} fill={colors.transparent} stroke={colors.primary} stroke-width={strokeWidth}
        strokeDasharray={perimeter} strokeDashoffset={strokeDashOffset} />
    </Svg>

  );
}

export default DonutChart;

DonutChartContainer.tsx

import React from 'react';
import { SvgProps } from 'react-native-svg';
import colors from '../../res/styles/colors';
import DonutChart from './DonutChart';
import { View, Text } from 'react-native';

interface DonuChartProps extends SvgProps {
  radius: number,
  percentage: number,
  width: number,
  label?: string
}

const DonutChartContainer: React.FC<DonuChartProps> = props => {
  const radius = props.radius;
  const percentage = props.percentage;
  const label = props.label;
  return (
    <View style={{ justifyContent: 'center', alignItems: 'center', flex: 1 }}>
      <DonutChart radius={radius} percentage={percentage} width={props.width} />
      <Text style={{ position: 'absolute', fontSize: radius, fontWeight: '500', color: colors.primary }}>{percentage}%</Text>
      <Text style={{ position: 'absolute', bottom: 0, right: 0, fontSize: radius * 3 / 4, color: colors.primary }}>{label}</Text>
    </View>
  );
}

export default DonutChartContainer;