Chart rect-native

Chart.js

import React from 'react';
import Svg, { G, Circle } from 'react-native-svg';
import tw from 'tailwind-react-native-classnames';
import { Text, View } from 'react-native';

export default function Chart({
  width,
  height,
  stroke,
  weight,
  max,
  consumed,
}) {
  //Total amount for a full chart
  let Total = 300;
  let Max = max;
  let Consumed = consumed;
  let Percentage = (100 * Consumed) / Max;
  let SubTotal = (Total * Percentage) / 100;
  let Progress = `${SubTotal} 1000`;

  return (
    <View style={tw`relative flex items-center justify-center w-24`}>
      <Svg
        style={{ transform: [{ rotateZ: '-90deg' }] }}
        xmlns="http://www.w3.org/2000/svg"
        height={height}
        width={width}
        viewBox="0 0 95 95">
        <G transform="translate(20475 21493)">
          <G
            id="Ellipse"
            data-name="Ellipse"
            transform="translate(-20475 -21493)"
            fill="none"
            stroke="rgba(31, 41, 55, 0.06)"
            strokeWidth="6">
            <Circle cx="47.5" cy="47.5" r="47.5" stroke="none" />
            <Circle cx="47.5" cy="47.5" r="44.5" fill="none" />
          </G>
          <G
            id="Progress"
            data-name="Progress"
            transform="translate(-20475 -21493)"
            fill="none"
            stroke={stroke}
            strokeLinecap="round"
            strokeWidth="6"
            strokeDasharray={Progress} // error in android
            opacity="0.996">
            <Circle cx="47.5" cy="47.5" r="47.5" stroke="none" />
            <Circle cx="47.5" cy="47.5" r="44.5" fill="none" />
          </G>
        </G>
      </Svg>

      <Text
        style={tw.style('relative', {
          top: '50%',
          left: '50%',
          transform: [{ translateX: -100 * 0.5 }, { translateY: -235 * 0.5 }],
        })}>
        {weight}
      </Text>
    </View>
  );
}