AnimatedFoo = animated(Foo) doesn't work -- or how to animate a Component?

[nonopolarity]

🤓 Question

In Basics:

https://react-spring.io/basics

const AnimatedDonut = animated(Donut)

because I think <animated.div> can work, but <animated.Donut> doesn't work.

So I tried:

https://codesandbox.io/s/weathered-breeze-ghdse

const AnimatedFoo = animated(Foo);
// ....

return <AnimatedFoo style={props}>I will fade in</AnimatedFoo>;

but it doesn't animated. Is it supposed to be the way it works?

[joshuaellis]

you're using Animated as a HOC, but you're not passing the props to the root element. So no, it won't animate. It can't without the props.

[nonopolarity]

so this is the way that it needs to be?
https://stackoverflow.com/questions/67194958/using-react-spring-animatedfoo-animatedfoo-doesnt-work-or-how-to-animat/67195300#67195300

https://codesandbox.io/s/relaxed-elgamal-b70et

I have also noticed it needs to be style at <AnimatedFoo style={props}> and also <div style={style}>... it cannot be passing it as bar, like <AnimatedFoo bar={props}>

[joshuaellis]

In the docs it clearly states the styles have to be passed to the style prop of the element.

[nonopolarity]

you mean on https://react-spring.io/common/imperatives-and-refs ? As a new user of react-spring there might be places which I didn't understand at first

[joshuaellis]

I mean here https://react-spring.io/basics#basics