So first things first this article is simply my opinions on React Native’s LayoutAnimation API, it is not a guide on how to use the API but simply a description of the all that I have learnt about LayoutAnimation and a few examples. Now with the formalities out of the way lets get to it.
If you ( like me ) like to keep yourself up to date on the latest trends in UI development, and maybe even if you dont you have probably heard of React Native. I have been working on React Native for the last few months and have for the most part enjoyed myself with it. Eventually I was required to implement animations and every resource I found praised the Animated API and it seemed to me that the LayoutAnimation API was left on the sidelines because of how powerful the Animated API is, but in many cases I have found that using Animated felt like overkill and LayoutAnimation was a simple and elegant solution. So when I tried to find some research material on LayoutAnimation I didnt find quite as many as I thought and that led me to writing this article.
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.
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.
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.
Not bad for a single line change right? Now I decided to stick with linear but the fact that views didnt hide fast enough was a minor ( not for me ) annoyance, but luckily LayoutAnimation also supports custom animation configurations.
The config for LayoutAnimations require a duration for the animation and optionally you can also give custom configs for the different types on layout changes which are view creations, updations and deletions.
Each of the 3 layout change types can be configured with
- Duration
- Delay
- Spring Damping
- Initial velocity
- Type
- Property
Now ill admit I havent delved too much into spring damping and initial velocity but the rest are straightforward. The type property indicates the animation type to be used and property is used to indicate what is to be animated.
Animation types can be of the following
- spring
- linear
- easeInEaseOut
- easeIn
- easeOut
- keyboard
and property can be
- opacity
- scaleXY
Now I was happy with just animating the opacity of the views when deleting and updating but I gave the delete a duration less than the overall duration to have them disappear faster than the movement of the new view. But just for demonstration purposes lets see how animating the different properties looks like.
This animates the scaleXY property. This works when the view is either created or destroyed and could be useful in some situations but for this one the zoom in zoom out effect didnt seem too attractive to me.
In the end I decided to animate the opacity when creating and destroying and its nothing fancy but it looks much better than what we started with. What do you think?
And its a wrap! Thats all I had to say about how useful LayoutAnimation can be when Animated seems a bit too much. And dont just stop there, theres a bunch of ways LayoutAnimation can be used. Over the top of my head
- Sometimes KeyboardAvoidingView does not work as intended and in such cases LayoutAnimation can be used in combination with the Keyboard API, for example animating the login button above the keyboard when it is opened and moving it back down when the keyboard hides.
- Using layout animation to design an accordian of sorts that animates the showing and hiding of some content on click.
And many more. If you have any ideas or if you feel like I missed something important feel free to let me know. Hope this article helps!
PS: This is my first article. Like it? Hate it? Either way let me know, I love to receive constructive criticism.
PS#2 ( PS PS ?? ) : I originally planned on having example screens on both iOS and Android but since then my Mac has not been cooperating so sorry if the presence of only Android screens offends you.
NOTE: Most of the things I found about LayoutAnimation were by going through the code.
Thanks Again.
If you want to hire me, reach out!
References
- Havent explored React Native yet? Well its not too late React Native Docs.
- Want to know more about LayoutAnimation? Source, Docs.
