SVG animation example using react native reanimted

index.js

import React from 'react';
import { View } from 'react-native-animatable';
import { Button } from 'react-native-paper';
import Animated, { useSharedValue, useAnimatedProps, withSpring } from 'react-native-reanimated';
import Svg, { Circle } from 'react-native-svg';

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

export default () => {
  const radius = useSharedValue(50);
  const strokeWidth = 5;

  const animatedProps = useAnimatedProps(() => ({
    cx: `${radius.value + strokeWidth}`,
    cy: `${radius.value + strokeWidth}`,
    r: `${radius.value}`
  }));

  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
      }}
    >
      <View>
        <Svg width={200} height={200}>
          <AnimatedCircle animatedProps={animatedProps} stroke="black" strokeWidth={strokeWidth} />
        </Svg>
      </View>
      <Button
        mode="contained"
        onPress={() => {
          if (radius.value < 80) {
            radius.value = withSpring(80);
          } else {
            radius.value = withSpring(50);
          }
        }}
      >
        Press
      </Button>
    </View>
  );
};