Animate Props

Legend Motion allows you to animate props, which passes an Animated.Value into the prop. It's not necessary for the basic React Native components, but it's useful for Legend Motion's SVG and LinearGradient components or for creating custom components.

See this SVG example that animates the fill prop:

<MotionSvg.Svg height="200" width="200">
    <MotionSvg.Rect
        stroke="#555"
        strokeWidth="1"
        x="0"
        y="10"
        width="150"
        height="150"
        animateProps={{
            fill: value ? '#F81FEC' : '#59B0F8',
        }}
        transition={{
            type: 'tween',
            duration: 500,
        }}
    />
</MotionSvg.Svg>

value: