Animating a <Rect>

[dcorbin]

What attributes of a Rect should be animatable? (Presumably using Animate.createAnimatedComponent(), but if there is another way, please share it). I would like to be able to animate x, y, width, height, rx, and ry.

[jakex7]

Hi @dcorbin, all the attributes you mentioned can be animated without requiring any extra effort.

Reanimated example

import React from 'react';
import {Rect, Svg} from 'react-native-svg';
import Animated, {
  useSharedValue,
  useAnimatedProps,
  interpolate,
  withTiming,
  interpolateColor,
} from 'react-native-reanimated';

const AnimatedRect = Animated.createAnimatedComponent(Rect);
function ReanimatedExample() {
  const animationProgress = useSharedValue(0);
  const animatedProps = useAnimatedProps(() => {
    return {
      x: interpolate(animationProgress.value, [0, 1], [0, 100]),
      y: interpolate(animationProgress.value, [0, 1], [0, 100]),
      rx: interpolate(animationProgress.value, [0, 1], [0, 50]),
      ry: interpolate(animationProgress.value, [0, 1], [0, 50]),
      width: interpolate(animationProgress.value, [0, 1], [100, 200]),
      height: interpolate(animationProgress.value, [0, 1], [100, 200]),
      fill: interpolateColor(animationProgress.value, [0, 1], ['red', 'blue']),
    };
  });
  return (
    <Svg height="400" width="400">
      <AnimatedRect
        animatedProps={animatedProps}
        onPress={() => {
          animationProgress.value =
            animationProgress.value > 0
              ? withTiming(0, {duration: 2000})
              : withTiming(1, {duration: 2000});
        }}
      />
    </Svg>
  );
}

Animated example

import React from 'react';
import {Rect, Svg} from 'react-native-svg';
import {Animated, useAnimatedValue} from 'react-native';

const AnimatedRect = Animated.createAnimatedComponent(Rect);
function EmptyExample() {
  const animationProgress = useAnimatedValue(0);

  return (
    <Svg height="400" width="400">
      <AnimatedRect
        x={animationProgress.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 100],
        })}
        y={animationProgress.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 100],
        })}
        rx={animationProgress.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 50],
        })}
        ry={animationProgress.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 50],
        })}
        width={animationProgress.interpolate({
          inputRange: [0, 1],
          outputRange: [100, 200],
        })}
        height={animationProgress.interpolate({
          inputRange: [0, 1],
          outputRange: [100, 200],
        })}
        fill={animationProgress.interpolate({
          inputRange: [0, 1],
          outputRange: ['red', 'blue'],
        })}
        onPress={() => {
          Animated.timing(animationProgress, {
            toValue: 1,
            duration: 2000,
            useNativeDriver: true,
          }).start();
        }}
      />
    </Svg>
  );
}