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: