PathAnimation.tsx

import React, { FunctionComponent } from 'react';
import { View, StyleSheet, Dimensions, Animated, Easing } from 'react-native';
import Svg, { Path, Rect } from 'react-native-svg';

const { width, height } = Dimensions.get('screen');

const AnimatedChart: FunctionComponent = () => {
  const AnimatedRect = Animated.createAnimatedComponent(Rect);
  const animatedVal = React.useRef(new Animated.Value(0)).current;

  const chartWidth = width - 30;
  const chartHeight = height / 2;

  const start = `0, ${chartHeight}`;
  const controlPointA = `${chartWidth / 3} ${chartHeight / 20}`;
  const controlPointB = `${(chartWidth / 3) * 2} ${chartHeight}`;
  const end = `${chartWidth} ${chartHeight / 2}`;

  const originX = animatedVal.interpolate({
    inputRange: [0, 10],
    outputRange: [0, chartWidth],
  });

  React.useEffect(() => {
    Animated.timing(animatedVal, {
      toValue: 10,
      duration: 3000,
      useNativeDriver: true,
      easing: Easing.linear,
    }).start();
  }, []);

  return (
    <View style={styles.container}>
      <Svg width={chartWidth} height={chartHeight} style={styles.svg}>
        <Path
          d={`M${start} C${controlPointA} ${controlPointB} ${end} v${end}`}
          stroke={'black'}
          fill={'yellow'}
          strokeWidth={3}
        />
        <AnimatedRect
          x={originX}
          y={0}
          width={chartWidth}
          height={chartHeight}
          fill={'white'}
        />
      </Svg>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  svg: {
    borderWidth: 3,
  },
});

export default AnimatedChart;