SVG

To use SVG animations, you'll need to additionally install react-native-svg. See its documentation for details.

Usage

SVG animations work by animating the props that you want to change, with the animateProps prop.

MotionSvg includes Svg, Polygon, Rect, Circle, Ellipse, Line, Polyline, Path, Text, TSpan, TextPath, G, ClipPath, LinearGradient, and RadialGradient. Other react-native-svg components can be wrapped with createMotionAnimatedComponent from @legendapp/motion.

import { MotionSvg } from '@legendapp/motion/svg';

<MotionSvg.Svg height="200" width="200">
  <MotionSvg.Rect
    stroke="#555"
    strokeWidth="1"
    animateProps={{
      fill: value ? "#F81FEC" : "#59B0F8",
      x: value ? "60" : "0",
      y: value ? "40" : "10",
      width: value ? "140" : "50",
      height: value ? "140" : "50",
    }}
    transition={{
      default: {
        type: "spring",
        damping: 20,
        stiffness: 300,
      },
      fill: {
        type: "tween",
        duration: 800,
      },
    }}
  />
</MotionSvg.Svg>

You can see in this example that we used a tween transition for the fill color and set a default spring transition for the rest of the props, because spring transitions don't look good on colors.