Simple and pretty LayoutAnimation
Almost every modern app contains dynamic UI elements. When it comes to animating React Native components, platform gives us many useful APIs. Animations are something what can be quite confusing for new developers, so I would like to make life easier for all of you who are struggling with those.
This is a series consists of 3 topics:
First approach I would like to talk about is the easiest one. LayoutAnimation comes with very simple and easy API, and allows us to animate transitions between layout changes.
Let’s start from defining our scene which will contain clickable blue square in the middle. With each click square’s edge length is multiplied by two. Now when we click on this square it looks like this:
Thats our code:
But what happens when we sprinkle some LayoutAnimation magic:
Take a look:
Let’s talk about what just happened — LayoutAnimationprovides .configureNext() function which allows us to specify look of next transition.
This function takes one argument which is config object. It allows us to customize duration, and behaviour of create, update, and delete animations. Each of those hooks supports multiple animation types and name of animated property like
This might be quite complicated, and I’ve promised you that it is going to be super simple. LayoutAnimation comes with some predefined presets which can help us a bit.
We just used first one which is .spring(), besides that one we have also .linear() and .easeInEaseOut(). They are just calls over .configureNext() function which is also exposed for us, only difference is that it accepts config which is predefined in previous functions. You customize things like duration, or differences between create and update animations within your config object. You can read more about configuration here.
As you can see LayoutAnimation is amazing when it comes to simple animations.
If you’re interested in something a bit more difficult, but also more powerful — make sure you follow this series.