Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
[LayoutAnimation] Opacity doesn't animate on update #3450
Thanks for creating the example. It looks like you've slightly misunderstood how the layout animations are supposed to be used. They don't let you animate arbitrary property changes, but instead specifically support the following:
In your example, you are updating the opacity of a component that is already on screen, to trigger a re-render. This will invoke the update animation, but since the frame has not changed, nothing will animate.
To recap: LayoutAnimations only support animating opacity from 0 to n (where n is the current opacity style value of your component), and only when a component is mounted, not when an existing component is being updated.
To animate opacity in the way you want, you'll need to use the Animated API instead.
(@sahrens the LayoutAnimations API does seem a bit clunky and confusing. Is this how it was intended to work? And if so, do you think it's worth revisiting it? We could relatively easily support animating other properties besides the frame, and maybe there's a better way to specify the scaleXY/opacity constants so that they won't be confused with component properties?)
Thanks for clarifying that @nicklockwood! I suppose that makes sense given that it is called LayoutAnimation :P It would be very useful to be able to animate opacity with this as well -- I imagine the idea was to include that in the
LayoutAnimation is primarily intended simply to do the things that are common and cumbersome with the Animated API, which is the creation and cascading layout updates of views, especially when involving Text which requires asynchronous/native text measurement.
The idea was that everything else should be handled by Animated so as to reduce overlapping functionality.
That said, the animation paradigm of LayoutAnimtion has proven very powerful, easy to use, and performant, so we might want to reconsider expanding the functionality into something with more controls (e.g. subtree scoping rather than global via props and/or react context or something, more curve specifications, etc) and more animatable attributes (basically any prop/keypath that is natively animatable, like opacity, rotation and 3D transforms, etc).
I'm kinda leaning towards the beefing up LayoutAnimation.
Hi there! This issue is being closed because it has been inactive for a while.
But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/layoutanimation-opacity-doesnt-animate-on-update
ProductPains helps the community prioritize the most important issues thanks to its voting feature.
Also, if this issue is a bug, please consider sending a PR with a fix.