LayoutAnimation in a nutshell

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.

LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);

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.