LayoutAnimation in a nutshell

15 January 2021
Simple and powerfull, even for complicated layouts

Using Animated to animate components in react-native has been the my go to way of doing things for the past few years.

Until recently when I discovered that LayoutAnimation can achieve similar result in animating component without the hassle of managing the states of the animation.

In this case, I am trying to animate the TextInput of a chat screen, to expand and collapse accordingly when the input starts receiving text, or when it's been cleared.

All I did was adding this magical line before setting the props/state that responsible for expanding or collapsing the view.


This also works great with views with accordions and toggles.

It is possible to get it work with Animated but now that this is way much simpler, I think its worth sharing.

For more of the detail of using it, check out the official documentation for LayoutAnimation.