In this article I will use the simplest case I could think of where you would need to use something like LayoutAnimation, a Login/Logout screen. Lets say you need to design a screen that toggles between Login and Logout. Using react native it is pretty simple to simply toggle between the two modes but it would look… well ill let you judge.

NOTE: This is running on an emulator.

Ok nothing fancy about the screen itself but the transition between the two looks… well… boring. Now here are the two ways the animation could be put in place.

Use the Animated API and handle all the movements ( which in this case are simple to be fair ) between the two modes in a relatively complicated way by having one view move off screen when the other comes in and vica versa. ( I would explain how but this article is not about Animated ).

Use the LayoutAnimation API to essentially configure how changes in the layout are to be handled.

Now here is my thought process, the Animated API is pretty strong but it involves writing a lot of code for something that is very simple. Granted it does provide more control over the animation but its a lot of effort that I simply was not willing to put into something that did not call for it.

So decision made and now lets take look at the code involved in setting up and using LayoutAnimation. The API works for both iOS and Android but to make it work on Android you have to add the following lines to your file.

This can go anywhere in your file.

This needs to go in the constructor.

Now some things to keep in mind, LayoutAnimation handles the way layout changes are handled every time the screen ( or part of it ) is re-rendered. What this means is that every time you call setState in your code and that results in your views changing position LayoutAnimation can be used to animate the way your views move to their new positions. For example in the Login/Logout scenario I have a simple function that toggles a flag that decides whether to show the login view or not.

So in case you are wondering that is all that i needed to do to have my views animate. All you need to do is use LayoutAnimation.configureNext before you call setState and watch the rest take care of itself. Simple isnt it ? and to be honest it doesnt look half bad in action. Also Layout animation comes with a few preset animation types ( I have used linear in the screenshot ), lets have a look at them.

This is the linear preset for layout animation. Pretty simple and looks pretty good too. The only thing that bothered me is that when you switch between the two views the original view does not hide quick enough.

This is the spring preset for layout animation. Not bad for moving views and the bounce effect at the end is pretty nice.