React Native Donut Chart with 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, { Path, SvgProps, Circle } from 'react-native-svg';
import colors from '../../res/styles/colors';
import spacing from '../../res/styles/spacing';

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

const DonutChart: React.FC<DonutChartProps> = props => {
  const radius = props.radius;
  const perimeter = 2 * Math.PI * radius;
  const percentage = props.percentage;
  const strokeDashOffset = perimeter - (perimeter * percentage / 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={spacing.donutStrokeWidth} />
      <Circle cx="21" cy="21" r={radius} fill={colors.transparent} stroke={colors.primary} stroke-width={spacing.donutStrokeWidth}
        strokeDasharray={perimeter} strokeDashoffset={strokeDashOffset} />
    </Svg>

  );
}

export default DonutChart;

spacing.tsx

const spacing = {
  textButton: 14,
  textMenu: 18,
  icon: 24,
  iconTweet: 20,
  iconSearch: 17.5,
  iconSettings: 21,
  iconCaret: 14,
  iconTweetAction: 17.5,
  iconTweetBox: 21,
  radius: 9999,
  heightTweetButton: 44,
  hairline: 1,
  donutStrokeWidth: 8,
}
export default spacing;

thank you. You save my times. there is a typo in 'DonuChartProps' in DonutChart.tsx

Thank you Mahmut. I fixed it :)

thanks zafer abi 💯