Как нарисовать круговую диаграмму в React Native

Вы также можете использовать другие библиотеки для анимации циклических процессов. вашей кольцевой диаграммы вы можете настроить анимацию и изменить ее это тоже.

используйте библиотеки ниже

import { View, StyleSheet, Dimensions, Animated, Easing } from 'react-native';
import Svg, { G, Circle } from 'react-native-svg';

и вы можете отрегулировать пончик в соответствии с вашими потребностями

const { width } = Dimensions.get('window');
const AnimatedCircle = Animated.createAnimatedComponent(Circle);

const DonutChart = ({ percentage }) => {
  const radius = width / 6;
  const strokeWidth = 40;
  const circumference = 2 * Math.PI * radius;
  const animation = useRef(new Animated.Value(0)).current;

  const animatedProps = {
    strokeDashoffset: animation.interpolate({
      inputRange: [0, 1],
      outputRange: [circumference, circumference - (circumference * percentage) / 100],
    }),
  };

  useEffect(() => {
    Animated.timing(animation, {
      toValue: 1,
      duration: 1500,
      easing: Easing.out(Easing.quad),
      useNativeDriver: true,
    }).start();
  }, [percentage]);

и отрегулируйте SVG с помощью высоты и ширины viewBox

return (
    <View >
      <Svg width = {radius * 2 + strokeWidth} height = {radius * 2 + strokeWidth} viewBox = {`0 0 ${radius * 2 + strokeWidth} ${radius * 2 + strokeWidth}`}>
        <G rotation = "-90" origin = {`${radius + strokeWidth / 2}, ${radius + strokeWidth / 2}`}>
          <Circle
            cx = {radius + strokeWidth / 2}
            cy = {radius + strokeWidth / 2}
            r = {radius}
            stroke = "#e6e6e6"
            strokeWidth = {strokeWidth}
            fill = "none"
          />
          <AnimatedCircle
            cx = {radius + strokeWidth / 2}
            cy = {radius + strokeWidth / 2}
            r = {radius}
            stroke = "green"
            strokeWidth = {strokeWidth}
            fill = "none"
            strokeDasharray = {circumference}
            {...animatedProps}
          />
        </G>
      </Svg>
    </View>
  );

после этого установите свой процент прогресса

<View style = {{ flex: 1 }}>
      <DonutChart percentage = {90} />
    </View>

также я поделился полным кодом ссылки на выставочную закуску ниже и изменил ее согласно вашим потребностям

Круговая диаграмма выставки Ссылка