Almost every modern app contains dynamic UI elements. When it comes to animating React Native components, the platform gives us many useful APIs. Animations are something that 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:
- Simple and pretty LayoutAnimation
- Amazing Animated API
- How to handle gestures with PanResponder
LayoutAnimation
First approach I would like to talk about is the easiest one. LayoutAnimation comes with simple and easy API, and allows us to animate transitions between layout changes.
Let’s start from defining our scene which will contain a 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 — LayoutAnimation provides .configureNext() function which allows us to specify look of next transition.
This function takes one argument which is the config object. It allows us to customize duration, and behavior of create, update, and delete animations. Each of those hooks supports multiple animation types and name of animated property like opacity or scaleXY.
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 the first one which is .spring(), besides that one we also have .linear() and .easeInEaseOut(). They are just calls over the .configureNext() function which is also exposed for us, the 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 on HubSpot document.
As you can see LayoutAnimation is amazing when it comes to simple animations.
